6 ms·
Show HN: 'Hack' the user cursor
- ohadron 9y agoNicely done. Not to give anyone any ideas, but the 'gravity'/'attract' mode could be used for some very dark UI patterns.
- Gabriel_Martin 9y agoor some very slick and helpful ux
- ohadron 9y agoTrue, but from our collective experience with stuff like scrolljacking I'm afraid this is less likely.
- astrobe_ 9y agoIMHO the helpful/harmful ratio of this is close to the one of popup windows.
- Freak_NL 9y agoYou would risk messing up the use of assistive technologies like high contrast and oversized cursors. That is the opposite of helpful.
- fapjacks 9y agoThis was my very first thought, as well.
- pharrlax 9y agoThat would make for an interesting A/B test.
- rosalinekarr 9y agoThe repel could be dangerous too. There are plenty of features that websites are legally or ethically obligated to provide, but they would rather users not use them. I'm imagining email newsletters with really hard to click unsubscribe buttons.
- deleted 9y ago[deleted]
- bluepnume 9y agoPretty smart once you figure out how it works. Wonder if there's some kind of advanced click-jacking attack you could achieve with a technique like this.
- javierbyte 9y agoI was thinking about this. You can accumulate the position difference and trick the user into clicking anywhere. I'll try to do that right now and update the demo :)
- homakov 9y agoUse in clickjacking - unlikely. Once your mouse is on another iframe you have no power over cursor pic.
- tempay 9y agoI expect if the iframe is small enough you could trick the user into clicking a small button as they'll click before they realise. Even if they notice, I bet many users would just click anyway after being briefly confused and put it down to a bug.
- homakov 9y agoAll that can be done with transparent iframes, cursor tricks achieve nothing.
- Fry-kun 9y agoTrick doesn't work on Firefox 52: original cursor is visible as well as the fake one Works on Chrome, though
- mburst 9y agoI had the opposite experience. Worked perfect in FF 52, but I was able to see the original cursor in Chrome. Neat effect overall!
- sml156 9y agoThe repel was the funniest things I have seen all day.
- red023 9y agoThats a awesome idea.
- jv22222 9y agoThis could be used as a good game mechanic. Nicely done!
- 19eightyfour 9y agoHaving a look at the poster's github reveals this person has a lot of good stuff. Very creative and clever.
- Aldo_MX 9y agoIt could be fun to use the repel effect with a newsletter opt-out.
- deleted 9y ago[deleted]
- qprs 9y ago"fun"
- cyberferret 9y agoTwo words - "Delightfully Annoying" !! :)
- ars 9y agoOn Firefox I get two cursors, I'm unsure which is the one that will actually do something if I click.
- jamesfisher 9y agoThis hack works by disabling the real cursor (using a custom CSS cursor image set to a transparent png), then moving around a fake cursor image using JS. See by comparison this hack I made a few months ago [1], which uses a dynamic CSS cursor image (drawn in JS). The interesting thing it shows is that CSS cursors can escape the viewport, leading to possible security issues. [1]: https://jameshfisher.github.io/cursory-hack/ https://jameshfisher.github.io/cursory-hack/
- nsgi 9y agoNice hack. It's not obvious whether it still works now that GitHub Pages uses HTTPS, though the fact that clicking on the page triggers the same action as clicking the page icon/padlock suggests it does.
- zeta0134 9y agoI'm on a Linux machine and figured out the trick fairly quickly: clicking the green padlock does not perform the same action. That's part of the hack too, the interface that pops up is styled like the Windows dialog and isn't interactive. (Clicking on it simply dismisses it.) It's quite convincing otherwise, and that's very frightening. :)
- chias 9y agoCool idea! This seems to work oddly for high-DPI displays: the cursor is microscopic and doesn't seem to escape the viewport.
- d2p 9y agoSame here on a non-hdpi screen (Dell Chromebook 11). The fake padlock appears inside the body and it's quite clearly not part of the browser. Not sure if something changed since it was built or maybe it only works in certain browsers, but certainly doesn't seem like an exploitable issue here.
- trishtrish691 9y ago
- jlebrech 9y agouseful for a 'buy it now' button
- Mystrl 9y agoI'm seeing a block box where my cursor actually is. Chrome 57.0.2987.133 (64-bit)
- biggerfisch 9y agoIn latest Firefox, I keep getting it to show the real and fake cursor by switching tabs, hovering a link in another tab, and switching back. Doesn't work every time though. http://i.imgur.com/eMg5tXR.png http://i.imgur.com/eMg5tXR.png
- TheAceOfHearts 9y agoInteresting trick. I was recently looking through Safari CSS Reference and thought using an image to replace the cursor wasn't allowed: "Although the CSS specification allows it, Safari does not support custom cursors." [0] What are examples of legitimate use-cases for supporting custom cursors? If you're considering using a custom cursors, keep in mind that not all users keep the normal cursor size. At least on macOS, you can increase the size from the Accessibility panel. Hopefully the web can start providing access to more built-in accessibility features. One such feature that was added recently is Reduced Motion Media Query [1]. Wouldn't it be great to have a media query for "Increase contrast"? I can't be the only one that's occasionally frustrated from websites that mix 50 shades of barely readable gray. [0] https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-cursor https://developer.apple.com/library/content/documentation/Ap... [1] https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_61 https://developer.apple.com/library/content/releasenotes/Gen...
- Nemo157 9y agoThat does seem to be the case for me (at least on Safari 9.1); the real cursor disappears, but no fake cursor appears.
- hrrsn 9y agoThe demo works fine on Safari 10 for me.
- Freak_NL 9y ago> What are examples of legitimate use-cases for supporting custom cursors? Probably special cursors that indicate a different type of action that can be performed; like the hand-shaped pointer you get when hovering over a button or the various resize arrows, but custom. A tipped paint bucket for example on a website presenting a drawing application.
- lawik 9y agoI am certain in my heart that the most reasonable use case is to replace the cursor with a detailed gauntlet cursor or severed hand as in Warcraft to let the user know whether they are The Alliance or Horde. Kidding, of course. But damn I loved that sort of thing back when. Especially being able to do it with weird plugins as a fledgling "webmaster".
- tobyhinloopen 9y agoThis made me smile
- lutusp 9y agoThis would be great in voting terminals. Everything seems normal until you try to vote for someone hackers don't like.
- fapjacks 9y agoGreat for sites with ads!
- panic 9y agoTry turning on "attract" and moving your mouse to click the button from far away. It's much easier than moving your mouse to a normal button!
- Nition 9y agoIt seriously works really well. Wouldn't be so great with multiple buttons though.
- emmelaich 9y agoI did a similar thing at work by moving the link away randomly from the real cursor. I was sick of people following their long stale bookmarks and needed to establish the new link.
- Aardwolf 9y agoIf you shift+right click in firefox (and keep the menu open but ignore it), you can see both the real and fake cursor at the same time to see what is really happening I like how it seems to work like a vector field
- askjdlkasdjsd 9y agoThis is pretty ingenious. I wonder if something like this can have an effect on call to action click rates. But I guess if the user notices then they're more likely to be pissed.
- gruez 9y agoIs this broken for anyone else on firefox? I see both the fake cursor and the real cursor.
- thenormal 9y agoSo much fun I had, thank you ;)
- wingerlang 9y agoIt was fairly obvious how it worked for me since the cursor image was blurred http://imgur.com/a/XdL4u http://imgur.com/a/XdL4u OSX non retina
- Sunset 9y agoIllusion is broken if your default mouse cursor is in a theme like the "inverted" one (windows).