Quote Card
A pull quote read aloud. Mark, lines, marker sweep, attribution.
Scene
quote-card30fps · 960×540
Install
$ npx remotion-ui@latest add quote-cardThe quote mark draws, the quote rises line by line out of its own masks, a
marker sweeps the emphasis phrase word by word, and the attribution arrives
last with its initials disc.
emphasis is matched over the whole quote and sliced per line, so a phrase that
spans a line break still reads as one stroke.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/quote-card- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: quote, emphasis, author, role, 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 { QuoteCard } from "@/remotion/scenes/quote-card";
<QuoteCard
quote="The best motion is code you can read and change"
emphasis="motion"
author="Team"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| quote* | string | - | Quote body. |
| emphasis | string | - | Phrase swept with a marker; matched over the whole quote, so it may span a line break. |
| author | string | - | Attribution name. |
| role | string | - | Second attribution line (role, company, handle). |
| initials | string | - | Initials in the attribution disc. Defaults to the author's. |
| charsPerLine | number | 30 | Characters per line the quote balances to. |
| accentColor | string | "#F472B6" | Mark, marker, and disc colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |