Pulls its child toward the cursor while you hover close, then springs back with a little overshoot.
npx shadcn@latest add https://hyperblur.dev/r/magnetic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/magnetic.tsx.
import { Magnetic } from "@/components/hyperblur/magnetic"
<Magnetic><button>Get started</button></Magnetic>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | What to pull toward the cursor. |
| strength | number | 0.35 | Fraction of the cursor offset the child follows (0 to 1). |
| radius | number | 120 | Distance in pixels from the center where the pull reaches. |
| ease | number | 0.4 | Seconds the spring back takes. |