Gantt Timeline
Task bars laid across a shared column grid. Install with npx remotion-ui@latest add gantt-timeline.
PrimitiveData & mediaAdvanced
$ npx remotion-ui@latest add gantt-timelineA schedule: task bars wiping out across a shared column grid.
import { GanttTimeline } from "@/remotion/primitives/gantt-timeline";
<GanttTimeline
tasks={[
{ label: "Registry build", start: 1, end: 4, progress: 0.8 },
{ label: "Launch", start: 7.6, end: 7.6, milestone: true },
]}
columns={["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]}
markerAt={5.5}
markerLabel="Today"
/>Column units, not pixels
start and end are positions on the column grid, so a task moves by editing
one number and every rule, bar and marker stays in register. Fractional values
are fine — 7.6 lands six tenths into the eighth column.
Bars wipe from their own start
Never from the left margin. The animation then says when a task begins as well as how long it runs. Rows stagger downward, which is the order a schedule is read.
progress draws a solid fill inside a dimmed bar, and it fills only after the
bar has finished wiping so the two readings never compete. milestone ignores
end and drops a diamond at start.
The marker
markerAt draws a dashed rule at any column position. Its label sits on a
filled chip, because the rule can land anywhere — including straight through a
column heading.
Positions are column units rather than pixels, so a task moves by editing one number and everything stays in register. Bars wipe out from their own start edge — never from the left margin — so the animation says when a task begins as well as how long it runs. The marker label sits on a filled chip because the rule can land through a column heading.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/gantt-timeline- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: tasks, columns, width, rowHeight, 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 { GanttTimeline } from "@/remotion/primitives/gantt-timeline";
<GanttTimeline
tasks={[
{ label: "Registry build", start: 1, end: 4, progress: 0.8 },
{ label: "Launch", start: 7.6, end: 7.6, milestone: true },
]}
columns={["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"]}
markerAt={5.5}
markerLabel="Today"
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| tasks | GanttTask[] | required | `{ label, start, end, progress?, color?, milestone? }` in column units. |
| columns | string[] | required | Column headings. Their count sets the span of the timeline. |
| width | number | 900 | Overall width, label column included. |
| rowHeight | number | 48 | Height of one task row. Type scales off it. |
| gap | number | 12 | Space between rows. |
| labelWidth | number | 240 | Width reserved for the task names. |
| markerAt | number | undefined | Column position for a dashed vertical rule, e.g. today. |
| markerLabel | string | undefined | Chip label on that rule. |
| durationInFrames | number | 24 | Length of one bar's wipe. |
| staggerInFrames | number | 8 | Frames between one row and the next. |
| exitAtInFrames | number | undefined | Frame the rows start leaving on, top-down. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |