Scenes
Timeline Steps
Sequenced process timeline scene.
Sceneblocks
Install
npx remotion-ui@latest add timeline-stepsShow roadmaps, tutorials, and process steps with reserved layout slots.
Live preview
AI usage
Install first, then import the copied source component locally.
Install
npx remotion-ui@latest add timeline-stepsImport after install
@/remotion/scenes/timeline-steps- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: steps, title, 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
import { TimelineSteps } from "@/remotion/scenes/timeline-steps";
<TimelineSteps steps={[{ title: "Record" }, { title: "Render" }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | TimelineStep[] | — | Up to four process steps. |
| title | string | — | Timeline title. |