This 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.<p>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.<p>[1]: <a href="https://jameshfisher.github.io/cursory-hack/" rel="nofollow">https://jameshfisher.github.io/cursory-hack/</a>
Interesting 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]<p>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.<p>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.<p>[0] <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-cursor" rel="nofollow">https://developer.apple.com/library/content/documentation/Ap...</a><p>[1] <a href="https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_61" rel="nofollow">https://developer.apple.com/library/content/releasenotes/Gen...</a>
Pretty 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.
Try 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!
In 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.<p><a href="http://i.imgur.com/eMg5tXR.png" rel="nofollow">http://i.imgur.com/eMg5tXR.png</a>
If 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<p>I like how it seems to work like a vector field
This 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.
It was fairly obvious how it worked for me since the cursor image was blurred <a href="http://imgur.com/a/XdL4u" rel="nofollow">http://imgur.com/a/XdL4u</a><p>OSX non retina
I did a similar thing at work by moving the link away randomly from the real cursor.<p>I was sick of people following their long stale bookmarks and needed to establish the new link.