gravity-cursor
gravity-cursor copied to clipboard
Tiny mouse cursor toy that hijacks the native mouse cursor and applies attractor and deflector forces to it, that are emitted from the page.
Cursor Gravity
This is a small experiment that hijacks the user cursor and makes it attract to or repel from certain elements on the page.
Try the live demo here.
How it works?
It makes the user cursor invisible using a simple cursor: none;
CSS rule, and replaces it with a simple image element, which is moved around the screen to imitate original cursor, but making it react to attractors and deflectors on the page.
Usage
GravityCursor
.attract(document.querySelector('a.attractor'))
.repel(document.querySelector('a.deflector'))
.start();
document.querySelector('a.stop').addEventListener('click', function() {
GravityCursor.stop();
});
This will replace the real cursor with the fake one and activate the 'repel' and 'attract' behavior on the selected DOM elements.
Local Build
git clone https://github.com/ArtBIT/gravity-cursor.git
cd gravity-cursor
npm install
npm start
License
MIT
Credits
Inspired by javierbyte/control-user-cursor