RemotionUI

Talking Head Layout

Speaker frame that opens, names the speaker, and plays the spoken lines.

SceneScenesAdvanced

talking-head-layout30fps · 1080×1920
Install
$ npx remotion-ui@latest add talking-head-layout

The frame opens on the speaker, the name plate slides out from behind its edge, the captions play through the reserved zone with the waveform moving under them, then the plate retreats and leaves the frame clean for burnt-in captions or platform UI. Omit captions and the zone collapses so the frame takes the height instead.

Advanced. Installs @remotion/media and waveform-line for optional audio visuals.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import
@/remotion/scenes/talking-head-layout
  • Use when: full-frame scenes, overlays, cards, and reusable video sections.
  • Customize: mediaSrc, audioSrc, eyebrow, title, plus copied source for timing, layout, colors, and typography.
  • Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example
import { TalkingHeadLayout } from "@/remotion/scenes/talking-head-layout"; <TalkingHeadLayout mediaSrc={staticFile("speaker.mp4")} audioSrc={staticFile("voice.wav")} eyebrow="On camera" title="Maya Okonkwo" subtitle="Founder, Northlight Studio" captions={["Keep the speaker readable.", "Reserve the lower frame."]} />

API Reference

PropTypeDescription
mediaSrcstringSpeaker image or video. Falls back to a framed placeholder.
audioSrcstringVoice track the waveform is drawn from. Omit to hide the waveform.
eyebrowstringSmall label above the name on the plate, e.g. a role.
titlestringName plate headline.
subtitlestringSecond plate line.
captionsstring[]Spoken lines. They play one at a time, word by word, in the zone reserved under the frame. Omit and the zone collapses.
fit"cover" | "contain"Media object-fit behavior.
accentColorstringPlate label, waveform, and ambient light color.
backgroundColorstringOverrides the page background behind the frame.
theme"dark" | "light"Palette the page and plate are drawn from.
speednumberAnimation speed multiplier for shorter Sequences.

Related