Org Chart Team Growth

About this style

Organizational charts date back at least to the 1850s, when the New York and Erie Railroad, under its general superintendent Daniel McCallum, diagrammed its management structure. Today HR and people platforms generate them from employee records, so the chart redraws itself whenever someone joins, moves or starts a new team. Promos for these tools often use growth as the story: a small founding team becomes a company as new hires slide into place and departments split off. The format works when the chart stays legible as it grows, connectors follow clean elbow routes rather than tangled lines, and the headcount on screen matches the people a viewer can count.

Make a 10-second org chart promo on a dark canvas: the chart builds itself from the CEO down to four department leads and their first reports, then a quarter of hiring plays out on a timeline scrubber as fourteen new hires slide into place, two new teams form and the headcount climbs from 9 to 23.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Saplin, an HR and org chart platform (fictional). Wordmark: "saplin".
- Company: Halyard Labs (fictional). Header: "Halyard Labs" over "Org chart · Q3 2026".
- CEO: Noor Haddad, "CEO & co-founder".
- Leads (department · person · title): Engineering · Tomás Reyes · "CTO"; Product · Grace Oduya · "Head of Product"; Sales · Felix Brandt · "Head of Sales"; People · Mei Lin Zhao · "Head of People".
- Starting reports: Engineering: Sam Park "Engineer", Ola Nilsen "Engineer"; Product: Ines Duarte "Product Designer"; Sales: Ravi Menon "Account Executive". Starting headcount: 9.
- Hires, in order (name · title · team · join date):
  Dev Kapoor · Engineer · Engineering / Platform · Jul 7
  Bea Santos · Product Manager · Product · Jul 14
  Marta Novak · Account Executive · Sales · Jul 21
  Lucía Ferrer · Engineer · Engineering / Platform · Jul 28
  Amara Okeke · Mobile Lead · Engineering / Mobile (new team) · Aug 4
  Priyanka Rao · Recruiter · People · Aug 11
  Theo Lambert · Mobile Engineer · Engineering / Mobile · Aug 18
  Zara Whitfield · Head of Customer Success · Customer Success (new department) · Aug 25
  Kofi Asante · Product Designer · Product · Sep 1
  Omar Saleh · Support Specialist · Customer Success · Sep 8
  Jonah Weiss · Engineer · Engineering / Platform · Sep 12
  Hye-jin Seo · Mobile Engineer · Engineering / Mobile · Sep 16
  Leo Fischer · Account Executive · Sales · Sep 22
  Jun Ito · Support Specialist · Customer Success · Sep 29
- Final team sizes (reports under each lead): Engineering 8, Product 3, Sales 3, Customer Success 2, People 1. Final headcount: 23, "+14 this quarter".
- Detail card at the end: "Zara Whitfield" · "Head of Customer Success" · "Joined Aug 25 · 2 reports".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a clean, modern people-platform chart on a dark graphite canvas: soft-edged cards, initials avatars in team colors, crisp elbow connectors, a timeline scrubber that makes the growth feel like time passing. Each department owns one muted color; everything else is neutral. It must stay calm and legible even at 23 people: growth by reflow, never by clutter.
- Palette: canvas #131417 with a faint dot grid #1B1D21 every 28px; surfaces #1C1D21; raised cards #24262B with a 1px #30333A border; text #F1F2F4; secondary #9599A3; faint #5F636C; connectors #3D414A at 1.5px, highlighted #C9CDD4; team colors Engineering #5EC4F2, Product #F28B6B, Sales #F2C14E, Customer Success #7ED6A5, People #E79BD0. Avatars are the team color at 22% with initials in the team color; the CEO's avatar is #F1F2F4 at 18% with #F1F2F4 initials. "NEW" pills #F1F2F4 with #131417 text. Nothing glows.
- Type: Red Hat Display 700 for the company name (30px) and lead names (17px), 500 for member names (16px); Red Hat Text 400 and 500 for titles (13px) and labels (15px); Red Hat Mono 500 for the headcount (64px), badges (13px), team labels (11px tracked 0.16em), dates (12–13px) and "NEW" (10px).
- Layout:
  - Header: the Saplin mark (a 16px cream sprout of two leaves) and "saplin" Red Hat Display 700 16px secondary at x 80, baseline y 48; "Halyard Labs" at x 80, baseline y 88; "Org chart · Q3 2026" 15px secondary at baseline y 114. At the right: the headcount right-aligned to x 1740 at baseline y 96 with "people" 18px secondary at x 1752; a chip "+14 this quarter" (#24262B, radius 12, 13px) right-aligned to x 1840 at y 110–134.
  - CEO card centered at (960, 170), 300 × 76 (y 132–208), radius 14: a 44px avatar, the name 18px 700 and the title 13px secondary.
  - Connectors are orthogonal with 8px rounded corners: a trunk from (960, 208) down to a bus at y 250 spanning the column centers, and a drop from the bus to the top center of each lead card.
  - Columns: four at the start, centered on x 360, 760, 1160 and 1560 (Engineering, Product, Sales, People); five after Customer Success forms, centered on x 280, 620, 960, 1300 and 1640 (Engineering, Product, Sales, Customer Success, People).
  - Lead cards, 280 × 76 at y 290–366 (column center ± 140), radius 14, a 3px team-color top border: a 40px avatar centered at (center − 104, 328), the name at x center − 76, baseline y 322, the title at baseline y 342, and a reports badge (a #30333A pill with the count) at x center + 92 to center + 128, y 316–340.
  - Member rows hang below each lead: a spine runs down from the lead card's bottom at x center − 116, with a 16px stub to each row; rows are 44px tall at tops y 414, 464, 514 and so on; a 32px avatar centered at x center − 84, the name at x center − 60, baseline row top + 19, the title at row top + 36.
  - Engineering's teams: once Mobile exists, "PLATFORM" in the Engineering color at x center − 100, baseline y 404 heads the Platform rows (Sam, Ola, Dev, Lucía, Jonah), and a dashed 1px Engineering-at-50% rounded box (radius 12) from x center − 128 to center + 140 holds "MOBILE · NEW TEAM" at its top-left and the rows Amara, Theo, Hye-jin; Amara's title is in 500 weight. The box's top sits 14px below the last Platform row's bottom: y 622–808 while Platform has four rows, y 672–858 once Jonah joins; inside it the label's baseline is 22px below its top and its rows start 34px below its top, 50px apart. The Engineering spine runs down through the box to its last row.
  - Customer Success: Zara's lead card with a "NEW TEAM" chip (Customer Success color at 22%, 11px mono) centered at x center + 60, y 374–394; Omar and Jun beneath.
  - The scrubber: a 1px #30333A line from x 140 to 1780 at y 1000 mapping Jul 1 to Sep 30 (91 days); ticks and labels "JUL", "AUG", "SEP", "SEP 30" in 12px faint at baseline y 1024 (Aug 1 at x 699, Sep 1 at x 1257); a 12px cream playhead dot with the current date above it ("Jul 14") in 13px cream at baseline y 984; each hire leaves a 2 × 10px tick in its team color at its date.
- Hiring: the playhead runs Jul 1 to Sep 30 across 2.4–5.4 s, and each hire joins when it passes their date (Jul 7 at 2.60 s, Jul 14 2.83, Jul 21 3.06, Jul 28 3.29, Aug 4 3.52, Aug 11 3.75, Aug 18 3.98, Aug 25 4.21, Sep 1 4.44, Sep 8 4.67, Sep 12 4.81, Sep 16 4.94, Sep 22 5.14, Sep 29 5.37). A joining row slides in from 40px right and fades in (0.35 s, easeOutCubic), its avatar pops on easeOutBack (1.8), the spine extends down to it and its stub draws (0.15 s). A "NEW" pill shows after the name for 1.0 s, then shrinks into a 6px dot in the team color at the row's right end (x center + 128), which stays. The lead's badge, the headcount and "+N this quarter" each step up by one with a 0.15 s vertical roll.
- New teams: when Amara joins, the Mobile box's dashed outline traces around its rows (0.4 s), its label types and "PLATFORM" fades in. When Zara joins, the columns reflow to their five positions (0.5 s, easeInOutCubic) with every row, spine and badge moving with its column, the bus stretches to the new span, Zara's card scales in from 0.9 at x 1300 as its drop draws from the bus, and the "NEW TEAM" chip fades in. When Jonah joins, the Mobile box and its rows move down 50px (0.35 s, easeInOutCubic) to make room.
- The cursor appears only at the end: an original arrow drawn in SVG, 24px, #F1F2F4 with a 2px #131417 outline.
- Premium: a chart that stays orderly at every frame, growth by smooth reflow, numbers that match the boxes you can count, dates that make the quarter feel real. Cheap: photos or cartoon faces, a tangled radial tree, glowing nodes, confetti for each hire, nodes that pop in without connectors, a counter that disagrees with the chart.
- Banned: photos, real people, real company names, logos and UI copied from existing products, glows, confetti, emoji, curved spaghetti connectors, gradient backgrounds, purple, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the CEO card scales from 0.92 and fades in; its name and title rise in; the headcount reads 1.
- 0.6–1.0s: the trunk draws down and the bus draws outward from the center to both ends.
- 0.8–1.6s: the four lead cards drop 12px and fade in from left to right, 0.12 s apart, each as its drop connector reaches it; the headcount steps to 5.
- 1.4–2.2s: the starting reports join (Sam 1.4 s, Ola 1.5 s, Ines 1.6 s, Ravi 1.7 s); badges read 2, 1, 1 and 0; the headcount reaches 9.
- 2.2–2.4s: the scrubber fades in at Jul 1; the chip reads "+0 this quarter".
- 2.4–5.4s: the quarter plays: the playhead moves linearly to Sep 30 and the fourteen hires join on their dates; Mobile forms at 3.52 s, Customer Success forms with the reflow at 4.21 s, and the Mobile box moves down at 4.81 s.
- 5.4–5.9s: the last "NEW" pills shrink to dots on schedule; the playhead's date reads "Sep 30".
- 6.0s: the hero frame: the CEO, five lead cards with badges 8, 3, 3, 2 and 1, all 23 people with their dots, the Platform label and the Mobile box, the "NEW TEAM" chip, the headcount 23 with "+14 this quarter", and the scrubber with fourteen ticks.
- 6.5–7.1s: the cursor enters from (1880, 900) and rests on Zara's card at (1300, 328); at 7.0 s her line to the CEO (her drop, the bus between, the trunk) brightens to the highlighted color and the detail card fades up below the Customer Success rows at x 1160–1440, y 540–640 (#24262B, radius 12, 1px border: the name 16px 700, the title 13px, "Joined Aug 25 · 2 reports" in 13px mono).
- 7.1–10.0s: hold on the final frame: the full chart with Zara's highlighted line and detail card.
For other lengths, stretch the quarter's playback and the opening build; keep each join's 0.35 s slide, the reflow at 0.5 s and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: everything is drawn in SVG.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face (Red Hat Display 500 and 700; Red Hat Text 400 and 500; Red Hat Mono 500) before defining window.seek.
- Engine: SVG. One inline <svg viewBox="0 0 1920 1080"> scaled to fit; seek(t) sets attributes (transform, opacity, path d, stroke-dashoffset) and text content from t. No SMIL, no CSS animations. Keep one people array from the inputs with each person's team, join time and slot; seek(t) derives who has joined, each column's center (blending the four- and five-column layouts through the reflow), each row's position and every connector path from t alone, so the chart can be scrubbed to any moment.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the headcount always equals the number of people visible (9 at 2.3 s, 16 at 4.1 s, 23 from 5.6 s); every badge equals its column's reports; no names or titles are truncated or touch a neighbor column, including during the 4.21 s reflow; connectors stay orthogonal and attached during every move; the Mobile box always contains exactly its members; the playhead's date matches the last person who joined; the 6.0 s frame shows all 23 people, both new teams and the full scrubber; and the final frame shows Zara's highlighted line and detail card. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…