# Word Ladder
URL: https://remocn.dev/docs/typography/word-ladder

A word changes a letter or two per rung, climbing a ladder to the final word.

- Install: `npx shadcn@latest add @remocn/word-ladder`
- Vibe: playful
- Natural length: 154f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/word-ladder
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WordLadder } from "@/components/remocn/word-ladder";

const WordLadderScene = () => (
  <WordLadder words={["idea", "item", "stem", "step", "ship"]} />
);

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

Each word in `words` replaces the last by changing a letter or two, stepping from the first rung to the last. Pass `words` as a chain where neighbors differ slightly. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["idea", "item", "stem", "step", "ship"]` | Rungs of the ladder, first to last. Neighbours should differ by a letter or two. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A transformation beat such as idea to ship in a few steps.
- A word-play intro that shows progress through small changes.
- A short title sequence that ends on the product's key verb.

## Don't use when
- The letters should be rearranged into one new word — use `anagram-shuffle`.
- The words are unrelated and should just swap — use `ruby-press`.
- You want a fixed-width list swap — use `width-lock`.