--- name: pixel description: Make a narrated vertical reel (1080x1920, 45-60 s) in the "Pixel" format - a pixel-Claude courtroom on graph paper - a judge in a white barrister wig with a gavel over a hard-shadow plaque, a file chip or a typed pitch card on an isometric orange slab, twelve pixel-Claude jurors on two benches with role icons, speech and quote bubbles, vote paddles that flip to a cross or a check while a meter counts them, GUILTY / NOT GUILTY stamps, stat chips and a comment box that types the keyword, with top-left headlines that change on every phrase and a camera that pans and zooms between the stations. One calm ElevenLabs voice and a synthesized music bed, drawn frame by frame on a 2D canvas in headless Chrome and encoded with ffmpeg. Use it when someone asks for a pixel reel, "pixel.md", a jury or courtroom of Claudes, "what happens if 12 Claudes judge X", or wants to turn a script into this kind of video. --- # Pixel 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 looks like **a courtroom of pixel Claudes drawn on graph paper**. One long world sits on a light grid that zooms with the camera. At the top a **judge**, a pixel Claude (an orange block with two square black eyes, stubby arms and four legs) in a white barrister wig, holds a brown gavel and stands on a **white plaque with a hard black shadow** ("■ THE PIXEL COURT ■" in letter-spaced mono caps). Under it a **file chip** or a **pitch card** lies on an **isometric orange slab**. Below that sit **two black benches with twelve pixel-Claude jurors**, and under them the **vote meter** and **stat chips**. The camera **pans and zooms from station to station** and the world fades out at the top and bottom of the stage. A **bold headline in the top left** (black, with orange key words) changes on every spoken phrase. A small **footer** (a tiny pixel Claude + the format's file name) sits under the stage, and at the end a **comment box** rises and types the keyword. **`reference.jpg`** (next to this file, if you have it) is a contact sheet of 12 frames from a finished Pixel reel: **this is what it should look like.** Left to right, top row first: (1) the hook: the judge with the gavel on the plaque, the slab's tip peeking in at the bottom, the headline "Never pay for a Claude / content skill again."; (2) the jury popping in on the two benches under the slab; (3) a file chip "Morphy · agentic super app" on the slab under the plaque; (4) two file chips stacked on the slab, "format.md" and "SKILL.md"; (5) a pitch card typing "Content Skill PRO" with an orange caret, chips "for sale" and "$30 a copy" below; (6) the jurors with white speech bubbles "$30?!" and "It was free."; (7) the GUILTY stamp on the card, the gavel down; (8) twelve orange paddles with crosses and the meter "GUILTY 12"; (9) one juror lit, the rest faded, an orange bubble "It's just a text file."; (10) the card flipped to an orange "v2" with chips under the slab; (11) NOT GUILTY in green with confetti; (12) the whole court from far, three stat chips "0 paywalls / 0 subscriptions / 0 strings" and the comment box typing "PIXEL". If you only have this file, section 3 describes everything with numbers. Everything is drawn **one frame at a time** on a 2D canvas in headless Chrome (`window.setT(t)`), then muxed with a mix made in ffmpeg. This file gives you the look (exact colours, fonts, sizes, positions), the grammar of the script and of the edit, the rules that keep it from looking buggy, the complete tested engine (Appendix A: write it once) and a complete example video (Appendix B). With the engine written, **a video is six small files**: `script.mjs` (what the voice says and the headlines show), `times.mjs` (every beat's time, from the words), `scene.js` (the camera and what each beat shows), `cues.mjs` (sound effects), `music.mjs` (the bed's chords) and `video.json` (settings). Work in this order and don't skip ahead: **setup -> script -> fake timings -> direct the scene -> stills -> voice -> tighten -> real timings -> fix the beats -> stills -> full render + scan -> music + mix -> encode -> check -> deliver.** --- ## 0. Rules of engagement (read first) 1. **Be gentle with the user's computer.** One headless browser, at the lowest priority (`cdp.mjs` pins it to one CPU on Windows), never parallel workers. The film is a 2D canvas: no WebGL needed, and it renders at ~9 frames a second on an ordinary PC. 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` and `gen-sfx.mjs` are dry runs unless you pass `--yes`. One voice take of the whole script (~1 credit per character, ~800-900 for a reel). Never regenerate a take that exists: fix a wrong word with a one-line re-take (`--only`) spliced in with `voedit.mjs`. 4. **Stills before film.** Direct the whole scene on fake timings and check stills before you pay for the voice, and never start the full render until the stills contact sheet is right. 5. **Background jobs die when your turn ends.** Render in foreground chunks (`render.mjs my-video full 0 600`, then `full 600 1200`, then `full 1200`), each call under your tool timeout. The render resumes where it stopped. 6. **No real people, no real brands.** The jurors and the judge are drawn pixel characters. No screenshots, real app icons, logos, handles or view counts; every card, chip and file is drawn. A number on screen must be one the script says. 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 9650-9699 on 127.0.0.1. No npm packages. - **An ElevenLabs API key** for the voice and, once, the sound effects. 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 `build.mjs --fake` and ask for the key. - Fonts are free downloads (`setup.mjs` fetches them). The music bed is synthesized (`make-music.mjs`), no licence needed. The 18 sound effects are made once with ElevenLabs sound generation (`gen-sfx.mjs`, ~19 s of sound) and 3 more are synthesized (`synth-sfx.mjs`). ## 2. Project layout and setup ``` pixel-reel/ one project folder, many videos .env ELEVENLABS_API_KEY=... (never print it) engine/ Appendix A: write these files once, never edit them per video film.html main.js kit.js lib.js the page: fonts -> film.json + scene.js -> window.setT(t); every component; helpers common.mjs cdp.mjs setup.mjs script-text.mjs build.mjs gen-vo.mjs voedit.mjs votight.mjs gen-sfx.mjs synth-sfx.mjs make-music.mjs render.mjs mix.mjs encode.mjs check.mjs fonts/ sfx/ downloaded / generated once my-video/ one folder per video (Appendix B is a complete one) script.mjs times.mjs what the voice says + the headline markup · every beat's time scene.js cues.mjs music.mjs the director file · the sound effects · the bed's chords and dips video.json settings vo/ film.json music/bed.wav stills/ frames/ mix.wav video.mp4 cover.jpg ``` ```bash mkdir pixel-reel && cd pixel-reel # write engine/* from Appendix A, then: node engine/setup.mjs # checks Node/ffmpeg/Chrome/key, downloads the fonts, lists the sounds still to make node engine/gen-sfx.mjs # dry run: lists the 18 sounds; then --yes to make them once node engine/synth-sfx.mjs # the riser and the two pitched pops (needs sfx/pop.wav) ``` A video: ```bash mkdir my-video # write my-video/script.mjs (section 4); copy times.mjs, scene.js, cues.mjs, music.mjs from Appendix B and rewrite them node engine/build.mjs my-video --fake # guessed timings: direct before you pay for a voice node engine/render.mjs my-video stills auto 8 --safe # look at my-video/stills/sheet-safe.jpg; fix; repeat node engine/gen-vo.mjs my-video # dry run: the text the voice will read + its cost node engine/gen-vo.mjs my-video --yes # ONE take -> my-video/vo/a.* node engine/votight.mjs my-video --from a --out b --set # the format's pace (pauses kept short, x1.03) node engine/voedit.mjs my-video --list b # the words with their indexes node engine/voedit.mjs my-video --out c --use b:0- --pause 68:0.55,103:0.55 # a breath before each verdict node engine/build.mjs my-video # real timings: prints every headline with its words' times node engine/render.mjs my-video stills 0.5,4.3,12.8,25.8,29.7,40.5,45.8,53.4 --safe node engine/render.mjs my-video full 0 600 && node engine/render.mjs my-video full 600 1200 && node engine/render.mjs my-video full 1200 node engine/render.mjs my-video scan # every frame's text against the safe zone node engine/make-music.mjs my-video && node engine/mix.mjs my-video && node engine/encode.mjs my-video && node engine/check.mjs my-video ``` ## 3. The look, pinned down ### 3.1 The frame, layer by layer (1080x1920 px) | Layer | Where | What | |---|---|---| | Paper | everywhere | `#F9FBF6` | | Headline | x 180, first baseline y 302, second y 368 (cap tops ~y 257) | Inter 860, 58 px (shrinks to fit 742 px), letter-spacing −1.1 px, ink with orange key words; one per spoken phrase; blurs in over 0.17 s, out over 0.09 s | | The stage | y 383-1424 | the world: grid + court + jury, faded in over y 383-450 and out over 1352-1424 | | Footer | centred on x 540, y 1458 | a 3.4-px-cell pixel Claude + the file name ("pixel.md") in Space Mono 700 22 px | | Comment box | x 183-900, y 1347-1421 (the end only) | white, ink border 3 px, hard shadow 8 px, radius 9: an empty avatar circle, the typed keyword (Inter Tight 900 34 px, orange caret), an orange "Post" button | **Safe zone (every platform covers the edges):** all text inside **x 60-960, y 250-1480**; nothing important in the top 250 px, the bottom 440 px or the right 120 px. The headline at the top left is this format's caption and its look. The kit records every text box it draws (world text only where the stage shows it); `render.mjs ... --safe` draws the zone and the boxes, `render.mjs ... scan` tests every frame, and `check.mjs` reads the result. ### 3.2 Colours | Token | Hex | Used for | |---|---|---| | paper / grid | `#F9FBF6` / major `#E5E7E1`, minor `rgba(222,226,216,.55)` | the background and its grid | | ink | `#0C0D09` | outlines, benches, shadows, text | | orange | `#EB511A` | key words, plaque squares, solid chips, quote bubbles, crosses, the caret, Post | | Claude | `#D4725A` body, `#0B0A05` eyes, `#D97757` the asterisk icon | jurors, judge, footer | | wig / gavel | `#F2F3EE` / head `#6B3E26`, handle `#8C5634` | the judge | | slab | top `#EF5016` (lighter `#F25A20` at the back), left `#BB380C`, right `#982C0F` | the pedestal | | green | `#30CD5B`, dark `#21AE4B` | checks, NOT GUILTY, the meter's right side | | greys | paddle `#E4E1DC`, meter off `#DCDDD6`, subtitle `#7A7B74`, icon ring `#8E908A`, icon ink `#4B4D46`, placeholder `#B9BAB3` | the quiet parts | ### 3.3 Fonts **Inter** (variable, pinned to 860) for the headline, **Inter Tight** (variable, 800-900) for cards, chips, bubbles and stamps, **Space Mono** Regular and Bold for the plaque, chip titles and subtitles, the meter and the footer. All SIL OFL from google/fonts; `setup.mjs` downloads them to `fonts/`. ### 3.4 The world (world units = pixels at zoom 1; y grows downward) The camera maps a world point to the screen: `sx = 540 + (wx − cam.x)·cam.z`, `sy = 960 + (wy − cam.y)·cam.z`. Everything is centred on x 0: | Thing | Where | Size | |---|---|---| | grid | a major line every 126 units through x 0 and y −351, minor every 25.2 (shown when zoomed in) | 1.6 / 1 px on screen | | judge | feet on the plaque's top (y −351.5), centred | the juror sprite at cell 17 + wig + gavel | | plaque | centre y −304 | 95 tall, as wide as its text + 218 (≈ 564 for "THE PIXEL COURT"); border 2.9, shadow offset 9.7 | | file chip / card | centre y −132 (lying on the slab's top) | chip 400 × 127 (min 320, grows with its text), card 560 × 146 | | slab | centre (0, 0) | top rhombus 220 × 123, 29 deep | | chip rows | y 157 and 253 | chips 58 tall, side by side, 22 apart | | benches | y 462 and 654 | 804 × 12 | | jurors | 6 per bench at x ±69.3, ±207.9, ±346.5 | 10 × 7 cells of 11.6 (116 × 81) | | meter / stat chips | y 780 | meter from x −402 to 402; stat chips 98 tall | ### 3.5 The characters - **The pixel Claude** (`K.claude`): a 10 × 7 grid of cells, its feet at the given point. Body 8 × 5 cells, one-cell arms sticking out on row 2, four legs (columns 1, 3, 6, 8 of the 10) two cells tall, two black one-cell eyes on row 1 (columns 3 and 6). Drawn as one path so no seams show. It blinks (the eyes squash to 20 % for 0.14 s, every 3-6 s, seeded per character) and pops in from nothing with an overshoot. - **The judge** (`K.judge`): the same sprite at cell 17 with a wig: side flaps behind the arms (white, ink outline), two stacked white slabs on its head. The gavel pivots in its right hand: at rest it lies over the wig at −139°, on a strike it lifts upright (−90°) in 0.17 s, slams down to +22° onto the plaque in 0.09 s (three orange sparks spring up there), holds 0.1 s and settles back in 0.36 s; the judge squints on the hit. - **Jurors** (`K.jurors`): pop in one by one (`pop: [t0, stagger]`), and dim to 36 % except the ones you keep (`dim`) when one of them speaks. ### 3.6 The components (section 7.3 lists their options) The plaque (an orange tint flash on a key word), the slab, the **file chip** (an icon tile + a mono title + a grey subtitle, rotated −2.5°, orange border, black shadow; a new face flips it), the **pitch card** ("the pitch" header, a big title that types with an orange caret or shows a grey placeholder; its v2 face has an orange border and shadow), **stamps** (white box, 5 px coloured border, Inter Tight 900, rotated −5° to −6°, slam from 1.75× in 0.11 s then a damped settle; NOT GUILTY adds green and orange confetti squares), the **benches**, **role icons** over the jurors (white discs with a grey ring and a line icon), **bubbles** (white speech, white label with an orange icon, orange quote with white text; a tail toward the juror; a hard shadow), **paddles** (a 41-px rounded square on a stick, grey blank → orange ✕ or green ✓, flipping like a card), the **meter** ("GUILTY n" orange on the left, twelve segments, "n NOT" green on the right; it counts the paddles as they flip), **chips** under the slab (solid orange with white text, or white with an ink border and orange key words, an optional icon), **stat chips** (a big orange number + a label in a bordered box), the **comment box**. ### 3.7 The camera Six framings (the world point at the screen centre, the zoom), measured on the reel this format comes from: | Framing | x, y, z | Shows | |---|---|---| | open | 0, −297, 1.545 | judge + plaque big, the slab's tip at the bottom (the hook) | | chip | 0, −112, 1.243 | plaque + the chip or card on the slab | | jury | 0, 505, 1.0 | the slab at the top, both benches, the meter | | judge | 0, −50, 1.067 | judge, plaque, card and slab, the jurors' heads at the bottom (the verdicts) | | flip | 0, 188, 1.0 | card + slab + the chip rows, the benches at the bottom | | whole | 0, 262, 0.663 | everything, with the stat chips (the end) | | close-up | a juror's x + 144, 430, 1.25 | one juror speaking, the bench running off the edge | Moves take 0.45-0.8 s, eased in and out, and start 0.1-0.25 s before the phrase that needs them; jurors pop in during the pan that reveals them. **The camera never quite stops:** once a move lands it keeps creeping in about 2 % (and a few pixels aside) over 3 s, until the next move. Strikes and stamps add a 2-3 % zoom punch that settles in 0.5 s. ### 3.8 The signature moments (keep all of them) 1. **The hook (0-3 s).** The judge on the plaque, big; the headline is the hook; the gavel strikes on its last stressed word. 2. **The jury appears.** The camera pans down past the slab; the benches fade in and twelve jurors pop in one by one, left to right, top bench first. 3. **The thing on the slab.** Back up: a file chip lands on the slab and changes face with the story (who, what, which file); a second chip can land on top of it. 4. **The card types.** A pitch card types its title on the word; chips land under the slab with the facts. 5. **The jury debates and votes.** Role icons over each juror; two speech bubbles; blank paddles rise one by one. 6. **The verdict.** A breath, the camera reaches the judge, the gavel lifts and lands with the stamp (and a sub boom); then down to the jury: the paddles flip one by one and the meter counts them. 7. **Testimony.** The camera closes in on one juror, the others fade, a label then an orange quote bubble over it. 8. **The flip.** The stamp fades, the card flips to its v2, chips land under it; "Run it again"; NOT GUILTY with confetti; twelve green checks. 9. **The pull-back.** Everything from far, three stat chips one by one, the file chip shows the format's name, the comment box rises and types the keyword. ## 4. Writing for this format - **The narrator speaks in the first person**, calmly, with a breath between phrases: **~150 words a minute**, so **130-150 words = 52-58 s** (60 s is the limit). - **The shape** (the grammar the look was built for): **hook question** "What happens if twelve Claudes judge X?" → **what it is** "It's one file." → **the jury** "Twelve jurors. Each one's a different Claude with a different job." → **roll call** (4-5 roles, one juror lit each, "And yeah… even your competitor.") → **the rules** "You pitch once. They argue it out. Then they vote." → **"So let's try one."** + the example, typed → **"Guilty."** + the count → **testimony** "The customer says, '…'" → **the flip** "Okay. Fair. So I flip it." → **"Run it again."** → **"Not guilty. Twelve to zero."** → **three numbers** → **CTA** "Want it? Comment KEYWORD, and I'll send it to you." - **Any message fits as a trial:** put what the script argues against on the card (GUILTY) and what it argues for as the v2 (NOT GUILTY). The example does exactly that. - **Short phrases (2-7 words), one per line:** each is a headline, and the edit changes on every one. Every sentence needs a literal visual from the kit: a chip, a card that types, a stamp, a vote, a quote, a number. - `script.mjs`: `LINES` = one headline each; inside a line `*word*` makes an orange key word (it may span words: `'*content skill again.*'`) and `|` breaks the headline onto its second line; the markup is never spoken. `SAID` = how the voice says a token with dots or symbols (`'SKILL.md': 'skill dot M D'`, `'$30': 'thirty dollars'`, `'.md': 'dot M D'`) and the keyword in quotes so it's stressed (`'PIXEL': '"Pixel"'`). ## 5. The voice (ElevenLabs) - **Brian** (`nPczCjzI2devNBz1zQrb`) on **eleven_multilingual_v2**, stability 0.45, similarity 0.8, style 0.35, speaker boost, **speed 1.0**: a deep, calm narrator (median pitch ~115 Hz). Another voice: put `voice` in `video.json`; try it with `--test 2 --take t1` first. - **One take of the whole script**, then **`votight.mjs`** (keeps 0.36 s after `. ! ?`, 0.16 s after `, ;`, 0.05 s between words, ×1.03 with the pitch kept), then **`voedit.mjs --pause`** to add ~0.55 s before each verdict (the riser needs the room). The example's take: 58.5 s raw → 54.2 s tightened → 55.75 s with four pauses. - **A word that comes out wrong:** make a one-line re-take (`gen-vo.mjs my-video --yes --only 3 --take s1`), list the words (`voedit.mjs my-video --list a`) and splice it in (`--out c --use a:0-39,s1:0-4,a:45-`). ## 6. Timings: film.json `build.mjs` maps the shown tokens onto the said words (so "SKILL.md" spans "skill dot M D"), moves each word's start to where its sound starts, and writes `film.json`: `words` (each token with `t0`/`t1`, its line, orange or not, a line break before it or not), `heads` (one headline per line: it takes over 0.1 s before its first word and holds until the next; the first one shows from frame 0), `env` (the voice's loudness per frame) and `END` (last word + 1.6 s). It prints every headline with its words' times: **you key everything to these.** `--fake` guesses the timings at Brian's pace so you can direct and render stills before the voice exists; re-run without `--fake` after the take and only nudge what moved. ## 7. Directing ### 7.1 `times.mjs`: every beat from the words One function shared by the picture, the sound and the music: `makeTimes(film)` returns `T(line, word, n)` (when the n-th match of that word in that script line starts), `TE` (when it ends), `LS(line)` / `LE(line)` (a line's first start / last end) and every beat as a named time: the camera moves (`pans`), the strikes, the pops, each chip's and card's in and out, the stamps, the paddles' raises and flips, the bubbles, the stat chips, the comment box, the cover. A beat lands on its word (+0-0.1 s); a camera move starts 0.1-0.25 s before its phrase. ### 7.2 `scene.js`: the director file ```js import { makeTimes } from './times.mjs'; export default function setup(E) { const { K, film, lib } = E, X = makeTimes(film); const F = { open: { x: 0, y: -297, z: 1.545 }, jury: { x: 0, y: 505, z: 1 }, … }; // the framings (3.7) const MOVES = [[X.pans.toJury1, F.jury, 0.78], …]; // [start, target, seconds] const camera = t => …; // moves + creep + punches function world(g, t) { K.judge(…); K.plaque(…); K.slab(g); K.fileChip(…); K.card(…); K.stamp(…); K.chip(…); K.benches(…); K.jurorIcons(…); K.paddles(…); K.jurors(…); K.meter(…); K.bubble(…); K.stat(…); } function overlay(g, t) { K.commentBox(g, t, …); } return { camera, world, overlay }; } ``` Draw in that order every frame: judge, plaque, slab, the chips and card on the slab, stamps, chips under the slab, benches, icons, paddles, jurors, meters, bubbles, stat chips. The headline and the footer are drawn by the engine. Copy Appendix B's camera code (`lerpC`, `creep`, `step`, `FROM`, `camAt`, the punches) as it is; a new video rewrites `times.mjs`, the moves, the faces, the chips, the bubbles, the stats and the cues. ### 7.3 What the kit gives you (`K` in `setup(E)`) | Call | What it does | |---|---| | `K.judge(g, x, y, t, { strikes: [t…] })` · `K.plaque(g, t, { text, flash: [[t0, t1]] })` · `K.slab(g)` | the judge (y = its feet: `L.plaqueY - L.plaqueH / 2`) and its gavel · the plaque with an orange flash · the pedestal | | `K.fileChip(g, t, { faces: [[t, { title, sub, icon, iconCol, border }]], tIn, tOut, x, y, dx, dy, rot, drot, a, leaving })` | the chip on the slab; a new face flips it; `leaving: true` while it's thrown off screen (its text isn't tested then) | | `K.card(g, t, { faces: [[t, { head, title, typed: [t0, t1], placeholder, caret, v2, size }]], tIn, tOut, rot })` | the pitch card; `title` takes `*orange*` markup; a new face flips it | | `K.stamp(g, t, { text, t0, t1, x, y, rot, size, color, confetti })` | GUILTY (orange) / NOT GUILTY (`color: COL.GREEN_D`, `confetti: true`) | | `K.benches(g, t, { tIn })` · `K.jurors(g, t, { pop: [t0, stagger], dim: [[t0, t1, [kept…]]] })` · `jurorPos(i)` | the jury (0-5 the top bench, 6-11 the lower) | | `K.jurorIcons(g, t, { t0, stagger, t1, icons })` | a role icon over each juror (`K.ICONS` or 12 names of your own: trend user code scales swords mega doc tag question pen play shield check x app star cart box) | | `K.bubble(g, t, { juror, kind: 'speech' \| 'label' \| 'quote', text, icon, size, t0, t1 })` | a bubble over a juror (`text` may be two lines: `['line 1', 'line 2']`) | | `K.paddles(g, t, { raise: [[t0, t1, stagger]], flips: [[t0, stagger, 'x' \| 'v' \| [12 kinds], until]] })` · `K.meter(g, t, { tIn, tOut, paddles, green, labels: ['GUILTY', 'NOT'] })` | the vote, and its count | | `K.chip(g, t, { text, kind: 'solid' \| 'white', icon, iconCol, x, y, t0, t1 })` · `K.chipW(g, chip)` | a chip under the slab (rows at `L.chipRowY`) | | `K.stat(g, t, { num, label, x, y, t0, pulse })` · `K.statW(g, stat)` | a stat chip (the row at `L.statY`) | | `K.commentBox(g, t, { t0, y: 1347, text, typed: [t0, t1], press })` | the comment box (screen space, in `overlay`) | | `K.icon(g, name, x, y, size, colour, lineWidth)` · `K.hardBox` · `K.rich` · `K.spans` | the drawing helpers | | `lib`: `env` `popS` `settle` `typedN` `caretOn` `eio` `eo` `back` `prog` `clamp` `lerp` `hash` · `K.COL` · `K.L` | timing helpers · the palette · the layout | ### 7.4 The edit follows the words - **A new headline on every phrase**, with a breath between them. - **On the word, not near it:** pops, flips, typing, stamps and strikes land on their word (+0-0.1 s), each with its sound. - **Before a verdict:** ~0.9 s of silence (voedit), a riser under it, the bed dips, the camera reaches the judge before the word, the gavel lifts 0.26 s early and lands with the stamp and the boom. - **Paddles** flip 0.064-0.07 s apart and the meter counts each one. - **Frame 0 is the cover-worthy hook:** the judge, the plaque, the slab's tip, the first headline. ### 7.5 Motion rules (break these and it looks buggy) 1. **Every frame is a pure function of `t`:** no `Math.random`, no state between frames (use `lib.hash`, seeds). Any frame renders alone, in any order. 2. **A chip row at y 253 sits in the stage's bottom fade in the `chip` framing:** show chip rows from the `flip` framing. 3. **Moves may overlap** (each starts from wherever the camera is), but don't start a move while a big one is still travelling. 4. **Text that flies off screen** crosses the safe edge for a few frames: give it `leaving`. ## 8. Stills and the safe zone ```bash node engine/render.mjs my-video stills 0.5,4.3,12.8,25.8,29.7,40.5,45.8,53.4 --safe ``` Look at `stills/sheet-safe.jpg` (red = keep text out, every text box green or red). The run prints `OUTSIDE SAFE ZONE` lines and page errors: both must be empty. Check the hook (the judge and the headline), the jury pop-in, a chip beat, a typing beat, the verdict (the stamp on the card), the count (paddles + meter), the testimony (the bubble inside x 960), the end (stat chips and the comment box clear of each other). Then stills without `--safe` for colour. ## 9. The full render `node engine/render.mjs my-video full [from] [to]` writes `frames/f0000.jpg…` (~0.11 s a frame: about 3.5 min for 57 s). It **resumes** (existing frames are skipped): after any change to `scene.js` or `times.mjs`, delete `frames/` (or just the frames you changed: `f%04d.jpg` = t × 30). Run it in chunks under your tool timeout, then `render.mjs my-video scan`. ## 10. Sound - **The bed:** `make-music.mjs` synthesizes a warm pad (soft detuned partials) over a sub-bass root from `music.mjs`: the chords (`[t, 'Fmaj7' | 'G6' | 'Am7' | 'Em7' | 'Dm9' | 'E' | 'C' | 'Cmaj7' | 'F' | 'G' | 'Am', { hit }]`, a `hit` attacks fast for a verdict) and the dips (`[start, fully down, back]`: the bed sinks under each riser and returns with the boom). `video.json` music `db −7` puts it ~13 LU under the voice; `STEM=vo` / `STEM=music` / `STEM=sfx node engine/mix.mjs my-video` measure them (effects ~7 LU under the voice). - **The kit** (`sfx/.wav`): `pop` / `pop_hi` / `pop_hi2` (jurors, bubbles, chips), `click` (icons, keys), `flick` (a face change, a paddle flip), `slap` (a chip or card lands), `stamp`, `thud` + `clack` (the gavel), `impact` (the verdict boom), `riser` (into a verdict), `whoosh` (pans), `swoosh` (something thrown), `swish` (the gavel lifts, paddles rise), `kaching` (a price), `typing` (the card), `ding` (a good chip, the plaque's flash), `chime` + `burst` (NOT GUILTY), `clunk` (stat chips), `shimmer` (the format's name). - **Levels and timing:** the example's cues carry a global −5 dB and most cues sit at −15 to −27 dB; `ev(name, t, dB, maxDur)` starts the file at `t`, so subtract each sound's onset (the example's `ON` table; `gen-sfx.mjs` shifts every generated sound so its attack lands at exactly that onset). - **Keep effects off key words** (the product's name, the keyword): a click or a shimmer on top of a name can make it unintelligible. Move the cue, or lower it. ## 11. Encode, check, deliver `node engine/encode.mjs my-video` -> `video.mp4` (H.264 High, yuv420p TV range, crf 20, maxrate ≤ 10 Mb/s, AAC 192k, faststart, ≤ 60 MB) + `cover.jpg` (the frame at `cover`: the finished hook). `node engine/check.mjs my-video` checks format, length, size, loudness (−14 LUFS, true peak ≤ −1), frame 0, the headline's place and the safe zone on every frame, and tells you how often the picture holds still. Then **watch it once with sound** (or run a speech recogniser over it and compare with the script) and deliver `video.mp4`, `cover.jpg` and the script. Delete `frames/` (~280 MB). ## 12. Checklist - [ ] 130-150 words in the format's grammar, short phrases, every sentence showable; the CTA keyword one easy word. - [ ] The voice tightened (`votight`), a breath before each verdict (`voedit`), every word clear. - [ ] Frame 0 = the hook; a new headline on every phrase; the camera moves before the phrase that needs it and keeps creeping after. - [ ] The jury pops in during its reveal; strikes, stamps, flips and typing land on their words; paddles flip one by one with the meter. - [ ] Drawn characters only; no real logo, screenshot or handle. - [ ] `--safe` stills clean, `scan` clean, `check.mjs` all ✓, watched once with sound. --- ## Appendix A: the engine (write these files exactly) The browser part (`film.html`, `main.js`, `kit.js`, `lib.js`) and the Node scripts (`.mjs`). Write every file once; a video never edits them. ### `engine/film.html` ```html pixel ``` ### `engine/main.js` ```js // Engine boot: fonts → the video's film.json + scene.js → window.setT(t). Engine file. // The video folder comes from film.html?video= (relative to the kit root; '.' = the root). // Every frame is a pure function of film time t, so any frame can be rendered alone, in any order. import { makeKit, W, H, COL, STAGE, SAFE } from './kit.js'; import * as Lib from './lib.js'; const q = new URLSearchParams(location.search); const video = (q.get('video') || '.').replace(/\\/g, '/').replace(/\/+$/, ''); if (/(^|\/)\.\.(\/|$)/.test(video) || /^[a-z]:|^\//i.test(video)) throw new Error('video must be a folder inside the kit: ' + video); const base = new URL(`../${video}/`, import.meta.url); // Fonts (SIL OFL, from google/fonts): Inter (variable) for the headline, Inter Tight for UI text, Space Mono for plaque, chips, meter const FACES = [ ['Inter Tight', 'InterTight.ttf', { weight: '100 900' }], ['Inter', 'Inter.ttf', { weight: '100 900' }], ['Space Mono', 'SpaceMono-Regular.ttf', { weight: '400' }], ['Space Mono', 'SpaceMono-Bold.ttf', { weight: '700' }], ]; for (const [family, file, desc] of FACES) { try { const ff = new FontFace(family, `url(${new URL(`../fonts/${file}`, import.meta.url)})`, desc); await ff.load(); document.fonts.add(ff); } catch (e) { console.error(`font "${family}" (${file}) missing: put it in fonts/`); } } const film = await (await fetch(new URL('film.json', base), { cache: 'no-store' })).json(); const mod = await import(new URL('scene.js', base).href); const END = film.END; window.TOTAL = END; window.film = film; const cv = document.createElement('canvas'); cv.width = W; cv.height = H; document.body.appendChild(cv); const g = cv.getContext('2d', { alpha: false }); const stage = document.createElement('canvas'); stage.width = W; stage.height = H; const sg = stage.getContext('2d'); const K = makeKit(g); const mask = sg.createLinearGradient(0, 0, 0, H); mask.addColorStop(0, 'rgba(0,0,0,0)'); mask.addColorStop(STAGE.top0 / H, 'rgba(0,0,0,0)'); mask.addColorStop(STAGE.top1 / H, 'rgba(0,0,0,1)'); mask.addColorStop(STAGE.bot1 / H, 'rgba(0,0,0,1)'); mask.addColorStop(STAGE.bot0 / H, 'rgba(0,0,0,0)'); mask.addColorStop(1, 'rgba(0,0,0,0)'); const E = { K, film, END, W, H, COL, lib: Lib }; const V = mod.default(E); for (const k of ['camera', 'world']) if (!V[k]) throw new Error(`scene.js setup() must return ${k}`); let safeOn = false; window.setSafe = on => { safeOn = !!on; }; function setT(t) { t = Lib.clamp(t, 0, END); K.boxes = []; K.cam = V.camera(t); // the world on the stage canvas: grid, court, jury — then faded at the stage's edges sg.setTransform(1, 0, 0, 1, 0, 0); sg.globalCompositeOperation = 'source-over'; sg.globalAlpha = 1; sg.clearRect(0, 0, W, H); K.grid(sg); K.worldT(sg); V.world(sg, t); sg.setTransform(1, 0, 0, 1, 0, 0); sg.globalAlpha = 1; sg.globalCompositeOperation = 'destination-in'; sg.fillStyle = mask; sg.fillRect(0, 0, W, H); sg.globalCompositeOperation = 'source-over'; // the frame: paper, the stage, screen-fixed overlays, the headline, the footer g.setTransform(1, 0, 0, 1, 0, 0); g.globalAlpha = 1; g.fillStyle = COL.BG; g.fillRect(0, 0, W, H); g.drawImage(stage, 0, 0); if (V.overlay) { g.save(); V.overlay(g, t); g.restore(); } K.headline(g, t, film); K.footer(g, t, V.footer ? V.footer(t) : {}); if (safeOn) K.drawSafe(g, K.boxes); return true; } window.setT = setT; window.framing = {}; window.textBoxes = () => K.boxes.map(b => ({ ...b, x0: Math.round(b.x0), x1: Math.round(b.x1), y0: Math.round(b.y0), y1: Math.round(b.y1) })); window.safeReport = () => window.textBoxes().filter(b => b.x0 < SAFE.x0 || b.x1 > SAFE.x1 || b.y0 < SAFE.y0 || b.y1 > SAFE.y1); setT(+(q.get('t') || 0)); window.__ready = true; ``` ### `engine/kit.js` ```js // The Pixel kit: everything the film draws, on one 2D canvas. Engine file — a video never edits it. // World units = output pixels at camera zoom 1 (the jury framing). The camera maps a world point to the screen: // sx = 540 + (wx − cam.x)·cam.z, sy = 960 + (wy − cam.y)·cam.z. World y grows downward. // The world (grid + court) is drawn on its own canvas and faded at the stage's top and bottom edges, like the reference; // the headline (top left), the footer and the comment box are screen-fixed on top. import { clamp, lerp, prog, eio, eo, eo5, ei, back, env, popS, settle, typedN, caretOn, hash } from './lib.js'; export const W = 1080, H = 1920; export const COL = { BG: '#F9FBF6', GRID_MAJ: '#E5E7E1', GRID_MIN: '#F0F2EC', INK: '#0C0D09', ACC: '#EB511A', BODY: '#D4725A', EYE: '#0B0A05', WIG: '#F2F3EE', HEAD: '#6B3E26', HANDLE: '#8C5634', SLAB_T: '#EF5016', SLAB_L: '#BB380C', SLAB_R: '#982C0F', GREEN: '#30CD5B', GREEN_D: '#21AE4B', PADDLE: '#E4E1DC', GRAY: '#7A7B74', ICON_RING: '#8E908A', ICON_INK: '#4B4D46', SEG_OFF: '#DCDDD6', STAR: '#D97757', WHITE: '#FFFFFF', PALE_TXT: '#B9BAB3', }; const FONT = { sans: '"Inter Tight"', head: '"Inter"', mono: '"Space Mono"' }; // the stage: where the world shows (faded edges), from the reference at 1080x1920 export const STAGE = { top0: 383, top1: 450, bot1: 1352, bot0: 1424 }; export const SAFE = { x0: 60, x1: 960, y0: 250, y1: 1480 }; // ---- layout of the court (world units) ---- export const L = { slab: { x: 0, y: 0, hw: 110, hh: 61.5, th: 29 }, plaqueY: -304, plaqueH: 95, judgeCell: 17, chipY: -132, benchY: [462, 654], benchHW: 402, benchTh: 12, jurorCell: 11.6, jurorX: [-346.5, -207.9, -69.3, 69.3, 207.9, 346.5], meterY: 780, statY: 780, chipRowY: [157, 253], }; export const jurorPos = i => ({ x: L.jurorX[i % 6], y: L.benchY[Math.floor(i / 6)] - L.benchTh / 2 }); export function makeKit(g) { const K = { g, cam: { x: 0, y: 0, z: 1 }, boxes: [], COL, L, W, H, STAGE, SAFE }; // ---------- transforms ---------- K.toScreen = (wx, wy) => ({ x: 540 + (wx - K.cam.x) * K.cam.z, y: 960 + (wy - K.cam.y) * K.cam.z }); K.worldT = (c = g) => c.setTransform(K.cam.z, 0, 0, K.cam.z, 540 - K.cam.x * K.cam.z, 960 - K.cam.y * K.cam.z); K.screenT = (c = g) => c.setTransform(1, 0, 0, 1, 0, 0); // the stage mask's opacity at a screen y K.maskA = y => y < STAGE.top0 ? 0 : y < STAGE.top1 ? (y - STAGE.top0) / (STAGE.top1 - STAGE.top0) : y <= STAGE.bot1 ? 1 : y < STAGE.bot0 ? (STAGE.bot0 - y) / (STAGE.bot0 - STAGE.bot1) : 0; // ---------- text + the safe-zone registry ---------- K.font = (c, size, weight = 800, fam = 'sans') => { c.font = `${weight} ${size}px ${FONT[fam]}`; }; // record a text box drawn in the current transform (local box x0,y0,x1,y1); world text is tested against the stage mask K.reg = (c, kind, text, x0, y0, x1, y1, alpha = 1, world = true) => { if (alpha < 0.12 || !text) return; const m = c.getTransform(), P = [[x0, y0], [x1, y0], [x0, y1], [x1, y1]].map(([x, y]) => ({ x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f })); const b = { kind, text: String(text).slice(0, 40), x0: Math.min(...P.map(p => p.x)), x1: Math.max(...P.map(p => p.x)), y0: Math.min(...P.map(p => p.y)), y1: Math.max(...P.map(p => p.y)) }; if (world) { const cy = (b.y0 + b.y1) / 2; if (K.maskA(cy) * alpha < 0.15) return; if (b.x1 < 0 || b.x0 > W) return; } K.boxes.push(b); }; // one line of rich text: spans [{t, c}] drawn from x (left/center/right) at baseline y; returns its width K.rich = (c, spans, x, y, o = {}) => { const size = o.size || 40, weight = o.weight ?? 800, fam = o.fam || 'sans', ls = o.ls ?? 0; K.font(c, size, weight, fam); c.letterSpacing = `${ls}px`; c.textBaseline = 'alphabetic'; c.textAlign = 'left'; const ws = spans.map(s => c.measureText(s.t).width), tw = ws.reduce((a, b) => a + b, 0) - (spans.length ? ls : 0); let cx = o.align === 'center' ? x - tw / 2 : o.align === 'right' ? x - tw : x; spans.forEach((s, i) => { c.fillStyle = s.c || COL.INK; c.fillText(s.t, cx, y); cx += ws[i]; }); c.letterSpacing = '0px'; if (o.reg !== false) K.reg(c, o.kind || 'text', spans.map(s => s.t).join(''), o.align === 'center' ? x - tw / 2 : o.align === 'right' ? x - tw : x, y - size * 0.78, (o.align === 'center' ? x + tw / 2 : o.align === 'right' ? x : x + tw), y + size * 0.24, o.alpha ?? 1, o.world ?? true); return tw; }; K.measure = (c, text, size, weight = 800, fam = 'sans', ls = 0) => { K.font(c, size, weight, fam); c.letterSpacing = `${ls}px`; const w = c.measureText(text).width - (text ? ls : 0); c.letterSpacing = '0px'; return w; }; // "Formats *for free*" → spans K.spans = (s, base = COL.INK, acc = COL.ACC) => { const out = []; s.split(/(\*[^*]*\*)/).forEach(p => { if (!p) return; if (p.startsWith('*')) out.push({ t: p.slice(1, -1), c: acc }); else out.push({ t: p, c: base }); }); return out; }; // ---------- shapes ---------- K.rrect = (c, x, y, w, h, r) => { r = Math.min(r, w / 2, h / 2); c.beginPath(); c.moveTo(x + r, y); c.arcTo(x + w, y, x + w, y + h, r); c.arcTo(x + w, y + h, x, y + h, r); c.arcTo(x, y + h, x, y, r); c.arcTo(x, y, x + w, y, r); c.closePath(); }; // a box with a hard offset shadow (the reference's look): fill, border, shadow colour + offset K.hardBox = (c, x, y, w, h, o = {}) => { const r = o.r ?? 0, sx = o.sx ?? 8, sy = o.sy ?? 8; if (o.shadow !== false) { c.fillStyle = o.shadowCol || COL.INK; K.rrect(c, x + sx, y + sy, w, h, r); c.fill(); } c.fillStyle = o.fill || COL.WHITE; K.rrect(c, x, y, w, h, r); c.fill(); if (o.border !== false) { c.lineWidth = o.lw ?? 2.9; c.strokeStyle = o.borderCol || COL.INK; K.rrect(c, x, y, w, h, r); c.stroke(); } }; // ---------- the grid (screen-space lines that follow the world) ---------- K.grid = (c) => { const z = K.cam.z, maj = 126, min = maj / 5, ox = 0, oy = -351; // a major line through x 0 and the judge's feet const wx0 = K.cam.x - 540 / z, wx1 = K.cam.x + 540 / z, wy0 = K.cam.y - 960 / z, wy1 = K.cam.y + 960 / z; K.screenT(c); const line = (vert, w, col, lw) => { c.strokeStyle = col; c.lineWidth = lw; c.beginPath(); for (const v of w) { if (vert) { const x = Math.round(540 + (v - K.cam.x) * z) + 0.5; c.moveTo(x, 0); c.lineTo(x, H); } else { const y = Math.round(960 + (v - K.cam.y) * z) + 0.5; c.moveTo(0, y); c.lineTo(W, y); } } c.stroke(); }; const vals = (a, b, step, o, skip) => { const out = []; for (let k = Math.ceil((a - o) / step); o + k * step <= b; k++) { if (skip && Math.abs(((k % 5) + 5) % 5) === 0) continue; out.push(o + k * step); } return out; }; if (min * z > 9) { const a = clamp((min * z - 9) / 8); const col = `rgba(222,226,216,${(0.55 * a).toFixed(3)})`; line(true, vals(wx0, wx1, min, ox, true), col, 1); line(false, vals(wy0, wy1, min, oy, true), col, 1); } line(true, vals(wx0, wx1, maj, ox), COL.GRID_MAJ, 1.6); line(false, vals(wy0, wy1, maj, oy), COL.GRID_MAJ, 1.6); }; // ---------- the pixel Claude (juror, judge) ---------- // x = centre, y = feet. c = cell. 10 × 7 cells: body 8 × 5, arms one cell out on row 2, four legs, two eyes. K.claude = (c2, x, y, c, o = {}) => { const s = o.s ?? 1, a = o.a ?? 1; if (s <= 0.002 || a <= 0.003) return; c2.save(); c2.translate(x, y); c2.scale(s * (o.sx ?? 1), s * (o.sy ?? 1)); c2.globalAlpha *= a; const L0 = -5 * c, T = -7 * c, e = 0.35; if (o.wig) K.wigBack(c2, L0, T, c); c2.beginPath(); c2.rect(L0 + c, T, 8 * c, 5 * c + e); c2.rect(L0, T + 2 * c, c + e, c); c2.rect(L0 + 9 * c - e, T + 2 * c, c + e, c); for (const lc of [1, 3, 6, 8]) c2.rect(L0 + lc * c, T + 5 * c, c, 2 * c); c2.fillStyle = o.col || COL.BODY; c2.fill(); const b = clamp(o.blink || 0), eh = c * (1 - 0.8 * b), dx = (o.look || 0) * c * 0.25; c2.fillStyle = COL.EYE; c2.fillRect(L0 + 3 * c + dx, T + c + (c - eh) / 2, c, eh); c2.fillRect(L0 + 6 * c + dx, T + c + (c - eh) / 2, c, eh); if (o.wig) K.wigTop(c2, L0, T, c); c2.restore(); }; // the judge's barrister wig: side flaps behind the arms, two stacked slabs on top K.wigBack = (c2, L0, T, c) => { c2.lineWidth = c * 0.13; c2.strokeStyle = COL.INK; c2.fillStyle = COL.WIG; for (const [x0, x1] of [[-0.62, 1], [9, 10.62]]) { c2.beginPath(); c2.rect(L0 + x0 * c, T - 0.05 * c, (x1 - x0) * c, 3.05 * c); c2.fill(); c2.stroke(); } }; K.wigTop = (c2, L0, T, c) => { c2.lineWidth = c * 0.13; c2.strokeStyle = COL.INK; c2.fillStyle = COL.WIG; c2.beginPath(); c2.rect(L0 + 0.02 * c, T - 1.02 * c, 9 * c, 1.02 * c); c2.fill(); c2.stroke(); c2.beginPath(); c2.rect(L0 + 1 * c, T - 2.02 * c, 8 * c, 1.0 * c); c2.fill(); c2.stroke(); }; // deterministic blinks: ~every 3–6 s, 0.14 s each K.blink = (t, seed) => { const per = 3 + 3 * hash(seed * 7.3); const ph = (t + hash(seed) * per) % per; return ph < 0.14 ? Math.sin(ph / 0.14 * Math.PI) : 0; }; // ---------- the gavel ---------- // strikes: [t, …] — the gavel lifts upright, slams down onto the plaque to the right (sparks), and settles back K.gavelAngle = (t, strikes) => { const REST = -139 * Math.PI / 180, UP = -90 * Math.PI / 180, HIT = 22 * Math.PI / 180; for (const ts of strikes) { if (t < ts - 0.26 || t > ts + 0.46) continue; if (t < ts - 0.09) return lerp(REST, UP, eo(prog(t, ts - 0.26, 0.17))); if (t < ts) return lerp(UP, HIT, ei(prog(t, ts - 0.09, 0.09))); if (t < ts + 0.1) return HIT; return lerp(HIT, REST, eio(prog(t, ts + 0.1, 0.36))); } return REST; }; K.judge = (c2, x, y, t, o = {}) => { const c = L.judgeCell, strikes = o.strikes || []; const squint = strikes.reduce((m, ts) => Math.max(m, env(t, ts - 0.04, ts + 0.22, 0.04, 0.08)), 0); K.claude(c2, x, y, c, { wig: true, blink: Math.max(squint, K.blink(t, 99)), a: o.a ?? 1 }); // the gavel: pivot in the judge's right hand const px = x + 7.8 * c, py = y - 3 * c, th = K.gavelAngle(t, strikes); c2.save(); c2.globalAlpha *= o.a ?? 1; c2.translate(px, py); c2.rotate(th); c2.lineWidth = c * 0.14; c2.strokeStyle = COL.INK; c2.lineJoin = 'round'; c2.fillStyle = COL.HANDLE; c2.beginPath(); c2.rect(0, -0.26 * c, 4.7 * c, 0.52 * c); c2.fill(); c2.stroke(); c2.fillStyle = COL.HEAD; K.rrect(c2, 4.45 * c, -1.72 * c, 2.25 * c, 3.44 * c, 0.38 * c); c2.fill(); c2.stroke(); c2.restore(); // sparks where the head lands (on the plaque's top edge) for (const ts of strikes) { const k = prog(t, ts, 0.32); if (t < ts || k >= 1) continue; const hx = px + Math.cos(22 * Math.PI / 180) * 5.6 * c, hy = y; c2.save(); c2.globalAlpha *= (1 - k) * (o.a ?? 1); c2.strokeStyle = COL.ACC; c2.lineWidth = c * 0.22; c2.lineCap = 'butt'; for (const ang of [-120, -90, -60]) { const r0 = c * (0.7 + 1.2 * eo(k)), r1 = r0 + c * (1.1 - 0.5 * k), a = ang * Math.PI / 180; c2.beginPath(); c2.moveTo(hx + Math.cos(a) * r0, hy + Math.sin(a) * r0); c2.lineTo(hx + Math.cos(a) * r1, hy + Math.sin(a) * r1); c2.stroke(); } c2.restore(); } }; // ---------- the plaque ---------- K.plaque = (c2, t, o = {}) => { const text = o.text || 'THE PIXEL COURT', size = 28.6, ls = 5.6; const tw = K.measure(c2, text, size, 700, 'mono', ls), sq = 12, gap = 25, padX = 72; const w = tw + 2 * (padX + sq + gap), h = L.plaqueH, x = -w / 2, y = L.plaqueY - h / 2; const fl = o.flash ? o.flash.reduce((m, [a, b]) => Math.max(m, env(t, a, b, 0.12, 0.3)), 0) : 0; c2.save(); c2.globalAlpha *= o.a ?? 1; K.hardBox(c2, x, y, w, h, { sx: 9.7, sy: 9.7, lw: 2.9, fill: fl ? mix('#FFFFFF', '#FBD9C9', fl) : COL.WHITE, borderCol: fl ? mix(COL.INK, COL.ACC, fl) : COL.INK, shadowCol: fl ? mix(COL.INK, COL.ACC, fl) : COL.INK }); c2.fillStyle = COL.ACC; const cy = L.plaqueY; c2.fillRect(x + padX, cy - sq / 2, sq, sq); c2.fillRect(x + w - padX - sq, cy - sq / 2, sq, sq); K.rich(c2, [{ t: text, c: COL.INK }], 0, cy + size * 0.36, { size, weight: 700, fam: 'mono', ls, align: 'center', kind: 'plaque', alpha: o.a ?? 1 }); c2.restore(); return { w, h, x, y }; }; // ---------- the iso slab ---------- K.slab = (c2, o = {}) => { const { x, y, hw, hh, th } = L.slab, s = o.s ?? 1; c2.save(); c2.translate(x, y); c2.scale(s, s); c2.globalAlpha *= o.a ?? 1; c2.lineWidth = 2.6; c2.strokeStyle = COL.INK; c2.lineJoin = 'round'; const poly = (pts, col) => { c2.beginPath(); pts.forEach(([px, py], i) => i ? c2.lineTo(px, py) : c2.moveTo(px, py)); c2.closePath(); c2.fillStyle = col; c2.fill(); c2.stroke(); }; poly([[-hw, 0], [0, hh], [0, hh + th], [-hw, th]], COL.SLAB_L); poly([[0, hh], [hw, 0], [hw, th], [0, hh + th]], COL.SLAB_R); const gr = c2.createLinearGradient(0, -hh, 0, hh); gr.addColorStop(0, '#F25A20'); gr.addColorStop(1, COL.SLAB_T); poly([[0, -hh], [hw, 0], [0, hh], [-hw, 0]], gr); c2.restore(); }; // ---------- icons (24-unit line icons) ---------- K.icon = (c2, name, x, y, size, col, lw = 2) => { const s = size / 24; c2.save(); c2.translate(x - size / 2, y - size / 2); c2.scale(s, s); c2.strokeStyle = col; c2.fillStyle = col; c2.lineWidth = lw / s; c2.lineCap = 'round'; c2.lineJoin = 'round'; const P = (d) => { c2.beginPath(); d(); c2.stroke(); }; switch (name) { case 'trend': P(() => { c2.moveTo(3, 17); c2.lineTo(9, 11); c2.lineTo(13, 15); c2.lineTo(21, 7); }); P(() => { c2.moveTo(15, 7); c2.lineTo(21, 7); c2.lineTo(21, 13); }); break; case 'user': P(() => c2.arc(12, 8, 4, 0, 7)); P(() => { c2.moveTo(4.5, 21); c2.bezierCurveTo(4.5, 15, 19.5, 15, 19.5, 21); }); break; case 'code': P(() => { c2.moveTo(8, 6); c2.lineTo(2.5, 12); c2.lineTo(8, 18); }); P(() => { c2.moveTo(16, 6); c2.lineTo(21.5, 12); c2.lineTo(16, 18); }); break; case 'scales': P(() => { c2.moveTo(12, 3); c2.lineTo(12, 21); c2.moveTo(7, 21); c2.lineTo(17, 21); c2.moveTo(4, 7); c2.lineTo(20, 7); }); P(() => { c2.moveTo(4, 7); c2.lineTo(1.5, 14); c2.lineTo(6.5, 14); c2.closePath(); }); P(() => { c2.moveTo(20, 7); c2.lineTo(17.5, 14); c2.lineTo(22.5, 14); c2.closePath(); }); break; case 'swords': P(() => { c2.moveTo(4, 4); c2.lineTo(18, 18); c2.moveTo(20, 4); c2.lineTo(6, 18); c2.moveTo(15, 20); c2.lineTo(20, 15); c2.moveTo(4, 15); c2.lineTo(9, 20); }); break; case 'mega': P(() => { c2.moveTo(3, 10); c2.lineTo(3, 14); c2.lineTo(7, 14); c2.lineTo(16, 19); c2.lineTo(16, 5); c2.lineTo(7, 10); c2.closePath(); }); P(() => { c2.moveTo(19, 9); c2.quadraticCurveTo(21.5, 12, 19, 15); }); break; case 'doc': P(() => { c2.moveTo(6, 3); c2.lineTo(14, 3); c2.lineTo(19, 8); c2.lineTo(19, 21); c2.lineTo(6, 21); c2.closePath(); }); P(() => { c2.moveTo(14, 3); c2.lineTo(14, 8); c2.lineTo(19, 8); c2.moveTo(9, 13); c2.lineTo(16, 13); c2.moveTo(9, 17); c2.lineTo(16, 17); }); break; case 'tag': P(() => { c2.moveTo(3, 12); c2.lineTo(12, 3); c2.lineTo(21, 3); c2.lineTo(21, 12); c2.lineTo(12, 21); c2.closePath(); }); c2.beginPath(); c2.arc(16.5, 7.5, 1.6, 0, 7); c2.fill(); break; case 'question': P(() => c2.arc(12, 12, 9.5, 0, 7)); P(() => { c2.moveTo(9, 9.5); c2.bezierCurveTo(9, 6, 15, 6, 15, 9.5); c2.bezierCurveTo(15, 12, 12, 12, 12, 14.5); }); c2.beginPath(); c2.arc(12, 17.8, 1.3, 0, 7); c2.fill(); break; case 'pen': P(() => { c2.moveTo(4, 20); c2.lineTo(5, 15); c2.lineTo(16, 4); c2.lineTo(20, 8); c2.lineTo(9, 19); c2.closePath(); c2.moveTo(13.5, 6.5); c2.lineTo(17.5, 10.5); }); break; case 'play': P(() => c2.arc(12, 12, 9.5, 0, 7)); P(() => { c2.moveTo(10, 8); c2.lineTo(16, 12); c2.lineTo(10, 16); c2.closePath(); }); break; case 'shield': P(() => { c2.moveTo(12, 3); c2.lineTo(20, 6); c2.lineTo(20, 12); c2.bezierCurveTo(20, 17, 16, 20, 12, 21.5); c2.bezierCurveTo(8, 20, 4, 17, 4, 12); c2.lineTo(4, 6); c2.closePath(); }); break; case 'check': P(() => { c2.moveTo(4, 12.5); c2.lineTo(9.5, 18); c2.lineTo(20, 6.5); }); break; case 'x': P(() => { c2.moveTo(6, 6); c2.lineTo(18, 18); c2.moveTo(18, 6); c2.lineTo(6, 18); }); break; case 'app': P(() => { K.rrect(c2, 3, 4, 18, 16, 3); }); P(() => { c2.moveTo(3, 9); c2.lineTo(21, 9); }); c2.beginPath(); c2.arc(6.3, 6.5, 0.9, 0, 7); c2.arc(9.1, 6.5, 0.9, 0, 7); c2.fill(); break; case 'star': for (let k = 0; k < 12; k++) { const a = k / 12 * Math.PI * 2 + 0.13, r0 = 2.2, r1 = k % 2 ? 8.6 : 10.4; c2.beginPath(); c2.moveTo(12 + Math.cos(a) * r0, 12 + Math.sin(a) * r0); c2.lineTo(12 + Math.cos(a) * r1, 12 + Math.sin(a) * r1); c2.stroke(); } break; case 'cart': P(() => { c2.moveTo(2, 4); c2.lineTo(5, 4); c2.lineTo(7.5, 15); c2.lineTo(19, 15); c2.lineTo(21, 7); c2.lineTo(6, 7); }); c2.beginPath(); c2.arc(9, 19.5, 1.5, 0, 7); c2.arc(17.5, 19.5, 1.5, 0, 7); c2.fill(); break; case 'box': P(() => { c2.moveTo(12, 3); c2.lineTo(20.5, 7.5); c2.lineTo(20.5, 16.5); c2.lineTo(12, 21); c2.lineTo(3.5, 16.5); c2.lineTo(3.5, 7.5); c2.closePath(); c2.moveTo(3.5, 7.5); c2.lineTo(12, 12); c2.lineTo(20.5, 7.5); c2.moveTo(12, 12); c2.lineTo(12, 21); }); break; } c2.restore(); }; // ---------- the file chip (on the slab) ---------- // face: { title, sub, icon } — a face change flips the chip (scale x → 0 → 1); faces: [[t, face], …] K.fileChip = (c2, t, o) => { const faces = o.faces, idx = faces.findLastIndex(([ft]) => t >= ft); if (idx < 0) return; const [ft, face] = faces[idx], prev = idx > 0 ? faces[idx - 1] : null; const a = env(t, o.tIn ?? faces[0][0], o.tOut ?? Infinity, 0.16, 0.22) * (o.a ?? 1); if (a <= 0) return; let fx = 1, show = face; if (prev && t < ft + 0.12) { const k = prog(t, ft - 0.12, 0.24); fx = Math.abs(Math.cos(k * Math.PI)); show = k < 0.5 ? prev[1] : face; } const pop = (o.tIn ?? faces[0][0]) != null ? popS(t, o.tIn ?? faces[0][0], 0.3, 2.0) : 1; const size = 43, sub = 21; const tw = Math.max(K.measure(c2, show.title, size, 700, 'mono'), K.measure(c2, show.sub || '', sub, 400, 'mono')); const w = Math.max(320, 114 + tw + 30), h = 127, cx = o.x ?? 0, cy = o.y ?? L.chipY; c2.save(); c2.globalAlpha *= a; c2.translate(cx + (o.dx || 0), cy + (o.dy || 0)); c2.rotate(((o.rot ?? -2.5) + (o.drot || 0)) * Math.PI / 180); c2.scale(fx * pop, pop); const x = -w / 2, y = -h / 2, bc = show.border || COL.ACC; K.hardBox(c2, x, y, w, h, { sx: 6, sy: 8, lw: 2.4, borderCol: bc, fill: show.fill || COL.WHITE }); // icon tile c2.lineWidth = 3; c2.strokeStyle = COL.INK; c2.fillStyle = COL.WHITE; K.rrect(c2, x + 28, y + (h - 66) / 2, 66, 66, 13); c2.fill(); c2.stroke(); K.icon(c2, show.icon || 'star', x + 61, y + h / 2, 42, show.iconCol || COL.STAR, show.icon === 'star' || !show.icon ? 2.2 : 2.4); // o.leaving: the chip is being thrown off screen — its text isn't there to be read, so it isn't tested against the safe zone const ra = o.leaving ? 0 : a; K.rich(c2, [{ t: show.title, c: COL.INK }], x + 114, y + 61, { size, weight: 700, fam: 'mono', kind: 'chip', alpha: ra }); if (show.sub) K.rich(c2, K.spans(show.sub, COL.GRAY), x + 114, y + 96, { size: sub, weight: 400, fam: 'mono', kind: 'chip', alpha: ra }); c2.restore(); }; // ---------- the card (pitch / listing) ---------- // o: { tIn, tOut, rot, faces: [[t, { head, title (markup), typed: [t0, t1], placeholder, v2 }]] } — a face change flips the card K.card = (c2, t, o) => { const faces = o.faces, idx = faces.findLastIndex(([ft]) => t >= ft); if (idx < 0) return; const [ft, face] = faces[idx], prev = idx > 0 ? faces[idx - 1] : null; const tIn = o.tIn ?? faces[0][0], a = env(t, tIn, o.tOut ?? Infinity, 0.14, o.dOut ?? 0.25) * (o.a ?? 1); if (a <= 0) return; let fx = 1, show = face; if (prev && t < ft + 0.13 && !face.noFlip) { const k = prog(t, ft - 0.13, 0.26); fx = Math.max(0.02, Math.abs(Math.cos(k * Math.PI))); show = k < 0.5 ? prev[1] : face; } const pop = popS(t, tIn, 0.32, 1.8); const w = 560, h = 146, v2 = !!show.v2; c2.save(); c2.globalAlpha *= a; c2.translate(o.x ?? 0, (o.y ?? L.chipY) + (o.dy || 0)); c2.rotate((o.rot ?? -1.5) * Math.PI / 180); c2.scale(fx * pop, pop); const x = -w / 2, y = -h / 2; K.hardBox(c2, x, y, w, h, { sx: 9, sy: 9, lw: v2 ? 3 : 2.9, borderCol: v2 ? COL.ACC : COL.INK, shadowCol: v2 ? COL.ACC : COL.INK }); const hc = v2 ? COL.ACC : COL.GRAY; K.icon(c2, 'doc', x + 38, y + 36, 24, hc, 1.9); K.rich(c2, [{ t: show.head || 'the pitch', c: hc }], x + 56, y + 43, { size: 22, weight: 400, fam: 'mono', kind: 'card', alpha: a }); // the title: typed (with a caret) or a grey placeholder const full = K.spans(show.title || ''); const txt = full.map(s => s.t).join(''); const n = show.typed ? typedN(txt, t, show.typed[0], show.typed[1]) : [...txt].length; let left = n; const vis = []; for (const s of full) { if (left <= 0) break; const ch = [...s.t]; vis.push({ t: ch.slice(0, left).join(''), c: s.c }); left -= ch.length; } const size = show.size || 44; let tw = 0; if (n === 0 && show.placeholder) tw = K.rich(c2, [{ t: show.placeholder, c: COL.PALE_TXT }], x + 30, y + 108, { size, weight: 850, ls: -1.4, kind: 'card', alpha: a }); else tw = K.rich(c2, vis.length ? vis : [{ t: '', c: COL.INK }], x + 30, y + 108, { size, weight: 850, ls: -1.4, kind: 'card', alpha: a }); const typing = show.typed && t >= show.typed[0] - 0.4 && t < show.typed[1] + (show.caretHold ?? 0.6); if ((typing && (t < show.typed[1] || caretOn(t))) || (show.caret && caretOn(t))) { c2.fillStyle = COL.ACC; c2.fillRect(x + 32 + tw, y + 70, 3.5, 48); } c2.restore(); return { w, h }; }; // ---------- stamps (GUILTY / NOT GUILTY) ---------- K.stamp = (c2, t, o) => { const t0 = o.t0, a0 = env(t, t0, o.t1 ?? Infinity, 0.06, 0.3); if (a0 <= 0) return; const k = prog(t, t0, 0.11), s = t < t0 + 0.11 ? lerp(1.75, 0.94, eo(k)) : settle(t, t0 + 0.11, 0.06, 10, 26) * 1.0, a = a0 * (t < t0 + 0.11 ? lerp(0.35, 1, k) : 1); const col = o.color || COL.ACC, size = o.size || 64, text = o.text; const tw = K.measure(c2, text, size, 900, 'sans', 1), w = tw + 46, h = size * 1.28; c2.save(); c2.globalAlpha *= a; c2.translate(o.x ?? 0, o.y ?? 0); c2.rotate((o.rot ?? -6) * Math.PI / 180); c2.scale(s, s); c2.fillStyle = COL.WHITE; c2.fillRect(-w / 2, -h / 2, w, h); c2.lineWidth = 5; c2.strokeStyle = col; c2.strokeRect(-w / 2, -h / 2, w, h); K.rich(c2, [{ t: text, c: col }], 0, size * 0.36, { size, weight: 900, ls: 1, align: 'center', kind: 'stamp', alpha: a }); c2.restore(); // confetti squares (NOT GUILTY) if (o.confetti) { for (let i = 0; i < 18; i++) { const kk = prog(t, t0 + 0.02, 0.75); if (t < t0 || kk >= 1) continue; const ang = hash(i * 3.1 + 1) * Math.PI * 2, d = (150 + 170 * hash(i * 5.7 + 2)) * eo5(kk), sz = 9 + 7 * hash(i * 1.3); c2.save(); c2.globalAlpha *= (1 - kk) * a0; c2.fillStyle = i % 3 === 0 ? COL.ACC : COL.GREEN; c2.fillRect((o.x ?? 0) + Math.cos(ang) * d * 1.5 - sz / 2, (o.y ?? 0) + Math.sin(ang) * d * 0.75 - sz / 2, sz, sz); c2.restore(); } } }; // ---------- benches, jurors, icons, paddles, meter ---------- K.benches = (c2, t, o = {}) => { const a = env(t, o.tIn ?? -9, o.tOut ?? Infinity, 0.22, 0.2) * (o.a ?? 1); if (a <= 0) return; c2.save(); c2.globalAlpha *= a; c2.fillStyle = COL.INK; for (const by of L.benchY) c2.fillRect(-L.benchHW, by - L.benchTh / 2, 2 * L.benchHW, L.benchTh); c2.restore(); }; // o: { pop: [t0, stagger], dim: [[t0, t1, keep: [i…]]], tOut, look } K.jurors = (c2, t, o = {}) => { for (let i = 0; i < 12; i++) { const p = jurorPos(i), t0 = o.pop ? o.pop[0] + i * o.pop[1] : -9; const s = popS(t, t0, 0.26, 2.4); if (s <= 0) continue; let a = env(t, -99, o.tOut ?? Infinity, 0, 0.2) * (o.a ?? 1); for (const [d0, d1, keep] of (o.dim || [])) if (!keep.includes(i)) a *= 1 - 0.64 * env(t, d0, d1, 0.22, 0.25); K.claude(c2, p.x, p.y, L.jurorCell, { s, a, blink: K.blink(t, i + 1) }); } }; const ICONS = ['trend', 'user', 'code', 'scales', 'swords', 'mega', 'doc', 'tag', 'question', 'pen', 'play', 'shield']; K.ICONS = ICONS; // one role icon over each juror. o: { t0, stagger, t1, icons: [12 names] (default ICONS) } K.jurorIcons = (c2, t, o) => { for (let i = 0; i < 12; i++) { const p = jurorPos(i), t0 = o.t0 + i * o.stagger, s = popS(t, t0, 0.24, 2.2); if (s <= 0) continue; const a = env(t, t0, o.t1, 0.1, 0.22); if (a <= 0) continue; const y = p.y - 7 * L.jurorCell - 55; c2.save(); c2.globalAlpha *= a; c2.translate(p.x, y); c2.scale(s, s); c2.fillStyle = COL.WHITE; c2.beginPath(); c2.arc(0, 0, 21, 0, 7); c2.fill(); c2.lineWidth = 1.8; c2.strokeStyle = COL.ICON_RING; c2.stroke(); K.icon(c2, (o.icons || ICONS)[i], 0, 0, 22, COL.ICON_INK, 1.9); c2.restore(); } }; // paddles: o.raise [[t0, t1, stagger]], o.flips [[t0, stagger, kind, until]] — kind 'x' | 'v' or an array of 12 (one per juror) K.paddleState = (t, o, i) => { let up = 0, face = 'blank', flipK = 1; for (const [r0, r1, st] of o.raise) { const tt = r0 + i * (st ?? 0.05); if (t < tt || t > r1) continue; up = Math.max(up, back(prog(t, tt, 0.24), 2.0) * eo(clamp((r1 - t) / 0.2))); } for (const fl of (o.flips || [])) { const [f0, st, kinds, f1] = fl, tt = f0 + i * st; if (t >= f1) continue; if (t >= tt - 0.08) { const k = prog(t, tt - 0.08, 0.16); flipK = Math.abs(Math.cos(k * Math.PI)); face = k < 0.5 ? face : (Array.isArray(kinds) ? kinds[i] : kinds); if (k >= 1) flipK = 1; } } return { up, face, flipK }; }; K.paddles = (c2, t, o) => { for (let i = 0; i < 12; i++) { const p = jurorPos(i), st = K.paddleState(t, o, i); if (st.up <= 0.001) continue; const top = p.y - 7 * L.jurorCell, u = st.up, ph = 41, cyP = top - 59 * u; c2.save(); c2.fillStyle = COL.INK; c2.fillRect(p.x - 1.75, cyP + ph / 2 * u, 3.5, Math.max(0, top - (cyP + ph / 2 * u))); c2.translate(p.x, cyP); c2.scale(st.flipK * u, u); const fill = st.face === 'x' ? COL.ACC : st.face === 'v' ? COL.GREEN : COL.PADDLE; c2.fillStyle = fill; K.rrect(c2, -ph / 2, -ph / 2, ph, ph, 7); c2.fill(); c2.lineWidth = 3; c2.strokeStyle = COL.INK; c2.stroke(); if (st.face !== 'blank') K.icon(c2, st.face === 'x' ? 'x' : 'check', 0, 0, 26, COL.WHITE, 4.2); c2.restore(); } }; // the vote meter: counts follow the paddles' flips. o: { tIn, tOut, paddles, green (the ✓ round), labels: ['GUILTY', 'NOT'] } K.meter = (c2, t, o) => { const a = env(t, o.tIn, o.tOut, 0.2, 0.22); if (a <= 0) return; let g = 0, n = 0; const segs = []; for (let i = 0; i < 12; i++) { const st = K.paddleState(t, o.paddles, i), done = st.face !== 'blank' && st.flipK > 0.6; segs.push(done ? st.face : null); if (done) st.face === 'x' ? g++ : n++; } const y = L.meterY; c2.save(); c2.globalAlpha *= a; const [lw, rw] = o.labels || ['GUILTY', 'NOT']; // the two sides: ✕ votes on the left, ✓ on the right K.rich(c2, [{ t: `${lw} ${g}`, c: o.green ? mix(COL.ACC, '#F2A383', 0.35) : COL.ACC }], -L.benchHW, y + 9, { size: 31, weight: 400, fam: 'mono', kind: 'meter', alpha: a }); K.rich(c2, [{ t: `${n} ${rw}`, c: COL.GREEN_D }], L.benchHW, y + 9, { size: 31, weight: 400, fam: 'mono', align: 'right', kind: 'meter', alpha: a }); const x0 = -190, x1 = 250, sw = (x1 - x0) / 12; // fill order: guilty votes from the left, not-guilty from the right, like the reference's bar const order = []; for (let i = 0; i < 12; i++) if (segs[i] === 'x') order.push('x'); const nv = segs.filter(s => s === 'v').length; const bar = Array(12).fill(null); order.forEach((_, k) => bar[k] = 'x'); for (let k = 0; k < nv; k++) bar[o.green ? k : 11 - k] = 'v'; for (let k = 0; k < 12; k++) { c2.fillStyle = bar[k] === 'x' ? COL.ACC : bar[k] === 'v' ? COL.GREEN : COL.SEG_OFF; K.rrect(c2, x0 + k * sw + 3, y - 7, sw - 6, 15, 3); c2.fill(); } c2.restore(); }; // ---------- bubbles over a juror ---------- // kind 'label' (white, icon + text), 'speech' (white text), 'quote' (orange, white text, 1–2 lines) K.bubble = (c2, t, o) => { const a = env(t, o.t0, o.t1, 0.14, 0.18); if (a <= 0) return; const s = lerp(0.82, 1, back(prog(t, o.t0, 0.22), 2.2)); const p = jurorPos(o.juror), top = p.y - 7 * L.jurorCell, kind = o.kind || 'speech'; const size = o.size || (kind === 'label' ? 37 : kind === 'quote' ? 35 : 32), lines = Array.isArray(o.text) ? o.text : [o.text]; const lw = Math.max(...lines.map(l => K.measure(c2, l, size, 800, 'sans', -0.6))); const icon = kind === 'label' && o.icon, padX = kind === 'quote' ? 32 : kind === 'speech' ? 30 : 26, iw = icon ? 40 : 0; const w = lw + 2 * padX + iw, lh = size * 1.18, h = lines.length * lh + (kind === 'label' ? 30 : 26); const ax = p.x + (o.ax ?? -38), ay = top - 18; // the tail's tip (above the juror's head, left) const bx = ax - 24 + (o.bx ?? 0), by = ay - 16 - h; // the box's top-left c2.save(); c2.globalAlpha *= a; c2.translate(ax, ay); c2.scale(s, s); c2.translate(-ax, -ay); const fill = kind === 'quote' ? COL.ACC : COL.WHITE; // tail + box with one shadow const shape = (dx, dy) => { c2.beginPath(); c2.moveTo(bx + dx, by + dy); c2.lineTo(bx + w + dx, by + dy); c2.lineTo(bx + w + dx, by + h + dy); c2.lineTo(ax + 14 + dx, by + h + dy); c2.lineTo(ax + dx, ay + dy); c2.lineTo(ax - 4 + dx, by + h + dy); c2.lineTo(bx + dx, by + h + dy); c2.closePath(); }; c2.fillStyle = COL.INK; shape(6, 6); c2.fill(); c2.fillStyle = fill; shape(0, 0); c2.fill(); if (kind !== 'quote') { c2.lineWidth = 2.6; c2.strokeStyle = COL.INK; shape(0, 0); c2.stroke(); } if (icon) K.icon(c2, icon, bx + padX + 14, by + h / 2, 26, COL.ACC, 2.4); const tc = kind === 'quote' ? COL.WHITE : COL.INK; lines.forEach((l, k) => K.rich(c2, [{ t: l, c: tc }], kind === 'label' ? bx + padX + iw : bx + w / 2, by + (kind === 'label' ? 15 : 13) + lh * (k + 0.78), { size, weight: 800, ls: -0.6, align: kind === 'label' ? 'left' : 'center', kind: 'bubble', alpha: a })); c2.restore(); }; // ---------- chips below the slab / stat chips ---------- // o: { x, y, t0, t1, text (markup), kind 'solid'|'white', icon, num } K.chip = (c2, t, o) => { const a = env(t, o.t0, o.t1, 0.12, 0.2) * (o.a ?? 1); if (a <= 0) return null; const s = lerp(0.86, 1, back(prog(t, o.t0, 0.24), 2.0)); const size = o.size || 33, solid = o.kind === 'solid', spans = K.spans(o.text, solid ? COL.WHITE : COL.INK, solid ? COL.WHITE : COL.ACC); const tw = K.measure(c2, spans.map(x => x.t).join(''), size, 800, 'sans', -0.6), iw = o.icon ? 34 : 0; const w = tw + 36 + iw, h = size * 1.75; c2.save(); c2.globalAlpha *= a; c2.translate(o.x, o.y); c2.scale(s, s); c2.rotate((o.rot || 0) * Math.PI / 180); K.hardBox(c2, -w / 2, -h / 2, w, h, { fill: solid ? COL.ACC : COL.WHITE, border: !solid, sx: 5, sy: 5, lw: 2.6 }); if (o.icon) K.icon(c2, o.icon, -w / 2 + 18 + 12, 0, 24, o.iconCol || COL.GREEN_D, 3); K.rich(c2, spans, -w / 2 + 18 + iw, size * 0.36, { size, weight: 800, ls: -0.6, kind: 'chip', alpha: a }); c2.restore(); return { w, h }; }; K.chipW = (c2, o) => { const size = o.size || 33; return K.measure(c2, o.text.replace(/\*/g, ''), size, 800, 'sans', -0.6) + 36 + (o.icon ? 34 : 0); }; // a stat chip: big orange number + label K.stat = (c2, t, o) => { const a = env(t, o.t0, o.t1, 0.12, 0.2); if (a <= 0) return; const s = lerp(0.84, 1, back(prog(t, o.t0, 0.26), 2.2)) * (o.pulse ? settle(t, o.pulse, 0.07, 8, 22) : 1); const nw = K.measure(c2, o.num, 62, 900, 'sans', -1), lw = K.measure(c2, o.label, 34, 800, 'sans', -0.6), w = nw + lw + 52, h = 98; c2.save(); c2.globalAlpha *= a; c2.translate(o.x, o.y); c2.scale(s, s); K.hardBox(c2, -w / 2, -h / 2, w, h, { sx: 0, sy: 0, shadow: false, lw: 3.2 }); K.rich(c2, [{ t: o.num, c: COL.ACC }], -w / 2 + 20, 22, { size: 62, weight: 900, ls: -1, kind: 'stat', alpha: a }); K.rich(c2, [{ t: o.label, c: COL.INK }], -w / 2 + 20 + nw + 12, 20, { size: 34, weight: 800, ls: -0.6, kind: 'stat', alpha: a }); c2.restore(); }; K.statW = (c2, o) => K.measure(c2, o.num, 62, 900, 'sans', -1) + K.measure(c2, o.label, 34, 800, 'sans', -0.6) + 52; // ---------- the comment box (screen space) ---------- K.commentBox = (c2, t, o) => { const a = env(t, o.t0, o.t1 ?? Infinity, 0.22, 0.3); if (a <= 0) return; const rise = (1 - eo(prog(t, o.t0, 0.28))) * 46; const x = 183, w = 717, h = 74, y = o.y + rise; K.screenT(c2); c2.save(); c2.globalAlpha *= a; K.hardBox(c2, x, y, w, h, { r: 9, sx: 8, sy: 8, lw: 3 }); c2.lineWidth = 2.4; c2.strokeStyle = '#3A3B36'; c2.beginPath(); c2.arc(x + 38, y + h / 2, 17, 0, 7); c2.stroke(); const txt = o.text || '', n = typedN(txt, t, o.typed[0], o.typed[1]); const tw = K.rich(c2, [{ t: [...txt].slice(0, n).join(''), c: COL.INK }], x + 72, y + h / 2 + 12, { size: 34, weight: 900, ls: -0.5, kind: 'comment', alpha: a, world: false }); if (t < o.typed[1] + 0.25 || caretOn(t)) { c2.fillStyle = COL.ACC; c2.fillRect(x + 74 + tw, y + 20, 3, h - 40); } const press = o.press ? 1 - 0.12 * env(t, o.press, o.press + 0.24, 0.06, 0.16) : 1; const bw = 86, bh = 42, bxx = x + w - bw - 18, byy = y + (h - bh) / 2; c2.save(); c2.translate(bxx + bw / 2, byy + bh / 2); c2.scale(press, press); c2.fillStyle = COL.ACC; K.rrect(c2, -bw / 2, -bh / 2, bw, bh, 7); c2.fill(); K.rich(c2, [{ t: 'Post', c: COL.WHITE }], 0, 9, { size: 25, weight: 800, align: 'center', kind: 'comment', alpha: a, world: false }); c2.restore(); c2.restore(); }; // ---------- the headline (top left) ---------- // film.heads: one per script line, film.words: tokens {w, o (orange), br (line break before)} K.headline = (c2, t, film) => { K.screenT(c2); const H0 = film.heads; let cur = null; for (const h of H0) if (t >= h.t0 && t < h.t1) cur = h; if (!cur) return; const fadeOut = cur.t1 - t < 0.09 ? clamp((cur.t1 - t) / 0.09) : 1; const end = film.END, tail = t > end - 0.55 ? clamp((end - t) / 0.45) : 1; const k = cur.t0 < 0 ? 1 : prog(t, cur.t0, 0.17), a = eo(k) * fadeOut * tail; if (a <= 0.003) return; // lines of spans const rows = [[]]; for (const i of cur.words) { const w = film.words[i]; if (w.br && rows.at(-1).length) rows.push([]); rows.at(-1).push(w); } let size = 58; const maxW = 742, ls = -1.1; const rowSpans = rows.map(r => { const sp = []; r.forEach((w, j) => { const txt = (j ? ' ' : '') + w.w; const c = w.o ? COL.ACC : COL.INK; if (sp.length && sp.at(-1).c === c) sp.at(-1).t += txt; else sp.push({ t: txt, c }); }); return sp; }); const widest = Math.max(...rowSpans.map(sp => K.measure(c2, sp.map(s => s.t).join(''), size, 860, 'head', ls))); if (widest > maxW) size = Math.max(44, size * maxW / widest); c2.save(); c2.globalAlpha = a; if (k < 1) c2.filter = `blur(${((1 - eo(k)) * 7).toFixed(2)}px)`; rowSpans.forEach((sp, r) => K.rich(c2, sp, 180, 302 + r * 66 * size / 58, { size, weight: 860, fam: 'head', ls, kind: 'headline', alpha: a, world: false })); c2.restore(); c2.filter = 'none'; }; // ---------- the footer ---------- K.footer = (c2, t, o = {}) => { K.screenT(c2); const label = o.label || 'pixel.md', size = 22, tw = K.measure(c2, label, size, 700, 'mono'), gw = 34, gap = 12, x0 = 540 - (gw + gap + tw) / 2, y = 1458; c2.save(); c2.globalAlpha = o.a ?? 1; K.claude(c2, x0 + gw / 2, y + 9, 3.4, { blink: K.blink(t, 77) }); K.rich(c2, [{ t: label, c: COL.INK }], x0 + gw + gap, y + 8, { size, weight: 700, fam: 'mono', kind: 'footer', world: false }); c2.restore(); }; // ---------- the safe-zone overlay (stills with --safe) ---------- K.drawSafe = (c2, boxes) => { K.screenT(c2); c2.save(); c2.fillStyle = 'rgba(255,0,80,0.10)'; c2.fillRect(0, 0, W, SAFE.y0); c2.fillRect(0, SAFE.y1, W, H - SAFE.y1); c2.fillRect(0, SAFE.y0, SAFE.x0, SAFE.y1 - SAFE.y0); c2.fillRect(SAFE.x1, SAFE.y0, W - SAFE.x1, SAFE.y1 - SAFE.y0); c2.strokeStyle = 'rgba(255,0,80,0.8)'; c2.lineWidth = 3; c2.setLineDash([14, 10]); c2.strokeRect(SAFE.x0, SAFE.y0, SAFE.x1 - SAFE.x0, SAFE.y1 - SAFE.y0); c2.setLineDash([]); for (const b of boxes) { const bad = b.x0 < SAFE.x0 || b.x1 > SAFE.x1 || b.y0 < SAFE.y0 || b.y1 > SAFE.y1; c2.strokeStyle = bad ? 'rgba(255,0,0,0.95)' : 'rgba(0,170,60,0.75)'; c2.lineWidth = bad ? 4 : 2; c2.strokeRect(b.x0, b.y0, b.x1 - b.x0, b.y1 - b.y0); } c2.restore(); }; return K; } // colour mix of two hex colours export function mix(a, b, k) { const p = h => [1, 3, 5].map(i => parseInt(h.slice(i, i + 2), 16)), A = p(a), B = p(b); return '#' + A.map((v, i) => Math.round(v + (B[i] - v) * clamp(k)).toString(16).padStart(2, '0')).join(''); } ``` ### `engine/lib.js` ```js // Small helpers shared by the kit and the scene. Every frame is a pure function of film time t: no state, no randomness // (hash() gives stable pseudo-random numbers). export const clamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x)); export const lerp = (a, b, k) => a + (b - a) * k; export const prog = (t, t0, d) => d <= 0 ? (t >= t0 ? 1 : 0) : clamp((t - t0) / d); export const eio = x => x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; // ease in-out cubic export const eo = x => 1 - Math.pow(1 - x, 3); // ease out cubic export const eo5 = x => 1 - Math.pow(1 - x, 5); export const ei = x => x * x * x; export const back = (x, s = 1.9) => { if (x <= 0) return 0; if (x >= 1) return 1; const c = s + 1; return 1 + c * Math.pow(x - 1, 3) + s * Math.pow(x - 1, 2); }; export const ss = (t, a, b) => { const x = clamp((t - a) / (b - a)); return x * x * (3 - 2 * x); }; export const hash = n => { const x = Math.sin(n * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); }; // in/out envelope: 0 before t0, eases to 1 over din, holds, eases back to 0 over dout ending at t1 export function env(t, t0, t1 = Infinity, din = 0.2, dout = 0.2, ein = eo, eout = eo) { if (t < t0 || t > t1) return 0; const a = din > 0 ? ein(clamp((t - t0) / din)) : 1, b = dout > 0 && t1 < Infinity ? eout(clamp((t1 - t) / dout)) : 1; return Math.min(a, b); } // a pop-in scale (0 → overshoot → 1) over d seconds from t0 export const popS = (t, t0, d = 0.26, s = 2.2) => t < t0 ? 0 : back(prog(t, t0, d), s); // a damped settle after an impact: 1 + amp·e^(−k·dt)·cos(w·dt) export const settle = (t, t0, amp = 0.06, k = 9, w = 30) => t < t0 ? 1 : 1 + amp * Math.exp(-k * (t - t0)) * Math.cos(w * (t - t0)); // how many characters of text are typed between t0 and t1 (linear) export const typedN = (text, t, t0, t1) => t < t0 ? 0 : t >= t1 ? [...text].length : Math.floor([...text].length * (t - t0) / (t1 - t0) + 1e-6); export const caretOn = (t, period = 0.9) => (t % period) < period * 0.55; // the value of a step list [[t, v], …] at t (the last v whose t ≤ now), or def export function stepAt(list, t, def = null) { let v = def; for (const [tt, x] of list) { if (t >= tt) v = x; else break; } return v; } ``` ### `engine/common.mjs` ```js // Shared bits for the Node scripts. Usage everywhere: node engine/