Show HN: 'Hack' the user cursor

by javierbyte • 9 years ago

267 58 9 years ago

ohadron2• 9 years ago

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

Gabriel_Martin• 9 years ago

or some very slick and helpful ux

ohadron2• 9 years ago

True, but from our collective experience with stuff like scrolljacking I'm afraid this is less likely.

astrobe_• 9 years ago

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

Freak_NL2• 9 years ago

You would risk messing up the use of assistive technologies like high contrast and oversized cursors. That is the opposite of helpful.

fapjacks2• 9 years ago

This was my very first thought, as well.

pharrlax• 9 years ago

That would make for an interesting A/B test.

rosalinekarr• 9 years ago

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.

bluepnume• 9 years ago

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• 9 years ago

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

homakov2• 9 years ago

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

tempay• 9 years ago

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.

Fry-kun• 9 years ago

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

mburst• 9 years ago

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

sml156• 9 years ago

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

red023• 9 years ago

Thats a awesome idea.

jv22222• 9 years ago

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

19eightyfour• 9 years ago

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

Aldo_MX• 9 years ago

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

qprs• 9 years ago

"fun"

cyberferret• 9 years ago

Two words - "Delightfully Annoying" !! :)

ars• 9 years ago

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

jamesfisher• 9 years ago

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/

nsgi• 9 years ago

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.

zeta0134• 9 years ago

I'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• 9 years ago

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

d2p• 9 years ago

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.

jlebrech• 9 years ago

useful for a 'buy it now' button

Mystrl• 9 years ago

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

rocqua• 9 years ago

Me to, I thought it was intentional.

Jaruzel• 9 years ago

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

Aaron1011• 9 years ago

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

biggerfisch• 9 years ago

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

TheAceOfHearts• 9 years ago

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

Nemo157• 9 years ago

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

hrrsn• 9 years ago

The demo works fine on Safari 10 for me.

Freak_NL2• 9 years 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• 9 years ago

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

aschampion2• 9 years ago

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• 9 years ago

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?

jasonkostempski• 9 years ago

"Unfortunately most browsers' UX for permissions is awful."

The worst UX being when they don't ask at all for things that really should be asked for, like javascript.

sharpercoder• 9 years ago

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

tobyhinloopen• 9 years ago

This made me smile

lutusp• 9 years ago

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

fapjacks2• 9 years ago

Great for sites with ads!

panic• 9 years ago

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• 9 years ago

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

emmelaich• 9 years ago

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.

Aardwolf• 9 years ago

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

askjdlkasdjsd• 9 years ago

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.

gruez• 9 years ago

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

thenormal• 9 years ago

So much fun I had, thank you ;)

wingerlang• 9 years ago

It was fairly obvious how it worked for me since the cursor image was blurred http://imgur.com/a/XdL4u

OSX non retina

Sunset• 9 years ago

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

Show HN: 'Hack' the user cursor

Related Stories