# Overheard
URL: https://remocn.dev/docs/typography/overheard

A question quote, "Who made our launch video?", answered by "I did. It's in the repo."

- Install: `npx shadcn@latest add @remocn/overheard`
- Vibe: premium
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/overheard
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Overheard } from "@/components/remocn/overheard";

const OverheardScene = () => <Overheard lines={[{ quote: "Who made our launch video?", name: "Mia Okafor, CEO" }, { quote: "I did. It’s in the repo.", name: "Leo Marsh, engineer" }]} highlight="It’s in the repo." />;

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

Two voices play as dialogue: the first quote types in word by word with natural pauses, its speaker tag fades in, then the second quote answers below, ending with a highlighted phrase. Pass `lines` (quote and name pairs) and `highlight` for the phrase to color; it fits the typing pace to the composition length.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `OverheardLine[]` | `DEFAULT_LINES` | Quote and speaker name pairs, played in order. |
| `highlight` | `string` | `"It’s in the repo."` | Phrase in the last quote to color with the accent. |
| `accent` | `string` | — | Color for the highlighted phrase; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A question-and-answer exchange between two people, such as a customer or colleague overheard.
- A social-proof beat that reads like a chat snippet with a punchline at the end.
- A dialogue of two or three short lines set in serif type.

## Don't use when
- The message is one long testimonial from one person — use `quote-hero`.
- The answer should replace the question in place — use `answer-first`.
- You want a quote that rewrites itself over time — use `changed-mind`.