# Stack Letters
URL: https://remocn.dev/docs/typography/stack-letters

Letters tumble and stack into place to spell a caps word over a warm gradient

- Install: `npx shadcn@latest add @remocn/stack-letters`
- Vibe: clean
- Natural length: 106f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/stack-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StackLetters } from "@/components/remocn/stack-letters";

const StackLettersScene = () => <StackLetters word="SHIPPED" accent="#3B5BFD" />;

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

Letters drop in one by one and stack into a tower, which rocks and topples; each letter then tumbles and lands in a row that spells the word, ticking a ground rule as it lands. Pass `word` (a short caps word works best) and `accent`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"STACK"` | The word to stack; short caps words fit best. |
| `accent` | `string` | `"#3B5BFD"` | Color of the landing ticks on the ground rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A one-word title card for a release or milestone where the letters should physically land.
- A playful, tactile reveal of a product or feature name over a warm gradient.
- A cold open that needs a single heavy beat before the real content starts.

## Don't use when
- The message is a full sentence or several words — use `word-stack` for a stacked poster.
- You want a calm, polished word reveal with no physics — use `bottom-up-letters`.
- You need the text to stay readable for a long hold while it animates — use `per-character-rise`.