← All components
Interaction / effect
Magnetic
A radial attraction and physical spring give buttons a subtle pull.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview.
- Strength scales the original radial attraction and caps each axis at that many pixels. The default preserves the reviewed movement.
- Keyboard focus and reduced motion keep the button stationary. Pause freezes the current pose.
React 19Framer Motion 12.42.2
Magnetic interaction · Ashish Guleria · MIT. Full copyright and permission notice included in shared/magnetic-LICENSE.txt.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | — (required) | Button label |
strength | number | 18 | Movement strength |
range | number | 80 | Attraction range |
className | string | '' | Outer wrapper classes. |
style | CSSProperties | undefined | Additional outer styles. |
paused | boolean | false | Freeze the current frame without accumulating paused time. |
replayToken | number | 0 | Change to reset the animation and interactive state. |