Lower Third
A name plate that wipes on, holds, and retreats the way it came.
SceneScenes
lower-third30fps · 960×540
Install
$ npx remotion-ui@latest add lower-thirdThe plate wipes out from the frame edge, the name rises out of its own mask, the
role and badge settle — and with holdSeconds set it retreats the same way
instead of being left standing for the rest of the cut.
align picks the edge it comes from. Overlay it on footage with an
AbsoluteFill; it renders nothing but the plate.
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, badge, align, 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. |
| badge | string | - | Small tag on the plate — LIVE, EP 12, the segment. |
| align | "left" | "right" | "left" | Edge the plate wipes out from. |
| holdSeconds | number | - | Seconds before the plate retreats. Omit to leave it on screen. |
| accentColor | string | "#E8B86D" | Badge colour. |
| backgroundColor | string | - | Overrides the plate background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |