Title Card
An opening card where the headline stands up line by line.
Scene
title-card30fps · 960×540
Install
$ npx remotion-ui@latest add title-cardEach line rises out of its own mask in turn, one sweep of light crosses the headline once it is standing, and the whole card holds under a slow push so a long title beat never sits dead still.
Newlines in title are honoured; otherwise lines are balanced to
charsPerLine. eyebrow adds a chip above, meta a small line under the
subtitle.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/title-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, subtitle, eyebrow, meta, 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 { TitleCard } from "@/remotion/scenes/title-card";
<TitleCard title="Launch Week" subtitle="Day 1" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | Headline. Newlines honoured; otherwise lines are balanced. |
| subtitle | string | - | Supporting line. |
| eyebrow | string | - | Chip above the headline. |
| meta | string | - | Small line under the subtitle (date, author, run time). |
| charsPerLine | number | 22 | Characters per line the headline balances to. |
| accentColor | string | "#E8B86D" | Chip, glow, and sweep colour. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| holdSeconds | number | - | Seconds before the card leaves. Omit to hold: correct inside a TransitionSeries. |
| speed | number | 1 | Animation speed multiplier. |