Text Reveal
A masked slide-up reveal. Each letter or word rises out of a clipped row on its own spring.
textrevealspring
Usage
Installation
npx shadcn@latest add https://remotionui.dev/r/text-reveal.jsonCopies the composition to components/remotion/text-reveal.tsx and installs remotion, @remotion/google-fonts, zod if missing. No UI library required.
Props
| Prop | Default | Description |
|---|---|---|
| textstring | "Introducing" | The line to reveal. |
| mode"letter" | "word" | "auto" | "auto" | Split the line per letter, per word, or pick based on length. |
| variant"solid" | "gradient" | "gradient-bg" | "solid" | Flat colour, gradient text, or gradient text on a gradient backdrop. |
| colorstring | "#0f0f0f" | Text colour for the solid variant. |
| bgColorstring | "#fafaf9" | Background fill behind the text. |
| staggernumber | 0 | Frames between units. 0 picks a sensible value. |
| durationInFramesnumber | 90 | Total length; the reveal timing scales to fit. |
| exitAnimationboolean | false | Slide the line back out before the end. |
| fontFamilystring | "" | Override the bundled font stack. |
| fontWeightnumber | 0 | Override the weight. 0 keeps the default. |