Roadmap Timeline
A project roadmap draws its bars, a cursor drags one later while dependents shift, then a toast confirms.
$ pnpm dlx shadcn@latest add @remocn/roadmap-timelineUsage
// src/Root.tsx
import { Composition } from "remotion";
import { RoadmapTimeline } from "@/components/remocn/roadmap-timeline";
const RoadmapTimelineScene = () => (
<RoadmapTimeline
dragProject="Public API"
dragDays={14}
today="Aug 26"
milestone={{ name: "Public launch", date: "Nov 18" }}
/>
);
export const RemotionRoot = () => (
<Composition
id="RoadmapTimeline"
component={RoadmapTimelineScene}
durationInFrames={190}
fps={30}
width={1280}
height={720}
/>
);A roadmap window draws month columns, project bars and dependency links, then sweeps in a today marker and a milestone flag. The cursor grabs dragProject and moves it dragDays days later; blocked projects shift to keep their gap and a toast announces the reschedule. Pass projects (name, start, end, status, progress, lead, color, dependsOn), milestone, today and dragProject. Ships light and dark.
The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.
Props15
| Prop | Type | Default |
|---|---|---|
| projects | RoadmapProject[]DEFAULT_PROJECTS Roadmap rows: name, start, end, status, progress, lead, color, dependsOn | |
| milestone | { name: string; date: string }— Milestone flag: name and date, e.g. 'Nov 18' | |
| today | string"Aug 26" Date of the today marker, e.g. 'Aug 26' | |
| dragProject | string"Public API" Name of the project the cursor drags | |
| dragDays | number14 Days the dragged project moves; positive is later | |
| startMonth | number6 First visible month, 0-based (6 is July) | |
| monthCount | number5 Number of month columns shown | |
| year | number2026 Year used to resolve the dates | |
| title | string"Roadmap · H2 2026" Roadmap title in the window header | |
| workspace | string"remocn" Workspace name in the breadcrumb | |
| theme | "light" | "dark""light" Light or dark palette | |
| accent | string"#3B5BFD" Accent color for highlights, buttons and progress | |
| speed | number1 Playback speed multiplier for the whole timeline | |
| ground | GshPresetId— gradients.sh preset id for the backdrop shader | |
| groundParams | Partial<GradientParams>— Overrides for the backdrop shader parameters | |
- projectsRoadmapProject[]
Roadmap rows: name, start, end, status, progress, lead, color, dependsOn
Default
DEFAULT_PROJECTS - milestone{ name: string; date: string }
Milestone flag: name and date, e.g. 'Nov 18'
- todaystring
Date of the today marker, e.g. 'Aug 26'
Default
"Aug 26" - dragProjectstring
Name of the project the cursor drags
Default
"Public API" - dragDaysnumber
Days the dragged project moves; positive is later
Default
14 - startMonthnumber
First visible month, 0-based (6 is July)
Default
6 - monthCountnumber
Number of month columns shown
Default
5 - yearnumber
Year used to resolve the dates
Default
2026 - titlestring
Roadmap title in the window header
Default
"Roadmap · H2 2026" - workspacestring
Workspace name in the breadcrumb
Default
"remocn" - theme"light" | "dark"
Light or dark palette
Default
"light" - accentstring
Accent color for highlights, buttons and progress
Default
"#3B5BFD" - speednumber
Playback speed multiplier for the whole timeline
Default
1 - groundGshPresetId
gradients.sh preset id for the backdrop shader
- groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters