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

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

by jj811208 • 4 years ago

201 60 4 years ago

github.com

jj8112085• 4 years ago

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

4lejandrito• 4 years ago

Hey Ryan! Pretty cool!

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

remram• 4 years ago

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.

nells• 4 years ago

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

jj8112085• 4 years ago

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

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

groffee• 4 years ago

Everything old is new again! Nice job!

nomel• 4 years ago

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.

frou_dh• 4 years ago

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

mattigames• 4 years ago

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.

tralarpa• 4 years ago

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.

samwillis• 4 years ago

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.

manbash• 4 years ago

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.

jj8112085• 4 years ago

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

jj8112085• 4 years ago

I will look into this, thanks for letting me know

mkarliner• 4 years ago

Xeyes revisited

eddyfromtheblok• 4 years ago

and xsnow revisited when?

Cockbrand2• 4 years ago

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

melicerte• 4 years ago

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.

codetrotter2• 4 years ago

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.

throwaway7446783• 4 years ago

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

midasuni• 4 years ago

Shouldn’t this be a “show HN”?

revskill• 4 years ago

But why ?

notRobot• 4 years ago

Because.

cercatrova• 4 years ago

https://justforfunnoreally.dev/

oneeyedpigeon• 4 years ago

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.

Aardwolf• 4 years ago

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

rikroots3• 4 years ago

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

Cockbrand2• 4 years ago

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

rikroots3• 4 years ago

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)

jkestner• 4 years ago

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

mnsh2• 4 years ago

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

bil7• 4 years ago

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

tomschwiha• 4 years ago

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

mbostleman• 4 years ago

It shares the same behavior with a completely different implementation.

mnsh2• 4 years ago

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

lyjackal• 4 years ago

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

https://adrianlyjak.com

ReactiveJelly• 4 years ago

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

throwaway7446783• 4 years ago

You are technically correct, which is...

affgrff2• 4 years ago

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

hmmmmno• 4 years ago

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

throwaway7446783• 4 years ago

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!

lolc• 4 years ago

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

yetanother-1• 4 years ago

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.

chrisseaton• 4 years ago

It just collapses the circles.

You not familiar with how eyes close?

konfusinomicon• 4 years ago

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

bagels• 4 years ago

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?

physPop• 4 years ago

Sounds like ESL issue

legohead• 4 years ago

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

TobyTheDog123• 4 years ago

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

gibolt• 4 years ago

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

hsbauauvhabzb• 4 years ago

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

toomim• 4 years ago

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

jj8112085• 4 years ago

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

yubiox• 4 years ago

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

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

Related Stories