Show HN: 'Hack' the 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/

[chias]

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

[nsgi]

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

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

[1] https://developer.apple.com/library/content/releasenotes/Gen...

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

[lawik]

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

[Freak_NL]

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

[sharpercoder]

A presentation app where the cursor can be changed to a laser pointer (big red dot).

[Nemo157]

That does seem to be the case for me (at least on Safari 9.1); the real cursor disappears, but no fake cursor appears.

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

[rocqua]

Me to, I thought it was intentional.

[Jaruzel]

Likewise. Chrome 57.0.2987.133 on Windows 10 (Creators) 64 bit.

[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

[rosalinekarr]

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

[pharrlax]

That would make for an interesting A/B test.

[fapjacks]

This was my very first thought, as well.

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

[javierbyte]

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

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

[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

[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

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.