Shadcn.io is not affiliated with official shadcn/ui
Inertia Text
Drag the entire string and watch it slide with momentum, then settle back to origin via spring physics for React applications.
Inertia Text preview
Type that behaves like a piece of paper flicked across a table. Press, drag, release — the whole word inherits your gesture's velocity, glides under linear friction until it slows enough to give up, and is then gently pulled back home by an underdamped spring. Velocity is sampled across the last few pointer frames so a quick flick feels different from a slow shove, and pointer capture keeps tracking the gesture even when your cursor leaves the bounding box. Cursor swaps between grab and grabbing for tactile feedback, touchAction is locked off so the experience survives mobile scrolling, and zero React re-renders happen during the physics loop — everything rides motion values and a single requestAnimationFrame. Drop it into a hero, a portfolio cover, a 404, or any moment where you want copy that invites the reader to play.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the inertia-text text effect into my projectRelated Components
Magnet Text
Per-character magnetic cursor attraction
Pendulum Text
Letters dangle and swing as underdamped pendulums
Wave Text
Letters undulating along a continuous sine wave
Wobble Text
Continuous rotational oscillation with a soft scale pulse
Drift Text
Drifting per-character motion with subtle sway
Falling Text
Physics-based letters that drop and pile
FAQ
Was this page helpful?
Sign in to leave feedback.