# Staggered Fade Up
URL: https://remocn.dev/docs/typography/staggered-fade-up

Words slide up and fade in sequentially with a wave-like cascade

- Install: `npx shadcn@latest add @remocn/staggered-fade-up`
- Vibe: clean
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/staggered-fade-up
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";

const StaggeredFadeUpScene = () => (
  <StaggeredFadeUp text="Ship videos faster" staggerDelay={4} />
);

export const RemotionRoot = () => (
  <Composition
    id="StaggeredFadeUp"
    component={StaggeredFadeUpScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to animate. Split on spaces into words. |
| `staggerDelay` | `number` | `4` | Frames between the start of each word's animation |
| `distance` | `number` | `20` | Vertical distance in pixels each word travels upward |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `speed` | `number` | `1` | Playback speed multiplier (1 = normal, 2 = twice as fast) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A headline or body sentence is long and a simpler single-unit entrance would feel flat.
- You want a neutral, versatile word-by-word reveal that works across any brand tone.
- You need the text fully on screen by a known frame — `staggerDelay` × word count gives a predictable total duration.

## Don't use when
- The text is very short (1–2 words) and the stagger has nothing to reveal gradually — use `scale-down-fade` or `spring-scale-in` for a single-unit entrance with more impact.
- You want a per-character (not per-word) reveal — use `soft-blur-in` for character-level stagger with a premium blur feel.
- The scene needs an exit animation — staggered-fade-up is entrance only; compose with a separate exit primitive inside a `<Sequence>`.