The Magnetic Cursor creates an elastic, spring-based effect that smoothly follows the user's pointer.
The Magnetic Cursor creates an elastic, spring-based effect that smoothly follows the user's pointer. Built on GSAP's spring engine, it provides a natural, responsive feel that enhances interactive elements and creates engaging hover states without the over-eager bounce of most JS cursor libraries.
Each magnetic target defines its own pull strength and radius, so primary CTAs can grab attention while ambient elements stay subtle. Drop it onto any element with a data attribute — no DOM gymnastics required.
Uses a single requestAnimationFrame loop with two-state spring integration (stiffness + damping) — no per-element listeners, no jitter under fast movement. The cursor element is positioned via translate3d for GPU compositing, and target detection runs against a quad-tree of [data-magnetic] elements rebuilt on resize.
Fully compatible with React 18+, Astro, and Next 14 app router. Server-side rendering is supported; the cursor mounts on first pointer event so the SSR'd markup stays untouched.
The mobile build (Reanimated) swaps the spring loop for a UI-thread worklet, so the same physics run at 60–120 fps on device.
Interactive galleries and portfolios
Where each thumbnail wants to feel like a destination.Navigation menus with enhanced hover feedback
The magnetic pull makes nav items easier to land on.Call-to-action buttons that need attention
Pair with high pull strength on a single primary CTA.Premium landing pages and hero sections
Reads as polish without committing to a full cursor takeover.