Stretch Text for React

Stretch Text squashes and stretches a line one letter at a time: each one squashes flat and wide against the line, springs up tall and thin, then settles, the way a cartoon animator draws an impact. A ripple of them runs through the word, then the line rests before the next round.

Use it for a playful headline, a game, a kids' app, a button label that should feel springy. For letters that leap off the line instead of changing shape, use Bouncing Text; for letters that rock in place, Wobble Text. Each letter runs a CSS keyframe animation the install adds to your stylesheet, scaled from its foot and delayed by its place in the text, with no animation library. With reduced motion the text keeps its shape.

Installation

Usage

import { StretchText } from "@/components/ui/stretch-text";

<h1>
  <StretchText text="Boing!" />
</h1>

Demos

Intensity

intensity is how far each letter squashes: subtle gives up 15% of its height, medium, the default, a quarter, strong about a third. Each letter widens as it flattens, so it keeps about the same area.

Stagger

stagger is the time between one letter squashing and the next, 80 ms by default: a short one sends a quick ripple through the word, a long one lets each letter land on its own. loop={false} plays one round when the page shows the text.

Accessibility

Screen readers read the text once, as plain text, from a visually hidden copy; the stretching letters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page. No letter loses more than about a third of its height, and only for a moment, so the text stays readable. With reduced motion it keeps its shape.

FAQ

API Reference