Make your DOM look like an eye that can focus on anything | Hacker News Reader

Make your DOM look like an eye that can focus on anything

github.com

201 pointsjj81120860 comments

Open articleView on HN

Hello, I'm Ryan.

I would like to show you an animation library I developed.

It can make your DOM look like an eye that can focus on anything!

## Features

- Ability to watch mouse or another DOM or even input values, watch anything you want!

- Because it is DOM-based, it is easy to support RWD

- Supports multiple frameworks

  - vanilla.js

  - react

  - vue

- Zero dependency (every framework is!)

- Written in typescript

- The size of the core code is only 3kb after gzip compression

- If the element is not on the screen, it will automatically stop running

You can see more on the GitHub Repo!!

https://github.com/jj811208/watching-you

Hey Ryan! Pretty cool!

You might like my library: https://creepyface.io. Similar concept. Also written in TypeScript with no dependencies.

You mean "DOM look with an eye"?

"DOM look like an eye" means "DOM appears similar to an eye". I was expecting that you turned the whole page circular or something.

Funny how it closes its eyes when entering the password in this example: https://jj811208.github.io/watching-you/#/example/login

It just collapses the circles. It would be much better to just hide the inner circle and paint an outer circle with the same color of the skin.

> It just collapses the circles.

You not familiar with how eyes close?

I think they're saying it would be more natural if the eyes closed from the top, I guess?

I'm trying to remember when I first came across this "animated eyes follow cursor" effect. I'm fairly certain it was on the Amiga back in the last century. I searched Aminet - was it part of the MaxonMagic[1] screensaver suite?

I doubt the Amiga was the first computer to do this. Does anyone have any earlier examples?

[1] - http://aminet.net/package/util/misc/MaxonMAGIC - uploaded in 1993

The man page for xeyes [1] says that it's been derived from a demo shown in 1988. I seem to remember an even earlier toy on the Amiga which did the same, but I might be wrong.

[1] https://www.x.org/releases/X11R7.5/doc/man/man1/xeyes.1.html

I found this reference in the 1988 SIGGRAPH Art Show Review[1] - a possible candidate for the inspiration?

"Alan Rath had two works, Word Processor and Bird Cage (see Figure 21) in the show. Bird Cage is a kinetic work created from a microcomputer, digital frame store, and a speech synthesizer. A solenoid system moves the one-inch video monitor inside the cage. The amount of movement is controlled by the intensity of ambient light. The video bird displays a human eye, which looks about and blinks."

[1] - https://history.siggraph.org/wp-content/uploads/2017/03/SIGG... (page 23)

This was a whole genre on classic Macs, too. https://happymacs.wordpress.com/2015/06/16/the-eyes-have-it-...

How does the DOM "look like an eye"? It appears that there are drawings on a page that look like eyes, but does the DOM itself look like an eye?

Sounds like ESL issue

By the title, I was imagining the whole webpage becoming 3d-like and shifting and swaying as your cursor moved around.

Yeah, I honestly thought this was like a heatmap/analytics thing before clicking on it.

I would guess that the 'look' is the verb. The Dom is now able to actively look, as if it were an eye.

I thought this would add white space to the html source such that it would render an ascii eye.

Technically I think it's fixating, not focusing https://en.wikipedia.org/wiki/Fixation_(visual)

You are technically correct, which is...

I knew how to finish this sentence, however I didn't know why, so I googled: It's a Futurama quote ...

Shouldn’t this be a “show HN”?

Note that the pupil is almost always at the very edge of the eyeball. It's actually more realistic-looking to simulate the cursor being some number of inches above the screen, so that it more smoothly transitions from center to edge.

Here's an example: https://peeryview.org/about

I made something similar for my personal site, except it didn't track cursor, no JS, & blinked too. Made with pure CSS

https://codepen.io/mnsh/pen/BaYxvxo

"i made something similar, except it shares almost no similarities"

To be fair its both about eyes and both are fancy.

I've resisted posting my effort at a moving eyes animation, but my resolve has crumbled[1].

In an attempt to make this comment slightly less spammy, I think that it's easier to create this effect in a web page if the code makes good use of radial gradients. Both SVG and the 2D canvas API use a 'two circles' approach to defining the gradient (interactive demo here[2]); the CSS approach, however, seems a lot less intuitive to me[3] - can I assume there were good reasons why the CSS committee chose to do it this way?

[1] - https://codepen.io/kaliedarik/pen/XWgoLjE

[2] - https://scrawl-v8.rikweb.org.uk/demo/canvas-004.html

[3] - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/ra...

It shares the same behavior with a completely different implementation.

Well, I thought it was about depicting eyes on a webpage ¯\_(ツ)_/¯

Here I thought I was being original when I made this face on my webpage track the cursor

https://adrianlyjak.com

Xeyes revisited

and xsnow revisited when?

I personally miss [EDIT: a Mac or www implementation of] xroach. IMHO it was the funniest of the default X toys.

which made me realized that xeyes is still installed on vanilla ubuntu installation (22.04 LTS). type `xeyes` on the console and there you go. I does not follow the mouse when the mouse is outside the xeyes window though.

> I does not follow the mouse when the mouse is outside the xeyes window though.

Probably means that Ubuntu 22.04 LTS is using Wayland, and xeyes is running under Xwayland, and because of that xeyes is only getting access to cursor information when the cursor is over the window.

My laptop is on 2204 and xeyes works the same way it's worked for decades. I'm running Xorg/xfce

From what I see online:

- Wayland is the default in Ubuntu 22.04

- You can still choose to use an X11 session instead

- The XFCE4 window manager xfwm only works with X11

https://askubuntu.com/a/1421682

This is consistent with why xeyes works the way for you the way it always did, while it works differently for someone else.

It's an easy tool to quickly check that X11 works (eg. when messing with X settings, such as redirection over ssh, etc.).

surely xdpyinfo is quicker.

would be great to force websites that track you to embed this to show the reality of the situation

Found a bug, if you start an input form with multiple spaces it doesn't work as expected, it seems like only visible characters add to the calculated offset.

It also ignores the cursor position in the entered text (i.e., it will always look at the last character). That's because the code creates a fake input element with the same font and input as the visible element and uses its size to determine the position to look at. Strange that it doesn't work for input with leading spaces, though.

It's probably either trimming the string, or the dom is collapsing the spaces to a single space (as is standard).

It's possible to fetch the cursor position in the input.

I would like to add about the text input: I expected that if I edit my text input e.g. put the caret (text cursor) in the beginning of the text, then the focus will change. This is not the case, even when typing.

I like the idea of watching the text cursor! Maybe it could be an option

wait until the project is a little more stable (more testing). I will do some refactoring and look into looking at this

I will look into this, thanks for letting me know

Looks like a swinging breast with moving nipple. No-one has eyes like tits.

It copies a well known "eyes" design, such as that of xeyes. Arguably, cartoon eyes.

If we're getting technical, it does not really look like breasts either!

I wrote an xeyes java applet when java was first released in the 90s.

I'm sorry for the bad reading experience, I seem to have used the wrong word, please forgive my poor English .

A bit odd that there isn’t a single reference to xeyes in the readme.

Thanks for letting me know, just did a google search on this keyword.

when "wathcing-you" watching mouse, it really does look like `xeyes`.

Everything old is new again! Nice job!

I don’t think a modern computer user would stumble upon xeyes like we probably did: desperation, from there being only a few binaries pre-installed on the system.

That's an enduring memory of mine of using pre-home-internet PCs: foraging the entire filesystem for anything novel.

Same for me! I installed gentoo on an old laptop without internet and had so much fun traversing the filesystem. My favorite discovery was xneko.

But why ?

Because.

https://justforfunnoreally.dev/

I can imagine some utility, beyond the inherent benefits of making such a thing. For one, something like this could act as an accessibility device for locating the cursor.

Websites had fun stuff like this more commonly in the 90s, this kind of fun seems to be a bit lost today. The eyes closing in the password form example was pretty cute

Reply on news.ycombinator.com