# Cue Word
URL: https://remocn.dev/docs/transitions/cue-word

Kinetic type lines where one cue word lands in color, then the whole line slides, drops, lifts or cuts away

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

## Installation

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

## Usage

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

const CueWordScene = () => (
  <CueWord
    scenes={[
      { text: "This line slides left.", cue: "slides left", cut: "slide" },
      { text: "The next one drops in.", cue: "drops in", cut: "drop" },
      { text: "And this one cuts.", cue: "cuts", cut: "cut" },
    ]}
  />
);

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

Each entry in `scenes` fills the frame with large centered type. The words rise in, the `cue` words land in the accent color, and the line then leaves with its `cut`: slide, drop, lift or an instant cut. Lines alternate between the base field and an accent field. The timeline is 176 frames at speed 1 with the default four lines; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `scenes` | `CueWordScene[]` | `DEFAULT_SCENES` | Lines to show; each has text, optional cue words and an exit cut |
| `accent` | `string` | — | Accent color for cue words and the accent field |
| `background` | `string` | — | Base field color; pass transparent to composite over footage |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette |

## Use when
- A rapid run of short claims where each line needs its own move and one emphasized word.
- A feature list told as sentences, with a different transition style for each beat.
- Bold type on alternating dark and accent fields, with no imagery or UI behind it.

## Don't use when
- The lines should hand a word from one to the next — use `baton-word`.
- You only need a single sentence with a highlighted word — use `inline-highlight`.
- You want a softer, non-directional change between lines — use `per-word-crossfade`.