The Key, in text art

Make me a short film for my product the same way zippr made one particular film: "The Key, in text art" (zippr.to). In it, a small blue mascot is locked out of a door. It pays coins, one after another, into a slow thought over the lock until the thinking turns into a key. The next time, one turn of the key opens the door at once, and no coin moves. Every frame is made of plain letters and symbols on black. 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. - 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). You can skip it: use a picture you already have, or have the hero drawn in code for free. In this style the hero becomes letters anyway, so a code-drawn hero loses the least.

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: "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 10 seconds, portrait 1080x1920 (a landscape 1920x1080 cut exists too). Keep 10 s, or stretch every beat evenly to 20 or 30 s? Portrait or landscape? 5. Your brand colours (hex codes if you have them), and your product's name as it should appear at the end. 6. The one line of words at the end (zippr's: "Pay for thinking once."), or none. 7. Your story in zippr's shape. Who is the hero, and what do they want (zippr's: to get through a door)? What does getting it cost the first time (zippr's: coins, paid one by one into a slow thought)? What does your product turn that into (zippr's: a key)? And what does the next time look like (zippr's: one turn, instant, nothing paid)? 8. The hero's picture: (a) you have one: a mascot, product photo or logo, ideally 3 poses (standing, looking up hopefully, jumping for joy) as PNGs with transparent backgrounds; (b) you want one generated like zippr's with Nano Banana Pro (paid, about $0.14 a picture; you run it, or give me access); (c) I draw it in code (free). 9. Colours for the letters: zippr used 8 text colours from its mascot and set, on black. Put yours on the colour roles in the recipe below, or use one single colour like an old computer screen?

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

The tools - Claude (Opus 5.5): wrote all the code below, made every fix, and ran the fresh-eyes checks. - A web page with an HTML canvas: draws the scene, one frame at a time, as a pure function of time. JavaScript, no animation library. - Playwright for Python driving headless Chromium: opens the page, calls seek(t) for each frame and screenshots it. - ffmpeg with libx264 and AAC: joins the frames and the sound into the video. - Python with numpy and SciPy: makes every sound from scratch. There are no recordings. - Fonts: Geist Mono (weight 500) for the characters, and Geist (weight 600) for the words before they turn into characters. Both are free under the SIL Open Font License, from Vercel's Geist project. - Paid, once, before this film: Nano Banana Pro (Google's gemini-3-pro-image, through Vertex AI, at 2K) drew the mascot's 3 poses, about $0.14 each by usage.

The steps, in order 1. The story first. Write it in one line and check it the way it will be seen: render 10 key frames, and have a fresh reader describe what they see. 2. One plan file holds every time in the film. The picture and the sound both read it. 3. The scene page. It draws each frame onto a HIDDEN canvas that is never shown: a black stage lit by one lamp, glossy "vinyl" objects, and the hero cut-outs. 4. The letters pass. It reads the hidden frame and writes one character per grid cell onto the visible canvas. Details are below. 5. Render. Playwright steps the page frame by frame, and each PNG screenshot is piped straight into ffmpeg. No frame files go on disk. 300 frames took 77 to 84 seconds per format on a laptop. 6. The sound. numpy builds each sound at the times in the plan file. Mix, master, join to the picture. 7. Fresh eyes, then fixes. A separate AI (Claude Opus 5.5) is told nothing. It sees one frame every 0.2 s at phone width (390 px), with no sound, in 5 sheets of 2 s each, and says what happens and what it means. Fix what it misses, then ask a NEW reader. zippr ran 3 rounds and stopped when the readers began contradicting each other. Each read was about 80,000 tokens. 8. Check the finished file (below), then export.

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, its screen box and its eye ellipses (the half-lids are drawn over those); - mirror the looking-up pose so it faces the door; - recolour the jump's lime screen to warm white. - Designing the character in the first place took zippr several earlier rounds of pictures. Those are not in the $0.42.

zippr's story, beat by beat (10.0 s, 30 frames a second; frame = seconds x 30) - 0.00 s: a lamp strikes on a black stage. On the left, a small arched door in tangerine with a cream frame, and a brass lock plate with a big keyhole. On the floor, a stack of 16 coins. On the right, the hero looks up at the lock. - 0.30 to 0.55 s: three puffs rise from the keyhole (0.30, 0.35, 0.40 s) and a cream thought bubble pops open above the door. Its three dots bob like an AI app's "..." at 2.6 waves a second. - 0.55 to 1.90 s: three coins flick off the stack one at a time and arc into the bubble (they land at 0.95, 1.45 and 1.90 s; each flight takes 0.4 s). The bubble swells a little with each one. - 2.10 to 3.15 s: the stream. Ten coins, each flight 0.3 s, landing one every 0.1 s from 2.2 s to 3.1 s. The dots bob faster (5.2 waves a second), the bubble jitters, and the stack drops to 3. The hero's eyelids sink halfway (2.0 to 3.05 s). - 3.15 s: the dots stop dead. The hero's eyes pop open. - 3.20 to 3.42 s: the bubble condenses into a big brass key. - 3.42 to 3.82 s: the key flies into the keyhole and turns a quarter. CLACK at 3.82 s. - 3.90 to 4.40 s: the key hops out onto a bead chain on the hero's chest. Route the key low, under the face, on its way to and from the chain: a key or card that crosses the face hides the eyes. 4.35 to 4.75 s: the door swings open (105 degrees) and warm light pours out. - 5.05 to 5.20 s: the door SLAMS shut. The camera shakes: 9 px, 22 Hz, dying away over 0.2 s. - 5.40 to 5.90 s: cut to a close-up at 1.9x zoom. The hero gives the camera "the look": flat half-lids, deadpan, key on its chest. - 5.90 s: cut to a medium shot of the lock at 1.5x. 5.95 to 6.25 s: the hero hops, and the key flips off the chain into the keyhole. 6.27 to 6.36 s: one quarter turn, and ONE click at 6.36 s. 6.42 to 6.64 s: the door flies open. No bubble, and no coin moves. - 6.40 to 6.76 s: the key flies back to the chain. 6.66 to 7.06 s: the hero jumps for joy (its face screen glows warm white). Short arms raised beside the head read as ears: throw them out to the sides, clear of the head's outline. - 6.95 s on: the camera eases back to a wide shot, wider and lower than the opening, so the scene sits smaller under the words. - 7.50 s: the line types in at 24 characters a second, set on three lines: "Pay for / thinking / once." A tangerine caret blinks after it. - 8.85 s: "zippr" fades up under it over 0.5 s, and holds to 10.0 s. The last frame rhymes with the first: the same door, now open, the hero wearing the key, the untouched coins still there. - The camera, portrait, as [time, zoom, centre x, centre y] on a 1080x1920 stage: [0.0, 1.15, 548, 1060], [3.1, 1.2, 548, 1060], [3.9, 1.2, 548, 1060], [4.45, 1.15, 548, 1090], [5.399, 1.15, 548, 1090], [5.4, 1.9, 737, 1080, cut], [5.899, 1.9, 737, 1080], [5.9, 1.5, 500, 960, cut], [6.44, 1.5, 500, 960], [6.95, 0.9, 540, 775], [10.0, 0.9, 540, 775]. Ease in and out (cubic) between keys.

The hidden scene (what the letters are made from) - 1080x1920 stage. Keep the bottom 340 px empty. A black ground (#050505) and one overhead lamp: a soft warm cone (rgba 255,246,228) down to an elliptical pool on the floor at y 1392. The lamp flickers once as it strikes. - The door: an arch 304 px wide and 628 px tall (x 118 to 422, y 764 to 1392, top radius 152), with three plank grooves, in a cream frame (x 96 to 444). The lock plate is at x 277 to 397, y 975 to 1150. The keyhole is a 17 px circle plus a tapered slot, centred at 337, 1050. - Every object is shaded like a glossy vinyl toy: a three-stop radial gradient from the upper left. Tangerine: #FFB37A, #F07F3C, #A9471A. Brass (lock, coins, key): #FFF0BE, #E2B550, #8C6420. Cream (bubble): #FFFFFB, #FBEFDC, #D8C4A4. Frame: #F6DDB4, #E6C28E, #9C7648. Each object has a soft drop shadow. - The coin stack sits at x 505: coins 80x24 px, 12 px thick. The bubble is at 585, 600 with radius 108, made of 8 overlapping round lobes, with three small puffs trailing down to the lock. The key is a ring bow, a blade and 5 teeth. - The hero is 440 px tall, feet on the floor at x 740, in three cut-out poses: looking up (until 5.4 s), standing (from 5.4 s), and the jump (6.66 to 7.06 s). The half-lids are drawn over its eyes in code. The chain is two straight rows of 11 small brass beads, in a V. - Leave OUT of the hidden scene: film grain, vignette, dust and any soft glow around the new key. In characters they only print as noise or streaks. - The words are drawn in Geist 600 into a second hidden canvas, sized so each lowercase letter is exactly 5 character-rows tall, with every baseline on a row line. The line is centred and never re-centres while it types. The caret is a tangerine bar one column wide and 6 rows tall. "zippr" goes under the line, its lowercase letters 4 rows tall.

The letters pass (the heart of the style) - The grid: cells of 12x20 px, which gives 90 columns x 96 rows in portrait (160 x 54 in landscape). zippr tried other sizes: at 108 columns it looked like old TV scanlines, and at 77 the hero lost its face. 90 kept it. - The font: Geist Mono, weight 500, 20 px, centred in each cell, on black #050505. Only printable ASCII (codes 32 to 126) ever reaches the screen. - For each cell, measure the hidden frame's light in 3 x 4 regions (12 values). First subtract the stage's floor grey (0.06) as ground. Then brightness to ink: gain 1.12, gamma 0.85. Then the rules, in this order: 1. Words: if the words canvas covers at least 42% of the cell, print "#" (or "|" where the tangerine caret is), in #F3F1EA. 2. Dark: if the brightest region is under 0.02, print a space. If it is under 0.14, it is faint light: a sparse stipple from . ' ` , - chosen by a hash of the cell (never of time), so it holds still. 3. Even: if the regions differ by less than 0.16, pick from the density ramp " .:-=+*#%@" by mean brightness. 4. Edge: otherwise push the regions apart (each value = max x (value/max)^2), then pick the character whose own 3 x 4 ink pattern is nearest. Measure every character's pattern once at start-up. The candidate set: space . , : ; ' ` " ^ - _ ~ = + * ! | / \ ( ) [ ] < > i l I t f r c v x z s o a e L J T Y V X C U O m w q p d b k h # % & @ - Colour: the cell's light-weighted mean colour, snapped BY HUE (not brightness) to the nearest palette entry, then dimmed by how bright the cell is (0.30 to 1.08 of full). - The text palette is ROLES. My colours go onto the roles; zippr's value stays for any role my colours don't fill. The hidden scene's three-stop gradients (above) are the same roles: a light, a mid and a dark tone of each role's colour. Colour snaps by hue, so two roles that must read apart need hues far apart, or they print as one colour. - THE HERO: zippr's blue #5B8FE0, belly #A9B7DA, ears cream #E9C893, screen #FBE5CA. Mine: my hero's own colours. - THE THING WANTED, the door, and the caret: tangerine #F07F3C. Mine: my strongest brand colour. - THE COST AND THE KEY (lock, coins, key, chain): brass #E8BC55. Keep brass unless my brand has its own gold or yellow. Its hue must differ from the door's. - LIGHT: #FFF0DA, a pale light, so an open doorway prints as one light. - WORDS: white #F3F1EA. The ground stays black #050505. - A brand colour too dark to read as thin letters on black gets a lighter tint for the letters; keep the true colour in the hidden scene. - zippr's film has no green anywhere. That is zippr's rule, not mine: if my brand is green, use it. - Fixes that fresh readers forced, which you should keep: - make small things bigger and simpler than you think: the bubble's three dots are bigger, further apart and darker; - flying coins face the camera, with a dark inner ring (a spinning disc prints as a blob); - the key in the lock is 1.15x larger. - Save a few frames as .txt files. Every byte must be printable ASCII or a newline.

The sound (no music; the scene's own sounds are the rhythm) - Made in numpy at 48 kHz, from tones and filtered noise, with a fixed random seed. There is no music bed and no voice. - Under everything: room tone (band noise 60 to 900 Hz, plus a quarter of 0.9 to 9 kHz) at -50 dB, and the lamp's hum (100 Hz plus 200 Hz) at -58 dB. - The sounds, what they are made of, and their gains in dB: - lamp strike (a 52 Hz thump, a noise click and a faint 1760 Hz ring), -6; - thought puffs (short rising sine blips from 620 Hz, 180 Hz apart), -15; - ticks, one per wave of the bubble's dots (30 ms of band noise, 1.8 to 6 kHz, with a 2200 Hz ring, alternating with a lower "tock"), -22, and 4 dB louder in the fast part; - a coin "tink" for every coin (a sine with partials at 2.41x and 3.9x, 60 ms decay), pitched from MIDI note 84 and rising 2 semitones per coin: -11 for the first three, about -15 in the stream; - a short high bell (1568 Hz) as the key forms, -14; - a metal slide as the key goes in, -10; - the heavy CLACK, -6; - three tiny tinks as the key lands on the chain, -12; - a soft creak as the door swings, -20; - the SLAM (a 62 Hz body, then a clack), -3; - a dry little "tock" for the look, -14; - a vinyl hop, -12; - ONE round click (12 ms of noise, 1.5 to 6 kHz, over modes at 480, 1250 and 2300 Hz), -5; - the hero's two-note chirp (1320 Hz, then 1980 Hz, with a little vibrato), -9; - a soft landing, -12; - one typed-key click per letter, -20; - one dry bell (C5, 523 Hz) under the name, -9. - The hits and their frames (at 30 fps): lamp 0; puffs 9, 11, 12; coins into the thought 29, 44, 57, then the stream; key forms 103; key goes in 111; CLACK 115; key on chain 132; SLAM 156; the look 164; hop 181; key goes in 188; ONE click 191; chirp 200; chain 203; landing 212; typed keys from 225 at 24 a second; bell 266. - Every sound that goes with something you see starts 2 frames BEFORE that frame; the ear hears that as exactly on time. Swells and creaks END on their frame instead. - Mix: one clear sound per key moment, at least 6 dB louder than whatever is under it, and silence when the thinking stops. Master with a look-ahead peak limiter (no saturation) to -16 LUFS, true peak at or below -2.5 dBTP.

The finish - 1080x1920 (or 1920x1080), 30 fps, 10.0 s. H.264 High, level 4.0, yuv420p, crf 18, capped at 12 Mbit/s, 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 5.6 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the style, the grid, the letters pass, the timings and the sound design exactly. Change only these: - zippr's mascot becomes my hero, from question 8. - The door becomes the thing my hero wants, and the coins become what it costs the first time. - The thought bubble becomes the slow work, and the key becomes what my product gives. - "One turn, the door flies open" becomes my one-step payoff. - "Pay for thinking once." becomes my line, and "zippr" becomes my name. - The text palette becomes my colours on the colour roles, 6 to 8 of them, snapped by hue. Keep no green unless my brand is green. - If my objects need more room than a door and coins, keep the same beats and times, and keep every object big and simple enough to read at 90 columns.

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 still frames in the finished text-art look (for example at 0.8 s, 3.4 s, 6.5 s and 9.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 a font isn't there, use any free monospace font and tell me. If you can't run code, build it as one self-contained web page that plays in the chat. The scene goes on a hidden canvas and is turned into characters on every frame, and the sounds are made live by 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. - On the finished file: it plays start to end; every character is plain ASCII; 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.