184 Components
Magnetic Scatter Text
TextAnti-gravity typography where characters scatter elastically away from cursor proximity, then snap back with Hooke's Law spring harmonics.
MAGNETIC SCATTER
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/magnetic-scatter-text.json"
Props
TypeScript props supported by <MagneticScatterText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text phrase to animate with repulsion physics. |
| radius | number | 100 | Repulsion influence radius in pixels around pointer. |
| strength | number | 40 | Force multiplier pushing letters away. |
Key Features
- Vector angle repulsion calculating exact cursor Euclidean distance per letter.
- Hooke's Law recoil springs returning glyphs to their structural baseline.
- Customizable dispersion radius and kinetic repulsion strength.
- Prefe-reduced-motion compatibility.
Keyboard & Accessibility
- Underlying string remains continuous in DOM.
- Disabled physics displacement when reduced motion is preferred.