Effects
Effect - Magnetic buttons
Buttons wrapped in a tracking field that lean toward the cursor as it approaches; the label drifts further for depth.
- Cursor magnetics
- Spring physics
- Parallax label
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Each button is wrapped in an invisible tracking field, and as the cursor enters that field the button leans toward the pointer with spring physics, springing back to rest when the cursor leaves. The button label drifts further than the button body, so the small parallax offset between them adds a sense of depth.
When to use it
- Primary action buttons that you want to feel responsive and inviting
- A hero or CTA where a tactile, magnetic button reinforces a premium brand
- Any interface moment where you want a button to reward the visitor's hover
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0.1-0.8
strengthPull strength
Related components
Using this block
Buy it, then copy components/blocks/magnetic-buttons/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.