--- name: stamp description: Make a narrated vertical reel (1080x1920, 45-60 s) in the "Stamp" format - a fast motion-graphics escalation story ("You want X. So you do A, and it works, but... So you do B, but...") where every spoken "but" gets a red rubber BUT stamp slammed onto the screen. Glossy magenta app windows on a near-black grid with a magenta stage beam, hard flips to an off-white grid, and one window per beat that keeps evolving on the words: counters roll, cards whip in and float, a cursor clicks and drags, wires draw and carry pulses, big numbers snap into a selection box with a burst and confetti. Word-by-word captions at the top with magenta selection boxes and emoji. A quick male ElevenLabs voice, a bass-heavy 105 bpm bed and ~300 sound cues (ticks, pops, whooshes, stamp slams). Drawn frame by frame in headless Chrome, encoded with ffmpeg. Use it when someone asks for a stamp reel, "stamp.md", a "but" reel, an escalation / "so you... but" explainer, a reel in the style of fast magenta UI motion graphics, or wants to turn a script into this kind of video. --- # Stamp reel: how to make one You will make a **45-60 second vertical video (1080x1920, 30 fps, H.264 + AAC, at most 60 s and 60 MB)** that tells **one escalation chain**. It opens on a dream with a number ("You want to get a million views a month with your Claude reels"). Then come three or four "**So you** … **and** it works, **but** …" steps; **every "but" slams a red rubber BUT stamp** onto the card. A turn follows, then the payoff that mirrors the hook, then the ask. The picture is **fast, glossy app UI in one magenta**, drawn from HTML/CSS/SVG (no images, no footage, no real brands). It never sits still: **something reacts to almost every spoken word.** **`reference.jpg`** (next to this file, if you have it) is a contact sheet of 12 frames from a finished Stamp reel. **This is what it should look like.** Left to right, top row first: 1. **The hook:** a giant glowing magenta "1,000,000" in a selection box with round handles and orbiting rings, a chip "👁 views · this month", and a dark "reels.studio" app window with four pink reel tiles and a Claude prompt bar. A tilted sticker "made with Claude". 2. A dark prompt bar "make tonight's reel", a reply "✓ Reel 12 posted", and a calendar "October · reels posted" with every day checked in magenta. A "🔥 30-night streak" chip and a big "30 nights" in a selection box. 3. **Light:** the reels window with a **red BUT stamp** over the tiles, and a second card "Your last 6 reels" (six identical tiles, a red "all look the same", "= same hook" chips). 4. A "trending" card with a STOP SCROLLING reel and "2.2M views", little avatars floating around it, a copy on the right with "✓ hook / cuts / captions / music" chips flying in, a "🔥 going viral" sticker and a cursor. 5. **Light:** "Insights · views" (48,910 / +1,204 / 71 %, a climbing line, "📈 +3,700 %") stamped BUT, with an "Editing · reel 14" timer card at 4:12:29 in red. 6. A "skills.market" page: a VIRAL REELS SKILL hero, stars, feature checks, a red "$30" price tag that swings, a BUT stamp with a red glow, "Buy now · $30.00" and a cursor. 7. **Light:** a Downloads row "viral-reels-skill.zip · $30.00 paid" and one small "SKILL.md · 4 KB" text file dropped below it in a selection box, with a sticker "1 file · 4 KB". 8. A "Casper 👋" pill over a "Morphy" window whose canvas nodes (Chat, Agent ● running, Card, Note) are joined by glowing wires with pulses, a sticker "agentic super app", chips "🤖 agents · 💬 chats". 9. **Light:** a "my-format" card ($0, "✓ Published · 1,284") stamped BUT, avatars around it, and a "skills.market" card "ULTIMATE VIRAL PACK · repackaged · $30 · Sold: 87" with two "New sale · $30.00" notifications. 10. A "Content formats" library window with 16 `.md` files (stamp.md glowing) inside a magenta "Morphy" frame, with a sticker "inside Morphy". 11. Three cards ("Unlock this skill $30", "Pro · monthly $9.99/mo", "Follow + share · strings"), each banned by a glowing red circle-slash and cracked. 12. **The ask:** a big glowing comment box with "STAMP" in a selection box, a "✓ stamp.md" chip, and a paper plane flying along a dashed line to "Messages". The caption at the top of every frame shows the current phrase, its key word boxed. If you only have this file, section 3 describes everything with numbers. Everything is drawn **one frame at a time** as HTML + SVG in headless Chrome (`window.setT(t)`), then muxed with a mix made in ffmpeg. This file gives you the look (exact colours, sizes, motion), the grammar of the script and of the edit, the complete tested engine (Appendix A: write it once) and a complete example video (Appendix B). With the engine written, **a video is two files**: `script.mjs` (what the voice says and the captions show) and `scenes.js` (what each scene shows, keyed to the words). Work in this order and don't skip ahead: **setup → script → fake timings → scenes → stills → voice → real timings → bed → fix the scenes → 30-40 stills on the key words + scan → full render → mix → encode → check → deliver.** --- ## 0. Rules of engagement (read first) 1. **Be gentle with the user's computer.** One headless browser at a time, at the lowest priority (`cdp.mjs` does this; on Windows it also pins Chrome to one CPU). Never run two renders at once. 2. **Never print secrets.** The key is `ELEVENLABS_API_KEY` (environment, or `.env` in the project folder). Scripts read it; you never echo it, log it or put it in a file you show. 3. **Spend credits deliberately.** `gen-vo.mjs`, `gen-sfx.mjs` and `bed.mjs --eleven` are dry runs unless you pass `--yes`. The voice is one take per section (~1 credit per character, ~930 for a 55 s reel); takes are cached. The sounds and the bed work without any credits (synthesized). 4. **Stills before film.** Direct on fake timings (`build-timeline.mjs --fake`) and check stills before you pay for the voice; never start the full render until a dense stills sheet (30-40 frames on the key words) is right. 5. **Background jobs die when your turn ends.** Render in foreground chunks under your tool timeout (`--full --to 600`, then `--full --from 600`); the render resumes where it stopped. 6. **No real people, brands or numbers you can't stand behind.** Everything is drawn: neutral person silhouettes, made-up app names (reels.studio, skills.market), no screenshots, logos, real handles or real view counts. A number on screen is one the script says, or a plain counter the scene implies. 7. **Don't publish anything.** You deliver files. Posting is the user's call. 8. If the user's instructions conflict with this file, the user wins. If something is missing (no key, no ffmpeg), say exactly what and offer the closest thing. Never fake success. ## 1. Requirements - **Node 22+** (global `fetch` and `WebSocket`), **ffmpeg + ffprobe** on PATH, **Chrome or Edge** (or set `CHROME=`). Debug ports 9671 and 9698 on 127.0.0.1. No npm packages. - **An ElevenLabs API key** for the voice. The voice is **Liam**, a premade voice every account has. The free plan is enough to try the format but has no commercial licence; videos that promote anything need a paid plan. No key yet: do everything up to the stills with `--fake` timings and ask for the key. - **Fonts:** Inter Tight and Archivo Black (SIL OFL) are free downloads (`setup.mjs` fetches them). Arial Black (Windows, macOS) is preferred for the stamp. Emoji come from the system: Segoe UI Emoji on Windows (which has **no Emoji 13+** such as 🪢 or 🫠, so use older ones), Apple Color Emoji on a Mac, Noto Color Emoji on Linux. - **Sound:** the 22 sound effects (`sounds.mjs`) and the music bed (`bed.mjs`, made per video to its length) are synthesized, so there are no licences and no credits. Optional: `gen-sfx.mjs --yes` and `bed.mjs --eleven --yes` make them with ElevenLabs instead, closer to the reference. - Optional: Python + `pip install faster-whisper` lets `check.mjs --whisper` compare the finished audio with the script. ## 2. Project layout and setup ``` stamp-reel/ one project folder, many videos .env ELEVENLABS_API_KEY=... (never print it) film.html the page: timeline.js -> engine -> scenes.js -> window.setT(t) engine/core.js parts.js stamp.js fx.js film.css markup.mjs clock + looks + scenes/camera + captions + safe zone · the UI kit · Stamp's parts · motion + effects · the look · script markup + voice setup.mjs sounds.mjs gen-sfx.mjs bed.mjs cdp.mjs gen-vo.mjs build-timeline.mjs render.mjs check.mjs whisper.py fonts/ sfx/ made by setup.mjs my-video/ one folder per video (Appendix B is a complete one) script.mjs scenes.js what the voice says · what each scene shows vo/ timeline.js(on) vo.wav bed.wav cues.json stills/ frames/ mix.wav video.mp4 cover.jpg (made by the tools) ``` ```bash mkdir stamp-reel && cd stamp-reel # write every file of Appendix A, then: node setup.mjs # checks Node/ffmpeg/Chrome/key, downloads the fonts, makes sfx/ ``` A video (every tool takes `--video `, a folder inside the project): ```bash mkdir my-video # write my-video/script.mjs (section 4) and my-video/scenes.js (Appendix B shows both) node build-timeline.mjs --video my-video --fake # guessed timings + a silent vo.wav: direct before you pay node render.mjs --video my-video --stills --at beats --safe --sheet sheet # look at my-video/stills/sheet.jpg node gen-vo.mjs --video my-video # dry run: the text of every take + the character count node gen-vo.mjs --video my-video --yes # one take per section -> my-video/vo/ node build-timeline.mjs --video my-video # real timings: prints every word with its time node bed.mjs --video my-video # the 105 bpm beat, cut to this length node render.mjs --video my-video --scan # every visible text, every 0.25 s, against the safe zone node render.mjs --video my-video --stills --at 1.6,4.4,5.6,7.5,… --sheet words # 30-40 stills on the key words node render.mjs --video my-video --full --to 600 && node render.mjs --video my-video --full --from 600 --to 1200 && node render.mjs --video my-video --full --from 1200 node render.mjs --video my-video --mix # -14 LUFS; prints how far the bed sits under the voice node render.mjs --video my-video --encode --out video.mp4 --cover 1.75 # my-video/video.mp4 + my-video/cover.jpg node check.mjs --video my-video --whisper # specs, frame 0, 5 random frames with the safe box, words heard ``` ## 3. The look, pinned down ### 3.1 The frame (1080x1920 px) | Layer | Where | What | |---|---|---| | Background, dark | everywhere | `#0b0c0a`, a 72 px grid of 1.5 px lines at 5 % white, a soft vignette. On top: **the stage beam**, a trapezoid from y 380 (36 % wide) to the bottom (64 % wide), magenta at its top (`rgba(214,66,200,0.24)`) fading to 2.5 % white, blurred 10 px. Also a magenta hot spot behind the captions, three low haze pools, eight twinkling 4-point sparkles and drifting dust | | Background, light | everywhere | `#f2f2ee` with the same grid in 6.5 % black. No beam | | Captions | from y 270, centred on x 510, ≤ 820 px wide | word by word (3.4) | | The scene | design space y 520-1480, x 40-1040 | the engine scales each scene by 0.92 around (540, 1000) and shifts it -30, -10, so it lands under the captions inside the safe zone | **Safe zone (every platform covers the edges):** all text inside **x 60-960, y 250-1480**; captions inside x 100-920; nothing important in the top 250 px, the bottom 440 px or the right 120 px. `render.mjs --stills --safe` draws the zone and outlines any visible text outside it in red; `--scan` tests every text every 0.25 s. Whip and zoom transitions may leave a blurred, moving text outside for one frame; anything static outside is a bug (usually a camera pan with scale > 1.03). ### 3.2 Colours | Token | Hex | Used for | |---|---|---| | magenta | `#c42fb8`, light `#e24fd6`, mid `#ec7fe3`, pale `#fbe6f9`, pink `#f070e4` | every accent: buttons and chips (gradient `#e24fd6 → #b0219f`), checks, charts, the big numbers (`#ff8af2 → #e24fd6 → #c42fb8` with a magenta glow), selection boxes, wires | | stamp red | `#e5283a` (`#ff4b5c → #c81e30` on tags) | the BUT stamp, ban circles, prices, failures, cracks | | ink | `#f3f3f1` on dark, `#141518` on light | text | | dark cards | `linear-gradient(#202126, #15161a)`, 1 px white 9 % border, radius 30, a deep shadow | windows on dark | | light cards | white → `#f6f6f8`, a soft magenta-grey shadow, radius 30 | windows on light | | Claude orange | `#d97757` | only for Claude's own spark | ### 3.3 Type **Inter Tight** everywhere (600-900). **Cascadia Mono** / Consolas / monospace for file names, code lines, times and the footer lines. **Arial Black** (or Archivo Black) for the stamp. System emoji in captions and chips. ### 3.4 The captions The Motion look, at the top. Each phrase (split at `/` in the script) shows **word by word**: a word fades in 0.1 s before it is spoken, rising 16 px and un-blurring. Earlier words are grey (`#8b8c8f` on dark, `#9a9b9e` on light); the current word is ink. **Key words** (`*word*`) sit in a selection box (`rgba(120,16,110,0.55)` fill on dark, `rgba(226,79,214,0.22)` on light, a 2.5 px magenta border, radius 3), with **round magenta handles** at the top-left and bottom-right corners; the box springs in. `@icon:word` puts an emoji before the word. 56 px, weight 620 (keys 700), line-height 1.24, two lines at most. ### 3.5 The stamp `P.but(el, cx, cy, t0, { size: 150, rot: -7, text: 'BUT', light })`: **"BUT" in Arial Black, red `#e5283a`**, letter-spacing 0.02em, a 9 px border with radius 22 plus a 3.5 px outline 7 px outside it (the double rubber-stamp frame), and a **grunge mask** (420 tiny holes, 10 scratches, 6 worn patches). It enters 0.08 s before t0 at **2.1x with 10 px blur**, rotated 10° further, then lands in 0.12 s with a squash (8 %). On landing it throws **a red shockwave ring** (0.45 s) and **ten ink flecks**, shakes the camera (11 px, 0.3 s) and plays `stampslam` + `boom` (and a `whoosh` 0.16 s before). On light it multiplies onto the card; on dark it gets a red glow and a dark wash. Put it **over the thing that just failed**; it stays until the scene ends, and the scene keeps moving around it. ### 3.6 The vocabulary (section 7.3 lists the options) - **App windows** (`P.mac`): three dots on the left (red, pink and violet), the app's icon (a magenta rounded square with ✦) and its name centred in a 74 px header, and an optional status chip on the right. Inside: a sidebar, reel tiles, a composer, stats, charts and lists. - **Big numbers** (`P.bigNum`): 150-180 px, weight 850, gradient + glow, tabular digits. They count up, and at the hit a selection box springs around them with orbiting rings, a radial burst and an ellipse shockwave. - **Stickers** (`P.sticker`): a 76 px magenta gradient pill with a white 3 px border, 38 px bold text, slammed in tilted (-6° … 6°). - **Chips** (`P.chip`): 40 px pills, pale (light), translucent magenta (`dk`), red (`rd`, `rdk`) and solid gradient (`on`). - **Reel tiles** (`P.reel`): vertical pink-magenta gradient tiles with a two-line caps hook (the second line in a black box) and a neutral person circle. - **Others:** calendars (`P.cal`, days tick in magenta), line charts that draw left to right with a dot (`P.chart`), stat boxes, list rows, phone notifications, a plain text file (`P.file`), price tags that swing, a receipt that prints, chat bubbles, a comment box. - **Motion and effects:** whip-slides with motion blur, zoom-ins and blur dissolves between scenes. Also a **camera rig per scene** (push-ins, punches on hits, pans to the card that just arrived, a constant tiny drift), **idle float** on every card, and connector **wires** that draw and carry glowing pulses. Then bursts, shockwaves, confetti, gloss sweeps, red cracks, floating avatars, a loading shimmer, and a cursor that clicks or drags with someone else's labelled cursor. ### 3.7 Motion | Move | How | |---|---| | between scenes | `in: 'up'` (a whip from below, 1500 px, 26 px blur, a vertical stretch) for most dark → light flips, `'zoom'` (from 50 %, blurred) for "look closer" beats, `'blur'` (a soft dissolve) otherwise; always with a `whoosh` or `swoosh` | | inside a scene | elements enter on their word with a spring (`pop`), a whip (`left/right/up/down`), a `slam` (from 1.7-2.2x), a `drop` (falls and bounces) or a `zoom`, then **float** (a 5 px bob and a 0.4° sway); the camera pushes 3-7 % and punches on hits | | a number | counts on a curve while the voice says it; ticks under it; at the hit: box, burst, shockwave, sometimes confetti, a sub hit | | a "but" | the stamp (3.5) | | a list ("No X, no Y, no Z") | one card per item whips in on its "no", a ban circle slams on its word, the card cracks and greys out | | the ask | a small comment field grows into a big glowing box on "comment", the keyword types in, a selection box snaps on, then the deliverable chip rises and a paper plane flies to Messages on "send it to you" | ## 4. Writing for this format **The chain** (the reference's and the example's), ~170 words ≈ 55 s: - **s0, the hook:** a dream with a number: "You want to get / @money:*a_million_views* a month / with your Claude reels." - **3-4 steps**, each one sentence: "**So you** , **and** , **but** ." For example: "So you prompt Claude for a new reel *every_night,* / and it actually works, / but they all look the *same.*" - **The turn** (who is talking, and why this matters), **the answer**, then **the payoff that mirrors the hook**: "And now you're getting a million views, and you never pay for a Claude content skill again." - **The ask:** "This format is called *stamp.md.* / So comment *STAMP* and I'll send it to you. / Completely *free.*" **Markup:** `/` starts a new caption phrase (2-7 words) · `*word*` boxes a key word (`*two_words*` makes one box, one per phrase) · `@icon:word` puts an emoji before a word (define `F.ICONS.money = () => '💸'` in scenes.js) · `{shown|said}` when the caption and the voice differ (`{$30,|thirty dollars,}`, `{.md|dot M D}`, `{STAMP|stamp}`). Say numbers as words in the voice. ## 5. The voice (ElevenLabs) **Liam** (`TX3LPaxmHKxFdv7VOQHJ`, premade), `eleven_multilingual_v2`, stability 0.4 · similarity 0.8 · style 0.5 · speaker boost · **speed 1.1**: a young American male, quick and bright. The reference is a male narrator at ~127 Hz and ~200 wpm; Liam measures ~128 Hz and ~198 wpm here. These are the `engine/markup.mjs` DEFAULTS; a `script.mjs` may export `VOICE`, `MODEL`, `SETTINGS` or `SPEED` to override them. One take per section, word times from ElevenLabs' character alignment. `GAP` (silence before a section) 0.22-0.3 s, `HOLD` 1.8 s. Whisper will hear "thirty dollars" as "30", ".md" as "md", "Claude" as "clawed" and names loosely: judge those by ear. ## 6. Timings `build-timeline.mjs` lays the takes end to end (LEAD before the first, GAP before each section, HOLD after the last) and writes `timeline.js` (every caption token with its `t0`/`t1` on the film clock) and `vo.wav`. Markup-only edits (where `/` and `*` fall) need no new voice: it re-applies them to the takes. `--fake` guesses times at Liam's pace (~200 wpm) so you can direct before the voice exists. Every scene time comes from a word, so the real timeline moves every scene automatically. Run `bed.mjs` again after any timing change. ## 7. Directing ### 7.1 Times come from words `T0('s1', 'every night')` is the start of the first token in section s1 whose text starts with "every night" (case and punctuation blind), `T1(…)` its end, `T0('s5', 'no', 2)` the third "No". `S.s3.start` / `S.s3.until` are a section's bounds; `END` is the film's length. A scene starts 0.03-0.16 s before its word: `const tB2 = T0('s1', 'and') - 0.03`. **Check that a beat's payoff lands before its scene cuts** (a payoff on the last word of a sentence can fall after the next scene's start). ### 7.2 scenes.js ```js const { S, T0, T1, END, scene, cue, looks, div, html, set, clamp, lerp, eio, eo, back, typeIn, centerX } = F; const P = F.parts, M = P.M, E = F.enter, tw = F.tw; Object.assign(F.ICONS, { money: () => '💸' }); const tB = S.s1.start - 0.12, tB2 = T0('s1', 'and') - 0.03; looks([[0, 'dark'], [tB2, 'light']]); // [time, 'dark' | 'light', fade s]: one flip per beat or two { const sc = scene(tB2, S.s2.start - 0.12, { in: 'up' }), el = sc.el; // el is the scene's camera rig const tW = T0('s1', 'works'), tBut = T0('s1', 'but'), tThey = T0('s1', 'they'); F.cam(sc, [[tB2, 1, 0, 0], [tBut, 1.02, 0, 0], [tThey + 0.1, 1.04, 0, -70]]); // [t, scale, x, y, rot], eased const win = P.mac(el, 80, 560, 840, 520, { light: true, title: 'reels.studio' }); const live = P.chip(win, 640, 17, '● Posted ✓', 'on', { height: '40px' }); const card = div(el, 'lcard', 360, 950, 620, 450, 'Your last 6 reels'); const but = P.but(el, 520, 760, tBut, { size: 150, rot: -8, light: true }); // plays its own sounds + shake sc.on(t => { E(live, t, tW - 0.06, { from: 'pop', float: 0 }); but.update(t); E(card, t, tThey - 0.08, { from: 'up', dist: 520, spin: 4, seed: 8 }); // whips in, then floats }); cue('uipop', tW - 0.05, 0.08); cue('swoosh', tThey - 0.1, 0.06); } ``` - A scene is shown from `tin` to `tout` (plus its exit). Make each end where the next begins. `scene(tin, tout, { in, out, push })`: in `'blur' | 'up' | 'down' | 'left' | 'right' | 'zoom'`, out `'blur' | 'zoom' | …`, push (default 0.03: a slow zoom over the scene). - Draw in **design coordinates** (1080x1920, content inside x 40-1040, y 520-1480) on `sc.el`; the engine fits the scene into the safe zone. Animate per frame in `sc.on(t => …)`. `F.enter` sets an element's transform every frame; to add a bounce or swing, append to `el.style.transform` after it. - **Keep the camera's x near 0 when its scale is above 1.03**, or the window's left text leaves the safe zone. ### 7.3 What the kit gives you | Part | Options and use | |---|---| | `F.enter(el, t, t0, { from, d, dist, s0, rot, spin, blur, float, seed, t1, d1, to, x, y })` | every element's entry, idle float and exit. from `'pop' 'up' 'down' 'left' 'right' 'slam' 'drop' 'zoom' 'fade'`; to `'fade' 'pop' 'up' …` at t1 | | `F.cam(sc, keys)` · `F.shake(t, amp, dur)` · `F.tw(t, t0, t1, ease)` · `F.swing(t, t0, amp, freq, damp)` | the scene camera · a camera shake · a 0-1 progress · a hit tag's damped swing (degrees) | | `P.mac(el, x, y, w, h, { light, title, glyph, hh })` | an app window | | `P.but(el, cx, cy, t0, { size, rot, text, light })` → `{ update(t) }` · `P.ban(el, cx, cy, r, t0)` → `{ update(t) }` | the stamp · a red circle-slash with a flare (both play their sounds) | | `P.bigNum(el, cx, y, { size, light })` → `{ el, set(s), update(t, tHit) }` · `F.num(v)` · `F.money(v)` | the giant number and its hit box | | `P.chip(el, x, y, html, '' \| 'dk' \| 'rd' \| 'rdk' \| 'on', style)` · `P.sticker(el, x, y, html)` · `P.ICON(size, glyph)` | chips · stickers · the app icon | | `P.reel(el, x, y, w, h, { title: [line1, line2], hue: 0-5 })` | a reel tile | | `P.cal(el, x, y, { cell, gap, title, light })` → `{ el, update(n) }` · `P.chart(el, x, y, w, h, { pts, light })` → `{ update(u), at(u) }` · `P.stat(el, x, y, w, label, value, { light, mag, red })` → `{ v }` · `P.row` · `P.notif(el, x, y, w, { app, text, time, light, warn })` · `P.file(el, x, y, w, h, { name, size, lines, light })` → `{ el, lines }` | the UI pieces | | `P.composer(el, x, y, w, h, { light, card, lead: 'claude' \| null, placeholder })` → `{ el, type(t, text, t0, t1), press(t, at), hint(s) }` · `P.bubble(el, y, text, { right, size })` · `P.pill(el, x, y, html, 'bl' \| 'dk' \| 'lt' \| 'rd', style)` | the prompt bar, a chat bubble, a button (from the Motion kit, recoloured) | | `P.wire(el, d, { t0, dur, width, dash, pulses, speed, w, hh, color })` → `{ el, path, update(t) }` | an SVG connector that draws itself, then carries pulses. A rounded-rect path draws a window's frame | | `P.burst(el, cx, cy, t0, { n, r0, r1, rx, ry, len })` · `P.shock(el, cx, cy, t0, { r, rx, ry, color })` · `P.confetti(el, cx, cy, t0, { n, spread, up })` · `P.shine(host)` → `{ update(t, t0, dur) }` · `P.crack(el, x, y, w, h, t0, { seed, n })` | hit lines · ring · paper bits · gloss sweep · red cracks (each has `update(t)`) | | `P.orbiters(el, cx, cy, n, { rx, ry, t0, s })` · `P.skel(host, x, y, w, h)` → `{ update(t, tDone) }` · `P.vib(el, cx, cy)` · `F.cursor(el)` / `P.cursor2(el, 'someone')` + `F.drive(cur, t, [[t, x, y]…], [clickTimes])` | floating avatars · loading shimmer · phone buzz · cursors | | `div(parent, 'abs' \| 'gcard' \| 'lcard', x, y, w, h, html, style)` · `html(el, s)` · `typeIn(el, text, t, t0, t1, caret)` · `centerX(el, cx)` | your own elements | ### 7.4 The edit follows the words Every spoken claim gets its literal picture at that moment. In the example: - "a million views" → the counter hits 1,000,000. - "every night" → the calendar fills to 30. - "actually works" → gloss sweeps and "Posted ✓". - "but they all look the same" → BUT, then six identical tiles drop in. - "copy a format" → a cursor clicks "Copy format" and the clone flies across. - "views start climbing" → the chart draws up. - "takes you hours" → a timer races to 4:12:37 and turns red. - "it costs thirty dollars" → the tag slams and swings, and the cursor pays. - "just one text file" → the zip drops a single 4 KB file. - "I built Morphy" → a frame draws itself and nodes pop with wires. - "people repackaged it" → someone's cursor drags the file into a "pack". - "an entire library" → 16 files fly in. - "no paywalls" → a ban circle. - "a million views" → the hit with confetti. - "you never pay" → "$30.00" rolls down to "$0.00". - "comment STAMP" → the box grows and types it. ### 7.5 Motion rules (break these and it looks lazy or buggy) - **Something reacts to almost every word.** A scene that only pops its cards in and holds them reads as lazy next to the reference: keep counters, typing, cursors, wires, chips and stickers coming on the words. - Nothing appears before its word, nor later than its word. - Vary the transitions (whip, zoom, blur) and give every scene a camera move. Punch in on hits. - Elements float after they land; nothing is ever perfectly still. Inside a window, set `float: 0` so the content stays aligned. - One BUT per "but". The stamp lands on the thing that failed and stays. ## 8. Stills and the safe zone `render.mjs --stills --at --safe --sheet sheet` writes `my-video/stills/.jpg` and a contact sheet. `--safe` draws the zone and prints any visible text outside it. `--scan` tests every visible text every 0.25 s without screenshots. **Take 30-40 stills on the key words** (every "but", every hit, every scene's middle) before the full render. Then, after encoding, review the film as a 6 fps contact sheet (`ffmpeg -i my-video/video.mp4 -vf "fps=6,scale=216:384,tile=10x3" -frames:v 1 motion.jpg` for the first 5 s, with `-ss` for the rest): that is where missing motion shows. ## 9. The full render `render.mjs --full` writes `my-video/frames/f00000.jpg …` (~150-450 ms a frame; a 55 s film takes ~5-12 minutes). It skips frames that exist, so split it (`--to 600`, `--from 600`) to stay under your tool timeout. After changing one scene, re-render just its frames: `--full --from --to --force`. ## 10. Sound - **`sounds.mjs`** makes the 22 sounds, every one starting on its first sample and peaking at -1 dB: `stampslam boom bassdrop whoosh swoosh uipop uitick tick tick1 tick2 tick3 mouse send notif kaching error counter typing stopwatch cards riser sparkle`. **`gen-sfx.mjs --yes`** replaces them with ElevenLabs sound effects (its prompts are the reference set's), trimmed the same way. `sounds.mjs --force` brings the synthesized ones back. - **`bed.mjs`** makes `my-video/bed.wav`: a 105 bpm dark trap beat. The 808 follows A-F-C-G, with a kick on 1 and 2.5 (plus 3.5 every other bar), snaps on 2 and 4, eighth hats with a triplet roll every other bar, and a quiet low pad. **`bed.mjs --eleven --yes`** asks ElevenLabs Music for the reference's kind of bed once per project, then loops 11 bars of its steady middle to the video's length. - **`render.mjs --mix`** mixes the voice, the bed (ducked under the voice) and every `cue()`, fades the bed over the last 1.8 s, then brings it all to **-14 LUFS integrated, true peak ≤ -1 dBTP**. It prints how far the bed sits under the voice: aim for **~11-12 LU**. That is a little louder than usual, because the reference's bass bed is part of its feel. Set it with `--music` (0.23 is the default, right for the synthesized beat; ~0.1 for an ElevenLabs bed). - **Cue a sound for nearly every UI event.** That is ~300 cues in 55 s; the reference's soundtrack is dense. Use `cue(name, t, gain, length)`: - every scene start: a `whoosh` or `swoosh` (0.05-0.07); - `uipop` on pops (0.06-0.09) and `uitick` on small changes (0.04-0.06); - `F.ticks(t0, t1, n, g)` for counters and fills; `counter` (0.04-0.06) under a long count; - `F.typeCue(t0, t1)` under typing; `mouse` on clicks (0.1-0.12); `send` on a send; - `cards` on slams and stickers; `kaching` on a price; `notif` on a notification; - `stopwatch` under a timer; `error` on a failure (≤ 0.05); - a `riser` 0.7 s into a big hit, then `bassdrop` / `boom` on it, plus a `sparkle` on highlights. - `F.SFX_GAIN` (in `engine/fx.js`) trims the dense sounds for every cue (bassdrop 0.45, boom 0.65, uipop 0.6 …). The sound should never cover a word: if a spot gets busy, lower those cues. ## 11. Encode, check, deliver `render.mjs --encode --out video.mp4 --cover 1.75` makes **H.264 High, yuv420p, 1080x1920, 30 fps, `-crf 20 -maxrate 10M -bufsize 20M`, AAC 192k, `+faststart`** (~15 MB for 55 s) and `cover.jpg` (the hook frame). `check.mjs --video my-video --whisper` checks: - the specs, and that frame 0 isn't black; - 5 random frames with the safe box (`my-video/check/frames.jpg`): look at it; - the words heard against the script. Deliver `video.mp4` and `cover.jpg`; posting is the user's call. ## 12. Checklist - [ ] `setup.mjs` all ✓ · the script is one chain (section 4) · one "but" per step · ≤ 60 s - [ ] fake-timing stills right before any credit is spent · `gen-vo.mjs` dry run read, then `--yes` - [ ] `bed.mjs` run after the real timings - [ ] something moves on almost every word · a BUT stamp on every "but" · every number counts · every scene has a camera move and a whoosh - [ ] `--scan` clean (except one-frame whips) · 30-40 stills on the key words right · full render - [ ] mix at -14 LUFS, bed ~11-12 LU under the voice, no sound covering a word - [ ] encode ≤ 60 s and ≤ 60 MB · `check.mjs` all ok · frames.jpg and a 6 fps motion sheet looked at · every word checked (Whisper or by ear) --- ## Appendix A: the engine (write these files exactly) Write every file below into the project folder at the path in its heading. They are the same for every video: never edit them per video. ### `film.html` ```html stamp
``` ### `engine/core.js` ```js // Stamp template · ENGINE CORE (grown from the Motion template: + the dark look's stage beam, the stamp grunge, a camera // rig per scene and whip / zoom transitions). Same for every video: don't edit it while making one (a video's own scenes are //