javierbyte / control-user-cursor

Small experiment to 'control' the user cursor with JavaScript and CSS.

Control User Cursor

Small experiment to 'control' the user cursor with JavaScript and CSS.

How it works?

I make the user cursor invisible, and then paint my own cursor with JS! The :hover styles are also fake.

Most of the math is here https://github.com/javierbyte/control-user-cursor/blob/master/index.js#L134

control-user-cursor's Issues

Sluggish

The cursor seems to be a little sluggish though.

macOs 'Shake to find'

I think has no way to avoid this

Cursor persists on window losing focus

Hi Javierbyte,

Not sure if it's an issue that's worth fixing, but ALT-TAB highlights how you have achieved this ( great work by the way! )

Hitting ALT-TAB shows me the standard DEBIAN black cursor, and slightly offset from that, your white cursor. I guess you could put in a keyhook for that, and hide the extra cursor until the mouse moves again?

If I move my mouse onto another screen then release ALT, it then looks like I have two cursors.

Hope this helps!

David

Real cursor still visible on Firefox Linux

As title; cursor is still visible on Firefox (52.0.2 (64-bit) on Arch Linux).
But works as expected on Chromium on same OS.
Also works correctly on FF and Chrome on Debian.
Clever stuff, I like it 👍

Unmasked by macOS notifications and ⌘⇥

In this example I set a notification to fire after 5 seconds. When it does, the true cursor is unmasked and we get two.

I thought this to be related to focus being stolen, but it seems to be stolen in a very particular way.

If we ⌘⇥ to another app, we can indeed beat the effect, but the cursor duplication is nothing but a momentary blip.

Anyway, don’t take this as a bug report, as your work is an experiment, but I thought you might like to know some of the limitations/ways to beat it, if you haven’t encountered them already.

Real cursor is a black box

It appears like real cursor is supposed to be invisible. In my case on in Windows on Chrome the real cursor appears like a black box.

for api design

I liked the idea itself, it might be useful on UIs for older people who have problems with clicking on small objects with the mouse. Just add some gravity to the button hah :-)

Noticed on your readme what's your roadmap and would like to suggest to keep in mind that some users will want to use it with ReactJs, Angular or similar, where you do not always have document object (server side render) and document object might be the worst way to select DOM (using virtual DOM framework).

Just plan ahead and write the simple wrapper for DOM selection, which could be replaced by other developers who write JS with some virtual DOM frameworks.

Fun 👍

Cursor is invisible in IE11

In IE11 (Windows 10), mousing over the demo page hides the cursor entirely:

http://recordit.co/PLVUD0jl06

Other than that, it seems to work pretty much the same across the 'latest' versions of other Windows browsers.

(Whether or not IE11 still counts as 'latest' these days is up for debate)

Increase gravity

🚀
Could be cool of you could increase gravity on elements.