Text Animations
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Install
bun add motion clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/letters-pull/letters-pull.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 0.5 | Per-letter animation duration. |
| delay | number | 0.05 | Delay between successive letters. |
| yValue | number | 10 | Rise distance of each letter. |
| blur | number | 8 | Starting blur each letter sharpens from. |
What It Demonstrates
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Slide in
- Element enters by sliding in from off-screen (left, right, top, or bottom).
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Fade in / Fade out
- Element appears or disappears by changing opacity.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
Related Components
Animated Number
Animated numeric transitions with flip, slide, fade, and bounce styles.
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
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.
Reflow
Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.
Morphing Text
A gooey blur-morph that cross-dissolves between a list of words.
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.