Shadcn.io is not affiliated with official shadcn/ui
Stretch Text
Pixar-style squash-and-stretch on each letter sequentially with volume-conserving scale for React applications.
Stretch Text preview
Letters that squash and stretch like rubber. Each character compresses vertically, rebounds taller-than-normal, then settles — with an inverse horizontal scale so volume stays believable, the way a Pixar animator would draw it. Sequential stagger sweeps the squash-stretch through the word as a wave of cartoon impacts. Built with Motion's keyframe animation, transformOrigin pinned to the bottom so each letter reads like it's hitting an invisible ground. Configurable stagger timing, intensity, and a one-shot or loop mode. Perfect for playful headlines, gamified UI, kids' apps, and anywhere you want letters with bounce and personality.
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 stretch-text text effect into my projectRelated Components
Text Pressure
Variable font weight responds to cursor
Wave Text
Letters undulating along a sine wave
Falling Text
Physics-based letters that drop and pile
Text Trail
Character trails that follow cursor movement
Variable Proximity
Variable font axes respond to cursor proximity
Blur Text
Text animation from blur to focus
FAQ
Was this page helpful?
Sign in to leave feedback.
Status Pulse Text
Live status indicator with a pulsing colored dot beside a label, featuring a continuous expanding ring for React applications.
Syntax Text
Monospace code that fades in token-by-token with subtle syntax colors for keywords, strings, numbers, comments, and punctuation in React applications.