Text Inertia

Cursor-driven words that kick aside and spring back.

Installation

npx shadcn@latest add @iconiq/text-inertia

Pointer-reactive word treatment that tracks local cursor velocity, applies that momentum to the hovered word, and springs the word back into place.

textstring

Default "Interfaces remember momentum"

The phrase to render. The component splits it into words and keeps those word wrappers stable for hover-driven motion.

intensitynumber

Default 1

Scales how strongly cursor velocity affects each hovered word. Values just above 1 feel more kinetic; lower values stay calmer.

classNamestring

Merged onto the root word group for typography, color, alignment, and layout overrides.

wordClassNamestring

Merged onto each animated word span when you need per-word styling without changing the root layout.

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.

Text Inertia uses Motion values and spring animations instead of a runtime DOM-splitting animation plugin.

Pointer movement over the root records x/y velocity, and entering a word maps that velocity to x, y, and rotation offsets.

Each word immediately settles back to x=0, y=0, and rotate=0 with a spring, which creates the inertial feel with only Motion.

The text is split with React during render, so there is no document query or third-party DOM splitting step.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.