
Show HN: 'Hack' the user cursor - javierbyte
http://javier.xyz/control-user-cursor/
======
jamesfisher
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.

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/)

~~~
chias
Cool idea! This seems to work oddly for high-DPI displays: the cursor is
microscopic and doesn't seem to escape the viewport.

~~~
d2p
Same 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.

------
TheAceOfHearts
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]

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/Ap...](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-cursor)

[1]
[https://developer.apple.com/library/content/releasenotes/Gen...](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_61)

~~~
aschampion
> What are examples of legitimate use-cases for supporting custom cursors?

We build web applications serving expert users for which this is essential.
For precise selection the default cursor often occludes important information.
Think of how confusing something like Photoshop, AutoCAD or Maya would be
without contextual cursors.

It would be sensible, however, to place behind a permission in the same way as
location or notification APIs. Unfortunately most browsers' UX for permissions
is awful.

~~~
shawnz
OP is specifically talking about the ability to use arbitrary images as
cursors. Why aren't the standard i-beam, crosshair, resize etc cursors enough
for your purposes?

~~~
aschampion
Modal function cues: paintbucket, eyedropper, etc.

Common interaction cues that span functions but aren't in the CSS set:
multiaxis, rotation, etc.

Not to mention the innumerable domain-specific possibilities. It's another
example of the tension between the idea of browser-as-the-future-ubiquitous-
platform and browser-as-lowest-common-denominator-mobile-safe-sandbox, which
is eroding the established niche of desktop software for deep, focused,
domain-optimized work because of the tyranny of CRUDy consumption-focused web
apps.

------
Mystrl
I'm seeing a block box where my cursor actually is. Chrome 57.0.2987.133
(64-bit)

~~~
Aaron1011
I found that setting the 'cursor' css property to 'none' (in the style for
'*') fixed it for me.

------
ohadron
Nicely done. Not to give anyone any ideas, but the 'gravity'/'attract' mode
could be used for some very dark UI patterns.

~~~
Gabriel_Martin
or some very slick and helpful ux

~~~
astrobe_
IMHO the helpful/harmful ratio of this is close to the one of popup windows.

------
Aldo_MX
It could be fun to use the repel effect with a newsletter opt-out.

~~~
qprs
"fun"

------
bluepnume
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.

~~~
homakov
Use in clickjacking - unlikely. Once your mouse is on another iframe you have
no power over cursor pic.

~~~
tempay
I 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
All that can be done with transparent iframes, cursor tricks achieve nothing.

------
panic
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!

~~~
Nition
It seriously works really well. Wouldn't be so great with multiple buttons
though.

------
biggerfisch
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.

[http://i.imgur.com/eMg5tXR.png](http://i.imgur.com/eMg5tXR.png)

------
Aardwolf
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

I like how it seems to work like a vector field

------
Fry-kun
Trick doesn't work on Firefox 52: original cursor is visible as well as the
fake one Works on Chrome, though

~~~
mburst
I had the opposite experience. Worked perfect in FF 52, but I was able to see
the original cursor in Chrome. Neat effect overall!

------
19eightyfour
Having a look at the poster's github reveals this person has a lot of good
stuff. Very creative and clever.

------
askjdlkasdjsd
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.

------
jv22222
This could be used as a good game mechanic. Nicely done!

------
wingerlang
It 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

------
sml156
The repel was the funniest things I have seen all day.

------
cyberferret
Two words - "Delightfully Annoying" !! :)

------
Sunset
Illusion is broken if your default mouse cursor is in a theme like the
"inverted" one (windows).

------
lutusp
This would be great in voting terminals. Everything seems normal until you try
to vote for someone hackers don't like.

------
ars
On Firefox I get two cursors, I'm unsure which is the one that will actually
do something if I click.

------
gruez
Is this broken for anyone else on firefox? I see both the fake cursor and the
real cursor.

------
emmelaich
I 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.

------
thenormal
So much fun I had, thank you ;)

------
tobyhinloopen
This made me smile

------
fapjacks
Great for sites with ads!

------
red023
Thats a awesome idea.

------
jlebrech
useful for a 'buy it now' button

