ComponentsCursor
Magnetic text
Letters lean toward the cursor and spring back.
Installation
$ npx shadcn@latest add @textlab/magnetic-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { MagneticText } from "@/components/textlab/magnetic-text/magnetic-text";
<MagneticText as="h2" text="Come closer" />Variants
attractrepelProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "attract" | "repel" | "attract" | Lean toward the cursor, or shy away from it. |
| radius | number | 2.5 | Reach of the field in em. |
| strength | number | 0.28 | Largest offset in em. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Hero words and footers that reward exploring with the mouse.
- Playful portfolios.
Skip it
- Touch-only layouts; nothing happens without a mouse or pen.
- Long text; every letter is tracked.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the text is read once.
- Offsets are small, so words stay readable while they move.
Motion
- Pull follows a smoothstep falloff and each letter eases toward its target.
- Letters glide home when the pointer leaves.
Reduced motion. Still, plain text.
Performance
- Letter centers are measured once and on resize; the frame loop only writes transforms.