Send button

Make me a short film for my product the same way zippr made one particular film: "Send button" (zippr.to). It is a 5-second joke. A message, "You left your charger.", is addressed "To: Ex" with a broken heart. Someone taps send, and the send button turns into a spinner: an AI is "Thinking…" and having second thoughts in grey italics ("Is he sure?", "Just the charger?"). Under the button stands the mascot, zippr, whose face-screen turns worried amber. zippr jumps and bonks the button from below, the message is sent, and the line reads "It's already decided." It is one quiet, locked frame on a warm-grey studio sweep, Apple-quiet: one object, one line, a lot of empty space. 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 (Opus 5.5) on a paid Claude plan. Any AI app that can run code can follow it. - The film made no paid call: the studio is drawn in code and every sound is synthesised. It reused two stills of zippr's mascot that already existed, drawn earlier with Google's Nano Banana Pro image model at about $0.13 a picture (about $0.26 for the two). You can skip that: use a picture of your own, or have the hero drawn in code for free.

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: "a decided action should just happen", said on screen as "It's already decided.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 5 seconds, portrait 1080x1920 (a landscape 1920x1080 version shows the same stage, smaller, in the middle). Keep 5 s, or give the joke a little more room (5.5 to 6 s)? Portrait or landscape? 5. Your brand colours (hex codes if you have them), and your product's name as it should appear under the line. 6. The words on screen, one to four at a time. zippr's: "To: Ex" and a broken heart; "You left / your charger."; "Thinking…"; "Is he sure?"; "Just the charger?"; "It's already decided."; the name. Give me yours, or say which to keep. 7. Your joke in zippr's shape: - the action the user has already decided on (zippr's: sending a message); - the setup that makes the AI's hesitation funny (zippr's: "To: Ex", and a message that is pure logistics); - the AI's second thoughts, two of them, the second one the punchline (zippr's: "Is he sure?" then "Just the charger?"); - who just does it, and how (zippr's: the mascot jumps and bonks the button from below); - the line (zippr's: "It's already decided."). Your mascot is never the one who hesitates: it is on the side of "already decided". The hesitating AI is generic, with no real name or logo. 8. The hero's pictures: (a) you have them: your mascot or character as two PNGs with transparent backgrounds, one standing and facing the camera, one jumping with arms up, ideally with a face or screen whose colour I can shift to show worry; (b) you want them generated like zippr's with Nano Banana Pro (paid, about $0.13 a picture, two pictures; you run it, or give me access); (c) I draw the hero in code (free). 9. The colours. zippr's: a warm-grey studio (#EFECE6 at the top to #D8D3C9 at the floor), near-black ink (#18181A) for the button and the words, a red broken heart, and the mascot's own screen colour (lime at rest, amber for worry). Which of your colours go on the roles below, or keep zippr's?

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

Where the method came from The brief: an AI that hesitates over sending a message to an ex, when sending was already the person's own decision; a joke, not a product announcement; no longer than 5 seconds; as simple as an Apple ad. One Claude (Opus 5.5) agent wrote three takes of five lines each ("The charger", "ok" to Mum, and a light switch in a dark room), built the strongest, and checked stills from the rendered file. The look is "Apple-quiet": one object, one large line, a lot of empty warm-grey space. The storyboard needed fine-tuning before it was ready to be a film. That is why STEP 4 below waits for my yes.

The tools - Claude (Opus 5.5): wrote the takes, built the page, cut the mascot out, made the sound, rendered both shapes, and read the stills. - A web page with a canvas (the studio) and plain HTML (everything else), moved by GSAP 3.13.0 (the animation library, under GSAP's standard no-charge licence) on one paused timeline. seek(t) draws any frame from numbers only. - Playwright for Python driving headless Chromium: opens the page from a local server, calls seek(t) for each frame and screenshots it; it also writes the page's beat times to a cue file for the sound. - Python with numpy: every sound, from sines and shaped noise, at a fixed seed. There are no recordings. - Python with numpy and Pillow: cut the mascot's stills out of their grey studio backgrounds and made the worried amber screen by shifting the screen's colour. - ffmpeg with libx264 and AAC: joins the frames and the sound, and measures loudness (its ebur128 filter). - The fonts, bundled as files: Satoshi (500, 700) for the message, the labels and the line; Instrument Serif italic for the AI's second thoughts, so its doubts sound different from the verdict. - Paid, once, before this film: Nano Banana Pro (Google's gemini-3-pro-image) drew the mascot's stills, about $0.13 each.

The steps, in order 1. Three takes, five lines each (the shot, the beat, the line, the sound, the last frame). Build the strongest. 2. One page, one config block at the top: every word, colour, position and beat time, on a 1080x1920 stage. The bottom 340 px stay empty. 3. Cut the mascot's two stills out and make the worried screen (below). 4. The sound, reading the beat times from the cue file. 5. Render: Playwright steps the page frame by frame, and each frame goes straight into ffmpeg (no frame folder on disk). About 2 minutes per shape on a laptop. 6. Pull 6 stills from the rendered file (0.00, 0.45, 1.30, 2.10, 2.64 and 4.95 s) and read each at full size. 7. Check the finished file (below), then export.

The hero (zippr, the mascot, as the page shows it) - zippr is a small chunky vinyl creature: an ink-black penguin-like body (#0A0A0A) with a large cream belly (#F5F5F0), cream feet and mitten arms, floppy black dog ears, a stubby tail, and a face that is one rounded-square screen with two huge glossy eyes. The screen is lime (#D6FF74) at rest and warm amber when worried. Never shoot the mascot from behind: its face must be visible in every frame. - Two stills: the standing hero, looking at the camera; and "delighted", arms up, for the jump. - The pictures (the paid step; follow this only if I chose (b)): Nano Banana Pro (Google's gemini-3-pro-image), about $0.13 a picture. zippr pasted one locked description, word for word, into every prompt, and passed the hero still in as a reference with every call, because prompt wording alone drifts. zippr's locked description: "a small chunky creature with a penguin-like body: a rounded egg-shaped torso in matte ink-black (#0A0A0A) with a large soft cream (#F5F5F0) belly panel, very short stubby legs with rounded cream feet turned slightly outward, and two small cream mitten flipper-arms. Its head is large and rounded, and the entire front of the face is a softly rounded-square screen, like a small glowing display set into the head. On that screen, and only on it, sit two enormous soft eyes rendered as smooth glossy near-black shapes: tall rounded ovals with very large dark irises, each carrying one big round catchlight in the upper left, a smaller secondary catchlight at the lower right, and a soft crescent of reflected light along the bottom rim, with a pronounced wet tear-film sheen across the whole surface that reads as warm and alive, never as crying. Two soft floppy dog ears in matte ink-black hang beside the head, and a tiny stubby ink-black tail sits at the back." The screen colour is stated separately in each prompt. The stills were shot on a plain mid-grey studio backdrop. - Then, free, in code: cut each still out of its grey backdrop (measure the grey, key it with a soft 18 px feather, drop the floor shadow, remove stray specks), and record its size and the centre of its feet. Make the worried version by shifting only the screen's saturated yellow-green pixels (hue 45 to 110 degrees) to amber (hue 33 degrees, saturation x1.5, brightness x0.97), including the pale highlight on the screen's glass, so the eyes, body and belly keep their colours. - On stage, zippr is scaled to 0.64 of the cut-out, its screen centred under the button, its feet on the floor line at y 1420, with a soft oval floor shadow (300 x 46 px). The jump still is used at the same scale: its nearer, livelier pose already reads about 10% bigger.

The look (every value is zippr's) - The studio: a vertical gradient from #EFECE6 through #E5E1D9 (at 55%) to #D8D3C9, with a soft white light pool (55%) centred across, 42% down, reaching 0.62 of the frame's longer side, and a fine grain over it at 5.5% (multiply), from a fixed seed (1345). One seamless sweep: no horizon, no props. - The send button: an ink circle (#18181A), 132 px across, centred at (540, 640), with a soft shadow below (0 22 px 44 px, at 22%) and a white paper-plane outline inside (6 px stroke). Deliberately not any real app's button: not a green or blue bubble, and not an up-arrow in a black circle. - The message: a white pill, 404 x 170 px, 52 px corners, 16 px left of the button, with a soft shadow; "You left / your charger." on two lines in Satoshi 500 at 50 px. Above it, at y 470: "To:" (Satoshi 500, 40 px, #8C877F) and "Ex" (700, #18181A), and a broken heart drawn as two jagged red halves (#D0473B). - The thinking: "Thinking" (Satoshi 500, 34 px, #8C877F) at y 236 with dots that count up, 0 to 3, five times a second. The second thoughts are Instrument Serif italic at 92 px in warm grey #5F5A52, centred 62 px below it. - The line: "It's already decided." in Satoshi 700, 88 px, tracking -1.2 px, #18181A, at y 322; the name under it at y 450, Satoshi 700, 44 px. - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - THE STUDIO: the warm-grey sweep above. Mine: a light neutral of my brand, kept quiet. - INK, the button and every word that matters: #18181A. Mine: my darkest colour. It must be the strongest contrast in the frame. - THE AI'S DOUBTS: warm greys #8C877F and #5F5A52. Mine: greys from my palette, a step quieter than the ink. - THE HEART: red #D0473B. Keep red: it is the setup, not a brand colour. - THE HERO'S MOOD: the screen, lime at rest and amber when worried. Mine: my hero's own colour at rest, and a warm worried colour it can shift to. - The only colours in the whole frame are the hero's screen and the heart. Everything else is warm grey and ink. - There is no camera move: one locked frame for the whole film.

zippr's story, beat by beat (5.0 s; 30 frames a second; frame = seconds x 30) - 0.00 s: frame 1, no fade-in: "To: Ex" with the broken heart, "You left / your charger.", the send button at the centre, and zippr on the floor directly under it, lime screen, looking at the camera. - 0.35 s: the user's tap: a ripple ring (5 px, ink at 55%) grows to 1.85x and fades over 0.5 s, and the button dips to 0.91 scale in 0.07 s and springs back over 0.24 s. No hand is shown. - 0.46 to 0.60 s: the paper plane fades out and a spinner fades in (a thin ring with one white quarter arc, turning 560 degrees a second). - 0.55 s: "Thinking…" fades in, its dots counting. - 1.00 s: "Is he sure?" rises 14 px into place (0.18 s). - 1.40 s: zippr's screen turns amber, a 0.3 s crossfade. Worried. - 1.70 s: "Is he sure?" goes (0.10 s). 1.78 s: "Just the charger?" rises in. - 2.34 s: zippr crouches: a quick squash of the standing still (9% shorter, 5% wider) in 0.12 s. - 2.48 s: zippr jumps: the arms-up still, screen lime again, rises 160 px in 0.14 s, so at the top its ear tip meets the button's lower edge. Short arms raised beside the head read as ears: throw them out to the sides, clear of the head's outline. - 2.62 s: the bonk. The button jumps 24 px up in 0.05 s and settles back with a springy wobble over 0.34 s; the spinner goes and the paper plane comes back; "Thinking…" and the thought pop away (shrinking to 0.9 as they fade in 0.10 s). - 2.63 to 2.93 s: the message lifts 300 px, shrinks by a tenth and fades: sent. "To: Ex" clears three times faster. - 2.70 to 2.92 s: zippr falls back down (accelerating); its floor shadow, which shrank and faded while it was up, returns. - 2.92 s: zippr lands on the standing still with a small squash (8%, 0.06 s) and a springy recovery (0.28 s). - 3.25 s: "It's already decided." rises 18 px into place (0.32 s), where the thoughts were. - 3.80 s: the name fades in under it (0.30 s). Hold to 5.0 s: the line, the button, zippr at rest, lime, looking at you. - The landscape version is the same portrait stage scaled to 0.76 and centred on the content, not re-composed. - Faults zippr found in its own cut; fix them in mine: the punchline "Just the charger?" is only on screen for 0.84 s before the bonk (5 s is tight; 5.5 to 6 s would let it breathe); the jump is three stills with no in-between poses, so it reads as a snap; nobody is seen pressing send, only a ripple; while the AI deliberates about 9 to 10 words are visible at once (drop "To:" and "Thinking…" first if that is too many); the cut-out has rough fringes on one mitten and one ear; the hero never glances at the button; in landscape the type is small and the sides are empty.

The sound (no music; the joke's own sounds) - Made in numpy at 48 kHz stereo, from sines and shaped noise, with a fixed random seed (1345). There is no music and no voice. Every time is read from the page's beat list. - Under everything: a very quiet room tone (band noise 80 Hz to 2.5 kHz), so the silence is never digitally dead. - The sounds: - the tap, 0.35 s: a crisp key click (a 1850 Hz body plus a 2.5 to 9 kHz tick, 35 ms); - the wait, 0.50 s to the bonk: a soft pondering hum, two sines a fifth apart (196 and 294 Hz, plus a little of the octave), wobbling 2.2 times a second, with the spinner's quiet tick (3.1 kHz, 12 ms) six times a second. It swells in over 0.12 s, then from the second thought creeps up a semitone and 40% louder until the bonk; - one small blip per thought (740 Hz at 1.00 s, 830 Hz at 1.78 s, 90 ms); - a small rising boing as zippr jumps (280 rising to 800 Hz, 0.14 s); - the bonk, 2.62 s: the hum CUTS DEAD (in 1 ms), and a low thock (a pitch falling from 230 to 80 Hz, 0.12 s, with a small click); - zippr's two-note chirp, a small speaker's voice: 1318.5 Hz for 65 ms, then 1975.5 Hz for 85 ms, with a slight warble, band-limited to 500 Hz to 5.2 kHz; - the whoosh of the message leaving (0.34 s of noise whose band sweeps up from 700 Hz); - a soft thud as zippr lands (88 Hz, 0.1 s); - then near-silence under the line. - The hits and their frames (at 30 fps): tap 11; first thought 30; second thought 53; jump 74; bonk 79; landing 88. zippr placed each sound exactly on its moment. Start each hit 2 frames BEFORE the frame it belongs to (the ear hears that as exactly on time); the hum's swell and the whoosh END on their frame instead. - Master: one gain to -16 LUFS integrated, then a soft knee (untouched below -4 dBFS, eased so it never passes -1.5 dBFS). zippr's mix measured -16.2 LUFS with a true peak of -1.5 dBFS; the wait about -19 LUFS, the bonk and whoosh about -10, under the line about -47. The cut from the hum to near-silence is the joke's rhythm.

The finish - 1080x1920 (and 1920x1080), 30 fps, 5.0 s, 150 frames. Chromium flags --force-color-profile=srgb, --hide-scrollbars, --font-render-hinting=none and --disable-lcd-text, at device scale 1. Encode: libx264, preset slow, crf 18, yuv420p, +faststart, with AAC 192 kbit/s at 48 kHz stereo and -shortest. zippr's portrait file came out at about 1 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the locked frame, the studio, the one button at the centre, the hero under it, the beats and their seconds, the hum that cuts dead on the bonk, and the sound design exactly. Change only these: - The message, the recipient and the button become my decided action. - The two second thoughts become my AI's needless doubts, the second one the punchline. - zippr's mascot becomes my hero, from question 8, in two poses with a worried colour. - "It's already decided." becomes my line, and the name becomes mine. - The ink and the studio become my colours on their roles.

STEP 4: SHOW ME THE PLAN, THEN WAIT

Write my joke 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 0.00 s, 2.10 s, 2.64 s and 4.95 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: GSAP and the fonts are downloads unless they are already here. If GSAP can't be had, drive the same proxies from plain functions of time inside seek(t) and tell me. If a font isn't there, use a similar free sans and a similar free italic serif, and tell me. If you can't run code, build it as one self-contained web page that plays in the chat: the studio on a canvas, the button, message and words in HTML, the hero as my pictures or drawn shapes, the same timeline, 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.25 s on a contact sheet and look at it at phone size. Could someone who never saw this message say what the joke is from the frames alone? Fix what doesn't read. - On the file: it plays start to end; nothing sits in the bottom 340 px of the portrait film; the hero's face is visible in every frame; the hum stops on the bonk 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.