Text Animations
Reflow
Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.
Install
bun add motion clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/reflow/reflow.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columnWidth | number | 100 | Width of the text column as a percentage of its container — the measure. Dragging this is the reflow, with not one word changing. |
| stiffness | number | 340 | Spring tension on the travel. |
| damping | number | 34 | Spring friction on the travel. |
| stagger | number | 14 | Delay between one word starting its travel and the next. The index is capped at twenty, so a long paragraph cannot leave its tail sitting still in plain sight. |
| enterScale | number | 0.82 | Size a word enters at and leaves at. |
| wordGap | number | 0.3 | Space between words. A margin rather than a space character, so a word leaving the sentence does not strand the gap that followed it. |
| lineHeight | number | 1.6 | Leading. |
| align | "left" | "center" | "right" | "left" | Text alignment. |
| auto | boolean | true | Advance through the phrases on a timer. |
| interval | number | 3600 | Time on each phrase. |
| traceMoves | boolean | false | Tint a word for as long as it is travelling. A debugging affordance that earned its place — it is the only way to prove a word moved rather than being destroyed and re-created somewhere else. |
| accentColor | string (hex) | "#a855f7" | The trace tint. |
What It Demonstrates
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Continuity transition
- A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
- Spatial consistency
- Animating so an element keeps its identity and position across states, so users never lose track of where things went.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
Related Components
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word — each bar clearing its own word and leaving an amethyst edge behind as the only evidence it was ever there.
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words — a decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.