Org Chart Build
A hierarchy assembling top-down — connectors draw down from the parents already standing, and nodes land on the ends of the lines.
SceneScenesAdvanced
$ npx remotion-ui@latest add org-chart-buildThe root lands, its connectors draw downward, and the next level's nodes arrive on the ends of those lines — so the chart builds the way someone would draw it, rather than fading in as a finished diagram. Every connector leads its child by about a third of a second, which is long enough to read as cause and effect and short enough that the chart never feels like it is waiting.
Positions come from a leaf walk rather than a grid. Leaves are spread evenly across the width and each parent centres over the span of its own children, so a lopsided tree — three reports on one side, one on the other — stays balanced without any node needing to know its siblings' widths.
Connectors are elbows, not diagonals. Org charts are read as columns of authority; a straight line between two boxes reads as a relationship of a different kind entirely.
Nodes are a flat array with parent indices, which keeps the data trivially
serialisable — parents must appear before their children. Depth picks the node's
colour from levelColors, so a fourth level reuses the last entry rather than
running out.
Positions come from a leaf walk rather than a grid: leaves spread evenly and each parent centres over the span of its own children, so a lopsided tree stays balanced. Connectors are elbows, not diagonals — a straight line between two boxes reads as a different kind of relationship entirely. Three levels fits 1080p comfortably; a fourth wants a taller frame rather than a smaller node.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/scenes/org-chart-build- Use when: data stories, metrics, charts, and numeric proof points.
- Customize: nodes, title, startAtSeconds, levelStaggerSeconds, 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 { OrgChartBuild } from "@/remotion/scenes/org-chart-build";
<OrgChartBuild
title="How the team is wired"
nodes={[
{ name: "Ada Okonjo", role: "Founder" },
{ name: "Piotr Nowak", role: "Engineering", parent: 0 },
{ name: "Dai Nakamura", role: "Design", parent: 0 },
{ name: "Sam Rhodes", role: "Infrastructure", parent: 1 },
]}
holdSeconds={3.4}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | OrgNode[] | a 7-person tree | Name, role and a `parent` index. Omit parent for the root; parents must appear before their children. |
| title | string | "How the team is wired" | Heading above the chart. Omit to drop it. |
| startAtSeconds | number | 0.34 | Second the root lands. |
| levelStaggerSeconds | number | 0.62 | Seconds between levels. Connectors lead their child by 0.34s inside that gap. |
| siblingStaggerSeconds | number | 0.12 | Seconds between siblings, ordered left to right by position. |
| holdSeconds | number | - | Seconds the finished chart holds before it retreats. Omit to leave it up. |
| accentColor | string | "#E8B86D" | Role line on the root. |
| levelColors | string[] | 3 depth colours | One colour per depth. Deeper levels reuse the last entry. |
| backgroundColor | string | - | Page behind the chart. Defaults to the theme page colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |