Magnetic
A wrapper that makes its child subtly translate toward the cursor when nearby, and snap back to rest when the cursor leaves. Common on buttons for a tactile 'magnetic hover' feel.
Installation
npx dafink-ui add magneticAlso installs: Button
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactElement | - | Required. A single interactive child that follows the cursor. |
| strength | number | 0.3 | Multiplier applied to the cursor offset, 0-1. |
| range | number | 80 | Activation radius in px around the wrapper's center. |
| className | string | '' | Additional CSS classes, applied to the wrapping div. |
Accessibility
Magnetic checks prefers-reduced-motion once on mount via window.matchMedia into a ref; when it matches, the pointer-follow handlers short-circuit immediately and the wrapped child renders at rest with no transform applied. The inner wrapper is a plain, non-semantic div, so it adds no ARIA role and doesn't alter the keyboard, focus, or tab behavior of the single interactive child it wraps.