A lightweight, framework-agnostic JavaScript library for cursor and mouse effects: trail, ripple,
custom cursor, magnetic, particles,
parallax, and tilt.
TypeScript support with full type definitions.
Also available as a jQuery plugin.
Zero dependencies.
Under 5 kB gzipped.
Fading dots that follow the cursor on a full-page canvas overlay.
Move your mouse anywhere on the page
Expanding circle animation at each click position.
Click anywhere to trigger
Replaces the native cursor with a dot and a smoothly lagging outer ring.
Move your mouse — cursor applies to the whole page
Elements are pulled toward the cursor as it approaches within the activation radius.
Coloured canvas particles burst from each click position with gravity and air resistance.
Click anywhere to burst
Elements float and shift based on mouse position across the viewport — great for depth-layered hero sections.
3D perspective tilt that follows the cursor within each element, with an optional glare highlight.
All effects are available as jQuery methods. Import the plugin once — it extends
$.fn automatically.
npm install mouse-animations jqueryimport 'mouse-animations/jquery';
// extends $.fn — no return value needed// Global effects
$('body').trail({ color: '#a78bfa', size: 8 });
$('body').ripple({ duration: 700, maxSize: 120 });
$('body').customCursor({ innerColor: '#a78bfa', smoothness: 0.12 });
$('body').particles({ count: 24 });
// Magnetic — selector auto-derived from the jQuery set
$('.btn').magnetic({ strength: 0.4, radius: 120 });
// Parallax — elements shift on mouse move
$('.layer').parallax({ depth: 20, ease: 0.1 });
// Tilt — 3D perspective tilt with optional glare
$('.card').tilt({ maxTilt: 15, perspective: 800, glare: true });
// enable / disable / destroy on any plugin
$('body').trail('disable');
$('body').trail('enable');
$('body').trail('destroy');