The Factory, as a diagram

Make me a short film for my product the same way zippr made one particular film: "The Factory, as a diagram" (zippr.to). In it, a small chat window asks "Make me a presentation." and a huge factory draws itself in beside it, piece by piece: foundations, a conveyor far longer than it needs to be, gantries, silos and robot arms that fit their own tools. Seven orange crates, each labelled with one small job, ride the line, and a tiny stack of slides lands at the end. Then the chat window closes, and the whole factory quietly comes apart. A new window asks again, and the identical factory builds itself again from nothing. Hard cut: one small module, already there, lights up with "ACTION: CREATE PRESENTATION" and the slides land at once. It looks like an isometric 3D diagram: pale grey boxes with thin dark outlines on warm paper, one orange accent, and no words but the labels. It is silent. Below is the exact recipe zippr used: the tools, the steps, the settings and the timings. Follow it as closely as you can. Only the parts about my product change.

WHAT IT COSTS

- The code tools in this recipe are free; all but GSAP are open source, and GSAP is free under its own no-charge licence. - zippr made it with Claude on a paid Claude plan. Any AI app that can run code can follow it. - The film itself has no paid step: every piece is drawn in code. - One optional paid step came before it: zippr chose this look from mockup stills drawn with Google's Nano Banana 2 image model (gemini-3.1-flash-image) on Vertex AI, at $0.067 a picture. The diagram look's sheet was 10 pictures plus 5 redrawn after a review, about $1.00. (The whole round tried three looks, 41 pictures, $2.75.) None of those pictures is in the film. You can skip this step: the recipe below already fixes the look.

STEP 1: ASK ME FIRST

Before you make anything, ask me these questions. Use your question tool if you have one. Otherwise ask them one at a time in the chat. If I skip one, suggest an answer and tell me what you picked. 1. What is your product or business, in a sentence or two? 2. What is the one thing a viewer should take away? (zippr's: "Your AI shouldn't rebuild the factory every time you ask it to do the same work.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 39.2 seconds, landscape 1920x1080. Keep that? (A portrait 1080x1920 cut of the same page exists too, made later.) 5. Your brand colours (hex codes if you have them), and your product's name as it should appear at the cut. 6. The words on screen. zippr's: the three asks ("Make me a presentation.", "Make another version with the same structure.", "Make another version."), the seven crate labels, "ACTION: CREATE PRESENTATION", the name, and the end line. Nothing else is written anywhere. Give me yours, or say which to keep. 7. Your story in zippr's shape: - the ask (zippr's: "Make me a presentation."); - the absurd machine the AI builds for it (zippr's: a whole factory, far too big); - the small jobs it carries in, one per crate (zippr's seven: "Find files", "Read instructions", "Find the template", "Find the logo", "Figure out the format", "Ask what slide 7 should say", "Figure out where the source data lives"); - the small result (zippr's: a stack of five slides); - the moment it is thrown away (zippr's: the chat window closes and the factory comes apart); - the repeat ask, and the identical rebuild; - your version: one small thing that is already there and just runs (zippr's: a module that lights up with "ACTION: CREATE PRESENTATION"). 8. The pictures. Everything in this film is drawn in code from simple 3D shapes: there are no pictures to find or generate. Do you want the optional mockup round first (paid, $0.067 a picture with Nano Banana 2; you run it or give me access), or go straight to the build? 9. The colours. zippr's: warm paper #E9E5DC, pale grey shapes, a dark graphite ink for every outline and word, and one orange #D98B2B for the crates and the lit module. Which of your colours goes on the accent's role, or keep zippr's?

STEP 2: THE RECIPE (exactly how zippr made this film)

Where the method came from The story and every word on screen came from a written concept for this film. Then, in order: mockup stills of three possible looks (the optional paid step); a one-page direction written by Claude (Fable) from the one the owner picked, the diagram; and the build, one page, from that direction. The direction's one idea: close the chat, and it comes apart; no caption, no announcement, the pieces just lift off and drift back. Ask again, and it draws itself again from nothing, the same pieces in the same order. The viewer should notice the repeat before any word points at it. Its test: someone should be able to say, without being told, "it rebuilt the whole thing because I closed the chat". If a caption is needed to explain that, the beat is wrong, not the caption.

The tools - Claude: wrote the direction (Claude Fable) and built the page, rendered it, read the frames and made the fixes. - A web page with three.js 0.182.0 (the free 3D library, MIT): every piece of the factory is one of its stock shapes (box, cylinder, cone, torus) with thin outlines, seen through an isometric camera. - GSAP 3.13.0 (the animation library, under GSAP's standard no-charge licence): one paused timeline sets every piece's progress at an exact second. - Playwright for Python driving headless Chromium: opens the page from a local server, calls seek(t) for each frame and screenshots it. - ffmpeg with libx264: joins the frames into the video. - The font: Helvetica Neue, the Mac's own system font (any clean sans works; the page loads no web font). - Optional, before the build: Nano Banana 2 (Google's gemini-3.1-flash-image) on Vertex AI for the mockup stills, and a separate Claude (Opus) reviewer that read each mockup sheet. - Both libraries were copied into the page's folder, so nothing is fetched while rendering.

The steps, in order 1. The direction: the one idea, the world and the nine beats, on one page. Timings are tuned in the build; the order is fixed. 2. (Optional) mockups: one still per beat for each candidate look, the same seed per look, then a reviewer marks each still on-brief or off-brief with a one-line fix, and only the off-brief ones are redrawn, once. 3. The page: one config block at the top holds every colour, the camera, every beat's second and every word. Motion never reads a colour, so a new look is a change to that block alone. 4. seek(t) draws any frame from numbers only: no Math.random, no clock, no requestAnimationFrame. Seeking backwards gives the same pixels. The build is ONE function called twice, which is why the rebuild cannot drift from the first build. 5. Render: Playwright steps the page frame by frame, then ffmpeg joins the frames. 6. Read the frames by eye: 12 evenly spaced across the film, plus a frame every half second or so through the close and the rebuild. Fix, render once more. 7. Check the finished file (below), then export.

The mockup stills (the optional paid step; follow this only if I chose it) - The model: Nano Banana 2 (Google's gemini-3.1-flash-image) on Vertex AI, 16:9, 1K, $0.067 a picture as read from Google's price page on the day. One seed per look (zippr's diagram look: 13151). Each call took about 10 seconds. - Each prompt is built from the same parts, in this order: the look's style block; "SCENE:" and the beat's scene; the framing line; the text rule; the exact on-screen text for that beat, or "ON-SCREEN TEXT: none. The frame must contain no words at all."; a "DO NOT INCLUDE:" list; a palette line asking for "a neutral, contemporary palette consistent across every frame". - zippr's style block for the diagram look, word for word: "STYLE: a flat schematic explainer diagram rendered in clean modern 3D, isometric, as if assembled in three.js from library primitives (boxes, cylinders, cones, tori) with GSAP-style motion cues. Flat labelled rectangular boxes with thin crisp outlines; robotic arms drawn as straight line segments with round pivot joints; the factory reads as an exploded assembly diagram whose parts are numbered by position, not by text. Thin leader lines, light drop shadows, large paper-white ground, generous negative space. Neutral contemporary palette: off-white background, graphite line work, one desaturated blue as the signal colour and one muted amber accent used sparingly. Flat even lighting, no texture, no photography, no realism." - The framing line: "16:9 landscape, wide cinematic framing, the whole action readable in one glance, composed as a single key frame of a short film." The text rule: "Render ONLY the on-screen text listed below, spelled exactly as given, in a clean neutral sans-serif, large enough to read. If no on-screen text is listed, the frame contains NO words at all." - The do-not-include list: "no mascot, no cartoon character, no dot-shaped character, no anthropomorphic logo creature; no film grain, no 16 mm or vintage film emulation, no halation, no light leaks; no recognisable street, shop, building or signage, or any country, city or location cue; no visible human faces, no portraits, no recognisable people; no company logos, no brand marks, no watermarks, no stock-photo badges; no website screenshots of any real product, no browser chrome from a real product; no extra words, captions, subtitles, numbers or UI labels beyond the on-screen text listed; no dark-lime colour scheme, no neon cyberpunk palette; no collage, no split frame unless the treatment explicitly asks for one." - The scenes, one per beat: (1) "One person at a small, bare desk with a laptop, seen from a distance and from behind, face not visible. A single speech bubble floats above the laptop carrying the request. Everything around the desk is empty, calm, unbuilt, vast negative space." (2) "The same tiny desk is now dwarfed. A gigantic, absurdly over-scaled factory has materialised around it in a single instant: many storeys of gantries, ducts, conveyors, scaffolding and towers, wildly out of proportion to the one small desk. Assembly cues show it snapping into existence all at once." (3) "Inside the factory, a long row of tall robotic arms is installing tools onto itself, each arm fitting a new tool head onto its own turret, brackets and clamps being bolted into place. The machine is still building its own machinery; nothing useful has been produced yet." (4) "A line of anonymous figures carries seven large crates along a conveyor into the factory. Each crate carries one clearly printed label, all seven readable." (5) "At the far end of the vast line the enormous factory finally delivers one small object onto a tiny output tray: a finished presentation, a neat stack of blank slide pages, absurdly small next to the machine that made it." (6) "The whole factory is taking itself apart in mid-air: gantries unbolting, conveyors folding, towers breaking into parts that fly away and vanish, leaving only the small desk and the finished slide stack alone on empty ground." (7) "The same gigantic factory is re-erecting itself from bare ground, identical to before: the same gantries rising, the same conveyors re-laying, the same towers bolting back together, all of it from nothing again. A speech bubble above the small desk carries the request." (8) "A calm, empty space, no factory, no scaffolding at all. One small desk-sized machine module stands on its own and lights up, a lit label plate on its front face. It runs immediately and a finished slide stack is already emerging from it." (9) "A plain end card. Empty background in the treatment's own palette, no objects, one line of type set centred with generous margins." - What the review caught (5 of 10 redrawn): the first frame was already full of machinery, so the reveal had nothing to reveal; the labels came out as a caption block with an eighth, misspelt one; the slide stack was the biggest thing in the frame; the rebuild was a different factory; the module's frame was still full of arms. Each fix went into its prompt as a one-line correction.

The look (every value is zippr's) - 1920x1080, 30 fps. The 3D is drawn by three.js at a pixel ratio of 2; the chat window, the labels, the plate, the name and the end line are plain HTML on top. - The camera: orthographic (no perspective), looking at (3.0, 6.2, -1.0) from 420 units along the direction (1, 0.86, 1), with a view 57 units tall. It never moves. - The light: a white ambient light at 2.05 and one white key light at 1.15 from (-40, 70, 30). Flat and even. - Every piece: a flat-shaded shape plus its edges drawn as thin lines in the ink colour at 62%. The factory is made of: 9 foundation slabs in a row and 8 smaller ones; a conveyor bed 62 units long on 18 legs with 20 rollers; 4 gantries (two 15-unit columns, a beam and three cross bars each); two overhead rails 58 units long; 3 silos with cones and ducts; 2 machine blocks with caps; 5 jointed arms (base, upright, joint, angled forearm); and a small output tray, small on purpose. - How a piece arrives: it starts at a seeded offset (2 to 7 units back, 11 to 20 up, up to 7 across), small (0.86 scale) and invisible, and slides into place over 1.05 s, growing to full size and fading in. The seeds come from one fixed-seed generator (seed 1315), never Math.random. - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - PAPER, the background and the ground (one colour, so no edge ever shows): #E9E5DC. Mine: my lightest warm neutral. - THE MACHINE, every shape: light faces #FBFAF8, heavier parts #E1DDD3. Mine: two near-whites a step apart. The machine must stay quiet: it is a drawing, not the hero. - INK, every outline and every word: graphite #2B2F36. Mine: my darkest colour. It must read as thin lines on the paper. - THE ACCENT, the only colour in the film: orange #D98B2B, on the seven crates, on the module's lit face and on the action plate. Mine: my brand colour. It must stand clearly apart from the paper and the machine. - THE CHAT WINDOW: white #FFFFFF, a 1 px ink border at 22%, 10 px corners, a soft shadow (0 18 px 38 px, ink at 10%), a 30 px bar with three small grey dots. Deliberately generic, so it reads as "a chat", not as anyone's product. - The labels: white boxes at 94% with a 1 px ink border at 20%, 3 px corners, 17 px type, on a 1 px ink leader line down to their crate. Alternate labels sit high and low, so neighbours don't collide.

zippr's story, beat by beat (39.2 s; 30 frames a second; frame = seconds x 30) - 0.20 s: the chat window fades in at (148, 742), 392 px wide, over 0.5 s. From 0.75 s, "Make me a presentation." types one letter at a time over 1.85 s (21 px), with a thin caret. - 3.20 to 8.6 s: the factory draws itself in, foundations first, then the conveyor, the gantries, the rails, the silos and blocks, the arms, the tray. Every piece has its own start inside the 5.4 s build (0 to 3.74 s after 3.20) and slides in over 1.05 s. - 8.60 s: the five arms fit their own tools (a cone, a cylinder, a ring, a cube, a five-sided cone), one every 0.22 s, each springing into place over 0.55 s with a small overshoot. - 10.80 to 17.4 s: seven orange crates (3.4-unit cubes) ride the conveyor end to end in 4.3 s each, one every 0.5 s; each fades in over 0.4 s and out 4.05 s after it starts. Each carries its label on its leader line. A label only appears once its crate is moving on the belt. - 17.20 s: the deck: five thin slides stack onto the small tray, one every 0.16 s, 0.45 s each. - 19.20 s: the chat window closes: it shrinks by a tenth and fades over 0.22 s. An ordinary close, nothing dramatic. - 19.35 to 21.8 s: the factory un-draws, starting ON the close, not after it: the last piece built is the first to go. Each piece leaves 0.4 x (4.3 s minus its build start) after 19.35 s and falls away over 0.70 s. The tools and the slides go too. - 21.80 to 24.00 s: nothing. Empty paper. Two seconds of nothing is what makes the rebuild land. - 24.00 s: a new window fades in over 0.45 s; from 24.45 s "Make another version with the same structure." types over 1.75 s. - 26.20 to 31.6 s: the identical rebuild: the same function as the first build, so the same slabs land in the same places, in the same order, over the same 5.4 s. At 31.6 s the frame matches the 8.6 s frame. - 31.80 s: hard cut. No factory. Already there: the name at the top left (26 px), one small module (11 by 8 by 9 units) with a tray beside it, and the chat window reading "Make another version." in full. At 32.65 s the module's front face lights up orange (at 92%) and the plate "ACTION: CREATE PRESENTATION" (19 px, semibold, tracking 1.5 px, orange fill, ink border) appears above it on a leader line. From 33.0 s five slides drop onto the tray, 0.07 s apart. Nothing is built. - 35.45 s: everything fades out over 0.55 s. - 36.15 s: the end line, "Your AI shouldn't rebuild the factory every time you ask it to do the same work." (52 px, line height 1.33, 1180 px wide, centred, ink on paper) fades in over 0.7 s and holds to 39.2 s. - Fixes zippr made after the first render, which you should keep: - the un-draw must start on the close, fast (zippr's first cut started it 0.8 s later, undoing the smallest pieces first, so the factory still looked built a second after the window went, and close and collapse didn't read as cause and effect); - the paper and the ground are one colour and the ground never fades, or the end card shows the ground's hard edge; - a crate's label waits until its crate is on the belt, or it floats alone at the head of the line. - Faults still in zippr's cut; avoid them in mine: the second ask runs past the chat window's edge (its spaces can't break, so let it wrap); the action plate's leader line starts at the plate's centre and runs through its text (start it at the plate's bottom edge); the plate sits left of the module's visual centre; the tray, the slides and the longest label are crowded into the last sixth of the frame.

The sound - None. The film is silent by design: sound was left until the picture was approved. If I want sound, ask me before adding any.

The finish - 1920x1080, 30 fps, 39.2 s, 1,176 frames, no audio track. Render with Chromium flags --use-angle=swiftshader, --enable-unsafe-swiftshader, --force-color-profile=srgb, --hide-scrollbars, --font-render-hinting=none and --disable-lcd-text, at device scale 1, the page served from 127.0.0.1. Encode: ffmpeg -framerate 30, libx264, preset slow, crf 19, yuv420p, no audio. zippr's file came out at about 3 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the camera, the shapes, the build-and-unbuild motion, the close-then-collapse, the two seconds of nothing, the identical rebuild, the beats and their seconds exactly. Change only these: - The three asks become my customer's ask, its repeat, and the short ask to my product. - The seven crate labels become the small jobs my customer's AI redoes every time. - The stack of slides becomes the small result, and the module's plate becomes my one-step payoff. - The name at the cut becomes mine, and the end line becomes my takeaway. - The orange becomes my brand colour on the accent's role; the paper, the machine and the ink become my neutrals if I have them. - If my machine isn't a factory, keep an over-built thing made of plain 3D shapes that draws itself in and comes apart the same way.

STEP 4: SHOW ME THE PLAN, THEN WAIT

Write my story in two sentences, then my beat table with times in zippr's format, then my colours on their roles. If you can run code, show me 4 stills in the finished look (for example at 2.8 s, 14.0 s, 23.0 s and 33.5 s). Wait for my yes before you build the whole film.

STEP 5: MAKE IT

If you are an AI app that can run code and save files, follow the recipe and give me the MP4. Ask me before installing anything: three.js and GSAP are downloads unless they are already on this machine. If GSAP can't be had, drive every piece's progress from plain functions of time inside seek(t) and tell me. If WebGL won't run headless, keep the swiftshader flags; if it still won't, tell me before you change the method. If you can't run code, build it as one self-contained web page that plays in the chat: the same scene in three.js if it can load, or the same isometric boxes drawn on a canvas with straight lines if not, on the same timeline. Add a big Play button and a Replay button. Tell me how to screen-record it on a phone and on a computer.

STEP 6: CHECK IT BEFORE YOU GIVE IT TO ME

- Put one frame from every second on a contact sheet and look at it at phone size. Could someone who never saw this message say what the film means from the frames alone, and say "it rebuilt the whole thing because the chat closed"? Fix what doesn't read. - On the file: it plays start to end; it is 39.2 s (or my length) at 30 fps; the frame at the end of the rebuild matches the frame at the end of the first build; no label, plate or window runs off the frame or crosses its own text. This film is silent, so there are no sound checks; if I asked for sound, check that each hit starts 2 frames before its picture and is clearly audible, the loudness is -16 LUFS and the peaks are below -1 dB. - Then give me the file, one still, and one honest line on anything you couldn't do. Never use copyrighted music.