Timeline Steps
A process walked step by step, each one worked and checked off.
SceneScenes
timeline-steps30fps · 960×540
Install
$ npx remotion-ui@latest add timeline-stepsThe rail draws first, then a travelling head lands on each step: the node lights, a ring closes over the time that step is being worked, and it checks off and dims to done as the head moves on — so the scene ends on a fully walked timeline rather than a row of dots that faded in.
Horizontal in landscape, a left gutter rail in portrait. Add title/eyebrow
for a heading, and speed to compress the walk.
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, eyebrow, accentColor, 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 { TimelineSteps } from "@/remotion/scenes/timeline-steps";
<TimelineSteps steps={[{ title: "Record" }, { title: "Render" }]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | TimelineStep[] | - | Steps in order; up to five are walked. |
| title | string | - | Heading above the rail. |
| eyebrow | string | - | Small label above the heading. |
| accentColor | string | "#E8B86D" | Rail, node, and check colour. |
| backgroundColor | string | - | Overrides the page background. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |