Animations/Magnetic Button
MagneticButton
An interactive button that physically attracts toward the cursor on hover, snapping back to its origin with spring physics when the cursor leaves. Ideal for CTAs and hero sections.
import { MagneticButton } from "@animui/ui"Basic usage
Wrap any content. Move your cursor over the button below to feel the effect.
Controlling strength
The strength prop scales how far the element shifts toward the cursor. Lower values (0.1–0.2) work well for navigation links; higher values (0.4–0.6) create dramatic hero CTAs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The content rendered inside the button. |
strength | number | 0.4 | How strongly the button is pulled toward the cursor. 0 = no pull, 1 = full pull. Values between 0.2–0.5 feel natural. |
className | string | — | Tailwind classes applied to the button element. |
onClick | () => void | — | Click handler. |
When to use
- →Hero section CTAs where you want the button to feel alive and draw attention.
- →Navigation links with a subtle pull (strength 0.15) to add personality without distraction.
- →Social icons in footers and sidebars to reward exploration.
- ✗Avoid on form submit buttons where the target should be predictable and stable.