# Word Insert
URL: https://remocn.dev/docs/typography/word-insert

A sentence edits itself, opening a gap and inserting new words in an accent gradient.

- Install: `npx shadcn@latest add @remocn/word-insert`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

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

## Usage

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

const WordInsertScene = () => (
  <WordInsert states={["Launch videos.", "Launch videos, as code."]} />
);

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

Each entry in `states` is the same sentence with more words added, and the new words open a gap and slide in with a gradient. Pass `states` as successive versions of your line. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `states` | `string[]` | `DEFAULT_STATES` | Successive versions of the sentence, each adding words. |
| `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 tagline that grows from a plain noun into a full promise.
- A showcase of how a sentence can gain qualifiers step by step.
- A launch line where each added word is a selling point.

## Don't use when
- Words should be replaced, not added — use `select-replace`.
- The sentence resets layout between versions — use `layout-swap`.
- Only one word should change in place — use `typo-fix`.