Branching Growth

Why it works

Going from one dot to thousands uses only black lines, black dots, and paper texture. Growth is slow at first and fast later, which turns scale into a visible rhythm. The big nodes and the small end dots differ greatly in size, so the layers read at a glance. The doubling version advances by doubling the count each beat, with no arrows or numbers.

Spec

Timing

Film 11s. Tree on paper 0.45-3.2s: layers 1-3 take 0.5s each (0.45-1.95s), layers 4-6 take 0.333s each (1.95-2.95s), layer 7 at 2.8-3.2s; camera pull-back 0.45-3.45s; six nodes turn green 2.9-3.4s; dive into one node 3.95-4.35s, then a 4-frame darken to the dark scene. Doubling beats at 4.48, 4.95, 5.5, 6.1, 6.7, 7.3, 7.9s (1, 2, 4, 8, 16, 32, 77 documents); slate at 8.4s with tagline at 8.7s, holding to 11s

Easing

Nodes pop with cubic-bezier(0.34,1.56,0.64,1); each line is drawn outward from its parent with 1-(1-p)^2.4 over 60% of the layer window, then its dot pops at 92% of the line; the pull-back interpolates log-scale (constant zoom rate); the dive eases scale with t^3 and position with t^2; the document re-deal steps at 8fps; slate letters expo.out 0.4s

Camera

Starts at scale 2.0 with the root low in frame (330px bias) and pulls back over 0.45-3.45s until the network is about 80% of frame width, centered on the tree extents; dives into one green node over 3.95-4.35s until it fills a 44px radius; the dark scene is fixed; the slate pushes 1.035x over 2.6s

Subject

Root dot (radius 34) with 7 layers below it. Layer 1 splits in 2 at ±31 degrees; layers 2-6 split in 2 or 3 (45% chance of 3) at ±34-38 degrees with ±5.5 degrees jitter and a bend toward radial; layer 7 splits in 2 or 3. Radius 24, 17, 12, 8, 5.6, 3.6, 1.9; edge length 300, 235, 195, 150, 110, 80, 42 (times 0.88-1.12); line width 1.9 down to 1.0. Six nodes labeled as documents turn green at 1.3x scale with a 0.7s ring pulse. Doubling scene: document cards (10 kinds) re-deal on a grid at 8fps, card scale 2.0, 1.9, 1.7, 1.25, 1.0, 0.78, 0.64, new cards pop at 0.8 then 1.05 then 1 over 3 frames, 40% carry a green status dot

Style

Paper #e3d5b5 with fibers, specks and a warm vignette for the tree and slate; near-black grain (about #0d0d0c) for the doubling beats; pencil ink #1d1b18 with graphite gaps and burr strokes; the only accent is green #3cc24a, used for activated nodes, the status dots and the last slate node. Wordmark Inter 600 168px, letter-spacing -0.045em; tagline Inter 400 30px #6b5e3f

Prompt

People describe it as

• A dot slowly branches into a big web
• One dot becomes two, then four, then fills the screen
• Thin lines merge and flow in one direction

Often confused with

• Iris Window MontageIris Window Montage cuts rapidly between images in a fixed frame; Branching Growth is one structure that keeps getting bigger.
• Glass Droplet SplitGlass Droplet Split is one shape shedding one bead; Branching Growth is a multi-level structural expansion.