9 ms·
Make your DOM look like an eye that can focus on anything
- jj811208 4y agoHello, 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 https://github.com/jj811208/watching-you
- 4lejandrito 4y agoHey Ryan! Pretty cool! You might like my library: https://creepyface.io https://creepyface.io. Similar concept. Also written in TypeScript with no dependencies.
- remram 4y agoYou 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 4y agoA bit odd that there isn’t a single reference to xeyes in the readme.
- jj811208 4y agoThanks for letting me know, just did a google search on this keyword. when "wathcing-you" watching mouse, it really does look like `xeyes`.
- groffee 4y agoEverything old is new again! Nice job!
- nomel 4y agoI 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.
- mattigames 4y agoFound 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.
- manbash 4y agoI 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.
- jj811208 4y agoI 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
- tralarpa 4y agoIt 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 4y agoIt'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.
- jj811208 4y agoI will look into this, thanks for letting me know
- mkarliner 4y agoXeyes revisited
- eddyfromtheblok 4y agoand xsnow revisited when?
- Cockbrand 4y agoI personally miss [EDIT: a Mac or www implementation of] xroach. IMHO it was the funniest of the default X toys.
- melicerte 4y agowhich 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.
- codetrotter 4y 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.
- iso1631 4y agoMy laptop is on 2204 and xeyes works the same way it's worked for decades. I'm running Xorg/xfce
- codetrotter 4y agoFrom 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 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.
- midasuni 4y agoShouldn’t this be a “show HN”?
- revskill 4y agoBut why ?
- notRobot 4y agoBecause.
- cercatrova 4y agohttps://justforfunnoreally.dev/ https://justforfunnoreally.dev/
- oneeyedpigeon 4y agoI 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 4y agoWebsites 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
- rikroots 4y agoI'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 http://aminet.net/package/util/misc/MaxonMAGIC - uploaded in 1993
- Cockbrand 4y agoThe 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 https://www.x.org/releases/X11R7.5/doc/man/man1/xeyes.1.html
- rikroots 4y agoI 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/SIGGRAPH1988_Displays_on_Display_IEEEReview.pdf https://history.siggraph.org/wp-content/uploads/2017/03/SIGG... (page 23)
- deleted 4y ago[deleted]
- jkestner 4y agoThis was a whole genre on classic Macs, too. https://happymacs.wordpress.com/2015/06/16/the-eyes-have-it-three-eyeball-programs-for-mac-os-9-x/ https://happymacs.wordpress.com/2015/06/16/the-eyes-have-it-...
- mnsh 4y agoI 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 https://codepen.io/mnsh/pen/BaYxvxo
- bil7 4y ago"i made something similar, except it shares almost no similarities"
- tomschwiha 4y agoTo be fair its both about eyes and both are fancy.
- rikroots 4y agoI'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 https://codepen.io/kaliedarik/pen/XWgoLjE [2] - https://scrawl-v8.rikweb.org.uk/demo/canvas-004.html https://scrawl-v8.rikweb.org.uk/demo/canvas-004.html [3] - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/ra...
- mbostleman 4y agoIt shares the same behavior with a completely different implementation.
- mnsh 4y agoWell, I thought it was about depicting eyes on a webpage ¯\_(ツ)_/¯
- 4y ago
- ReactiveJelly 4y agoTechnically I think it's fixating, not focusing https://en.wikipedia.org/wiki/Fixation_(visual) https://en.wikipedia.org/wiki/Fixation_(visual)
- throwaway744678 4y agoYou are technically correct, which is...
- affgrff2 4y agoI knew how to finish this sentence, however I didn't know why, so I googled: It's a Futurama quote ...
- deleted 4y ago[deleted]
- hmmmmno 4y agoLooks like a swinging breast with moving nipple. No-one has eyes like tits.
- throwaway744678 4y agoIt 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 4y agoFunny how it closes its eyes when entering the password in this example: https://jj811208.github.io/watching-you/#/example/login https://jj811208.github.io/watching-you/#/example/login
- yetanother-1 4y agoIt 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 4y ago> It just collapses the circles. You not familiar with how eyes close?
- deleted 4y ago[deleted]
- odo1242 4y agoI think they're saying it would be more natural if the eyes closed from the top, I guess?
- konfusinomicon 4y agowould be great to force websites that track you to embed this to show the reality of the situation
- bagels 4y agoHow 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 4y agoSounds like ESL issue
- legohead 4y agoBy the title, I was imagining the whole webpage becoming 3d-like and shifting and swaying as your cursor moved around.
- TobyTheDog123 4y agoYeah, I honestly thought this was like a heatmap/analytics thing before clicking on it.
- gibolt 4y agoI would guess that the 'look' is the verb. The Dom is now able to actively look, as if it were an eye.
- hsbauauvhabzb 4y agoI thought this would add white space to the html source such that it would render an ascii eye.
- toomim 4y agoNote 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 https://peeryview.org/about
- jj811208 4y agoI'm sorry for the bad reading experience, I seem to have used the wrong word, please forgive my poor English .
- yubiox 4y agoI wrote an xeyes java applet when java was first released in the 90s.