Magnetic
Wraps a child element and pulls it toward the cursor when nearby. Smooth via GSAP's quickTo.
Usage
import { Magnetic } from '@bwo-ui/react';
<Magnetic strength={0.4} radius={140}>
<button>Get started</button>
</Magnetic>Props
| Prop | Type | Default | Description |
|---|---|---|---|
strength | number | 0.35 | How strongly the element follows the cursor (0 = none, 1 = full). |
radius | number | 120 | Radius in px where the magnetic field is active. |
duration | number | 0.5 | Tween duration on each pointer update. |
ease | string | 'power3.out' | GSAP ease. |
child | string | — | Optional child selector. When set, the transform is applied to the child instead of the wrapper — useful when the wrapper has hover effects you want to stay in place. |