Commit Graph
A branch graph that draws itself — every edge grows from its parent, and each commit pops the moment its line arrives.
SceneScenesAdvanced
$ npx remotion-ui@latest add commit-graphCommits land one at a time in a window styled like git log --graph. Each
edge grows from the commit it descends from, the dot pops as the line reaches
it, and the message beside it fades up a beat later — so the eye follows the
rail rather than jumping ahead to the text.
parent defaults to the previous entry, which is all a straight run needs.
Point it further back to fork a branch, put the fork's commits on lane: 1, and
set mergeFrom on the commit that brings it home; that commit draws two edges,
one per parent, in each parent's own lane colour.
Edges declare pathLength={1}, so the dash offset that reveals a segment is the
same number as the commit's progress whether the segment is a one-row vertical
hop or a long merge curve. A fork and a straight run therefore draw at the same
apparent speed instead of the curve appearing to rush.
Fork and merge curves leave their parent vertically and arrive vertically, which is what makes them read as lane changes rather than diagonal shortcuts.
stepSeconds sets the pace for both the edge and the commit that follows it,
so a longer history is a matter of lowering it rather than restaging the beats.
`parent` defaults to the previous commit, so a straight run needs nothing; point it further back to fork and set `mergeFrom` to bring the fork home. Edges use pathLength={1}, so a long merge curve and a short vertical hop draw at the same apparent speed, and a commit dot only pops once the line feeding it has arrived.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/commit-graph- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: commits, windowTitle, startAtSeconds, stepSeconds, 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 { CommitGraph } from "@/remotion/scenes/commit-graph";
<CommitGraph
commits={[
{ message: "Seed the registry manifest", hash: "9c41f0a" },
{ message: "Add render queue worker", hash: "3ab77e2" },
{ message: "Branch: retry backoff", hash: "d0e91c4", lane: 1, parent: 1 },
{ message: "Cap retries at five", hash: "51b2fa8", lane: 1 },
{ message: "Ship caption presets", hash: "7f30dd1", lane: 0, parent: 1 },
{ message: "Merge retry backoff", hash: "b8c4e05", parent: 4, mergeFrom: 3, ref: "main" },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| commits | GraphCommit[] | 6 sample commits | Message, hash, lane, parent index, optional mergeFrom lane and branch ref chip. |
| windowTitle | string | "git log --graph --oneline" | Text in the title bar. Omit to drop the chrome header. |
| startAtSeconds | number | 0.34 | Second the first commit lands. |
| stepSeconds | number | 0.36 | Seconds between commits. Each edge draws over this same gap. |
| holdSeconds | number | - | Seconds the finished graph holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Trunk colour, and the branch ref chip. |
| laneColors | string[] | 4 lane colours | Colours for branch lanes 1 and up. Lane 0 always takes accentColor. |
| backgroundColor | string | - | Page behind the window. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |