Overheard

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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	number1 Playback multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme; ships dark and light.

linesOverheardLine[]
Quote and speaker name pairs, played in order.
DefaultDEFAULT_LINES
highlightstring
Phrase in the last quote to color with the accent.
Default"It’s in the repo."
accentstring
Color for the highlighted phrase; defaults to the theme accent.
backgroundstring
Stage fill color; pass "transparent" to overlay your own footage.
speednumber
Playback multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme; ships dark and light.
Default"dark"