A physics-based text animation where each letter reacts to cursor proximity. Letters are pushed away (or attracted) in real-time with spring dynamics, creating an interactive magnetic force-field effect.
pnpm dlx shadcn@latest add @componentry/text-repel| Property | Type | Default |
|---|---|---|
textThe text content to display. | string | — |
radiusCursor influence radius in pixels — letters within this distance react. | number | 120 |
strengthMaximum displacement in pixels at closest proximity. | number | 45 |
modeWhether letters are pushed away from or pulled toward the cursor. | "repel" | "attract" | "repel" |
stiffnessSpring stiffness — higher values make letters snap back faster. | number | 180 |
dampingSpring damping — lower values produce bouncier motion. | number | 14 |
massSpring mass — higher values make letters feel heavier. | number | 0.4 |
classNameAdditional CSS classes for the container. | string | — |
letterClassNameCSS classes applied to each individual letter. | string | — |
View source
Keep in mind
Need a custom component?
I build bespoke UI components & websites tailored to your brand.
import { TextRepel } from "@/components/ui/text-repel"<TextRepel
text="Move your cursor here"
className="text-4xl font-bold"
/>