zippr
All prompts

Ink drawing

The Second Time, redone

Six steps the first time, one line the second.

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 Second Time, redone" (zippr.to). In it, someone asks for the weekly sales report, and a pen has to find its way across a map of the job, from a spreadsheet at the bottom to an empty report at the top, through six stops (Search, Read, Reason, Calculate, Format, Export). It loops round two stops and hits two dead ends, and gets there: fair, because the work is new. "The second time." The same ask, and the pen walks the exact same wander over last week's faint pencil line, same wrong turns included, until we cut away. "The second time, with zippr." The route is already inked in red; a short ask zips along it in half a beat and lands on the same bell, and a small blue mascot hops for joy. It is drawn in thin ink on cream paper, with one red-orange accent that appears only for zippr; the mascot is the only solid, lit thing. The sound is a walk you can hear: a clock ticking, a pen scratching, one note per stop. 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, about $0.14 a picture: a standing picture, and a jump edited from it, the two this film shows (about $0.28). You can skip it: use a picture you already have, or have the hero drawn in code for free. Everything else in the film 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: "The second time, you don't need to tell it again.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 19.3 seconds, portrait 1080x1920, on a grid of 90 beats a minute (a beat is 20 frames). Keep 19.3 s? 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 the wordmark at the end. 6. The words on screen. zippr's: "The first time.", "The second time.", "The second time, with zippr."; the ask "Every Monday, turn our sales spreadsheet into the weekly report." (twice), then the short ask "Do the weekly sales report." with a chip "Weekly sales report"; the six stop labels; the end line "The second time, / you don't need / to tell it again."; and the wordmark "zippr". Which words are yours? 7. Your story in zippr's shape: - the everyday job that comes round again, as one full sentence the first time (zippr's: "Every Monday, turn our sales spreadsheet into the weekly report."); - where it starts and where it ends up (zippr's: a spreadsheet to a filled-in report page); - the six steps it takes, one word each (zippr's: Search, Read, Reason, Calculate, Format, Export), and where the first attempt wanders (zippr's: two loops and two dead ends); - the short ask the second time, and the name your product gives the job when it recognises it (zippr's: "Do the weekly sales report." and "Weekly sales report"). Your hero is never the one wandering: it appears only on your product's side, as the one who already knows the way. Only claim what your product really does. 8. The hero's picture: (a) you have one: a mascot, product photo or logo, ideally 2 poses (standing facing us, 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. The ink and paper. zippr's: near-black ink on cream paper, a pencil grey for last week's line, a muted grey for the labels, and ONE red-orange accent that appears only once your product does (the route, the chip, the report's corner). 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 The line: "The second time you don't need to tell it again." The job comes from zippr's own list of film ideas: a weekly sales report that today's AI works out by searching, reading, reasoning, calculating, formatting and exporting, every time, and the same ask the second time. An earlier version of this film put the idea on a sunlit desk with pictures from an image model; this one draws the job as a map, so the second time can be SHOWN as the same route walked again, not only described. The whole film is one line, walked twice. It was made storyboard first: six frames of the finished look (each with what is on screen, what moves next and what is heard), a full-length sound sketch, and an animatic, approved before a single frame of the film was built. The look is the thin-ink-on-cream paper world from an earlier test in which Claude directed the art; it fits because the pen's line IS the time spent: a wander you watch being drawn is the AI working it out, and ink that stays is a job written down. It was approved to be built.

The tools - Claude (Opus 5.5): wrote the storyboard, the sound sketch and all the code, built the film and checked it. - A web page with one HTML canvas: the map, the pen's line, the stops and their icons, the spreadsheet and report, the ask card, the clock and every word are drawn in JavaScript from one plan file, and seek(t) draws any frame from the time alone. The hero is two cut-out pictures. No animation library. - Playwright for Python driving headless Chromium: opens the page, calls seek(t) for each of the 580 frames and screenshots it. - Python with numpy: makes every sound from scratch, at a fixed seed (1398). There are no recordings and no voice. - ffmpeg with libx264 and AAC: joins the frames and the sound, and measures loudness. - The fonts: Inter for all the words, and Schibsted Grotesk (weight 800, free under the SIL Open Font License) for the wordmark. - 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. The storyboard: the film in one line, the style in one line, six frames rendered by the film's own page (0:01 the ask and the pen setting off, 0:07 the whole first wander, 0:11 the same wrong turn over last week's line, 0:12 the zip, 0:13 the landing, 0:18 the end card), the source of every line. Then a sound sketch and an animatic. Wait for a yes. 2. The plan file: 30 fps and 90 beats a minute, so a beat is exactly 20 frames. Every time is in BEATS on the grid (whole or half). The page and the sound both read it; the page also writes out the few frames it works out itself (when the zip passes each stop, when each word of the short ask appears), and the sound reads those too. 3. The page: work the beat out from the frame number (frame / 20), never from seconds / beat length, or a frame that sits exactly on a beat can land a hair short and show the wrong act. 4. Render: Playwright screenshots each frame; ffmpeg joins them. 5. The sound: numpy builds each sound at the plan's frames. Mix, set the loudness. Then move the whole finished soundtrack 2 frames earlier (below). 6. Measure the finished file: every hit's attack against its picture frame; count what passes, fails and could not be told. 7. Check the finished file (below), then export.

The look (every value is zippr's) - Paper #EDE6D3, with a full-frame grain baked once: seeded noise (plus or minus 4.5 levels) with a slow wave, and a vignette that darkens the corners by up to 18 levels. Cards and pages #F6F1E4. Ink #1B1A17. Every ink line has a fineliner's small hand wobble (two sine waves, 1.5 and 0.8 px, from the point's own position), round caps and joins. - The map (frame pixels): the spreadsheet (110 x 120 px, a grid of 6 rows and 4 columns) at (170, 1440); the report page (124 x 156 px with a folded corner) at (830, 522); six stops, each a ring of radius 40 with a small icon inside at 70% (a magnifier, an open book, a cog, a calculator, lines of text, a share arrow) and its label under it in Inter 500 at 30 px, muted #6A6258, with a paper halo: Search (330, 1225), Read (760, 1235), Reason (480, 1030), Calculate (840, 890), Format (270, 820), Export (560, 690). Two dead ends at (112, 1060) and (1010, 1060). - The first wander: a smooth curve through the stops in this order: the spreadsheet, two loops round Search (radius 60, growing a little), off to dead end A, across to Read, to Reason, two loops round Reason, to Calculate, off to dead end B, back across to Format, Export, and the report. The pen draws it at 5.2 px in ink, easing in and out on every leg so it slows into each stop, with a 7 px ink nib at its tip. A stop it reaches shades in (#E3D9C2) and its ring thickens; a dead end gets a road-closed bar (48 px, 5 px ink) across the line. - Last week's line: when the first ask closes, the whole wander fades to pencil #9C9383 at 30%, 4.2 px, over one beat. The second walk inks exactly over it. - The written-down route: in the zippr act, one smooth 7 px red-orange line through the same six stops in order, no loops, no dead ends; the rings turn red-orange, 4.5 px. - The zip: a bright red-orange streak (#FF8A5C, 13 px, 260 px long) with a glowing head (46 px, from warm white to orange to clear), speeding up along the red route (a cubic ease-in) from beat 18.25 to beat 19. Each stop flashes red-orange on the frame the zip passes it, with a ring swelling 26 px and fading over 0.4 beats. On the landing a ring ripples out from the report (from 14 to 84 px, fading over 0.9 beats), the report fills in and its folded corner turns red-orange, and the camera settles with a tiny bump (1.2% and a 3 px shake, dying over 8 frames). - The report filling in: a title line, five bars (34, 52, 28, 64 and 46 px) and two text lines, one after another over 0.75 beats. - The camera: a slow push about (540, 1000), 2.2% over the first act and 2% over the second. - The top: the act caption in Inter 700 at 50 px, ink, at (60, 150); a drawn clock with no numerals at (978, 132), radius 44, its long hand sweeping once through the first walk and again through the second, and moving exactly one tick on the zippr landing frame. The ask card: 960 x 176 px at (60, 222), 26 px corners, card colour with a 3 px ink border; the ask in Inter 500 at 42 px, wrapped at 760 px; a send arrow in a 30 px circle at the right, which fills with ink when sent. The chip: a pale red-orange pill (#FBE3D8, 50 px tall, a 2.5 px red-orange border) at (100, 318), with a red-orange dot and "Weekly sales report" in Inter 600 at 30 px, red-orange. - The end card: the map dims almost to paper (92% paper over it over 0.75 beats); the line in Inter 800 at 84 px, ink, centred on three lines at y 930, 1034 and 1138, with a paper halo; the wordmark in Schibsted Grotesk 800 at 120 px at y 1330; the hero stays in the corner, jumping for joy. - Every picture change that has a sound starts one frame early, so the sound's own frame is the first frame that shows it. - The colours are ROLES. My brand colours go onto the roles; zippr's value stays for any role my colours don't fill. - THE PAPER, the ground: cream #EDE6D3, and cards #F6F1E4. Mine: my lightest warm neutral, and a shade lighter for cards. - THE INK, every line, icon and strong word: #1B1A17. Mine: my darkest colour. It must read as thin lines on the paper at phone size. - LAST WEEK, the pencil ghost: #9C9383. Mine: a grey between my paper and my ink. - MUTED, the stop labels: #6A6258. Mine: a softer tone of my ink. - THE ONE ACCENT, only for my product (the red route, the zip, the flashes, the chip, the report's corner): red-orange #E4572E, with #FF8A5C for the zip's streak. Mine: my brand's accent. Nothing in the first two acts may use it. - THE HERO'S GLOW on the paper: its screen's warm white, rgba(254,241,223), 20% at the centre, 210 px radius. Mine: my hero's own light colour, or none.

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 two pose prompts. Each 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. The jump, 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 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 screen box; - size the standing pose to the same body area as the one it replaced; fit the jump between x 800 and 1070, drawn about 10% smaller than the standing pose, so its flung ears stay inside the frame and clear of the "Read" label; - keep the jump's pale lime screen as it came. - Designing the character in the first place took zippr several earlier rounds of pictures. Those are not in the price above. - zippr swapped this blue mascot into the finished film afterwards: the page loads the hero from two picture files, so the files were changed and the frames re-rendered, with the sound untouched. - On the map the hero stands at the lower right, its feet at (935, 1525), with a soft contact shadow (an ellipse 92 x 15 px, warm dark at 28%) and its screen's warm glow on the paper behind it. It watches in the standing pose, then jumps on the landing.

zippr's story, beat by beat (19.33 s at 90 beats a minute; a beat is 0.667 s, 20 frames; frame = seconds x 30) - 0.00 s: frame 1 already carries "The first time.", the clock, the ask card with "Every Monday, turn our sales spreadsheet into the weekly report.", and the whole map, un-walked. 0.07 s (frame 2): the send arrow fills. - 0.67 s (frame 20): the pen leaves the spreadsheet. It reaches Search at 1.33 s (frame 40), loops twice round it to 2.00 s (frame 60), hits dead end A at 2.33 s (frame 70), crosses to Read at 3.00 s (frame 90), Reason at 3.67 s (frame 110), loops twice to 4.33 s (frame 130), Calculate at 4.67 s (frame 140), dead end B at 5.00 s (frame 150), Format at 5.67 s (frame 170), Export at 6.00 s (frame 180), and the report at 6.67 s (frame 200), which fills in. The clock hand sweeps once. - 7.67 s (frame 230): the ask card folds shut, and the whole wander fades to a pale pencil line by 8.33 s. Nothing points at it: no caption, no effect. It sits for about a second. - 8.67 s (frame 260): "The second time." and the same ask, word for word, sent. - 9.00 s (frame 270): the pen sets off again and inks exactly over last week's line: Search at 9.67 s (frame 290), the same two loops to 10.33 s (frame 310), the same dead end at 10.67 s (frame 320). Last week's second dead end still shows as a pale bar, waiting. - 11.33 s (frame 340): hard cut away, mid-line. We do not sit through it twice. - 11.33 to 12.00 s: "The second time, with zippr." The same map, the route already red. The hero stands at the lower right, watching. "Do the weekly sales report." types in half a second, one word at frames 345, 349 and 352. 12.00 s (frame 360): sent; the chip "Weekly sales report" appears in the card: the ask was recognised. - Five frames of near-silence. 12.17 s (frame 365): the zip leaves, speeding along the red route; the stops flash at frames 372, 374, 376, 377 and 379. - 12.67 s (frame 380): it lands at the report on the beat; the report fills, its corner turns red-orange, a ring ripples out, the clock moves one tick, and the hero swaps to its jump and hops 46 px over 0.75 beats. Short arms raised beside the head read as ears: throw them out to the sides, clear of the head's outline. The shot holds two bars. - 15.33 s (frame 460): the map dims almost to paper. From 15.5 s "The second time, / you don't need / to tell it again." fades in. - 16.67 s (frame 500): "zippr". Hold to 19.33 s.

Fixes zippr made between the storyboard and the film, which you should keep - The hero was made smaller and moved in, so its ear never meets the frame edge and its hopping arm clears the "Read" label. - The beat is worked out from the frame number, so a frame on a beat shows exactly that beat. - Each picture change with a sound starts one frame early, so the sound's frame is the first frame that shows it; the pen's nib shows on the frame it leaves. - The zip's flashes and the clock's one tick land on whole frames, the same frames as their notes. - The second walk is the first walk moved by exactly 12.5 beats: every tick, note, knock and scratch.

The sound (no music; a walk you can hear) - Made in numpy at 48 kHz, with a fixed random seed (1398), written as stereo. The idea: the first time, the job is a slow walk you can hear (a pen scratching, a clock ticking on every beat, one note per stop climbing to a bell, a dull knock at each wrong turn). The second time you hear the SAME walk, note for note, tick for tick and knock for knock (the scratch is the identical recording), until it is cut off. With zippr the same notes run as one zip in half a beat and land on the same bell. - Under everything: room tone (noise low-passed at 400 Hz with a little 60 Hz to 3 kHz), about -38 dB. It dips 8 dB for the 5 frames between the zippr send and the zip, then comes back over 15 frames. There is never digital silence. - The sounds, what they are made of, and their gains in dB before the master: - the pen's scratch: noise 1.8 to 7.5 kHz, roughened by a slow 25 to 70 Hz grain, swelling and easing on every leg so it slows into each stop, -25; the second walk plays the identical array; - the clock, on every beat from the pen leaving: a tick (2600 Hz) and a tock (1900 Hz), each 50 ms with a little noise, -14; - a note at each stop: a soft marimba-like pluck (a sine with a quick 4x partial, 0.4 s), climbing C5, D5, E5, G5, A5, B5 for Search to Export, -14; - a dead end: a dull wooden knock whose pitch sags from 220 to 70 Hz, 0.35 s, -11; - the report landing: a bell, C6, with partials at 2.01x, 2.76x, 5.4x and 8.9x, 2.4 s, -13; - the first send click (noise 1.5 to 9 kHz, 4 ms), -15; the second send click, -3; - the ask card folding shut: a crisp paper flap (noise 0.9 to 7 kHz over a soft 150 to 900 Hz body), -4.5; - the cut: one paper flick (noise 1.2 to 9 kHz, 18 ms), -21; the second walk is cut dead under it with a 12 ms fade; - the zippr ask: one key click per word, -16, and the send click, -10.5; - the zip: a zipper-like sweep (noise 0.9 to 9 kHz chopped by teeth that speed up from 40 to 300 a second), swelling to the landing and fading out over its last 15 ms so the bell attacks clean, -24; inside it, the same six notes, short (0.12 s), each on the frame the zip passes its stop, -18; - the landing: the same C6 bell, -10; - the end: a soft paper swish as the map dims (noise 0.8 to 6 kHz, 0.4 s), -29; and one low bell, C5, 3 s, under the wordmark, -17. - The hits and their frames (at 30 fps): send 2; pen leaves 20; Search 40; loop end 60; dead end A 70; ticks 80, 100, 120, 160; Read 90; Reason 110; Calculate 140; dead end B 150; Format 170; Export 180; report and bell 200; card shut 230; second send 260; second walk 270, 290, 310, 320, 330; cut 340; words 345, 349, 352; send 360; zip notes 372, 374, 376, 377, 379; landing 380; wordmark bell 500. - Build every attack exactly ON its frame (peaking within 2 ms). 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 10 ms fade in and a 150 ms fade out; the gain set by measuring (ffmpeg's ebur128 filter) until the whole is -16 LUFS integrated, with only the peaks soft-limited under -2 dBFS. zippr's came out at -16.0 LUFS, true peak -1.9 dBTP. The zip and the landing are the loudest stretch (about -12 LUFS) by design; the second walk sits about 5 LU under the first, because it is cut before its bell.

The finish - 1080x1920, 30 fps, 19.33 s (580 frames). Chromium flags --force-color-profile=srgb, --hide-scrollbars, --font-render-hinting=none and --disable-lcd-text, device scale 1. Encode: H.264 High, level 4.0, yuv420p, crf 18, preset medium, converted with out_range=tv and out_color_matrix=bt709 and tagged BT.709 (primaries, transfer and matrix, set with ffmpeg's setparams as well). AAC 192 kbit/s at 48 kHz stereo, with +faststart. zippr's file came out at about 4 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the ink-on-paper map, the one-accent rule, the three acts (the first walk, the same walk again cut short, the red route and the zip), the pencil ghost, the timings and the sound design exactly. Change only these: - The weekly report, the spreadsheet and the report page become my customer's job, where it starts and what it produces. - The six stops become the six steps of that job, one word each, and the wander's loops and dead ends become where it goes wrong. - The short ask and the chip become my customer's two or three words and my product's name for the job. - zippr's mascot becomes my hero, from question 8. - The end line and the wordmark become mine. - My colours go on the colour roles (question 9), with my accent only on my product's side.

STEP 4: SHOW ME THE PLAN, THEN WAIT

Write my story in two sentences, then my beat table with times and frames 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 6.8 s, 10.7 s, 12.3 s and 17.5 s), and a sound sketch if you can. 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 sans-serif and tell me. If you can't run code, build it as one self-contained web page that plays in the chat. Draw everything on a canvas from the frame number, 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 the accent colour appears only on my product's side, and that the hero's face is visible in every frame it is in. - On the file: it plays start to end; each hit sound starts 2 frames before its picture and is clearly audible (the zip's notes are the ones most easily lost); the second walk sounds identical to the first until the cut; 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.