Magnetic Cursor
also known ascursor magnetism · pointer attraction · magnetic button
An interaction where buttons and links pull the cursor toward them, or deform slightly when the cursor approaches.
A magnetic cursor is a pointer-tracking interaction where interactive elements appear to attract the mouse. Implementations vary: the button may translate toward the cursor as it enters a proximity zone, the cursor itself may snap or scale, or both elements deform together.
The effect is built with `pointermove` listeners, calculating distance from the element's center and applying a transform proportional to proximity (usually clamped to a 10–20px range). Libraries like GSAP, Framer Motion, and `@react-spring/web` make it ergonomic.
It's a high-craft signal: the user feels the page "responds" to them in a way most websites don't. Used sparingly on primary CTAs and hero links, it adds polish; applied to every link, it becomes annoying and breaks Fitts's law.
- Primary CTAs on marketing or portfolio pages
- Hero-area buttons where craft matters
- Custom-cursor experiences (agencies, design studios)
- Utility UIs (forms, dashboards, settings)
- Touch-first products — there is no cursor
- Pages with many small clickable items in a row
- +Limit pull distance to 10–20px so the click target stays predictable
- +Disable on touch devices via `(pointer: fine)` media query
- +Pair with a subtle scale change (1.0 → 1.04) for tactility
- −Don't apply to every link — reserve for 1–2 hero elements per page
- −Don't hide the native cursor unless you replace it with a clear custom one
People also ask
Does magnetic cursor work on mobile?
No — there is no cursor on touch devices. Always gate the effect behind `@media (pointer: fine)` so it's only active for mouse users.