zippr
All prompts

Motion graphics

THE launch video

A film whose middle shows how it was made.

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: "THE launch video" (zippr.to). In it, "Make my launch video." is typed and sent, and one status line flicks through an AI agent's loop (reason, figure out what to do, use a tool, observe, reason again, execute again), faster and faster, until it glitches and breaks. A slam: "Today's AI is organized around agents." "agents" is struck out and becomes "tasks". Then "This film was made this way.": the fourteen steps of making a launch video land one at a time, each on the way it was really done for THIS film (a person, Claude, code, a browser, none), filling a strip of fourteen chips. The strip lights up the steps a model did ("Intelligence only where it's required."), then the ones software ran ("Software everywhere else."), and on "The next time, it just runs." the whole strip zips shut in fourteen frames. "That's zippr." It looks like a dark tech launch spot: near-black, big tight white type, two colours for AI and software, light streaks, grain, slams and shakes, with sound made only from the film's own clicks, bells and knocks. 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, except two, which are not open source: GSAP is free under its own no-charge licence, and Google Chrome is Google's own browser, under Google's terms. - zippr made it with Claude (Opus 5.5) on a paid Claude plan. Any AI app that can run code can follow it. - Nothing in the film was generated: no image, video or voice model was called. Every frame is drawn in code and every sound is made in code. There is no paid step to skip.

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: "Intelligence only where it's required. Software everywhere else. The next time, it just runs.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 19.2 seconds, portrait 1080x1920 at 30 frames a second (a landscape 1920x1080 master at 60 frames a second exists too, from the same page). Portrait or landscape? 5. Your brand colours (hex codes if you have them): I need two that sit far apart, one for "AI did this" and one for "software did this". And your product's name, address and a short end line (zippr's: "That's zippr.", "zippr.to", "COMING SOON"). 6. The words on screen. zippr's: the ask, "Make my launch video."; the loop's six words; "Today's AI is organized around agents." becoming "It needs to be organized around tasks."; "This film was made this way."; the fourteen step names and their ways; "Intelligence only where it's required."; "Software everywhere else."; the two counts, "IN THIS FILM: 5 OF 14 STEPS" and "IN THIS FILM: 6 OF 14 STEPS"; "The next time, it just runs."; "That's zippr."; "zippr.to"; "COMING SOON". Keep this shape with your words? 7. Your story in zippr's shape. What is the one job you ask for (zippr's: a launch video)? What are its steps, and how was each one REALLY done this time: by a person, by an AI app, by code, by both, or not at all? (This film is its own receipt: every tag on screen must come from a true log of how it was made.) And what is your thesis line for the counts? 8. The pictures: none. Everything is type, shapes and light drawn in code. If you have a logo mark, I'll use it at the end. 9. The colours. zippr's: near-black #060608, off-white type #F4F3EF, tangerine #FE9B3D for AI, cornflower #5A8FDB for software and the brand, navy #16213A on the filled pills. 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's founder pasted a launch post whose idea is a list: making a launch video takes fourteen steps (brief, research, storyboard, asset generation, asset selection, voice, music, beat matching, edit, review, revisions, render, host, distribute), and today's AI runs every one of them through the same slow loop. zippr made the film its own receipt: it takes that list apart on screen, and each step lands on the way THIS film was really made. The style came from an earlier test film zippr had made in the look of a one-line tech launch spot (near-black, one electric accent, big tight type, light streaks, grain, hard slams). The first cut ran 46.9 s; the founder asked for about 20 seconds and no green, which gave this 19.2 s cut with a calmer middle; then its sound was rebuilt with no music at all, so the film's own sounds are the rhythm.

zippr's log of how this film was made (every tag on screen comes from it): 01 brief: a person (the founder pasted the post and asked for the film). 02 research: Claude. 03 storyboard: Claude. 04 asset generation: code (every frame is drawn by code). 05 asset selection: Claude (the fonts, the animation library, the colours). 06 voice: none (words on screen). 07 music: code (synthesised). 08 beat matching: code (one cue file drives picture and sound). 09 edit: code (an animation timeline seeked frame by frame). 10 review: Claude + code (frames looked at, sync and loudness measured). 11 revisions: Claude. 12 render: a browser (headless Chrome). 13 host: not yet. 14 distribute: a person decides. So 5 of 14 steps needed a model (02, 03, 05, 10, 11) and 6 of 14 ran as software (04, 07, 08, 09, 10, 12); review counts in both.

The tools - Claude (Opus 5.5): wrote the beat plan, all the code, made every fix, and reviewed the frames; a second, independent Claude (Opus 5.5) reviewed a cut with fresh eyes. - A web page (HTML, CSS and canvas) with GSAP: one paused GSAP timeline of fromTo tweens, plus per-frame functions, all seeked frame by frame, so every frame is a pure function of time from one cue file. - Playwright for Python driving headless Chrome: seeks each frame and screenshots it as PNG (60 fps for the landscape master, 30 fps for portrait). - Python with numpy and SciPy: every sound, made from scratch. There are no recordings and no music. - ffmpeg with libx264 and AAC: joins the frames and the sound. - The fonts: Geist (weights 400 and 600) and Geist Mono, free under the SIL Open Font License, from Vercel's Geist project.

The steps, in order 1. The beat plan: one cue file on a grid of 112.5 beats a minute, so one beat is exactly 16 frames at 30 fps (32 at 60) and every event sits on a whole frame at both rates. The picture and the sound both read it. 2. Storyboard stills rendered from the page and looked at before any full render (zippr looked at 40). 3. The page, the render, the sound, the encode. 4. Review on the encoded files: one frame a beat at phone width, every cue frame, a frame-to-frame jump scan for accidental pops; sync and loudness measured.

The look (every value is zippr's; portrait sizes) - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - THE NIGHT, the background: #060608, with a vignette (clear to 55% of the way out, 55% black at the edges). Mine: keep it near-black. - THE WORDS: off-white #F4F3EF; dim labels #7A7A84 and #A2A2AC. Mine: keep them light. - AI: tangerine #FE9B3D (a lighter #FFB066), on every step a model did, and the glow on the AI count. Mine: one of my two colours. - SOFTWARE AND THE BRAND: cornflower #5A8FDB (a lighter #8DB4EE), on every step software ran, the word "tasks", the full stops of the headlines, the zipper pull, the send flash, the light streaks, the address pill. Mine: my other colour. It must stand clearly apart from the AI colour: the counts only work if the two read as two. - THE INK ON A FILLED PILL: navy #16213A (AI) and #0F1A33 (software). Every text pair passes WCAG AA; zippr's lowest was 5.3:1. - A PERSON: a pale outline pill; NOTHING: a dashed outline. - THE FLASH: #DCE7FF, screen-blended. - zippr's film has no green. That is zippr's rule, not mine: if my brand is green, use it. - The type: Geist 600 headlines with tight tracking (-0.055 em), Geist Mono for small data (step numbers, counts, chapter labels, "COMING SOON"). - The HUD, from the drop on: a small brand mark and name top left (Geist 600, 28 px), and a chapter label top right in Geist Mono 17 px ("01 / TASKS", "02 / THIS FILM", "03 / WHERE AI GOES", "04 / NEXT TIME"). - The prompt: a pill 960 x 104 px at y 830, radius 52, a faint white border (16%) on a 3.5% white fill, 42 px type, a send button on the right; the status line under it at y 976 in Geist Mono 42 px, with a small cornflower dot before the word. - The drop: Geist 600, 112 px, centred at y 640, line height 1.0; the strike is a 10 px off-white bar. - The steps: the headline at the top (y 150, 80 px, balanced wrapping); the step number ("06 / 14", Geist Mono 30 px) at y 600; the step's name (110 px) at y 648; the way in a pill 700 x 110 px (radius 55) at y 824: AI filled tangerine with navy text, software filled cornflower with navy text, both split half and half, a person a pale outline, nothing dashed; 54 px type. - The strip: fourteen chips, small (52 x 14 px, 10 px apart, centred at y 1236) while the steps land, each filling with its colour and popping 35% taller as it lands, a white ring on the newest; under it a thin track and a cornflower zipper pull that steps from chip to chip. On the counts it grows (60 x 66 px, 8 apart, centred at y 900), and only the counted kind stays lit (the rest fall to 13%), with a soft glow of that colour behind; the count line sits under it in Geist Mono 32 px. - The end: zippr's zip mark (from its own site icon) at 150 px, "That's zippr." in Geist 600, 150 px, the full stop cornflower; under it "zippr.to" in a cornflower pill (Geist Mono 46 px) and "COMING SOON" (Geist Mono 34 px, spaced 0.24 em). - The effects: 140 seeded light streaks (additive), cornflower with about one in five hot white, in bursts on the big hits and a slow drift under the drop; four flashes (the drop 0.085 for 0.5 s; "tasks" 0.07 for 0.22 s; "next time" 0.08 for 0.32 s; the logo 0.09 for 0.5 s); four shakes (16, 7, 12 and 14 px, dying over 0.55, 0.3, 0.45 and 0.55 s); grain (a fixed noise tile at quarter size, overlay at 7%, moved every frame); a red and blue split on the text during the glitch.

zippr's story, beat by beat (19.2 s, 576 frames, 30 frames a second; frame = seconds x 30) - 0.00 s: the prompt pill rises in (0.45 s). 0.12 to 0.87 s: "Make my launch video." types itself fast, 21 keys about 0.034 s apart. - 1.07 s (frame 32): Enter. The send button flashes cornflower and the pill lifts 16 px. - 1.20, 1.40, 1.60, 1.73, 1.83, 1.90 s: the status line flicks through "reason", "figure out what to do", "use a tool", "observe", "reason again", "execute again", each word replacing the last, faster each time (6, 6, 4, 3, 2 frames apart). The whole scene creeps in 8%. - 1.67 to 2.00 s: it glitches: the text splits red and blue, the frame skews and jitters, streaks run. - 2.00 to 2.13 s: black. - 2.13 s (frame 64): the drop. "Today's AI is" / "organized" / "around agents." slams in from 1.35x and a 30 px blur; flash, shake, streaks. - 3.20 s (frame 96): a line strikes through "agents", which dims to 40%. - 3.73 s (frame 112): "It needs to be" / "organized" / "around tasks." with "tasks" in cornflower, arriving from 1.5x and an 18 px blur; a small flash and shake. - 5.13 to 5.33 s: the words zoom through the camera (to 4.5x, blurred) and out. - 5.33 s (frame 160): "This film was made this way." The strip appears. - 5.87, 6.40, 6.93 s (frames 176, 192, 208): the first three steps land a beat apart (the eye learns the pattern), then one every eighth (8 frames) from 7.47 to 10.13 s (frames 224 to 304). Each landing: the step's number and name (rising 28 px out of an 8 px blur), and its way, which rolls into the pill over the 3 frames before the landing so the word arrives on its frame. The camera pushes in 3% across the whole section. - 10.67 s (frame 320): "Intelligence only where it's required." The strip grows and only the five AI chips stay lit. "IN THIS FILM: 5 OF 14 STEPS". - 12.27 s (frame 368): "Software everywhere else." Only the six software chips stay lit. "IN THIS FILM: 6 OF 14 STEPS". - 13.33 s (frame 400): "The next time, it just runs." A punch (the camera 1.07x back to 1.0), a flash and a shake, and the pull zips the whole strip in 14 frames, one chip a frame, each flashing white as it passes. - 14.93 to 15.33 s: the strip collapses away (to 0.7x, blurred, faded) into black (15.33 to 15.47 s). - 15.47 s (frame 464): the zip mark zips open and "That's zippr." slams in from 1.25x and a 22 px blur; flash, shake, a slow 3.5% push to the end. - 16.53 s (frame 496): "zippr.to" and "COMING SOON" rise in. - 18.13 to 19.20 s: fade to black.

The sound (no music; the film's own sounds are the rhythm) - Made in numpy and SciPy at 48 kHz stereo, with a fixed random seed. No kick, bass, chords, pads or reverb: each meaning sound is the loudest thing when it happens. - Under everything: room tone (band noise 60 to 900 Hz, plus a quarter of 0.9 to 9 kHz) at -50 dB, the right channel a third of a second later, dipped 6 dB in the two black gaps. - The sounds, what they are made of, and their gains in dB: - each typed key: a mechanical key (a bright click, 2.2 to 7 kHz, over a small 230 Hz thock), -15, panned a little by key; Enter: a bigger key (a 170 Hz thock), -9; - the loop's six words: short sine blips on a six-note figure (A5, C6, E6, D6, C6, G5), each shorter (90 down to 35 ms) and louder (-17 up to -12) than the last, panned left and right in turn; then the figure blurs into a whirr (60 notes a second, -24) with a few digital crackles (-30) and a noise swell (400 to 6000 Hz) that ENDS on the cut to black, -26; - the drop: a boom (41, 82 and 123 Hz with a low thump), -3, and a bright noise crack, -12; - the strike: a pen scratch (noise 1.8 to 7 kHz, 0.24 s), -12; - "tasks": a stamp, a 95 Hz thud (-6) with a key on top (-10); - a swell into the headline ending on its cut, -22; the headline: a soft paper thock, -12; - each step landing, with the sound of what did it: a model = a bell (partials at 1x, 2x, 2.76x and 5.4x), each AI step on its own rising note so the five play a tune (E5 659.26, G5 783.99, A5 880, B5 987.77, D6 1174.66 Hz), -11 (the first three ring long, the eighth-spaced ones short so they never cover the next); software = zippr's round click (12 ms of noise, 1.5 to 6 kHz, over modes at 480, 1250 and 2300 Hz), -8; both = the bell with the click; a person = a warm wood knock (noise 300 to 2200 Hz over 200 and 470 Hz), -8; nothing = a dead dry thump (noise 80 to 1200 Hz over 120 and 260 Hz), -5; each panned where its chip sits, from left to right; - "Intelligence only where it's required.": the five AI notes as one chord, -7; - "Software everywhere else.": the six clicks one frame apart, as one rattle, -9; - "The next time, it just runs.": a low punch (70 Hz falling), -6, then the same fourteen sounds cut to one frame each, one per frame, 5 dB quieter, over a soft zip texture (-27); then a swell into the collapse that ends on the black, -20; - the logo: zippr's bell (A5, 880 Hz, with a 55 and 110 Hz body), -5, with a short zip, -13; the address: a paper tick (-12) and a small high bell (E7, 2637 Hz, above the logo bell's ring), -16. - The hits and their frames (at 30 fps): typed keys 4 to 26; Enter 32; the loop 36, 42, 48, 52, 55, 57; drop 64; strike 96; tasks 112; headline 160; steps 176, 192, 208, 224, 232, 240, 248, 256, 264, 272, 280, 288, 296, 304; intelligence 320; software 368; next time 400, then the teeth 401 to 413; logo 464; address 496. - Every sound that goes with something you see starts 2 frames BEFORE that frame; the ear hears that as exactly on time. The swells END on their frame instead. - Master: one gain and a look-ahead peak limiter that only touches the transients, to -16 LUFS, the true peak held at -2.5 dBTP in the WAV so the AAC stays under -1 dB; a 10 ms fade in, and a fade out with the picture from 18.13 s. No saturation. zippr's file measured -16.0 LUFS, peaks -2.9 dB; every meaning sound stood a median 27.9 dB above what was playing just before it, in its own band.

The finish - 1080x1920, 30 fps, 576 frames, 19.2 s. H.264 High, level 4.0, yuv420p, tv range, preset slow, crf 17, tagged BT.709 (convert with ffmpeg's out_color_matrix=bt709, so colours don't shift). AAC 192 kbit/s at 48 kHz stereo, with +faststart. zippr's file came out at 6.4 MB. (The landscape master: 1920x1080 at 60 fps, level 4.2, crf 16.)

Fixes that zippr's reviews forced, which you should keep: - every cue frame must show its change ON that frame: rounding put some cues a hair after their frame, and the logo frame came out black (a 0.1 ms nudge in the seek fixed it); - long flashes turned cut frames a murky colour: a short strobe on four hits only; - small text (the counts, the address, "COMING SOON") had to be enlarged to read on a phone, and the headlines wrapped so no line ends on one word; - under a music bed the meaning sounds sat 8 to 19 dB too low and nobody could hear them land: no music, and each sound the loudest thing at its moment.

STEP 3: SWAP IN MY PRODUCT

Keep the shape (the ask, the loop that breaks, the struck word, the steps landing on how they were really done, the two counts, the zip, the end card), the look, the timings and the sound design exactly. Change only these: - The ask and its fourteen steps become my job's steps, and every way becomes the TRUE way I made my film. Never invent a way: if a step wasn't done, it says so. - The two headlines and the thesis become mine, and the counts are counted from my log. - My two colours go on AI and software; "zippr", the mark, "zippr.to" and "COMING SOON" become mine. - zippr's own notes: the 46.9 s first cut's pace and effects worked; this 19.2 s cut's first soundtrack, with a music bed, didn't land, which is why the sound is now built from the film's own sounds.

STEP 4: SHOW ME THE PLAN, THEN WAIT

Write my story in two sentences, then my step log (each step and the way it was really done), 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 1.8 s, 3.9 s, 8.1 s and 12.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. Ask me before installing anything. If GSAP isn't there, write the tweens by hand (expo out, power2 and power3 in and out, back out). If Geist isn't there, use any free sans-serif and monospace pair and tell me. Keep my step log honest to how THIS film was made, and update it before rendering. If you can't run code, build it as one self-contained web page that plays in the chat. Draw the words, pills, strip and streaks on one clock, 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? Can you tell the AI steps from the software steps at a glance? Fix what doesn't read. - On the file: it plays start to end; each hit sound starts 2 frames before its picture and is clearly audible; every step's sound is the kind of thing that did it; 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.