Magnet
Wraps any element so it springs toward the pointer within an activation radius.
pointermotionspring
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Magnet
Activation radius120px
Strength0.4
Fraction of the pointer offset followed.
Max travel40px
Disabled
Spring
Stiffness200
Damping18
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Content the magnet effect wraps; keeps its own semantics. |
padding | number | 120 | Activation radius (px) around the element's bounds. |
strength | number | 0.4 | Fraction (0–1) of the pointer offset the element follows. |
maxTranslate | number | 40 | Maximum translation in either axis, in pixels. |
springStiffness | number | 200 | Spring stiffness driving the follow motion. |
springDamping | number | 18 | Spring damping driving the follow motion. |
disabled | boolean | false | Disable the magnet effect entirely. |
className | string | — | Class name for the outer, non-moving wrapper. |
innerClassName | string | — | Class name for the inner, moving element. |