# Roadmap Timeline
URL: https://remocn.dev/docs/product-scenes/roadmap-timeline

A project roadmap draws its bars, a cursor drags one later while dependents shift, then a toast confirms.

- Install: `npx shadcn@latest add @remocn/roadmap-timeline`
- Vibe: clean
- Natural length: 158f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/roadmap-timeline
```

## Usage

```tsx
// 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `14` | Days the dragged project moves; positive is later |
| `startMonth` | `number` | `6` | First visible month, 0-based (6 is July) |
| `monthCount` | `number` | `5` | Number of month columns shown |
| `year` | `number` | `2026` | 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` | `number` | `1` | 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 |

## Use when
- A planning or project-management launch where rescheduling must feel effortless.
- A beat that shows dependencies reacting automatically when a date moves.
- A half-year roadmap for a customer or investor update video.

## Don't use when
- You want a launch-date calendar, not a Gantt chart — use `calendar-pick`.
- You want a video editor timeline — use `timeline-editor`.
- You want a ranked list that reorders itself — use `leaderboard-climb`.