Iso Works

A system drawn as a small works on a pale floor: each part is a little isometric building in the colour of its job, what the system handles rides between them as cubes on belts, and every quantity is a stack of those cubes you could count. The viewer watches the thing run.

Essence, and what it is not

• A floor of isometric tiles running off every edge; everything stands on it, in one projection that never tilts.
• Each part of the system is a building coloured by its job: intake, process, store, output.
• What moves is a cube: cubes ride belts door to door, and a machine changes their colour as it works on them.
• A number is a stack of cubes, one cube to a stated unit.
• Words live on the works: names painted on walls, figures on signboards, a title cut into a plaque.

Not a technical drawing (no line work: solids in flat colour), not a flat icon slide (everything has depth), not Stage Light (a dark stage presenting things; here a pale floor where things run and pile up), not a dashboard (no cards: the chart is the stack).

Ground and material

floor.tsx: a warm pale floor (bg), a fine isometric grid in border with a slab joint every fourth line, a soft light from the upper left. Solids are flat colour in three tones of one base: top lifted toward white, +y face the base, +x face dropped toward cool ink (tones() in iso.ts). No outlines, gradients, shadows or textures. A hall has a sawtooth roof; a tank is a banded cylinder; a tower has rows of windows. Every component projects through iso.ts (origin, k).

Colour roles

• op teal: intake (arrivals, inputs, sources).
• data cobalt: process (sorting, computing, making). Also the caption's rule.
• warn mustard: store (stock, what accumulates), and stacks by default.
• grad coral: output (dispatch, delivery, results).
• faint grey: idle, and anything that is not the sentence's subject (components take dim).
• text ink for words, muted for posts, presses and small labels, panel white for signs and plaques, panel2 for belts' frames and interiors.
• good and bad only for a stated gain or loss.

A cube is the colour of the last job done to it. Never give two jobs one colour, and never colour a thing for decoration.

Type and captions

Hanken Grotesk throughout: wall names 700 at about 0.75 cell, sign figures 800 at about one cell (50 to 70 px), titles 800 at 1.5 cells, small lines 600 at 26 to 34 px. Text lies in the plane of its face (faceText): painted on, never floating. JetBrains Mono for code. Chinese: Noto Sans SC in every role. The caption is a white card with a cobalt rule at its left, ink at 34 px, a hairline edge: one more sign of the works.

Motion

Solids arrive by motion, never by fading: a building rises with a small overshoot (0.8 to 1 s, easeOutBack(1.4)), a sign's board unrolls up its post, a cube drops and lands. A belt is laid first (0.6 to 0.9 s), then cubes stream at one steady speed (travel tweened linearly to the scene's end). Stacks fill accelerating (easeInQuad), then hold still a second or more. A roof lifts and is put aside while the near walls drop. The floor and the projection never move.

Composition and framing

The works lies across the frame on its diagonal; the subject takes a third of its height or more. Belts run in front of buildings and turn in at their doors. Signs stand right of what they measure. Closer is a larger k for every part of a scene at once. Nothing below y 870.

Sound

Optional: a rubber hum under belts, a wooden knock as a cube lands, a hydraulic sigh as a roof lifts. No music.

Components

• compare — Stacks side by side (react/parts/stacks.tsx): Two to four stacks of one cube in a row across the frame, on one baseline, each with its sign; one unit for all, so heights compare honestly. Fits: then and now; this site against that one; the shares of a whole counted in the same unit
• data — Stack (react/parts/stack.tsx): A quantity as cubes you can count, dropping onto a pallet layer by layer while its sign counts what they stand for. Fits: how many per hour or per day; a stock that builds up; a total of equal units
• ground — Works floor (react/parts/floor.tsx): A pale floor of isometric tiles that runs off every edge of the frame; everything in the works stands on its grid. Fits: every scene, with the same origin and k as the parts standing on it
• link — Belt (react/parts/belt.tsx): A conveyor on the floor, or a rail on posts, laid from door to door; cubes ride it and can change colour on the way. Fits: goods, data or money moving between parts of a system; a step that changes what passes (sorted, paid, cleaned)
• mark — Sign (react/parts/sign.tsx): A white board on a post, standing on the floor in the plane of the works, with a chip of its role's colour, a short name and a figure. Fits: naming a quantity beside a stack; a reading at a station (per hour, per day); the key that says what one cube is
• term — Building (react/parts/building.tsx): A part of the system as a small building in the colour of its job, its name on its wall; it springs up from a plot marked on the floor, and its roof lifts aside to show the machine inside. Fits: a stage of a process; a service in a system; a department of a company
• title — Plaque (react/parts/plaque.tsx): A long low block standing on the floor with the title cut into its front face and a short line above it in a role's colour; it rises from the floor like the buildings. Fits: the question a film opens on; the name of the system about to be built; the result stated at the end

Native moves

• Stack the count. Cubes drop onto a pallet layer by layer while the sign counts what they stand for. Fits content like: parcels sorted per hour; tonnes of grain in a silo; servers in a data centre.
• Run the belt. A belt is laid from one door to the next, then cubes stream along it. Fits content like: oxygen from lung to muscle; packets from phone to server; water from reservoir to tap.
• Change on the way through. Cubes go into a machine in one job's colour and come out in the next. Fits content like: parcels scanned and sorted; light and water made into sugar in a leaf; raw data cleaned into a report.
• Lift the roof. The roof is lifted and put aside, the near walls drop, and the machine inside is seen working. Fits content like: what a sorting hall does; inside a power plant; what a mitochondrion does in a cell.
• Raise the works. Buildings rise from their plots one by one as the narration names them, until the system stands. Fits content like: the parts of a company; a city's water system; the services behind an app.
• Grey the rest. Everything but the subject drops to idle grey and keeps its shape. Fits content like: the one slow step; the department that costs most; the link that failed.

Avoid: pitfalls

• A belt between two buildings in a row is hidden by the nearer. Fix: run it in front, turn in at the doors.
• Parts of one scene with different origin or k float apart. Fix: one view object spread into all.
• A stack with no unit said is decoration. Fix: a sign that says what one cube is.
• Stacks in different units compare nothing. Fix: one per for all.
• A stack behind another looks taller. Fix: stacks side by side on one screen baseline.
• A far building drawn over a near one. Fix: the nearer part gets the higher z.
• Every building in colour: no subject. Fix: dim what the sentence is not about.

Freedom in each work

Each film decides its system, layout, the unit of a cube, where each scene looks, the opening and the ending. Three far-apart structures: a works raised building by building as the process is walked; one machine opened and a single cube followed through it; a pair of stacks per scene, building to one total.