Isometric Infographic — our demo

One example among many. Don't reuse its story, arc, shots, props or timings.

Demo: From Bean to Cup (58.8 s) · iso-infographic.mp4 · source in demo/

The demo follows one coffee bean from a farm to a cup in a 45–60 s film: one isometric map, one camera take, a Z-shaped route across a square board.

Story & structure

The whole film is one isometric map: a square diorama board that projects to a rhombus of almost exactly 16:9. Every step of the process is a station on that board. A dashed route line connects the stations. The camera never cuts. It rides the route with pushes, pulls, pans and follows, and each station is told the same way: one action, one label, one number built from icons.

What makes it work: - Flat, true isometric. No perspective, no outlines. Shapes are separated only by the three tones of each face. - Infographic furniture is part of the picture. Leader lines, label pins, cut lines, hatched section faces, tracking rings and a legend all live on the map. - One tracked subject. A single object (a bean, a parcel, a drop of water) is followed through the whole system with a "you are here" ring. That turns a diagram into a story.

How the demo used the medium:

Story shape (as in the demo): 1. Open on an extreme close-up of the subject arriving in a hand, with a tag: 0 km. 2. Pull back to the first station and the title. 3. Numbers grow station by station (2 seeds → 400,000 beans per sack → 14,000 containers). The subject gets lost. 4. At the busiest point, dive through nested cutaways and find it: the silence, and the only colour left. 5. The loudest sound in the film breaks the silence, and the camera snaps back out. The time jump is hidden inside the dive. 6. Transformation stations, a second silence, then the gentle payoff. 7. Echo: the same close-up composition, a different hand and a different object, and the tag now reads the total. Pull back to the full map.

The numbers must add up. This style lives on credibility: 400 + 10,500 + 100 = 11,000 km, and the Isotype bar is coloured in the same proportions. Put the real order of the process on screen (in the demo, beans are shipped green and roasted in the destination country) and say why in your treatment if you change a brief.

Shots

The camera is a world centre plus a log-interpolated zoom k (px per unit). The demo runs from k = 3.75 (whole board) to 8,000 (one bean).

Frame so the subject is at least 1/3 of the frame height at key moments (the hands, the drum, the bean with its ring), and keep the bottom 170 px clear for subtitles.

• Nothing moves without a line leading it. The route line is drawn slightly ahead of the story, a leader grows before an inset opens, and a cut line draws before a skin slides away.
• Cutaway timing: cut line 0.3 s → skin slides out 0.35 s (ease-out, alpha 1 → 0 between 10 % and 75 %) → hatched rims fade in over the last 40 %.
• Isotype fill: icons pop with a back-ease (overshoot 2.2), one per sixteenth note. Count-up numbers (km, °C) run over the same span.
• Accumulation = acceleration. In the demo, containers land on quarter notes (by crane), then eighths, then four sixteenth-note waves of about 44 boxes each (they drop 7 units with a small bounce). The eye feels the system taking over.
• The subject performs: squash on landing (18 %) plus two small bounces; a rock with the ship's sway during the silence (±0.09 rad); a colour change in the roaster (green #A9B27C → yellow #D9C27A → cinnamon #B07A45 → brown #6A3B22); first-crack pops as radiating ink ticks.
• Vehicles follow polyline paths with ease-in-out and face their tangent. Before a ship turns, move it clear of the quay; otherwise the stern swings through the cranes.

Score structure

• Music first. demo/timeline.js is the only source of truth for times. The score, the foley events and the checks all read it (tools/cuecheck.py: 68 cue points, 0 ms offset).
• Score: original acoustic world groove, about 100 BPM. Nylon guitar fingerpicking (D–A–Bm–G) and kalimba, then shaker, bongo, cajon backbeat and conga, plus upright bass (jazz_bass) at the port and at sea. The fast-forward takes a B-minor colour. No piano, no string pads. A three-note bean motif on kalimba (A4–F#4–D4) plays on the first landing, on the final tag and in the station arpeggio at the end. The café section slows from 100 to about 70 BPM and stops; after the silence one guitar restarts at 80 BPM.
• Two real silences: the dive (30.0–33.6 s; only the line and a −66 dB hull creak) and before the first drop of coffee (45.3–45.9 s; digital zero). The first sound after each is one of the most important in the film: the ship's horn (about 10 dB above everything else; a D2 saw stack with detune and a 2.8 s tail) and one drop into an empty cup.
• Three layers:
• Ambience beds, one per station and crossfaded: hill wind, leaves and birds; harbour, gulls and a crane beeper; sea swells; city hum; café murmur; morning sparrows (the same bird synth as the hill, pitched up).
• Foley by material: fibre snap for the stem, a fleshy thud for the cherry in the palm, granular rattles for cherries on the mesh, grains pouring into jute, inharmonic steel partials for container doors and landings, a burlap tear, drum rumble with rotation, dry crack pops, grinder whine plus crunch, a tamp thock, a ceramic plink and a pitch-rising pour.
• Music, ducked about 8 dB under the voice. Ambience is ducked 7 dB and birds are muted while the narrator speaks: a bird chirp at the end of a word made whisper hear "travels" for "travel".
• Sound transitions: a J-cut of harbour noise 0.6 s before the port appears, the roaster drum 0.6 s before its walls open, and an L-cut of the horn tail into the city. In the final pull-back, each station plays one kalimba note.
• Voice: Kokoro bf_alice at 0.88–1.0, six short lines, every one whisper-verified on the dry take and again in the final mix.

Palette & props

• Projection: true isometric, axes at 30°. sx = (x − y)·cos30°·k, sy = ((x + y)·½ − z)·k. World x runs down-right, y down-left, z up. Painter depth = x + y + z. Never rotate or tilt the view.
• Three tones per face (top light / left = +y face mid / right = +x face dark), picked per face from its normal:
• coffee red #CF5140 / #B3352B / #8C2620
• leaf green #7BA75F / #5E8C4A / #476F37
• sea blue #5A9BCB / #3C7FB1 / #2D6390
• cream #FBF4E6 / #F2E6D0 / #D9C8A9
• soil #A77850 / #8A5B3A / #6A432A
• mustard (cranes, road) #E9BE5C / #D9A53A / #B0832A
• ink #2E2522
• Other colours come from tri(c): mix toward warm white 20 % for the top and toward #231A2C 22 % for the dark side, so shadows are slightly cool.
• No outlines on solids. Ink lines (2 px) are reserved for infographic elements: leaders, pins, cut lines, rings, the route and labels.
• The board: it floats on a cream #F2E6D0 background with a faint isometric dot lattice and a soft blurred shadow. Its two front faces show three soil strata plus pebbles, and a three-blue water column where the sea meets the edge. Coast banks are only drawn where they face the viewer.
• Stations that must be found in the wide shot get a pale cream plate with a dashed ink outline and an accent colour (brick-red roastery, red-and-cream awning café). Keep buildings around them low.
• People: Monument-Valley-minimal billboards with a round head, a tapered body in two tones, a thick arm stroke and a hat or hair shape for identity. No faces. They step at 12 fps.
• Hero close-ups (hands): flat faceted shapes in three skin tones (light palm facing up, mid sides, dark underside), a sleeve in the character's colour, and fingers as rounded two-segment capsules curling toward the viewer. The opening and closing hands share the same pose, camera, zoom and tag position. Only the skin tone, the sleeve and the object change. The pair side by side: demo/stills/frame_hands.jpg (3.4 s and 50.9 s).
• Labels (pins): a dot (ink ring, cream fill) → a vertical leader → a horizontal rule → text. Titles are Jost 600, all caps, tracking 0.12 em. Numbers are Jost 400 at 44 px, and units Jost 500 at half size. Text has a 7 px cream halo so it reads over any colour. Pins can point up or down and left or right; choose per station so labels never cover the subject.
• Title: Jost 700 words extruded as isometric blocks on a cream plate lying on the ground plane (cream face, coffee-red sides), one word per eighth note.
• Clouds: flat isometric clouds with fake parallax (1.25× the ground's motion). They fade out above k ≈ 40.

Titles, subtitles & end card

• The subtitle is a map label. A cream #FBF4E6 card with 10 px radius and a 2 px ink border, a tiny coffee-red iso cube as the legend chip, Jost 500 at 42 px in ink. It sits bottom-centre, 64 px from the bottom edge. The border draws in first (0.2 s) and the text wipes left to right; on exit it slides down 8 px and fades.
• Hold each line ≥ max(1.8 s, speech + 0.6 s). Lines never overlap each other, the title or the end card.
• End card = the map's legend, shown in the empty cream corner: title, style name, total with the Isotype bar, "Lemo-Opuscar · LemoLab × Claude Opus 5.5", credits. "NOT TO SCALE" is honest and a small joke. The "Lemo-Opuscar · LemoLab × Claude Opus 5.5" sign-off belongs to this library's demo only: a user's film carries no LemoLab credit and no copy of this card.

Pitfalls

• Newell normals versus vertex order: a box's +y face can be culled as a back face. Give every face an outward hint (out) and flip the normal to match it before culling.
• Painter sorting of composites: shrubs on a terraced hill appear in front of the next terrace. Draw the hill as one item: each terrace, then its back row of shrubs, and after all terraces the front rows from top to bottom. Cranes' booms need a large depth bias so they sit above the ship.
• Semi-transparent falling boxes look like ghosts. Use motion only, no alpha.
• The ship's bow over the beach reads as "run aground" even when it is geometrically in water. Leave visible water around every hull. Undock by translating clear of the quay before turning.
• The time jump inside the dive: the ship teleports from mid-ocean to the destination dock while only beans fill the frame. Draw the bean field in screen space, anchored on the tracked bean and scaled by k; its layout then does not depend on the ship's heading, and the jump is invisible.
• Giant world geometry behind hero close-ups: at k = 600 a shrub is a green disc the size of the frame. Skip shrubs above k = 120 and paint a flat backdrop behind the hero layer, fading with it.
• The pull-out passing through a crane gives one ugly frame of a giant boom. Fade tall objects in by zoom (alpha = clamp((80 − k)/40)).
• whisper and ambience hiss: a continuous leaf rustle (2.5–7 kHz) after a word turns "travel" into "travels". Keep high-band beds very low under dialogue.
• A machine drawn as a white box with a red roof reads as a house. Use steel greys, a dark front panel, cups on top and a portafilter handle.
• In zsh a failed glob aborts an && chain, so run shell loops through bash -c.

Build notes

styles/iso-infographic/demo/
  timeline.js   tempo grid, cue times, subtitles, km numbers (single source of truth)
  engine.js     the style: projection, camera, 3-tone solids, labels, insets, cutaways, Isotype, people, any-shape extrusion
  world.js      the board: coasts, terraced hill, beds, roads, ports, ship, cranes, city, cutaway buildings, hold/containers/sacks
  hero.js       close-ups: palm, picking fingers, branch, cherry, cup, km tag
  film.js       camera path, story state, stations, overlays, subtitles, title/end card, sound events
  music/score.py   original score (sampler)      mix.py   ambience + foley + voice + ducking
  tools/        cuecheck.py subs.py final_asr.py review.sh      tests.js   hero + any-shape test scenes

1. Write timeline.js and the cue map first. Draw the board as a square in world units (S = 240). Lay out the Z route, then the stations.
2. Build the station scenes, reviewing each at its zoom with ?k=…&cx=…&cy=… stills. Render the two hero close-ups on their own (?test=hero, ?test=hero&end=1) until they match.
3. sh demo/build.sh rebuilds everything in about 2 minutes: TTS → whisper → score → events → cue check → mix → srt → render (1,411 frames in about 35 s with 2 workers) → mux (−14 LUFS, grain 0) → final whisper → stills.
4. Review with bash demo/tools/review.sh out/revN 6 $(seq 0.3 1 58.3) at least twice, plus frame strips of the dive, the snap-out, the landing and the pour taken from the muxed mp4.

Engine reference

demo/engine.js is dependency-free ES module code for Canvas 2D. Everything is queued and depth-sorted until flush().

Minimal example: a warm-orange #D97757 four-point spark with a cursor tail on a plinth, labelled (?test=spark, output in demo/stills/engine_shape.jpg):

import { Iso, PAL, shape, sparkPath, cursorPath, pin } from './engine.js';
const iso = new Iso(ctx); iso.cam = { x: 0, y: 0, z: 2.5, k: 70 };
iso.box(-6, -6, -1, 12, 12, 1, PAL.cream);                                          // plinth
for (let i = 0; i < 5; i++) iso.box(-5 + i * 2.2, 3.2, 0, 1.6, 1.6, .6 + i * .5, PAL.blue);
iso.keep = true;                                                                    // the one element that keeps its colour
shape(iso, sparkPath(4, 2.2, .22), [-1, -1, 5], { color: '#D97757', depth: .9, plane: 'xz' });
shape(iso, cursorPath(2.4, .45, 2.7, 0), [-1, -1, 5], { color: '#D97757', depth: .9, plane: 'xz' });
iso.keep = false;
iso.desat = 0;          // set 1 to grey everything except the spark (focus + context)
iso.flush();
pin(iso, 0, -1, 7.6, { title: 'ANY SHAPE', num: '#D97757', dir: 1, up: 90, a: 1 });