Magnetic
Pulls the element toward the pointer while it hovers nearby and eases back on leave, ideal for buttons and icons; disabled under reduced motion.
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to magnetize |
strength | number | 0.35 | Attraction strength between 0 and 1; the fraction of the pointer distance the element travels |
range | number | 120 | Distance in pixels beyond the element edges that triggers the attraction |
resetDuration | number | 400 | Time in milliseconds to ease back after the pointer leaves the range |
className | string | — | Extra class name |
Dependencies
PointerEvent