Crafting refined, pixel-perfect web experiences that balance design clarity with technical excellence. Every interaction should feel responsive, intentional, and calm enough to disappear into the work. Motion adds a quiet layer of feedback, helping people sense where they are and what just changed.
Installation
npx shadcn@latest add @iconiq/text-inertiaProps
TextInertia
4 props
Pointer-reactive word treatment that tracks local cursor velocity, applies that momentum to the hovered word, and springs the word back into place.
text
stringDefault
"Interfaces remember momentum"The phrase to render. The component splits it into words and keeps those word wrappers stable for hover-driven motion.
intensity
numberDefault
1Scales how strongly cursor velocity affects each hovered word. Values just above 1 feel more kinetic; lower values stay calmer.
className
stringMerged onto the root word group for typography, color, alignment, and layout overrides.
wordClassName
stringMerged onto each animated word span when you need per-word styling without changing the root layout.
Notes
The component forwards standard div props except children; the rendered words always come from the text prop.
The root receives an aria-label with the full text, while individual animated word spans are hidden from assistive technology.
When reduced motion is requested, pointer hovers keep the words static.