Text Animations
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
Install
bun add motion clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/lumen/lumen.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| dimOpacity | number | 0.15 | Opacity of words that haven't been reached yet. |
| fadeSpan | number | 6 | Width of the reading band — words mid-transition at once. |
| blurAmount | number | 4 | Blur on a word that hasn't been reached. |
| startOffset | number | 0.15 | Point in the scroll pass where the first word brightens. |
| endOffset | number | 0.6 | Point by which the last word is fully lit. |
| highlightColor | string (hex) | "#a855f7" | Amethyst bloom on the leading edge. |
What It Demonstrates
- Scroll-driven animation
- An animation whose progress is tied directly to scroll position.
- Scroll reveal
- Elements fade or slide into place as they enter the viewport.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Interpolation / Tween
- Generating all the in-between frames between a start and end value, so motion is continuous.
- Blur
- A blur filter used to soften an element or mask tiny imperfections.
- Purposeful animation
- Motion should serve a function — orient, give feedback, show relationships — not just decorate.
Related Components
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Morphing Text
A gooey blur-morph that cross-dissolves between a list of words.
Variable Proximity
Text whose letters interpolate font weight by cursor proximity.
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.
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
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.