# Acronym Expand
URL: https://remocn.dev/docs/typography/acronym-expand

An acronym expands letter by letter into its full name, with an eyebrow above and a subhead below.

- Install: `npx shadcn@latest add @remocn/acronym-expand`
- Vibe: tech
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/acronym-expand
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AcronymExpand } from "@/components/remocn/acronym-expand";

const AcronymExpandScene = () => (
  <AcronymExpand
    short="SDK"
    full="Software Development Kit"
    eyebrow="Now available"
    accent="#3B5BFD"
  />
);

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

The short form appears first, its letters spread apart and unfold into the full words, then the eyebrow and subhead fade in. Pass `short`, `full`, `eyebrow` and `subhead` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `short` | `string` | `"MCP"` | The acronym shown large before it expands |
| `full` | `string` | `"Model Context Protocol"` | The full phrase the acronym expands into |
| `eyebrow` | `string` | `"Now in remocn"` | Small label above the expanded phrase; empty to hide |
| `subhead` | `string` | `"Your agent browses, installs and edits every component."` | One-line explanation under the phrase; empty to hide |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A feature-naming beat where a short acronym like MCP or SDK needs to be spelled out for the viewer.
- An announcement scene that pairs one big abbreviation with a one-line explanation of what it does.

## Don't use when
- The headline is a plain sentence with nothing to expand - use `tracking-in`.
- You want text typed on with a caret rather than letters unfolding - use `typewriter`.
- The full name is very long and would shrink to small type - use `line-by-line-slide`.