Shadcn.io is not affiliated with official shadcn/ui
Elastic Text
Drag a letter and watch it stretch the word like a spring chain, with neighbors following at a geometric falloff and a damped snap-back on release.
Elastic Text preview
Type that behaves like a stretchy chain. Press a letter and drag — that glyph follows your cursor exactly, but every other glyph in the word feels the pull through a spring chain. Direct neighbors track most of the displacement, their neighbors track a fraction, and the ripple decays geometrically until the far ends barely twitch. Release and the whole word snaps home with a slightly underdamped spring, so you get a brief, satisfying oscillation before everything settles. Each letter owns its own Motion useSpring, the master pointer-tracking runs on a single ref-based loop with zero React re-renders, and pointer capture keeps the gesture alive even when you fling past the bounding box. Spaces stay rigid and act as natural breakpoints in the chain. Drop it into a typographic playground, an editorial hero, or a portfolio cover where you want copy that begs to be touched.
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 elastic-text text effect into my projectRelated Components
Magnet Text
Per-character magnetic cursor attraction
Pendulum Text
Letters dangle and swing as underdamped pendulums
Wobble Text
Continuous rotational oscillation with a soft scale pulse
Wave Text
Letters undulating along a continuous sine wave
Bouncing Text
Letters bouncing on a vertical spring rhythm
Text Pressure
Variable font weight responding to cursor proximity
FAQ
Was this page helpful?
Sign in to leave feedback.
Echo Text
Text rendered with stacked translucent ghost copies that lag behind the source on text changes for an echoing reverberation effect for React applications.
Emboss Text
Subtle 3D embossed or debossed typography that appears physically pressed into the surface, with depth, tone, and automatic light-and-dark-mode polarity for React, Next.js, motion, and Tailwind CSS.