Foreman: a toy factory where you catch the robot that goes wrong
The story behind Foreman
Premise A toy for AI agents: an invented product, Foreman, that orchestrates, monitors and corrects a line of agents in real time, shown as a tabletop toy factory. Audience: web-literate visitors arriving from X or the archive. Perf target: under 5 ms a frame on an M4, with the machine staying quiet
Reference Warm studio photography of vinyl toys and miniature assembly-line dioramas, shot from above on felt
Built with Three.js 0.186 (WebGL2), pmndrs postprocessing, N8AO, WebAudio
Techniques A fixed-step line simulation with keyframed robot cycles; two-bone IK arms on substepped springs; a pose history played backwards for the wind-back; a parcel wall that carries the campaign and breaks when a fault goes uncorrected; an in-world controller with a canvas screen; a pixel budget, a 30 fps idle and a pause when hidden
Direction Dark blue felt under one warm key, yellow vinyl robots, kraft parcels with red tape, a cream 1960s-style controller with green and red lamps. Familjen Grotesk for the page and for everything printed in the world
The Story
Running AI agents is mostly watching. Most of the time they do the work, and some of the time one of them goes wrong, quietly, and the mistake travels down the line. Foreman is an invented product for that job: it sets the pace, watches every agent, and lets you catch the one that slips and wind it back before the error lands.
This piece turns that into a toy. The agents are six little robot arms on a conveyor. The product is the cream controller in the foreground. The campaign is the work itself: a wall of finished parcels at the back that spells FOREMAN and “Keeps your agents on the line.”
The Take
The page opens on a busy line. Parcels come down a chute, and six yellow arms pick, tape, label, stamp, inspect and stack them, each with a round lamp on its head. A few seconds in, robot 03 flings its parcel off the belt. Its lamp goes red, a red ring opens on the felt around it, and a ”!” bobs overhead.
- Tap anywhere and the robot that went wrong winds back. A fan of pale ghost poses traces its last few seconds as it runs them in reverse, the parcel flies back into its grip, and it does the step again, properly.
- Leave it, and the mistake goes into the work. After five seconds the fault lands, and one letter of the wall gets crushed or turned on its side. Correct that robot later and the tile lifts out, turns the right way and drops back in.
- Turn the PACE dial to speed the line up. A faster line makes more mistakes.
- Watch the controller. One AGENTS lamp per robot, a MONITOR screen with one live trace each, where every fault shows as a spike.
- Hit CORRECT to fix every faulting robot at once.
- Walk away, and after twenty seconds Foreman starts correcting faults by itself, which is the product doing its job.
The Tech
A real line, not an animation. The factory is a small simulation stepped 120 times a second. Each robot runs a cycle of keyframed moves with a snappy ease and a slight overshoot, so they move like wind-up toys. Parcels queue on the belt with a fixed gap and wait at any station that still owes them a step, so when one robot stalls, the line bunches up behind it. Faults are drawn from four kinds: a fling, a wrong pick, a stall and a spin. They come every six to nine seconds and more often at a faster pace.
The wind-back. Every robot records its last few seconds of grip position and the parcel it was handling. When you correct it, that history plays backwards over 0.8 seconds on a curve that starts briskly. Then the robot restores its state from before the fault and does the step again. The ghost fan comes from the same history: six snapshots, a third of a second apart, drawn as unlit pale-blue silhouettes that fade with age, so you can see the move that went wrong.
Arms with weight. Each arm is a two-bone IK chain reaching for a grip point that the simulation moves. The grip follows a stiff spring, which gives the arms their springy toy feel. A spring that stiff goes unstable when the frame rate drops, so it is stepped at 240 Hz inside every frame.
The campaign is the stakes. The wall starts complete, so the campaign reads from the first frame. Faults damage it and corrections repair it. Each parcel face is a tile from one canvas atlas, so there is a letter on each top cube and a single label strip with the tagline running across the bottom row. All the parcels share one patched material and one instanced draw.
A product shot, lit like one. One warm key from the upper left with soft shadows, a cool rim from behind, and felt that falls off into a dark room. Shading is physical vinyl with a light clearcoat, felt with sheen and a fibre normal, and kraft with long fibres. The post stack is N8AO contact shadows, bloom kept to the lamps and the screen, depth of field focused on the front of the line, neutral tone mapping, a grade, grain and a vignette.
Quiet by default. The canvas is capped at 2.6 megapixels on desktop and 1.6 on phones, and the render scale follows the measured frame time. When nothing is moving it drops to 30 frames a second, and it stops when the tab is hidden. Sound is synthesised: a belt hum that follows the pace, servo blips, a fault buzz, and a tape-rewind whirr for the wind-back. Starting audio on macOS can stall the page for a moment, so it opens just after your first tap instead of during it.
Foreman is fictional: a name, a line and a controller, made for this piece.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.