Each letter hangs on its own spring and leans toward the pointer, tilting with its speed and wobbling back into place when released. Autoplay drives a small magnet across the line when nobody is pointing.
npx shadcn@latest add https://hyperblur.dev/r/text-magnetic.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-magnetic.tsx.
import { TextMagnetic } from "@/components/hyperblur/text-magnetic"
<TextMagnetic text="Pull me closer" className="text-5xl font-semibold" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. Screen readers get the plain string. |
| radius | number | 120 | Reach of the pull in pixels. |
| strength | number | 18 | Largest distance in pixels a letter travels toward the pointer. |
| stiffness | number | 0.12 | Spring stiffness. Higher values snap faster. |
| damping | number | 0.78 | Velocity kept per frame. Lower values settle with less wobble. |
| rotate | number | 10 | Largest tilt in degrees. |
| highlight | string | "#7fb3ff" | Color pulled letters blend toward, also used by the autoplay magnet. |
| autoPlay | boolean | false | Move a visible magnet along the text after 1.4 seconds without pointer input. |