zippr
All prompts

Motion graphics

Built by agents, from a public recipe

A launch video built by a free, public recipe.

Paste it into Claude or ChatGPT, answer its questions, and it makes the video. It works best in an app that can run code.

Make me a short film for my product the same way zippr made one particular film: "Built by agents, brag's way" (zippr.to). It is a 23.5-second launch brag, told from one real week. "zippr is built / by AI agents." types in, and "In public." lands in orange. A card in the style of zippr's own site counts up to 469 "changes, made by AI agents", then "1 human, orchestrating." Three real updates from the week land one at a time on the card ("Built seven launch films in one evening.", "Made a film of one job, asked twice: 2 min 10 s, then 117 ms.", "Checked every promise the team made. 20 had slipped.") while a small blue mascot hops, leans in and flinches. "And this video?" types in, and "An agent made it too." lands as the mascot jumps. It ends on "zippr", "The second time you need a job done, your AI just does it." and "Join the waitlist at zippr.to". It is clean and flat, in the site's own cream, navy and one orange, with no music: the film's own small sounds are the rhythm. 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 and open source. - zippr made it with Claude (Opus 5.5) on a paid Claude plan. Any AI app that can run code can follow it. - The plan follows brag, a free, open-source (MIT) method for launch videos (github.com/latent-spaces/brag): zippr read its files and followed its steps, and installed nothing. - One step was paid: zippr's mascot was drawn once with Google's Nano Banana Pro image model, 3 pictures at about $0.14 each (about $0.42): a standing picture, and two poses edited from it (looking up, and jumping for joy). You can skip it: use pictures you already have, or have the hero drawn in code for free. Everything else is drawn 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: "zippr is built by AI agents, in public; the second time you need a job done, your AI just does it.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 23.5 seconds, portrait 1080x1920 (a landscape 1920x1080 cut exists too). brag says 15 to 25 s, with 18 to 22 the sweet spot. Keep 23.5 s? Portrait, landscape, or both? 5. Your brand's exact colours and fonts (from your site's stylesheet if you can: brag's rule is "show the thing"), your product's name, and the address people should go to. 6. The words on screen. zippr's: the hook "zippr is built / by AI agents." and "In public."; the card "This week", the count and its label, "1 human, orchestrating."; three updates, each with a day and time and a role; "And this video?" and "An agent made it too."; the end card. Which words are yours? 7. brag's questions, answered from YOUR real record, before anything is planned: What is it, in one sentence? Who is it for, and what does it do for them? What sets it apart? What is the most impressive or funniest true claim? What is the visual hook? What real screen or flow should be shown? What tone fits? What is the one-line share caption? 8. Your receipts. zippr's film uses only true, checkable numbers and lines: the week's changes counted from its version history (469 of them signed by an AI agent), and three real updates from its own build log with their real days and times. What are yours, and where does each one come from? If a number cannot be traced, it does not go on screen. 9. The hero's pictures: (a) you have them: your mascot or character as three PNGs with transparent backgrounds: standing facing us, looking up, and jumping for joy; (b) you want them generated like zippr's with Nano Banana Pro (paid, about $0.14 a picture, three pictures; you run it, or give me access); (c) I draw the hero in code (free); (d) no hero. 10. The colours. zippr's: cream ground, white card, navy ink, a slate grey for secondary words, one orange accent (for "In public." and the caret), and a blue for the address. Put your brand colours on the colour roles in the recipe below, or keep zippr's?

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

Where the method came from zippr tried brag on one concept, without installing anything. brag is an open-source Claude skill for launch videos: it reads a project and "brags" with its real material. zippr followed its lean version, the one its own files say to use with Claude Opus 5.5: answer its questions from the real record; write a one-page plan (the angle, the hook, two or three highlights, the punchline, tone, the exact colours and fonts, share copy, a scene-by-scene storyboard); the shape "Hook (2 to 3 s), Reveal (2 to 4 s), 2 to 3 sharp highlights, Punchline/outro (2 to 4 s)"; the tone "yc-parody: deadpan startup launch, played straight, one claim each; hard cuts"; "show the thing" (the product's real look, colours and fonts, never abstract filler); "make it alive" (typing, things appearing one by one); reading time of about 0.3 s a word from the moment a line is fully on screen; "every frame is a pure function of time"; and, to deliver, the poster (the strongest settled frame) baked in as frame 0, plus a share caption. The concept, a week of real receipts ending "And this video? An agent made it too.", is the same kind of ending brag's own launch videos use. Two things are zippr's, not brag's: the sound (brag's is a music bed with effects under it; zippr uses no music and the film's own sounds), and the checking: three fresh critics, each shown only phone-width frames every 0.2 s with no brief and no sound, each saying what a stranger takes from it, with fixes between rounds. zippr's own verdict: brag's method is a good planning layer.

The tools - brag (open source, MIT): the method, its questions, its shape, its reading-time floors and its poster rule. Its files were read and followed; nothing was installed or run. - Claude (Opus 5.5): answered brag's questions, wrote the plan and all the code, built the film, and ran the critics (fresh Claude agents, frames only). - A web page with one HTML canvas: every word, the card, its rows and role marks are drawn in JavaScript in the site's own fonts and colours; the hero is three cut-out pictures. seek(t) draws any frame from one plan file, counted in frames. No animation library. - Playwright for Python driving headless Chromium: opens the page, calls seek(t) for each of the 705 frames and pipes each screenshot straight into ffmpeg; it also writes the page's cue sheet for the sound. - Python with numpy (and SciPy to write the WAV): every sound, at a fixed seed. There are no recordings, no music and no voice. - ffmpeg with libx264 and AAC: joins the picture and the sound, swaps the poster in as frame 0, and measures loudness. - The fonts: Schibsted Grotesk and Inter, the zippr site's own two faces, free under the SIL Open Font License. - Paid, once: Nano Banana Pro (Google's gemini-3-pro-image, through Vertex AI, at 2K) drew the mascot's poses, about $0.14 each by usage.

The steps, in order 1. brag's questions, answered from the real record (above). Then the one-page plan, with every line on screen traced to a receipt. 2. The plan file: every event as a FRAME at 30 fps, so every event sits on a frame; the page and the sound both read it. 3. The page: the hook, the card, the updates, the punchline, the end card and the hero, each drawn from the frame. 4. Render: frames piped straight into ffmpeg. 5. The sound (below). 6. Look at stills from every scene and mid-transition (brag's own check); then a fresh critic reads phone-width frames every 0.2 s from the encoded file, with no brief and no sound, and says what a stranger takes from it. Fix, and ask a NEW critic. zippr ran three rounds. 7. Pull the strongest settled frame as the poster and replace frame 0 with it (same frame count, same length, the sound untouched). Write the share caption. 8. Check the finished file (below), then export.

The look (every value is zippr's; portrait) - Ground cream #F7F2EA, a whisper of paper grain (six seeded noise tiles at 2.2%, shifted per frame) so the flat cream does not band in the encode. - The hook: "zippr is built / by AI agents." in Schibsted Grotesk 700 at 118 px, navy #16213A, letters -3%, line height 1.04, at (90, 700), typed at 24 letters a second from frame 1, with an orange caret (7% of the size wide, blinking once typing stops). "In public." lands whole on the third line in orange #E0691C, from 112% down to 100% over 5 frames. At 1.93 to 2.33 s the whole header shrinks and rises to 74 px at (90, 206), to make room for the card. - The card, drawn in the style of zippr's build page: white, 960 px wide at (60, 420), 36 px corners, a 1.5 px navy hairline at 12%, and a soft shadow (26 px blur at 10%, and a 4 px one at 5%). It rises 28 px and grows from 96.5% as it fades in over 6 frames. Its header row: "This week" in Schibsted Grotesk 600 at 48 px, and later "469 changes" at the right in Inter 600 at 40 px, slate grey #55607A; a hairline under it. - The count: the number in Schibsted Grotesk 700 at 230 px, letters -4.5%, counting from 0 to 469 over 2.33 to 3.47 s with an ease-out (14 steps that slow to a stop); "changes, made by AI agents" in Inter 500 at 46 px, grey; then "1 human, orchestrating." in Schibsted Grotesk 600 at 50 px, landing whole and rising 10 px. - The updates, laid out like the build page's feed rows: at the left, the day and time (Inter 600, 42 px, navy) and under it the role's mark (a 40 px rounded square: Builder blue #3F6FC2 with a cream dot; Reviewer a pale #EDE7DD with a navy check) and the role name (Inter 600, 38 px); at the right, the update in Schibsted Grotesk 600 at 54 px, wrapped, line height 1.16. The count shrinks away as the first update fades in; each later update slides in from under the divider, newest on top, pushing the older rows down (never overlapping), the older rows dimming 20%; the card holds two rows, and the oldest leaves as the third lands. - The punchline: "And this video?" in Schibsted Grotesk 600 at 74 px, grey, at (90, 630), typed at 25 letters a second with the orange caret; "An agent made / it too." in Schibsted Grotesk 700 at 118 px, navy, at y 800, landing whole from 108%. - The end card: "zippr" in Schibsted Grotesk 700 at 210 px at (90, 740); "The second time you need a job done, your AI just does it." in Schibsted Grotesk 600 at 58 px, wrapped at 900 px, from y 850; "Join the waitlist at zippr.to" in Inter 600 at 52 px, link blue #2F5FB3, at y 1040. Each fades in over a few frames, rising a little. - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - THE GROUND: cream #F7F2EA. Mine: my site's background. - THE CARD: white #FFFFFF with a navy hairline. Mine: my site's card or sheet colour. - THE INK, every strong word: navy #16213A. Mine: my darkest brand colour. - SECONDARY WORDS: slate #55607A. Mine: my site's muted text colour. - THE ONE ACCENT, "In public." and the caret: orange #E0691C. Mine: my brand's accent, only there. zippr's film has no green anywhere. That is zippr's rule, not mine: if my brand is green, use it. - THE LINK, the address: blue #2F5FB3. Mine: my site's link colour. - THE ROLE MARKS: blue #3F6FC2 with cream #FBE6D1, pale #EDE7DD with navy. Mine: my own labels' colours, or plain.

The hero's pictures (the one paid step; follow this only if I chose (b)) - The model: Nano Banana Pro (Google's gemini-3-pro-image), through Vertex AI, at 2K, 16:9. It cost about $0.14 a picture by usage; Google's price page said $0.134 for a 1K or 2K picture. - What kept the character identical in 33 of 34 pictures: - one locked description, pasted word for word into every prompt; - the character's clean reference picture passed in with every call; - each new pose made as an EDIT of an existing picture, with one change per edit. - zippr's locked description: "a small chunky soft-vinyl toy creature: one rounded bean-shaped piece for head and body in matte cornflower-blue vinyl (#5387D8), with a pale periwinkle (#9DACD0) oval belly patch, two short rounded stub arms and two short round stub feet in the body's blue. The upper front of the bean is a large, softly rounded-rectangle screen set into the body, glowing a soft warm white (#FBE5CA). On that screen, and only on it, sit two small round glossy black eyes, each in a thin clear glossy rim and each carrying one round white catchlight. Two soft floppy dog ears in warm cream vinyl (#E6C28E) hang from the top of the head, one on each side. No mouth, no nose, no neck, and no marks, letters or numbers on the body." - The three pose prompts. Every one ends with: "The face-screen shows only its two eyes: no mouth, no nose, no symbol, no logo. No words, letters or numbers anywhere in the picture." 1. Standing, an edit of the character's first picture: "Edit this image. Keep the identical character: its shape, proportions, pose, colours, matte soft vinyl, face-screen glow, eyes and catchlights, and the same camera angle and framing. Only change: the setting. [The old background] is replaced by a plain, seamless, evenly lit light-grey studio backdrop that curves smoothly into the floor: one smooth neutral grey (about #C8C8C8), with no texture, no props, no doodles and no horizon line. The character stands on it with only a soft contact shadow under its feet. Soft, even studio light from the upper left, so its colours read true." 2. Looking up, an edit of picture 1 with the reference passed in: "The first image is the picture to edit. The second image shows a character, for reference only; copy its exact design, proportions, colours and material. Edit the first image. Keep the identical character (exactly as in the second image: its shape, proportions, colours and matte soft vinyl), the plain light-grey studio backdrop, the light and the framing; only change: its pose and expression, to hopeful. Its body turns a little toward the left of the picture (a three-quarter view, never more, the face-screen fully visible) and it looks up and to the left, as if at someone taller. The head tips back slightly. The two eyes are open wide and round, glossy, with bright round catchlights, gazing upward. The two stub arms are held together in front of the belly. The face-screen keeps its soft warm-white glow. It stands on the floor with a soft contact shadow." 3. The jump, an edit of picture 1 with the reference passed in. The opening is the same as prompt 2, then: "only change: its pose and expression, to a delighted jump. It is in mid-air, both feet well off the floor, a small happy hop; both stub arms thrown up high; both floppy ears flung up and outward by the jump. It faces the camera. The face-screen glows a brighter lime green, almost white-hot at its centre; the two eyes open wide and round, each with two big round catchlights, bright and glossy. A soft shadow on the floor below it, separate from its feet." - Then, free, in code: - cut each picture out of its grey backdrop (a model of the grey per row, plus a colour gate); - measure each pose once: its feet centre and its height; - mirror the looking-up pose so it looks up to the right, at the card; - recolour the jump's lime screen to warm white (zippr's films have no green). - Designing the character in the first place took zippr several earlier rounds of pictures. Those are not in the $0.42. - In the film the hero stands at the lower left, its feet at (330, 1560), 400 px tall, with a soft navy shadow under it (blurred 10 px, 20%, shrinking when it leaves the floor). It looks up at the card until the punchline, jumps on it, and stands facing us after. It breathes (1.2% every 2.4 s) and reacts on every beat: a 34 px hop as the card appears; a 40 px hop to look at the first update; a lean in (turning 0.1 radians and rising 10 px) at the second; a flinch (tilting back, squashing 7% and dropping 6 px, recovering after a second) at the third; a 13% crouch for 5 frames, then a 100 px jump on "An agent made it too." Every landing squashes 5.5% for 0.16 s.

zippr's story, beat by beat (23.5 s; 30 frames a second; frame = seconds x 30) - Frame 0 is the poster: the settled count frame (469, "1 human, orchestrating."). From frame 1 (0.03 s) the hook types: "zippr is built / by AI agents." - 1.40 s (frame 42): "In public." lands in orange. - 1.93 to 2.33 s: the header shrinks and moves up. 2.33 s (frame 70): the card appears; the hero hops (2.53 to 2.87 s). - 2.33 to 3.47 s: the count runs up to 469 and stops. - 3.67 s (frame 110): "1 human, orchestrating." - 5.27 to 5.37 s: the count clears; 5.37 s (frame 161): the first update lands: "Thu 18:23 · Builder · Built seven launch films in one evening." The hero hops to look (5.53 s). - 7.93 s (frame 238): "Fri 02:27 · Builder · Made a film of one job, asked twice: 2 min 10 s, then 117 ms." The hero leans in (8.10 s). - 12.03 s (frame 361): "Fri 09:23 · Reviewer · Checked every promise the team made. 20 had slipped." The hero flinches (12.20 s). - 15.03 to 15.33 s: the card and the header go. 15.43 to 16.0 s: "And this video?" types. - 16.23 s (frame 487): "An agent made / it too." lands, and the hero jumps (after a 5-frame crouch), landing at 16.73 s. Short arms raised beside the head read as ears: throw them out to the sides, clear of the head's outline. - 18.63 to 18.83 s: the punchline goes. 18.87 s (frame 566): "zippr". 19.17 s (frame 575): "The second time you need a job done, your AI just does it." 19.70 s (frame 591): "Join the waitlist at zippr.to". Hold to 23.5 s. - Share caption (brag's deliverable, not on screen): "zippr is built by AI agents, in public. One human orchestrates. This week: 469 changes, seven launch films in one evening, and an audit that found 20 promises had slipped. An agent made this video too."

What the critics made zippr change, which you should keep - Say what the product does for a stranger on the end card, and how to get it; a vague line said nothing. - Put one receipt in the body that sets up the ending's promise (zippr's "asked twice: 2 min 10 s, then 117 ms"). - No insider log lines and no tiny scrolling text: every line held long enough to read. - The card never sits on the hero's head, and the hero reacts to every update, with a wind-up before the jump. - Never cross-fade two busy layouts: take the old content out, then bring the new in. - All three critics still said the product is explained only at the end; that is the concept (a brag about how it is made). Two read "20 had slipped" as an admission; zippr kept it as the self-deprecating beat. If either bothers you, change it.

The sound (no music; the film's own sounds are the rhythm) - Made in numpy at 48 kHz stereo, with a fixed random seed. Every sound's first sample sits on its picture frame (from the cue sheet); only the soft swishes lead in and END on their frame. - Under everything: room tone (noise 60 to 900 Hz with a little 0.9 to 9 kHz) at -50 dB, the right channel a copy a third of a second later. Never digital silence. - The sounds, what they are made of, and their gains in dB: - each typed letter: a key (a bright click, noise 2.2 to 7 kHz, over a 230 Hz thock), -20; - "In public." landing: a felt thump (96 Hz sagging, with a soft paper edge of noise 250 Hz to 2.2 kHz), -7; - the card appearing: a soft swish leading in (-30), then a tap (noise 0.5 to 4 kHz over a 150 Hz body), -9; - the hero's hop: a small vinyl squeak rising from 900 to 1400 Hz over a 95 Hz knock, -13 (the update hop -14), and its landing (78 Hz with low noise), -17 (-19); - the count: 13 small woody ticks as the number steps (noise 1.2 to 5 kHz over a tone rising from 1500 to 2400 Hz), from -22 up to -19, alternating left and right; then a round click as it stops on 469 (a 480 Hz body with 1250 and 2300 Hz, under a quiet tick), -8; - "1 human, orchestrating.": a small dry tock (320 Hz), -11; - each update: the same round click, -7, and a short warm chime, E6 (1318.5 Hz), then F#6 (1480 Hz), then G#6 (1661 Hz), the pitch rising as the week adds up, -16; - the flinch: a small "uh-oh", two notes turned down (1180 then 880 Hz), -12; - the card leaving: a swish, -26; - "An agent made it too.": the round click, -7, with the mascot's two-note chirp (1320 then 1980 Hz, a small warble), -10; its landing, -11; - "zippr": one dry bell, C5 (523.25 Hz, with partials at 2x, 2.76x and 5.4x), -9; the address: one small tick, -15. - The hits and their frames (at 30 fps): "In public." 42; card 70; hop 76; the 469 stop 104; "1 human" 110; updates 161, 238, 361; hop 166; flinch 366; punchline, chirp and jump 487; landing 502; wordmark 566; address 591. Start each hit 2 frames BEFORE the frame it belongs to (the ear hears that as exactly on time); zippr's film has them on the frame. - Master: an 8 ms fade in and a 0.35 s fade out; the gain set by measuring (ffmpeg's ebur128 filter) to -16 LUFS integrated, then a look-ahead peak limiter (2 ms ramps, only the transients) to a true peak of -2.5 dBTP. No soft-clipping. zippr's file measures -16.0 LUFS, true peak -2.8 dBTP; every meaning sound stands at least 15.7 dB above what is under it in its own band.

The finish - 1080x1920 (and 1920x1080), 30 fps, 23.5 s (705 frames). Chromium flags --force-color-profile=srgb, --hide-scrollbars, --font-render-hinting=none and --disable-lcd-text, at device scale 1. Encode: H.264 High, level 4.0, yuv420p, crf 18, preset slow, capped with -maxrate 12M -bufsize 24M, converted with out_range=tv and out_color_matrix=bt709 and tagged BT.709 (set with ffmpeg's setparams as well). AAC 192 kbit/s at 48 kHz stereo, with +faststart. Frame 0 is replaced by the poster frame. zippr's file came out at about 25 MB.

STEP 3: SWAP IN MY PRODUCT

Keep brag's shape (hook, reveal, highlights, punchline, poster as frame 0), the card in my site's own style, the one-claim-per-beat deadpan, the typing and the landings, the hero's reactions, the timings and the sound design exactly. Change only these: - The hook and "In public." become my one-sentence claim and its landing word. - The count, its label and "1 human, orchestrating." become my real, traceable numbers. - The three updates become three real moments from my record, with their real days, times and roles. - "And this video? / An agent made it too." stays only if it is true for my film. - zippr's mascot becomes my hero (question 9), or no hero. - The end card becomes what my product does for a stranger and how to get it. - My site's exact colours and fonts go on the colour roles (question 10).

STEP 4: SHOW ME THE PLAN, THEN WAIT

Show me my answers to brag's questions, my one-page plan with the source of every line on screen, my beat table with times and frames, and my colours on their roles. If you can run code, show me 4 stills in the finished look (for example at 1.5 s, 4.4 s, 13.0 s and 16.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 with sound, the poster and the share caption. Ask me before installing anything: my fonts are downloads unless they are already here; if one can't be had, use a similar free sans and tell me. Do not install brag: read its method from these steps. If you can't run code, build it as one self-contained web page that plays in the chat: everything drawn on a canvas from the frame number, my hero as my pictures or drawn shapes, and the sounds made 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 product does, who it is for and how to get it, from the frames alone? Is every line on screen long enough to read (0.3 s a word once fully on screen)? Fix what doesn't read. - Every number and update on screen traces to my real record; nothing is invented. Frame 0 is the poster. - On the file: it plays start to end; the hero's face is visible in every frame; each hit sound 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.