B Roll Stack
A deck of supporting shots dealt one at a time behind the narration.
SceneScenes
b-roll-stack30fps · 960×540
Install
$ npx remotion-ui@latest add b-roll-stackEach shot rides to the front of the deck in turn with its own label, the one it replaces slides back into the stack, and the deck keeps cycling for as long as the scene runs — so a long narration beat never sits on a frozen fan of cards.
holdSeconds sets how long a shot owns the front; the headline, kicker and
caption sit beside the deck (above it in portrait) with a running count.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/b-roll-stack- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: items, kicker, title, caption, 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 { BRollStack } from "@/remotion/scenes/b-roll-stack";
<BRollStack
kicker="Cutaway"
title="Layer proof shots behind the narration"
items={[{ src: staticFile("shot.png"), title: "Proof", fit: "cover" }]}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BRollItem[] | - | Image or video cards to layer. Omit for styled placeholders. |
| kicker | string | "Supporting visuals" | Short label above the headline. |
| title | string | - | Scene headline. |
| caption | string | - | Supporting copy below the headline. |
| holdSeconds | number | 1.35 | Seconds a shot holds at the front before the deck advances. |
| aspect | number | 16 / 9 | Aspect the cards are cut to. |
| accentColor | string | "#E8B86D" | Kicker, card rim, and label colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |