Magnetic button
Also called magnetic hover or magnetic cursor effect
A button that leans toward the mouse pointer as it gets close, then springs back when the pointer leaves.
import type { ReactNode } from 'react';
import { motion, useReducedMotion, useSpring } from 'motion/react';
const SPRING = { stiffness: 220, damping: 16, mass: 0.6 };
const PULL = 0.3;
export function MagneticButton({ children }: { children: ReactNode }) {
const reduceMotion = useReducedMotion();
const x = useSpring(0, SPRING);
const y = useSpring(0, SPRING);
return (
<motion.button
type='button'
style={{ x, y }}
onPointerMove={(event) => {
// Touch has no hover, and some people prefer less motion.
if (event.pointerType !== 'mouse' || reduceMotion) return;
const rect = event.currentTarget.getBoundingClientRect();
x.set((event.clientX - rect.left - rect.width / 2) * PULL);
y.set((event.clientY - rect.top - rect.height / 2) * PULL);
}}
onPointerLeave={() => {
x.set(0);
y.set(0);
}}
className='rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground'
>
{children}
</motion.button>
);
}Make the "Get started" button magnetic: when the mouse is within 100px, move the button toward the pointer by 30% of the distance and its label by an extra 10%. Use a spring so it eases back to center when the pointer leaves. Disable it on touch devices and when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Magnetic button?
A magnetic button tracks the pointer inside an invisible radius around it. The closer the pointer, the further the button shifts toward it, usually by a third of the distance or less. The label often moves a little more than the button, which adds a sense of depth.
It is a playful touch for a hero call to action, a portfolio, or a creative landing page. Use it on one or two key buttons; on every control it gets tiring and makes targets harder to hit.
Drive the movement with a spring so the button settles naturally, and turn the effect off for touch screens and for people who prefer reduced motion.
Often confused with
- Custom cursor
- A custom cursor changes the pointer itself. A magnetic button moves the element toward the pointer.
Related terms
All termsHover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
3D tilt card
A card that tips in 3D as the mouse moves over it, often with a moving glare, so it feels like a physical object in your hand.
Custom cursor
A designed shape, such as a dot or a ring, that replaces or trails the mouse pointer and reacts to what it passes over.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.