Lower Third
Polished Remotion lower third overlay for names and titles. Install with npx remotion-ui@latest add lower-third.
SceneScenes
lower-third30fps · 960×540
Install
$ npx remotion-ui@latest add lower-thirdCompact transparent overlay for speaker names, roles, and chapter identifiers. Use align="right" for right-side interview framing.
Transparent overlay scene designed to sit over footage.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/lower-third- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, subtitle, accentColor, backgroundColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { LowerThird } from "@/remotion/scenes/lower-third";
<LowerThird
title="Jane Doe"
subtitle="Product Designer"
accentColor="#f97316"
align="left"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | Primary line. |
| subtitle | string | - | Secondary line. |
| accentColor | string | - | Accent bar color. |
| backgroundColor | string | "rgba(5, 7, 15, 0.78)" | Panel background. |
| align | "left" | "right" | "left" | Lower-third side. |