One Message, Seven Jobs

Make me a short film for my product the same way zippr made one particular film: "One Message, Seven Jobs" (zippr.to). In it, one long message asks for seven different jobs. The old way splits it into seven separate chat windows that pile up on each other, with a little "copied" tag carrying text from one to another, and a caption asks "Why are you managing your AI's chats?". Hard cut to the brand: the same one message now opens seven action cards that fill and finish out of order, and it all ends as "one unified result". It is an animated diagram, drawn entirely in a web page: light, thin white type and dark rounded panels on near-black, with one bright colour for everything the eye should follow. It is silent. 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) on a paid Claude plan. Any AI app that can run code can follow it. - There was no paid step beyond the AI app's plan: there is no picture, clip, voice or music to generate. Every window, card and word is drawn in the page.

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: "You shouldn't need seven chats to get seven things done.") 3. Who is going to watch it, and where: reels, a website, a talk? 4. Length and shape. zippr's film is 40 seconds, landscape 1920x1080, made to be read on a desktop or a video call. Keep 40 s? Landscape, or re-lay it for portrait (keep the bottom 340 px empty there)? 5. Your brand colours (hex codes if you have them), and your product's name as it should appear in the hard cut and on the end card. 6. The words on screen. zippr's: the hook "One message. / Everything gets done." under the name; the long message; the seven window names; the caption "Why are you managing / your AI's chats?"; the one-word brand cut; "One message · seven jobs"; the seven card titles; "one request / multiple actions / multiple outputs" and "one unified result"; and the end line. Give me yours, or say which to keep. 7. Your story in zippr's shape: - the one message, with every job in it (zippr's: "Create an Instagram carousel from these posts, write an email to Sarah with the proposal, update the investor projections, analyze this week's sales, draft the LinkedIn announcement, turn yesterday's meeting notes into actions, and find the strongest customer quotes."); - the old way (zippr's: one chat window per job, copy and paste between them); - the question that names the pain (zippr's: "Why are you managing your AI's chats?"); - your way (zippr's: one message, seven action cards working at once); - the result (zippr's: "one unified result"). 8. Your jobs as short card titles (zippr's seven: "Instagram carousel", "Email to Sarah", "Investor projections", "Weekly sales review", "LinkedIn announcement", "Meeting notes to actions", "Strongest customer quotes"; two lines of 32 px at most), and the time each card shows when it is done. zippr's times were stand-ins, and the film says so in frame. Only show a time you have measured, or show "done" with no time. 9. The colours. zippr's: a near-black ground, dark grey panels, thin white type, and one lime (#d6ff74) for everything the eye should follow: the caret, the send button, the "copied" tag, the pasted text, the progress bars, "done", and the result line. Which of your colours takes the lime's role, or keep zippr's?

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

Where the method came from The story and every line on screen came from a written concept for two product films (this is the second): one message, seven jobs, the seven chats, the copy-and-paste, "Then hard cut.", the action cards "progressing", and the final line. The builder wrote no words on screen except the honest line under the mock-up (below). The two-line stack before the end comes from the same write-up's "one inbox, many outputs" idea.

The tools - Claude (Opus): planned the beats from the written concept, wrote the whole page, fixed what the linter and the layout stills showed, and rendered it. - HyperFrames 0.6.119, HeyGen's open-source tool (Apache-2.0): one HTML page is the film; one paused GSAP timeline moves everything; "npx hyperframes render --quality high" photographs the page frame by frame into an MP4. It needs Node 22 or newer and ffmpeg. Its linter ("npx hyperframes lint") catches timing mistakes before a render. zippr's render took 39 seconds for 1,200 frames on a laptop. - GSAP 3.14.2, the animation library, under GSAP's standard no-charge licence: every move is a tween at an exact second on one timeline. - ffmpeg: under HyperFrames, it joins the frames into the video. - The font: Archivo, weight 300, loaded from a local file with @font-face (never a font name the browser has to find).

The steps, in order 1. The story as a timed cut map, from the written concept: seven scenes, every time an absolute second. 2. The page: seven full-frame scenes stacked on each other, all drawn in HTML and CSS, moved by one timeline. 3. Layout stills at the key beats, read by eye before any render. 4. Lint, then render, then read one frame from every second by eye. 5. Check the finished file (below), then export.

The look (every value is zippr's) - 1920x1080, 30 fps. Every scene is a full-frame layer stacked on the others; a scene is hidden by opacity 0, never by visibility, and scene swaps are hard sets on the timeline. The first scene is at full opacity on frame 1: the hook is frame 1. - The type: Archivo 300 throughout. The hook 128 px, the end line 96 px, the result line 92 px, the caption 54 px, the message 46 px (line height 1.46), card titles 32 px, labels 28 to 34 px uppercase with wide tracking (0.22 to 0.32em). Nothing on screen is under 28 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 GROUND: near-black ink #0a0a0a. Mine: my darkest colour, kept near black. - THE THING TO FOLLOW, the product's colour: lime #d6ff74, on the name above the hook, the rule under it, the caret, the SEND button, the "copied" tag, the pasted text (at 48%), the progress bars, every "done", the left edge of the one-message box, "one unified result", and the name on the end card. Mine: my brand colour. It must be the brightest, most saturated thing in every frame, and it must read on the panels as well as on the ground. - PANELS, the message box, the seven windows and the seven cards: #141416, with a 2 px border of white at 14%, and 16 to 22 px corners. Mine: a shade just above my ground. - WORDS: white #ffffff. Quieter words (the "YOU" label, the "running" state, the two-line stack): white at 55 to 86%. - PLACEHOLDER TEXT in the windows: grey bars, white at 13%, 18 px tall with round ends. - Keep the old way unbranded: the seven windows carry no logo and no product name, so the old way is nobody's product. - Fixes zippr made, which you should keep: - a serif was tried for the big type and removed: its thin default weight turned the lowercase "e" crossbar into a hairline at 96 to 128 px, and the hook read as "Onc mcssagc". A plain sans at a light weight fixed it; - two states that swap in place ("running" and "done") are stacked on top of each other, never hidden inline: a hidden inline word still takes its space and pushes its neighbour; - card titles always reserve two lines, so every bar and every state sits on the same line across the grid. - One fault in zippr's cut; fix it in mine: the long message was revealed by one left-to-right wipe over all five of its lines at once, so mid-way every line was cut off at the same column and the last line was fully there from the start. It read as broken text, not typing. Reveal it line by line, or letter by letter.

zippr's story, beat by beat (40.0 s; 30 frames a second; frame = seconds x 30) - 0.0 to 4.0 s, the hook: centred from y 340, the name in lime (30 px, uppercase, tracking 0.32em), 44 px above "One message. / Everything gets done." at 128 px. Both are there on frame 1, with no fade-in. A lime rule 280 x 3 px grows out from its centre at 0.9 s over 0.8 s. The scene fades out from 3.5 s over 0.5 s. - 4.0 to 11.0 s, the message: a message box at x 260, y 232, 1400 px wide, labelled "YOU". The long message is revealed from 4.4 s over 3.6 s at a steady speed, with a lime caret (4 x 52 px) travelling with it and blinking every 0.28 s until 8.0 s. A lime "SEND" button (bottom right of the box, 12 px corners) rises 16 px into view at 8.2 s and is pressed at 9.6 s (to 0.94 scale in 0.12 s, back in 0.18 s). Fade out from 10.6 s. - 11.0 to 21.0 s, the old way: seven chat windows (520 x 348 px) drop into a diagonal pile, one every 0.42 s from 11.05 s, each falling 26 px from 0.96 scale over 0.34 s. The first sits at (660, 60) and each next one 113 px right and 102 px down, to (1338, 672). Each has a 66 px title bar with a small grey dot and its name ("Chat 1 · Carousel", "Chat 2 · Email", "Chat 3 · Investors", "Chat 4 · Sales", "Chat 5 · LinkedIn", "Chat 6 · Meeting notes", "Chat 7 · Customer research"), and three grey text bars. The copy and paste: at 14.4 s a lime "copied" tag appears on the last window, glides up to the third window from 14.9 s over 0.85 s, and fades, and a lime bar grows in that window at 15.8 s. It happens again the other way at 16.5 s (into the fifth window at 17.8 s), so it reads as a habit, not an accident. At 18.1 s the caption "Why are you managing / your AI's chats?" (54 px, at x 96, y 392, in the empty left third) rises 20 px into place. Hard cut at 21.0 s, no fade. - 21.0 to 23.0 s: black, one word, 176 px, centred: the brand ("Zippr." in zippr's cut), fading up at 21.35 s over 0.5 s from 0.97 scale. - 23.0 to 34.0 s, the new way: at 23.05 s the one-message box ("One message · seven jobs", 34 px, with a 6 px lime left edge) drops 18 px into the top left, and the honest line fades in at the bottom left (30 px): "Concept mock-up." in lime, then "Not a shipped screen. Times are stand-ins, not measurements." Keep a line like it for any screen or number that isn't real yet. The seven cards (392 x 240 px; four across at y 300, three below at y 596, centred) pop up from 0.94 scale over 0.36 s, 0.12 s apart from 23.6 s: one split, not seven beats. From 24.8 s every bar fills at a steady speed, each at its own pace (5.0, 3.1, 6.9, 4.2, 3.8, 2.7 and 5.9 s), so they finish out of order, the way parallel work looks. As each bar fills, "running" becomes a lime "done · time": the sixth at 27.5 s (0:19), the second at 27.9 s (0:21), the fifth at 28.6 s (0:26), the fourth at 29.0 s (0:29), the first at 29.8 s (0:34), the seventh at 30.7 s (0:41), the third at 31.7 s (0:48). Fade out from 33.5 s. - 34.0 to 37.0 s, the result: centred, "one request / multiple actions / multiple outputs" (46 px, dim, line height 2.0) rises 18 px at 34.1 s, then "one unified result" in lime at 92 px rises 20 px at 35.1 s. Fade out from 36.6 s. - 37.0 to 40.0 s, the end card: "You shouldn't need seven chats / to get seven things done." (96 px, centred) rises 22 px from 37.15 s over 0.8 s, and the name in lime (34 px, uppercase, tracking 0.30em) rises 14 px under it from 38.0 s. Hold to 40.0 s. - There is no camera: the page is the frame, and nothing moves but the pieces. - Page rules zippr kept: no Math.random and no clock, so every render is the same; one paused timeline; never two tweens on the same property of the same thing at the same time (a caret's blink must finish before the set that hides it); never centre an animated box with translateX(-50%), place it with an explicit left.

The sound - None. The film is silent and built to be read on mute: the words carry it. If I want sound, ask me before adding any.

The finish - 1920x1080, 30 fps, 40.0 s, 1,200 frames, no audio track. H.264 High, yuv420p, tagged BT.709, as HyperFrames' high-quality render gives it. zippr's file came out at about 2 MB.

STEP 3: SWAP IN MY PRODUCT

Keep the seven scenes, their seconds, the moves, the one colour to follow, and the honest line exactly. Change only these: - The long message becomes my customer's many-jobs message, and the window names and card titles become my jobs (keep the count at seven if I can; if not, keep the same diagonal pile and a centred grid). - The caption becomes my question that names the pain. - The brand word and the end card's name become mine, and the end line becomes my takeaway. - The two-line stack and the result line become my version of "many things in, one thing out". - The times on the cards become measured times, or none. - The lime becomes my brand colour on the same roles.

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 stills in the finished look (for example at 2.0 s, 19.0 s, 29.0 s and 39.0 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. Ask me before installing anything: HyperFrames and GSAP are downloads. If you can't use them, write the same timeline as plain functions of time in the page, step it frame by frame with Playwright driving headless Chromium, screenshot each frame and pipe the frames into ffmpeg, and tell me. If a font isn't there, use any free sans-serif at a light weight and tell me. If you can't run code, build it as one self-contained web page that plays in the chat: every scene drawn in HTML and CSS, moved by the same timeline. Add a big Play button and a Replay button. Tell me how to screen-record it on a phone and on a computer.

STEP 6: CHECK IT BEFORE YOU GIVE IT TO ME

- Put one frame from every second 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 file: it plays start to end; it is 40.0 s (or my length), 1920x1080 at 30 fps; the message is never cut off mid-word across several lines at once; no window or card runs off the frame; every word is at least 28 px and spelt right. This film is silent, so there are no sound checks; if I asked for sound, check that each hit 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.