Skip to content

Tiny mouse cursor toy that hijacks the native mouse cursor and applies attractor and deflector forces to it, that are emitted from the page.

License

Notifications You must be signed in to change notification settings

ArtBIT/gravity-cursor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub stars GitHub license GitHub issues

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.

gravity-cursor

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

About

Tiny mouse cursor toy that hijacks the native mouse cursor and applies attractor and deflector forces to it, that are emitted from the page.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published