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.
| Prop | 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 | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { TextRepel } from "@/components/ui/text-repel"
<TextRepel
text="Move your cursor here"
className="text-4xl font-bold"
/>