Magnetic Cursor
Visual Effects
A wrapper that creates a magnetic pull effect, attracting elements toward the cursor with configurable strength and radius.
Loading preview...
Customize
Strength0.3
Radius (px)200
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The element to apply the magnetic effect to. |
className | string | '' | Additional CSS classes. |
strength | number | 0.3 | Magnetic pull strength (0 = none, 1 = follows cursor fully). |
radius | number | 200 | Pixel radius of the magnetic field. |
springConfig | { stiffness?: number; damping?: number } | { stiffness: 150, damping: 15 } | Spring physics configuration for the animation. |