# Top-Down Letters
URL: https://remocn.dev/docs/typography/top-down-letters

Letters descend from above in a pronounced staircase, one symbol at a time

- Install: `npx shadcn@latest add @remocn/top-down-letters`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/top-down-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TopDownLetters } from "@/components/remocn/top-down-letters";

const TopDownLettersScene = () => (
  <TopDownLetters text="Signal" staggerDelay={3} distance={46} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { TopDownLetters } from "@/components/remocn/top-down-letters";
import { Backdrop } from "@/components/remocn/backdrop";

const TopDownLettersScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <TopDownLetters text="Signal" staggerDelay={3} distance={46} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `staggerDelay` | `number` | `3` | Per-character delay in frames. Larger values make the staircase more pronounced. |
| `distance` | `number` | `46` | Vertical travel in pixels each letter descends from above. Animates to 0. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A single uppercase word or short acronym should enter with structural weight — each letter landing like a stamp.
- The scene calls for a sharp, graphic title card where the sequential drop reinforces the word's rhythm.
- You want per-letter stagger with a pronounced vertical distance (default 46px) that reads clearly at large font sizes.

## Don't use when
- The text is more than ~8 characters — many letters dropping sequentially stretches the animation and the last letters feel delayed; use `staggered-fade-up` for longer phrases.
- You want blur or softness on entry — `top-down-letters` is zero-blur by design; use `soft-blur-in` for the Apple-style per-character blur reveal.
- The stagger direction should be horizontal or spatial — use `short-slide-right` for a left-to-right group glide or `tracking-in` for a letter-spacing collapse instead.
- The letters should rise from below rather than drop from above — use `bottom-up-letters`, the identical-cadence upward mirror.