Story arc

Hook

Lead with the sharpest insight.

Proof

Show the chart and metrics.

CTA

Close with one clear next step.

Install

$ npx remotion-ui@latest add timeline-steps

Show roadmaps, tutorials, and process steps with reserved layout slots.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/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-ui npm package; it is copied into your project.

Example

import { TimelineSteps } from "@/remotion/scenes/timeline-steps";

<TimelineSteps steps={[{ title: "Record" }, { title: "Render" }]} />

Prop	Type	Default	Description
steps*	TimelineStep[]	-	Up to four process steps.
title	string	-	Timeline title.