# A to Z
URL: https://remocn.dev/docs/typography/a-to-z

An alphabet gag where a big letter column rolls from A to Z and lands on a final entry

- Install: `npx shadcn@latest add @remocn/a-to-z`
- Vibe: playful
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/a-to-z
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AToZ } from "@/components/remocn/a-to-z";

const AToZScene = () => (
  <AToZ
    entries={["animations.", "brand fonts.", "captions."]}
    finale="zero lock-in."
    connector="is for"
  />
);

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

A huge letter column and a text column roll together: each entry shows its first letter with the connector, for example "A is for any aspect ratio.", ticking through the list. After the last entry the letters flick through the gap to the finale, and a slower roll lands on it. Pass `entries` in alphabetical order, plus `finale` and `connector`; it ships light and dark through `theme`, and the pacing stretches to fit the composition's duration (128 frames at the default 165).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `entries` | `string[]` | `DEFAULT_ENTRIES` | Items in alphabetical order; each one's first letter drives the big column. |
| `finale` | `string` | `"zero lock-in."` | Last entry, rolled in after the letters flick through to its letter. |
| `connector` | `string` | `"is for"` | Short phrase between the letter and each entry. |
| `accent` | `string` | — | Field color in dark, letter color in light; defaults to orange. |
| `background` | `string` | — | Stage color, or `"transparent"` to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A feature-list beat framed as an alphabet, where each item starts with the next letter and the finale lands on Z.
- A playful closing line that rolls through a few real features and ends on a punchline entry.
- A bold full-bleed color moment where the big letter column and the text column roll together.

## Don't use when
- The items are not alphabetical or the alphabet joke does not fit — use `index-list`.
- You want a rolling effect on a single value, not a letter column — use `slot-machine-roll`.
- You need a plain stacked list of features without the roll — use `staggered-fade-up`.