The Factory v3

Make me a short film for my product the same way zippr made one particular film: "The Factory v3" (zippr.to). In it, you ask an AI for a slide deck and it builds a whole factory to make it: foundations, a conveyor, gantries, silos and robot arms, with seven crates riding the line, each labelled with one small step of the job. Close the chat and the factory quietly lifts away. Ask again and the same factory builds itself again, at twice the speed, then four times. Then zippr: one small module and a card with the same seven steps already written down; they tick in one breath and one bell lands the deck. It is a clean isometric paper diagram on a warm grey page, with no characters and no pictures. 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 are open source except GSAP, which is free under its own no-charge licence. - zippr made it with Claude (Opus 5.5) on a paid Claude plan. Any AI app that can run code can follow it. - No step in this film was paid. There is no generated picture, clip or voice: every shape, word and sound is made in code.

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: "The AI already worked this job out." and "Pay for thinking once.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 27.5 seconds, portrait 1080x1920. Keep 27.5 s, or cut it? Portrait only, or a landscape cut too (zippr made portrait only)? 5. Your brand colours (hex codes if you have them), and your product's name as it should appear as the wordmark. 6. The words on screen. zippr's: the first ask, "Make me a presentation."; the seven step labels; the second ask, "Make another version with the same structure."; the card's heading, "Create presentation"; the last ask, "Make another version."; and the two end lines. Which words are yours? 7. Your story in zippr's shape. What does someone ask for (zippr's: a presentation)? What are the small steps hidden inside that job, 5 to 7 of them, in order, three to six words each (zippr's: "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")? What comes out at the end (zippr's: a small stack of slides)? What is the second ask? And what does your product show instead: the job written down once, as a card of the same steps, ticked all at once? 8. The wordmark: (a) you give me your logo as a PNG or SVG with a transparent background, or (c) I set your name in a free font in code. There is nothing to generate in this film. 9. The look. zippr's is a warm grey page, pale paper parts outlined in near-black ink, grey-brown crates for the work, and one red-orange accent used ONLY for zippr's own moment. Put your brand colours on the colour roles in the recipe below, or keep zippr's? And the fonts: zippr's are Schibsted Grotesk for the wordmark and end lines, and Inter for everything else. Keep them, or use yours?

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

Where the method came from An earlier cut of this story, a three.js diagram of a factory, had the craft, but its story, fonts and pacing needed work. This version keeps that method and redoes the story storyboard first. Six stills of the finished look, each with what is on screen, what moves next and what is heard, plus a full-length sound sketch under an animatic, were approved before a single frame was built. It went from 39.2 s to 27.5 s: the rebuild now happens twice, faster each time, and zippr's moment shows the same seven steps written down on a card.

The tools - Claude (Opus 5.5): wrote the storyboard, the sound sketch and all the code, and made every fix. - A web page: three.js (r182, MIT) draws the factory in 3D with an isometric orthographic camera; the chat window, the labels, the card and the words are plain HTML on top. - GSAP (3.13): one paused timeline moves everything. The page's seek(t) sets the timeline to t and draws that frame. - Playwright for Python driving headless Chromium: steps the page frame by frame and screenshots it. - Python with numpy: makes every sound from scratch, at fixed times read from the plan file. There are no recordings and no music. - ffmpeg with libx264 and AAC: joins the frames and the sound, and measures the loudness. SciPy was used only to check the sync on the finished file. - The fonts: Schibsted Grotesk (weights 700 and 800) and Inter (weights 450 to 600), both free under the SIL Open Font License.

The steps, in order 1. The storyboard: the film in one line, then 6 stills rendered by the film's own page (0:02 the ask, 0:07 the factory at full tilt, 0:11 the factory lifting away, 0:17 the rebuild at double speed, 0:23 zippr, 0:26 the end card), each with what is on screen, what moves next and what is heard. Then a full-length sound sketch under an animatic (one frame per beat). Wait for a yes. 2. One plan file holds every time, in whole frames at 30 fps. A small script writes it; the page and the sound both read it, so no time is typed twice. Tempos are chosen so a beat is a whole number of frames: 90 beats a minute is 20 frames, 180 is 10, 360 is 5. 3. The page: every moving thing is a number on the paused timeline, and the frame is drawn from those numbers only, so seeking backwards gives the same frame. The random fly-in offsets come from a fixed seed; there is no Math.random. 4. Render: launch headless Chromium with --use-angle=swiftshader, --enable-unsafe-swiftshader, --force-color-profile=srgb, --hide-scrollbars, --font-render-hinting=none and --disable-lcd-text, open the page at 1080x1920 (device scale 1; the 3D canvas draws at 2x and is scaled down, for smooth edges), then seek(t) and screenshot each of the 825 frames. Render in short chunks that skip frames already on disk. 5. The sound: numpy builds each sound at the plan's frames, mixes and masters it. 6. Check the finished file (below), then export.

The look (every value is zippr's) - The camera is orthographic and isometric: it looks along the direction (1, 0.86, 1) from 420 units away, at the point (5.74, -5.55, 6.36), with a view 110 units tall. It never moves. The factory is about 940 px wide, centred, its middle at about y 660, with the chat window under it. Nothing sits in the bottom 340 px. - Light: an ambient white at 2.05 and one white key light at 1.15 from (-40, 70, 30). Every part is a flat Lambert solid with its edges drawn as thin lines in the ink colour at 62% (edges sharper than 18 degrees only). - The factory, in world units, in five groups that land one per beat: - 0, the foundations: a row of 9 slabs (6.4 x 0.55 x 5.6), 4 behind (5 x 0.5 x 5) and 4 in front (4.2 x 0.5 x 4.2); - 1, the conveyor: a bed 62 long, longer than it needs to be, with 20 rollers and 18 legs; - 2, the overbuild: 8 columns 15 tall, 4 beams across, 12 lattice bars and two overhead rails 58 long; - 3, three silos (radius 2.1, 10 tall) with cone tops and angled ducts, and two machine blocks straddling the line; - 4, five jointed robot arms along the front (base, arm, joint, forearm), and a small output tray at the end of the line. Then the arms fit five different tool heads (a cone, a cylinder, a ring, a cube, a five-sided cone), popping on with a slight overshoot. Seven crates (3.4 cubes) ride the conveyor one after another. The deck is 5 thin slides stacking on the tray. - How a part arrives: it starts at a seeded offset above and behind its place (x -7 to -2, y +11 to +20, z -7 to +2), and moves home while fading in and growing from 86% to full size, easing out (power3.out) over 1.05 s. The middle part of each group is 90% home exactly on the group's beat; the others arrive a little before or after it. - How the factory leaves: when the chat closes, every part fades out over 0.6 s (power2.in), the last built first, each drifting back toward where it came from. Nothing points at it: no caption, no effect. Only the sound going away tells you. - The crate labels are HTML boxes in Inter 500, 24 px: pale paper with a thin ink border and 8 px corners, all at the same height above their crates, with a thin ink leader line (55%) down to the crate, and kept 28 px inside the frame. The labels sit above the leader lines, so a leader passes behind a neighbour's label, never across its words. - The chat window: 640 px wide at (220, 1140), pale #FBF9F6, a thin border, 22 px corners, a soft shadow, a title bar 46 px tall with three grey dots. The message is Inter 450 at 34 px; the whole ask is laid out from the first keystroke (the untyped rest is invisible), so no word jumps a line while typing. A 3 px caret shows while typing. It fades in and grows from 96.5% over 0.3 s; it closes by shrinking 10% and fading over 0.22 s, starting one frame before the close sound. - zippr's moment: the wordmark top left at (84, 150), Schibsted Grotesk 800, 52 px, letters tight (-0.04 em). One small module (an 11 x 8 x 9 block) with a face panel that lights in the accent, a small tray beside it, and a card under it: 640 px wide at (220, 700), pale paper, 18 px corners, the heading in Inter 600 at 30 px, then the seven steps in Inter 450 at 26 px in the muted colour, each with an empty 18 px circle that fills with the accent when it ticks. A thin ink leader runs from the card's top edge up to the module's lit face. - The end card: two lines set left, 84 px from each side, from y 640, Schibsted Grotesk at 96 px, line height 1.04, letters tight (-0.035 em), balanced wrapping: the first line in the muted colour at weight 700, the second in ink at weight 800, 10 px below. The wordmark stays. - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - THE PAGE, the ground everything is drawn on: warm grey #E7E0D7. Mine: my lightest neutral. - THE FACTORY, its parts: paper #F6F3EE for the big parts and one step darker, #DDD4C8, for the heavy ones. Mine: tones of my page colour, so the factory reads as one neutral machine. It must stand apart from the page by its outlines, not by colour. - THE WORK, the crates: grey-brown #8E8274. Mine: a mid neutral. The work stays neutral. - THE INK, every outline, word and the wordmark: near-black #1D1D1D. Mine: my darkest colour. It must read clearly on the page. - MUTED, the first end line and the card's steps: #5E5850. Mine: a softer tone of my ink. - THE ACCENT, used ONLY for my product's moment (the module's lit face and the ticks): red-orange #E4572E. Mine: my brand's accent. It never appears in the factory: that contrast is the point. - The chat window and the card: paper #FBF9F6 with a thin ink border at 16%.

zippr's story, beat by beat (27.5 s, 30 frames a second; frame = seconds x 30) - 0.0 to 2.0 s, the ask (90 beats a minute): the empty page. The chat window fades in at frame 3; "Make me a presentation." types in from frame 6 to 40. It sends at frame 60 (2.0 s). - 2.0 to 10.0 s, the factory, one musical phrase at 90 beats a minute (20 frames a beat), counted from the send: the foundations land on beat 0 (frame 60), the conveyor on beat 1 (80), the overbuild on beat 2 (100), the silos and machines on beat 3 (120), the arms and the tray on beat 4 (140), and the arms fit their tools on beat 4.5 (150). The seven crates enter on the half beats from beat 5 to 8 (frames 160, 170, 180, 190, 200, 210, 220), each fading in one frame early and riding the whole line in 3 beats, its label riding with it. On beat 11 (frame 280, 9.33 s) the deck's top slide lands on the tray. - 10.0 s (frame 300): the chat window closes, an ordinary close. On that same frame, all the machine's sound stops. The factory lifts away in room tone only, last built first; the page is empty by about 11.7 s. - 13.0 s: a new window (frame 390); "Make another version with the same structure." types in from frame 396 to 446, and sends at 15.0 s (frame 450). - 15.0 to 19.0 s: the SAME factory builds again, in the same order, with the same crates and the same labels, at 180 beats a minute (10 frames a beat, everything twice as fast): groups land at frames 450, 460, 470, 480, 490, tools 495, crates 500 to 530 every 5 frames, the deck at 560. The window closes at 19.0 s (frame 570) and the factory lifts away at double speed. - 19.67 s (frame 590): a third window, already typed; it sends at 20.0 s (frame 600) and the foundations slam in at 360 beats a minute (5 frames a beat): frames 600, 605, 610. - 20.5 s (frame 615): a hard cut, mid-build. The factory is gone. The wordmark, the one small module, the card "Create presentation" with its seven steps unticked, and a new window. - 20.83 to 21.67 s (frames 625 to 650): "Make another version." types in. 21.83 s (frame 655): it sends; the module's face lights in the accent (0.15 s) and the seven steps tick top to bottom, one per frame (frames 655 to 661). The deck drops onto the tray and its top slide lands at 22.5 s (frame 675), on the next beat. - 24.05 to 24.5 s: the module, the card and the window fade out (0.4 s). 24.5 s (frame 735): "The AI already worked this job out." fades up in the muted colour; 25.17 s (frame 755): "Pay for thinking once." in ink. Hold to 27.5 s (frame 825).

Fixes zippr made between the storyboard and the film, which you should keep - All crate labels at one height: alternating heights looked tidy in 3D but overlapped on screen. - Lift the module and drop the card so the landed deck is fully in view. - A crate starts fading in one frame early, and the window starts closing one frame early, so the picture is already changing on the sound's frame.

The sound (no music file and no voice; the factory is one musical phrase) - Made in numpy at 48 kHz, in stereo, with a fixed random seed. The idea: the factory is one machine phrase the AI plays in full every time it is asked, at 90, then 180, then 360 beats a minute, cut off. zippr plays only its last note. - Under everything: room tone (noise low-passed at 900 Hz) at -54 dB, plus a copy offset by a third of a second, panned right, 3 dB lower. There is never digital silence. - While each phrase runs: a low pulse on every beat (62 Hz with a little 124 Hz, 70 ms decay), -19 dB, and a machine hum (55 Hz, with 110 and 165 Hz softer) that grows in over 1.2 s, at -30 dB. Both stop with the window: a 40 ms fade at each close, 6 ms at the cut. - The sounds, what they are made of, and their gains in dB: - one tick per typed letter, on the frame the letter appears (10 ms of noise, 1.8 to 6 kHz), -10 (-12 for the second ask); - the foundations: a boom (55, 110 and 167 Hz, 0.35 s decay, with low noise under 400 Hz), -6; - the conveyor: a clack (784 and 1310 Hz, very short, with a high click), -9, a little left; - the overbuild: a clank (523, 1340 and 2150 Hz), -11, a little right; - the silos: a second clank (659, 1690 and 2710 Hz), -11; - the arms: a servo whirr (a sawtooth gliding 170 to 290 Hz over 0.28 s, 8 ms attack), -9; - the tools: a ratchet (five 12 ms high clicks, 28 ms apart), -9; - the seven steps, one per crate: a rising scale C5 D5 E5 G5 A5 C6 D6 (523 to 1175 Hz), each a short bell tone with partials at 2x and 3x, -17, panned left to right; - the deck: a bell on E6 (1318.5 Hz, partials at 2x, 2.76x and 5.4x, 1.1 s decay), -9. It is the phrase's last note, one step above the scale; - the window closing: two soft clicks 50 ms apart and a tiny ring, -8; - zippr's seven steps: the same scale, one note per frame, -19, then 14 frames of quiet, then the same E6 bell alone, -9. - The boom, clack, clanks, whirr and bell each get a soft 2-frame breath (noise under 3 kHz, rising, 4 dB under the hit) that ENDS on the hit's frame. - In the faster phrases every ring is shorter (an extra decay of 0.25 s divided by the speed). At each close, everything the machine was sounding is cut with a 40 ms fade on the close's frame, so the factory leaves in room tone only. At the hard cut, everything ringing stops in 6 ms and only room tone crosses; zippr's sounds start after it. - The hits and their frames (at 30 fps): typing 6 to 40; boom 60, clack 80, clank 100, clank 120, whirr 140, ratchet 150, steps 160 to 220 every 10, bell 280, close 300; typing 396 to 446; boom 450, clack 460, clank 470, clank 480, whirr 490, ratchet 495, steps 500 to 530 every 5, bell 560, close 570; boom 600, clack 605, clank 610; cut 615; typing 625 to 650; zippr's steps 655 to 661; bell 675. - Build every attack exactly ON its frame. Then move the whole finished soundtrack 2 frames earlier: trim 3,200 samples (2 frames at 48 kHz) from the start and pad the end with the same amount of silence. Every hit then starts 2 frames BEFORE its picture; the ear hears that as exactly on time. - Master: a soft knee above 0.55 of full scale, never past -1.6 dBFS (no look-ahead, so no timing moves), with the gain set by measuring (ffmpeg's ebur128 filter) until the whole is -16 LUFS integrated. zippr's came out at -16.1 LUFS, true peak -1.7 dBTP. The typing is quiet on purpose (about -37 LUFS) and the zippr stretch is the loudest part (about -13 LUFS).

The finish - 1080x1920, 30 fps, 27.5 s (825 frames). H.264 High, level 4.0, yuv420p, crf 16, preset slow, tagged BT.709 (convert with a BT.709 matrix, so colours don't shift). AAC-LC 192 kbit/s at 48 kHz stereo, with +faststart. zippr's file came out at about 4.7 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the isometric diagram, the camera, the one-phrase sound, the three tempos, the quiet disassembly, the hard cut, the timings and the one-accent rule exactly. Change only these: - The three asks become my asks, and "Create presentation" becomes my job's name. - The seven crate labels become my steps (5 to 7, three to six words each), and the same steps become the card's lines. - The factory can stay a factory, or become another overbuilt machine for my job; keep five groups that land one per beat. - The deck becomes what my job produces. - The two end lines become my words, and "zippr" becomes my wordmark. - My colours go on the colour roles (question 9), with my accent kept for my product's moment alone.

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 7.2 s, 11.0 s, 22.8 s and 26.0 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 with sound. Ask me before installing anything. three.js and GSAP are single JavaScript files the page loads from its own folder; if you can't get them, ask me. If a font isn't there, use any free sans-serif and tell me. If the browser can't draw WebGL, use Chromium's software renderer (the swiftshader flags above). If you can't run code, build it as one self-contained web page that plays in the chat. Draw the factory with three.js on a canvas (or as flat isometric shapes if three.js isn't available), move it on one timeline, and make the sounds live in the browser. Add a big Play button (browsers only play sound after a tap), a Replay button, and a "Save as video" button if the browser allows. Tell me how to screen-record it with sound on a phone and on a computer.

STEP 6: CHECK IT BEFORE YOU GIVE IT TO ME

- Put one frame from every 0.5 s 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? Fix what doesn't read. - Check no two crate labels overlap, and every label is inside the frame. - On the file: it plays start to end; each hit sound starts 2 frames before its picture and is clearly audible (the arms' whirr is the one most easily buried under the pulse); 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.