Roadmap Lanes
Swimlanes of shipped, building and planned work, each lane filling in turn and in-flight items growing to their real progress.
SceneScenes
$ npx remotion-ui@latest add roadmap-lanesLanes fill one after another. Items in a done lane land already ticked, items
in a showProgress lane land empty and then fill to their own progress value,
and items in a dashed lane arrive outlined and unlit — three states that are
readable in a still frame, not just in motion.
The fill starts after the pill has landed, and takes longer than the arrival did. A bar that grows while its pill is still moving reads as one blurred event; letting the pill settle first turns the progress into a second beat the eye can follow, and the percentage counting up beside it has somewhere to land.
Lane appearance is driven by flags rather than by lane name, so the three
defaults — Shipped, Building, Planned — are a starting point, not a contract.
A "Blocked" lane is dashed with a red color; a "Next up" lane is
showProgress with low values.
Three items per lane at three lanes is the comfortable maximum at 1080p; the item width is divided from the board, so a fourth item shortens every label rather than wrapping.
Lane appearance comes from flags, not from lane names — a blocked lane is `dashed` with a red colour, a next-up lane is `showProgress` with low values. The fill starts after the pill lands and takes longer than the arrival, so progress is a second beat rather than a blur inside the first. Three items per lane is the comfortable maximum at 1080p; item width divides the board rather than wrapping.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/roadmap-lanes- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: lanes, title, startAtSeconds, laneStaggerSeconds, 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 { RoadmapLanes } from "@/remotion/scenes/roadmap-lanes";
<RoadmapLanes
title="What we are building"
lanes={[
{ title: "Shipped", color: "#9BD4A0", done: true, items: [{ label: "Render API" }] },
{
title: "Building",
color: "#E8B86D",
showProgress: true,
items: [{ label: "Timeline scrubber", progress: 0.72 }],
},
{ title: "Planned", color: "#7A828F", dashed: true, items: [{ label: "Stem export" }] },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| lanes | RoadmapLane[] | Shipped / Building / Planned | Title, colour, items, and the flags that set the lane's state: done, showProgress, dashed. |
| title | string | "What we are building" | Heading above the lanes. Omit to drop it. |
| startAtSeconds | number | 0.42 | Second the first lane's items arrive. |
| laneStaggerSeconds | number | 0.42 | Seconds between lanes. |
| itemStaggerSeconds | number | 0.14 | Seconds between items inside a lane. |
| fillSeconds | number | 0.8 | How long a progress bar takes to reach its value, starting 0.3s after the pill lands. |
| holdSeconds | number | - | Seconds the settled roadmap holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Fallback colour for lanes with none of their own. |
| backgroundColor | string | - | Page behind the lanes. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |