--- name: paper description: Make a narrated vertical reel (1080x1920, 25-40 s) in the "Paper" format - a papercraft 3D diorama shot like a little TV show - orange construction-paper block characters in leather armchairs, a studio whose grid windows light up, a giant paper shark, a corridor with a glowing doorway, flat paper dioramas (green felt with a conveyor, a brick wall with sticky notes, a grey office with a paper city), a torn paper banner taped across the top for every beat, orange torn-paper word tags as captions, a blue news chyron with a foamy water edge, round speech bubbles with drawn faces and a big COMMENT bubble at the end. One fast ElevenLabs voice and a music bed, rendered frame by frame in headless Chrome (three.js) and encoded with ffmpeg. Use it when someone asks for a paper reel, "paper.md", a papercraft or cardboard diorama reel, a Shark-Tank-style story reel, or wants to turn a script into this kind of video. --- # Paper reel: how to make one You will make a **25-40 second vertical video (1080x1920, 30 fps, H.264 + AAC, at most 60 s and 60 MB)** that looks like **a little TV show built out of paper**. Everything is cut from construction paper and cardboard: **orange block characters** with black square eyes (the narrator is a small Clawd-style critter in a blue cap; the others sit in leather armchairs wearing paper outfits: a hoodie, a pinstripe suit, pearls), a **navy studio whose grid windows go from night blue to glowing orange**, a painted rug, a **giant paper shark** with zigzag teeth, a corridor with a glowing doorway, and three **flat paper dioramas** shot straight on (green felt with a conveyor and a piggy bank, a brown wall with bricks and sticky notes, a grey office with a paper city). The camera never stops and **cuts to a new set or angle every ~1.8 s**, with depth of field, bloom, light chromatic edges, film grain and drifting dust. Over it sit four paper layers: a **torn paper banner taped across the top** that titles every beat, **orange torn-paper word tags** that appear word by word as the voice says them, a **blue news chyron with a foamy water edge** for the key fact, **round speech bubbles with drawn faces** over the characters, and on the call to action a **big white COMMENT bubble** with the keyword in red. **`reference.jpg`** (next to this file, if you have it) is a contact sheet of 12 frames from a finished Paper reel: **this is what it should look like.** Left to right, top row first: (1) the hook: a giant orange paper shark chewing the right edge of a white "SKILL.md" card on an easel in a dark navy studio, blue grid windows behind, the banner "NEVER PAY FOR A SKILL AGAIN", the tag "realize"; (2) the reveal: the shark rips a red "$30" tag off the card, "FREE" in green underneath, the windows glowing orange; (3) a small orange critter in a blue cap carrying a white card toward a glowing doorway under a "MORPHY" sign, a blue chyron "CASPER: BUILT MORPHY, AN AGENTIC SUPER APP"; (4) the sharks'-eye view of the pitch: a card "FORMAT + SKILL.md $0" on an easel, a phone and a paper doc popping up behind it, the critter beside it; (5) a row of orange blocks in leather armchairs under glowing windows, round bubbles with drawn faces over them; (6) a shiny red gift box with a gold bow and a "PREMIUM" tag; (7) a teal cash register showing "$30.00", the chyron "HIS OFFER: MY FREE FILE FOR $30"; (8) a flat green felt diorama: cards on a conveyor stamped "$30", a piggy bank, a "$30 EACH" marquee; (9) the easel card flipping from a red "$30" to a green "$0"; (10) a bookshelf of .md books inside a paper app window titled "Morphy"; (11) a flat brick wall: sticky notes "NO PAYWALLS", "NO SUBSCRIPTIONS", "NO STRINGS" slapped on a white sign; (12) the CTA: three blocks in armchairs holding green "FREE" signs, bubbles over them, a big white bubble "COMMENT PAPER". If you only have this file, section 3 describes everything with numbers. Everything is rendered **one frame at a time** from a three.js page 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 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 five small files**: `script.mjs` (what the voice says), `times.mjs` (the cuts), `scene.js` (the director file: the shots, what each set shows when, the banners, chyrons and bubbles), `cues.mjs` (sound effects) 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 -> sound + mix -> encode -> check -> deliver.** --- ## 0. Rules of engagement (read first) 1. **Be gentle with the user's computer.** One headless browser, on the GPU, at the lowest priority, pinned to one CPU thread, never parallel workers. If WebGL is on the CPU (SwiftShader, llvmpipe, "software"), `cdp.mjs` refuses to render: tell the user to fix the graphics driver. 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, ~650-800 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 500`, then `full 500`), each call under your tool timeout. The render resumes where it stopped. 6. **No real people.** The reel this format comes from put photos of TV hosts in its bubbles and used a real show's logo: never. Bubbles hold drawn faces (`P.avatarCanvas`); the show is invented. No real screenshots, app icons, handles or view counts; every card and screen is drawn. Counters count only what is said. 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 GPU, 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=`), a GPU. Chrome is driven through ANGLE: d3d11 on Windows, metal on macOS, gl on Linux (if the GPU probe fails on Linux, try `PAPER_ANGLE=vulkan`). Debug ports 9650-9699 on 127.0.0.1. - **three.js 0.170.0** from npm (pin it; the import map points into `node_modules/three`). - **An ElevenLabs API key.** The free plan (about 10,000 credits a month) 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 and music are free downloads (`setup.mjs` fetches them). The 23 sound effects are made once with ElevenLabs sound generation (`gen-sfx.mjs`, ~20 s of sound), or downloaded free (Mixkit) and saved under the names in section 10. ## 2. Project layout and setup ``` paper-reel/ one project folder, many videos package.json { "type": "module", "dependencies": { "three": "0.170.0" } } .env ELEVENLABS_API_KEY=... (never print it) engine/ Appendix A: write these files once, never edit them per video film.html main.js the page: fonts (fonts/fonts.json) -> film.json + scene.js -> window.setT(t) world.js papertex.js tex.js every set, character and prop + their paper textures (WORLD_DEFAULTS = what they say) overlay.js banner, word tags, chyron, bubbles, COMMENT bubble, paper plane, safe zone look.js post.js camera.js fx.js lib.js lights per set · post chain · SHOTS -> camera · whips/flash/punch · helpers common.mjs cdp.mjs setup.mjs render.mjs gen-vo.mjs voedit.mjs votight.mjs build.mjs gen-sfx.mjs mix.mjs encode.mjs check.mjs fonts/ music/ sfx/ downloaded / generated once my-video/ one folder per video (Appendix B is a complete one) script.mjs times.mjs what the voice says (+ how to say symbols) · the cuts scene.js cues.mjs the director file · the sound effects video.json settings vo/ film.json stills/ frames/ mix.wav video.mp4 cover.jpg ``` ```bash mkdir paper-reel && cd paper-reel echo '{ "type": "module", "private": true, "dependencies": { "three": "0.170.0" } }' > package.json npm install # write engine/* from Appendix A, then: node engine/setup.mjs # checks Node/ffmpeg/three/Chrome/GPU/key, downloads fonts + music, writes fonts/fonts.json node engine/gen-sfx.mjs # dry run: lists the 23 sounds; then --yes to make them once ``` A video: ```bash mkdir my-video # write my-video/script.mjs (section 4); copy times.mjs, scene.js, cues.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 10 --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 cut, x1.12 -> vo/b.* node engine/build.mjs my-video # real timings: prints every caption token with its time + the tag chunks node engine/render.mjs my-video stills 0.6,3,7,10,14,18,22,26,29 --safe node engine/render.mjs my-video full 0 500 && node engine/render.mjs my-video full 500 # ~0.16-0.5 s a frame on a mid GPU 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 | |---|---|---| | The set | everything behind | one paper set per shot (3.4), lit like a studio, depth of field on the subject | | Subject | between the banner and the chyron: y ≈ 400-1080 | the character, card or prop the sentence is about; a close-up block fills ~70-100 % of the width | | Banner | y 276-382, x 70-950 | a torn paper strip taped at both top corners, the beat's title in heavy caps | | Bubbles | over a character's head (≥ ~200 px above it) | a white disc with a drawn face and a tail, popping on that character's word | | Chyron | bottom edge y 1336, from the left edge, 560-900 px wide | the blue news panel with the key fact, 2-3 lines | | Word tags | centred on x 510, block centre y 1400, bottom ≤ 1470 | orange paper tags, ≤ 3 words, word by word | | COMMENT bubble | centred x 510, y ≈ 1000 (CTA only) | the keyword in red | **Safe zone (every platform covers the edges):** all text inside **x 60-960, y 250-1480**; tags inside y 1150-1480, at most 820 wide, centred on x 510. Nothing important in the top 250 px, the bottom 440 px or the right 120 px. The overlay records every text box it draws; `render.mjs ... --safe` draws the zone and the boxes, every run prints anything outside it, and the full render logs every frame for `check.mjs`. In-world text (cards, signs, notes, the shelf) isn't tracked: keep it big and central. ### 3.2 Colours | Token | Hex | Used for | |---|---|---| | character paper | `#e8784a` (blotches toward `#8f3c1f`), alt `#e9804f` | every orange block, the shark, the critter | | eyes / teeth | `#141414` / `#fbf7ee` on mouth `#2a0d0a` | faces | | outfits | hoodie `#23305a`, pinstripe `#2b2f3c` + white V + red `#c8322a`, red top `#d2322a` + pearls `#fbf7ee`, teal `#2f6e8f`, black cap `#1a1a1f`, the narrator's cap `#3b6fd8` | who is who | | studio walls | `#222b58` paper (blotches `#121735`), pillars `#3a2620`, ceiling `#0c0f22` | the TV studio | | windows | night panes `#3c64c8 → #1b2f6c`, lit `#ffd08a → #ff9d45 → #c4521f`, mullions `#3a1d0e` | the light-up moment | | rug / floor | rug `#17286a` with gold `#f2c14e`, orange `#e98a3a`, red `#c4472a` swirls and a `#7d2a1a` border; floor dark planks | the stage | | chairs | leather `#6e2d1d`, cushions lighter, brass studs `#d8b56a` | the sharks' seats | | signs | red `#d93b2b`, green `#3a9d4f`, white ink | front / back of the sharks' signs | | card | paper `#f7f4ee`, ink `#1d1d1f`, brand `#e8603c`, green price `#2f9e57`, red price `#d23a2a` | the easel card, wall sign, docs | | flat sets | felt `#1f5a45`, brown wall `#4a2c1c`, bricks `#a8502f`, concrete `#8f9298`, sky `#9cc8f2`, paper city `#5b7ec4` | the three dioramas | | sticky notes | `#f4d34a` `#f3a3c2` `#8ec5f0` `#8fdc9a` | notes | | banner | paper `#f1ece2`, tape `#d6c69a`, ink `#161616` | the top strip | | tags | paper `#cf6a43`, ink `#fdf3e4`, shadow `rgba(70,25,8,.35)` | captions | | chyron | `#1f5cc0 → #17479f → #0e2f74`, foam `rgba(160,205,255,.9)` + white dots | the lower third | | CTA word | `#ff6a5a → #d42f2f` | COMMENT bubble | ### 3.3 Fonts **Inter Tight** pinned to 800 (the banner, cards, signs, notes), **Cooper Black** for the word tags if the user has it (it ships with Microsoft Office), otherwise **Fraunces** pinned to SOFT 100 / WONK 1 / opsz 144 / wght 900 (a soft serif drawn after the Cooper series: the same look), **Roboto Condensed** 700 (the chyron) and **JetBrains Mono** 800 for the register's LED (Consolas Bold if present). All free ones are SIL OFL from google/fonts; `setup.mjs` downloads them and writes `fonts/fonts.json`, the list the page loads from. ### 3.4 The sets (one visible at a time; world units, the floor is y 0) - **Studio** (at the origin). Back wall at z −9 with **five grid windows** (x −7.6 … 7.6, centre y 3.8, 2.9 × 4.1) whose shader mixes a night-blue and a glowing-orange canvas per window (`R.winMats[i].uniforms.k`), pillars between them, a logo panel at y 7.4 (two metallic blue words). **Five armchairs on an arc** (x = (i − 2) × 3.1, z = −5.2 + |i − 2| × 0.55, turned toward the stage) with a seated block in each and a sign on a stick beside it; small side tables with cups. The stage: a painted rug (9 × 7) at z 0-4 with paper confetti on it. Side walls at x ±13, a front wall at z 8.5 with a **glowing entrance**. Lights: a warm key spot (with shadows), a blue hemisphere and rim, warm window lights when lit, a stage spot. - **Corridor** (x −70): wood-panel walls at x ±3 with lamps, a glowing door frame at z −9.85 with two doors that swing open, a lit sign above it. - **Felt** (x 70): a flat green felt backdrop; a conveyor at y −0.5 with rollers; posts with dials; a stamp press over x 0; cards that ride the belt; a pink paper piggy bank on the right; a marquee with bulbs; two small flat figures and a lever; banknotes pinned on the felt. - **Brick** (x 120): a brown wall, a door with an EXIT sign on the left, a brick wall on the right, a white sign at (0.6, 2.0) that collects sticky notes, a lamp, a string hanging from the sign and a pair of scissors. - **Office** (x 133): grey concrete, a big window on a blue paper city, a long table, two flat figures behind it, a paper doc that slides in and gets stamped, a green check card. - The flat sets are planes facing +z, lit by one directional light that throws soft drop shadows, shot straight on from 13-16 units with a long lens (fov 34-36), almost no depth of field. ### 3.5 The characters (`world.js`) - **A block** (`R.makeBlock`): a 1.3 × 1.05 × 0.95 box of mottled orange paper with rounded edges, two black eyes (0.13 × 0.2) at 62 % of its height, optional zigzag teeth, two arms (shoulder pivots) and four legs (bent forward when seated). Outfits wrap the lower 36-42 %: hoodie (navy + two white drawstrings), suit (pinstripe + white V + red pocket square + a gold button), pearls (red top + a curve of white beads), blonde (teal top), cap. Hair on top: messy brown lumps, long or bobbed blonde lumps with side pieces, bald with thin round glasses, a black cap with a brim. - **The narrator** (`R.makeCritter`): a small 0.86 × 0.52 block on four thin legs with two diamond hands and a blue cap. It walks (legs swing), gestures (hands), hops (`hop`). - **The giant shark** (`R.makeBigShark`): a 2.5 × 1.55 × 1.9 head over a dark mouth slot with an upper row of zigzag teeth and a hinged lower jaw (its own teeth), slanted angry eyes, a fin on top, a tail fin, four tall legs and a lollipop sign on its head. It chomps by rotating the jaw. - **They never stand still:** blinks (eyes squash for 0.09 s every ~2.6 s), a lean when they "move in", a hop on a big word, arms that point or grab, chairs that slide. ### 3.6 Props (studio, hidden until a shot shows them) The easel with a **card whose face is a canvas you redraw** (`P.cardCanvas`: brand row, title, price, a stamp, bite holes), a **phone** (`R.screenTex` draws its screen), a paper doc, a **gift box** (lid on a hinge, a gold bow that pops, a tag), a **cash register** (an LED that counts, a drawer that slides out), a **money stack** with a price tag that **catches fire** (flame cards + a flickering light), a **bookshelf of .md books** with a lit sign and a **paper app window** that frames it, a held doc, a small card, a paw in a suit sleeve, out-of-focus paws for a sharks'-eye shot, flying banknotes, paper scraps for bites, and **dust motes** that hang in front of the camera and blur into bokeh. Everything is drawn; nothing is a real file, logo or screenshot. ### 3.7 The overlay (`overlay.js`) - **Banner:** torn strip 880 × 106 px from y 276, centred on x 510, a 0.6 % tilt that alternates per beat, paper fibres multiplied in, two tape strips 118 × 46 at the top corners (±0.78 rad); the title in Inter Tight 800 caps fitted to ≤ 770 px (34-54 px). **A new title on every cut**, with a 0.16 s 3.5 % pop. - **Word tags:** each word its own torn orange tag (text width + 0.62 × size wide, 1.42 × size tall, ±3° tilt and ±6 px jitter from a hash of the word), 62 px; a word **pops in as it is said** (0.13 s, overshoot), the row re-centres as each new tag lands (0.12 s); a chunk holds ≤ 3 words and clears for the next. - **Chyron:** slides in from the left in 0.2 s (out in 0.14 s), panel width = text + 150 (560-900), a wavy top edge with a light-blue line and white foam dots; Roboto Condensed 700 60 px from x 72, bottom edge y 1336. Its words appear only once the panel has landed (otherwise the last slide frames put them past the safe edge). - **Bubble:** a white disc (radius 62-92 + a 9 px ring) with a drawn face clipped inside, a tail toward the speaker, a soft shadow; pops in 0.22 s with overshoot, bobs ±3 px. Hang it at the character's `top` + 0.35-0.42 units, projected every frame (`E.project`). - **COMMENT bubble:** a 600 × 300 white ellipse with a tail at (510, ~1000): "COMMENT" small, grey and letter-spaced, the keyword up to 128 px in red; a burst ring with rays on the pop and stars twinkling around it. A **paper plane** flies off to the top right on "send". ### 3.8 The signature moments (keep all of them) 1. **The hook (0-3 s).** A giant shark gnaws the edge of a card on an easel in the dark blue studio (bites leave holes, paper scraps fly). The thing being sold arrives (money flies into its mouth, a red price tag slaps on) and on the reveal word **it rips the tag off**: the truth is printed underneath and **the windows light up orange one by one**, with a soft warm flash. 2. **The walk-in.** The narrator walks toward a glowing doorway under a lit sign (the doors swing open), seen from behind; a chyron says who it is. 3. **The sharks'-eye pitch.** From behind out-of-focus paws, the narrator presents a card on the easel; what it offers pops up behind the card (a phone, a doc); a chyron states the offer; a stamp lands on the last word. 4. **The row.** A pan across the armchairs under the glowing windows; bubbles pop over each character on its word; they lean in. 5. **Close-up + cut-away.** One character fills the frame with its bubble, then a whip to the object of its sentence (a box that closes with a bow, a register that rings up the price), a chyron on the "offer". 6. **The flat diorama.** A process shown straight on in paper: the conveyor stamping every card on the beat, a wall collecting sticky notes one per phrase (a string snipped on "attached"), an office stamping a doc. 7. **The turn and the payoff.** A price flips on its word; a shelf rises like a pop-up book and fills with books; money catches fire; the camera pulls back to frame it all. 8. **The CTA.** The wide row again: the signs flip to the good side on "free", bubbles over three characters, the COMMENT bubble on "comment", the plane on "send". ### 3.9 Post (`post.js`, `fx.js`, `look.js`) ACES tone mapping, bloom 0.36-0.55 at threshold 0.9 (0.26 on flat sets), chromatic aberration 1.0 (edges only), vignette 0.36, **grain 0.028** (more blows up the file size), a warm grade when the studio is lit, depth of field per shot (aperture `ap` 6-13 in 3D, ~1.2 on flat sets), flashes capped at 0.24, horizontal whip blur ±0.09 s around cuts into cut-aways, a 4-5 % zoom punch into big reveals. ## 4. Writing for this format - **The narrator speaks in the first person** (or describes "you"), fast and continuous: after `votight`, ~4.4 said words a second, so **110-135 words = 25-32 s**. - **The shape** (the grammar the look was built for): **hook** "Most people don't realize …" → **setup** (who, what was done) → **"Then the … moved in."** (the characters arrive) → **"Like one who …, and another who …"** (two characters, two specific behaviours: each gets a close-up and a cut-away) → **the turn** ("So here's my response: …") → **the payoff** ("Because …" / "Which means …") → **the format or product line** → **CTA** "Good thing it's free: just comment KEYWORD and I'll send it to you." - **Every sentence must be showable** as one set or prop: a price (a tag, a register, a flip), a giveaway (a card on the easel), a process (the conveyor), a list of three (sticky notes), a thing that ends (fire), a thing that's free (a stamp). One sentence = one or two shots. - `script.mjs`: `LINES` = what the tags show, one sentence or clause per line; `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 it must stress (`'PAPER': '"Paper"'`). A line after a full stop starts with a capital even when its first token is replaced. ## 5. The voice (ElevenLabs) - **Liam** (`TX3LPaxmHKxFdv7VOQHJ`) on **eleven_multilingual_v2**, stability 0.4, similarity 0.8, style 0.5, speaker boost, **speed 1.2**: a young, energetic narrator (median pitch ~148 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`**: the format talks at ~265 words a minute with no breathing room. It cuts every pause inside real silence (after `. ! ? :` it keeps 0.12 s, after `, ;` 0.06 s, else 0.04 s) and speeds the take up **×1.12** (1.04 of it by resampling, a touch brighter; the rest with the pitch kept). Don't go past ×1.15: fast words blur. - **A word that comes out wrong** ("sharks showed up" heard as "shark showed up"): change the line if you must, 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-`), then tighten `c`. ## 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 tag token with `t0`/`t1`, its line), `chunks` (the tag groups: the format's even chunks of ≤ 3 words per phrase, re-balanced only when a chunk would be wider than `chunkW`), `env` (loudness per frame) and `END` (last word + 1.3 s). It prints every token with its time, line by line, then the chunks: **you key everything to these.** `--fake` guesses timings at the tightened pace so you can direct and render stills before the voice exists; re-run it without `--fake` after the take and only nudge what moved. ## 7. Directing ### 7.1 `times.mjs`: the cuts One function shared by the picture and the sound: `times(film)` returns `T('word', n)` (the n-th occurrence's start), `tok(line, k)`, `lineT(line)` and **`C`, one cut per beat, just before its sentence** (`lineT(3) - 0.09`), plus cuts inside long sentences on a key word (`T('repackaged') - 0.05`). The scene builds its shots between consecutive cuts; the cues put a whoosh on most of them. ### 7.2 The scene file ```js import { times } from './times.mjs'; export const WORLD = { logo: ['SKILL', 'SHARKS'], door: 'MORPHY', signs: ['$30', 'FREE'], price: '$30', … }; // what the props say export default function setup(E) { const { R, O, P, L, FX, X, film } = E, { T, C, lineT } = times(film); const SHOTS = [ shot('hook', P_keys, L_keys, { fov, ap, fy }), … ]; // one per cut: camera keys from the cut to the next function world(t, si) { defaults(); WORLDS[SHOTS[si].name](t); dust(t); } // reset, then the current shot shows its set const WORLDS = { hook(t) { R.show('studio'); E.look(t, { set: 'studio', lit }); … }, … }; function overlay(g, t) { bubbles…; O.banner(…); chyrons…; O.captions(g, film, t); } function effects(t) { FX.apply(E, t, { whip, flash, zoom }); } return { SHOTS, IMPULSE, world, overlay, effects }; } ``` Copy the helpers from Appendix B as they are (`shot`, `defaults`, `blink`, `walk`, `card`, `scraps`, `dust`, `stepAt`, `bub`, `sparkle`): a new video rewrites `WORLD`, the shot list, the per-shot functions, `BANNERS`, `CHYRONS` and the cues. ### 7.3 What the engine gives you (`E`) | Call | What it does | |---|---| | `R.show(name)` · `E.look(t, { set, lit, spot, key, keyPos, fire, warm, bloom, exposure, winGain })` | one set visible · its lights and grade (`lit` 0 night → 1 glowing; `R.winMats[i].uniforms.k` lights one window) | | `R.sharks[i]` · `R.chairs[i]` · `R.signs[i]` | the seated blocks (`pivot`, `arms`, `eyes`, `top`) · their chairs (move them) · signs (`g` raise, `card.rotation.y = π` flips) | | `R.critter` · `R.critter2` (+ `R.carry`) · `R.big` | the narrator in the studio · walking in the corridor · the giant shark (`jaw`, `head`, `sign`) | | `R.easel` + `R.card` + `R.cardTex.set(key, draw)` | the easel card: redraw only when `key` changes (`P.cardCanvas({...})`) | | `R.phone` (`R.screenTex`), `R.skillDoc`, `R.gift` (`R.giftLid`, `R.bow`, `R.giftTag`), `R.register` (`R.ledTex`, `R.drawer`), `R.money` (`R.moneyTag`) + `R.fire` (`R.flames`), `R.shelf` (`R.books`) + `R.appFrame`, `R.paperDoc`, `R.miniCard`, `R.suitPaw`, `R.fgPaws`, `R.flyBills`, `R.scraps`, `R.dust` | studio props | | `R.doors`, `R.doorSignM` · `R.feltCards`, `R.press`/`R.pressHead`, `R.piggy`, `R.marqueeTex`, `R.lever`, `R.flatSeller`, `R.flatMe` · `R.wallSignTex`, `R.notes`, `R.flatMe2`, `R.string`/`R.stringLow`, `R.scissors` · `R.officeDoc`/`R.docTex`, `R.people`, `R.check` | the corridor · felt · brick · office | | `E.project(objOrPoint, [dx, dy, dz])` | a 3D point → overlay pixels `{ x, y, behind }` (bubbles, sparkles) | | `O.banner` `O.captions` `O.chyron` `O.bubble` `O.commentBubble` `O.plane` · `P.avatarCanvas(kind)` `P.starCanvas()` | the 2D layer · drawn faces (hoodie, suit, pearls, blonde, cap, me) and a star | | `FX.apply` `FX.whips` `FX.flash` `FX.punchIn` `FX.punchOut` · `IMPULSE: [[t, amount]]` | post effects · a camera shake | | `R.makeBlock(o)` `R.makeCritter()` `R.makeChair()` `R.box(w, h, d, R.mat(c))` `R.plane` `R.dynTex(w, h)` | more characters and props (add them to `R.sets.` in `setup`) | ### 7.4 Framing a 9:16 frame - At fov 40 the frame is only **~23° wide**: a 1.3-wide block fills the width at ~3.2 units. Close-ups **4-5 units**, a block with its chair **6-7**, a card with the narrator **~6.8**, the shelf **~10**; three sharks at fov 52 need **~12** (the CTA moves the three middle chairs 2.45 apart). - Flat sets: straight on from 13-16 units at fov 34-36 (~5-6 units across). - Keep the subject between the banner (y 276-382) and the chyron (from y ~1130): `fy` (0.46-0.56) is where the look-at lands on screen. A bubble needs ~200 px above a head. ### 7.5 The edit follows the words - **On the word, not near it.** A bubble pops on its character's word; a bite, stamp, slap or flip lands on the stressed word (+0-0.1 s) with its sound; a chyron slides in on the fact and stays through the beat; the reveal (the lights) lands on the reveal word. - **A new shot every 1-2.5 s** (17 in the 30 s example), a new banner title on each cut, whips into cut-aways and flat sets, a zoom punch into the big reveals. - **Nothing sits still for more than ~0.3 s:** dust, push-ins, blinks, bobbing bubbles, the conveyor, the flames. - **Frame 0 is the cover-worthy hook:** the set, the shark at the card, the banner (no pop on the first title), the first tag. ### 7.6 Motion rules (break these and it looks buggy) 1. **Reset every frame:** `world(t)` hides every prop and puts every moved part back (`defaults()`), then the current shot sets what it needs. Every frame renders alone, in any order: **no `Math.random`, no state between frames** (use `L.hash`, seeds). 2. **A plane on a box face at the same depth z-fights** (a sign or doc goes blank): keep text planes ≥ 0.01 in front of their board. 3. **Billboards** (flames) turn toward the camera inside `world(t)`; the camera is already placed when `world` runs. 4. **Dynamic textures** redraw only when their key changes (`R.cardTex.set('flipB', …)`): never redraw every frame. 5. **Keep effects off key words** in the mix (section 10). ## 8. Stills and the safe zone ```bash node engine/render.mjs my-video stills 0.6,3,7,10,14,18,22,26,29 --safe ``` Look at `stills/sheet-safe.jpg` (red = keep text out, cyan = the tag band, every text box green or red). The run prints `OUTSIDE SAFE ZONE` lines and page errors: both must be empty. **The first stills of a new shot are almost always too tight** (portrait width): pull the camera back. Check the hook (shark at the card, readable), a close-up (bubble below the banner), a chyron beat (the card's key line above the chyron), a flat set (centred, nothing important under the banner), the CTA (three characters, the COMMENT bubble). Then stills without `--safe` for colour. ## 9. The full render `node engine/render.mjs my-video full [from] [to]` writes `frames/f0000.jpg…` (about 0.15-0.5 s a frame on a mid-range GPU: ~3 min for 30 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. ## 10. Sound - **The bed:** Mixkit "Coffee or Tea" from 8 s, `db −10`: about 13 LU under the voice after the voice ducks it. `STEM=vo` / `STEM=music node engine/mix.mjs my-video` measure them; effects sit ~7 LU under the voice. - **The kit** (`sfx/.wav`, made once by `gen-sfx.mjs`): `chomp` (bites), `rip` (a tag torn off), `kaching` (a register), `stamp`, `slap` (a tag or note lands), `whoosh` / `swish` / `swoosh` (cuts, things flying), `pop` (bubbles, pop-ups), `thud` (a lid), `boing` (a hop), `flick` (signs flip, a card turns), `clunk` (the lights switch on), `ding` / `shimmer` / `chime` (good things, the name), `click` (footsteps, books), `clack` (the conveyor), `burst` / `burn` / `fuse` (fire), `impact` (low, under the CTA), `plane` (the DM flies off). - **Levels and timing:** most cues −9 to −20 dB; `ev(name, t, dB)` starts the file at `t`, so subtract each sound's onset (the example's `ON` table) to land the hit on the picture. - **Keep effects off key words:** a chomp on a name or a footstep on a fast word can make it unintelligible (a speech recogniser heard "Claude" as "quad" and "agentic" as "agendix"). Move the cue, or add a `muffle` window (`video.json` `music.muffle: [[t0, t1]]` low-passes the bed there). ## 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 reveal is a strong cover). `node engine/check.mjs my-video` checks format, length, size, loudness (−14 LUFS, true peak ≤ −1), frame 0, washed-out frames, stretches where nothing moves, the cut rhythm and the safe zone on every frame. 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/` (~380 MB). ## 12. Checklist - [ ] 110-135 words in the format's grammar; every sentence showable; the CTA keyword one easy word. - [ ] The voice tightened (`votight`, ~265 wpm) and every word clear. - [ ] Frame 0 = the hook; the reveal lights the windows; a new banner title on every cut. - [ ] A new shot every 1-2.5 s; bubbles on their characters' words; chyrons on the facts; stamps and slaps on the stressed words; nothing still for more than ~0.3 s. - [ ] Drawn faces only; no real show, logo, screenshot or handle. - [ ] `--safe` stills clean; `check.mjs` all ✓; watched once with sound. --- ## Appendix A: the engine (write these files exactly) The browser part (`film.html`, `main.js` and the `.js` modules) and the Node scripts (`.mjs`). Write every file once; a video never edits them. ### `engine/film.html` ```html voxel ``` ### `engine/main.js` ```js // Engine boot: fonts → the video's film.json + scene.js → world, post, overlay → 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 * as THREE from 'three'; import { build, CORRIDOR_X, FELT_X, BRICK_X, OFFICE_X } from './world.js'; import { makePost } from './post.js'; import * as O from './overlay.js'; import * as P from './papertex.js'; import * as L from './lib.js'; import * as FX from './fx.js'; import { placeCamera, FIT, minDistance } from './camera.js'; import { applyLook } from './look.js'; const W = 1080, H = 1920; 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: fonts/fonts.json lists the files this kit has. The licensed originals win when they are there (Cooper Black ships // with Microsoft Office, Consolas with Windows); otherwise the free look-alikes (SIL OFL, google/fonts) with their axes pinned: // Fraunces at SOFT 100 / WONK 1 / opsz 144 / wght 900 is drawn after the Cooper series, so the word tags keep their look. const FACES = { 'Inter Tight 800': [['InterTight-800.ttf'], ['InterTight.ttf', { variationSettings: '"wght" 800' }]], 'Cooper Black': [['COOPBL.TTF'], ['Fraunces.ttf', { variationSettings: '"SOFT" 100, "WONK" 1, "opsz" 144, "wght" 900' }]], 'Consolas Bold': [['consolab.ttf'], ['JetBrainsMono.ttf', { variationSettings: '"wght" 800' }]], 'Roboto Condensed': [['RobotoCondensed.ttf', { weight: '100 900' }]], }; const fontUrl = f => new URL(`../fonts/${f}`, import.meta.url); let HAVE = null; try { HAVE = new Set(await (await fetch(fontUrl('fonts.json'), { cache: 'no-store' })).json()); } catch { } for (const [family, list] of Object.entries(FACES)) { let ok = false; for (const [file, desc = {}] of list) { if (HAVE && !HAVE.has(file)) continue; try { const ff = new FontFace(family, `url(${fontUrl(file)})`, desc); await ff.load(); document.fonts.add(ff); ok = true; break; } catch { } } if (!ok) console.error(`font "${family}" missing: put one of ${list.map(x => x[0]).join(' / ')} in fonts/ (and list it in fonts.json)`); } 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 renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true, powerPreference: 'high-performance' }); renderer.setPixelRatio(1); renderer.setSize(W, H); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.NoToneMapping; renderer.outputColorSpace = THREE.SRGBColorSpace; document.body.appendChild(renderer.domElement); const camera = new THREE.PerspectiveCamera(40, W / H, 0.1, 200); const { scene, R } = build(mod.WORLD || {}); scene.background = new THREE.Color(0x05060c); const post = makePost(renderer, W, H); const ocv = document.createElement('canvas'); ocv.width = W; ocv.height = H; const og = ocv.getContext('2d'); const oTex = new THREE.CanvasTexture(ocv); oTex.generateMipmaps = false; oTex.minFilter = THREE.LinearFilter; post.F.tO.value = oTex; const scv = document.createElement('canvas'); scv.width = W; scv.height = H; scv.style.cssText = 'position:absolute;left:0;top:0;pointer-events:none;display:none'; document.body.appendChild(scv); let safeOn = false; window.setSafe = on => { safeOn = !!on; scv.style.display = safeOn ? 'block' : 'none'; }; const _v = new THREE.Vector3(); const E = { THREE, R, scene, post, camera, renderer, film, END, W, H, O, P, L, FX, FIT, minDistance, X: { CORRIDOR_X, FELT_X, BRICK_X, OFFICE_X }, look: (t, o) => applyLook(E, t, o), V: (x, y, z) => new THREE.Vector3(x, y, z), // a world point (or an object's world position + offset) → overlay pixels { x, y, behind } project(p, off = [0, 0, 0]) { if (p.isObject3D) { p.getWorldPosition(_v); } else _v.set(p[0], p[1], p[2]); _v.x += off[0]; _v.y += off[1]; _v.z += off[2]; _v.project(camera); return { x: (_v.x + 1) / 2 * W, y: (1 - _v.y) / 2 * H, behind: _v.z > 1 }; }, }; const V = mod.default(E); for (const k of ['SHOTS', 'overlay', 'world']) if (!V[k]) throw new Error(`scene.js setup() must return ${k}`); window.framing = {}; function setT(t) { t = L.clamp(t, 0, END); const cam = placeCamera(E, V.SHOTS, V.IMPULSE || [], t); if (cam.clamped) window.framing[cam.shot] = Math.max(window.framing[cam.shot] || 0, +cam.clamped.toFixed(3)); V.world(t, cam.shot); scene.updateMatrixWorld(true); camera.updateMatrixWorld(); V.effects ? V.effects(t) : FX.apply(E, t, {}); og.clearRect(0, 0, W, H); O.beginFrame(); og.save(); V.overlay(og, t); og.restore(); oTex.needsUpdate = true; post.render(scene, camera, null); if (safeOn) O.drawSafe(scv.getContext('2d')); return true; } window.setT = setT; window.safeReport = () => O.violations(); window.textBoxes = () => O.boxes().map(b => ({ ...b, x0: Math.round(b.x0), x1: Math.round(b.x1), y0: Math.round(b.y0), y1: Math.round(b.y1) })); setT(+(q.get('t') || 0)); window.__ready = true; ``` ### `engine/lib.js` ```js // Small deterministic helpers: everything in the film is a pure function of film time t. export const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x)); export const lerp = (a, b, k) => a + (b - a) * k; export const seg = (t, a, b) => clamp((t - a) / (b - a)); export const smooth = k => k * k * (3 - 2 * k); export const ss = (t, a, b) => smooth(seg(t, a, b)); export const easeOut = k => 1 - Math.pow(1 - k, 3); export const easeIn = k => k * k * k; export const easeInOut = k => k < 0.5 ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) / 2; export const easeOutBack = (k, s = 1.70158) => { const c3 = s + 1; return 1 + c3 * Math.pow(k - 1, 3) + s * Math.pow(k - 1, 2); }; export const easeOutBounce = k => { const n = 7.5625, d = 2.75; if (k < 1 / d) return n * k * k; if (k < 2 / d) return n * (k -= 1.5 / d) * k + 0.75; if (k < 2.5 / d) return n * (k -= 2.25 / d) * k + 0.9375; return n * (k -= 2.625 / d) * k + 0.984375; }; // damped spring settle: 0 -> 1 with overshoot wobble export const springy = (k, freq = 3.2, damp = 5.5) => k <= 0 ? 0 : 1 - Math.exp(-damp * k) * Math.cos(freq * Math.PI * k); export function rng(seed) { let s = (seed * 2654435761) >>> 0 || 1; return () => { s ^= s << 13; s >>>= 0; s ^= s >>> 17; s ^= s << 5; s >>>= 0; return s / 4294967296; }; } export const hash = (x) => { const s = Math.sin(x * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); }; // 1D value noise in [-1, 1] export function noise1(x, seed = 0) { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return lerp(hash(i + seed * 57.3), hash(i + 1 + seed * 57.3), u) * 2 - 1; } export const fbm1 = (x, seed = 0) => noise1(x, seed) * 0.6 + noise1(x * 2.1, seed + 3) * 0.3 + noise1(x * 4.3, seed + 7) * 0.1; // piecewise: [[t, v], ...] with easing between keys export function keys(t, K, ease = easeInOut) { if (t <= K[0][0]) return K[0][1]; for (let i = 1; i < K.length; i++) if (t < K[i][0]) { const k = ease(seg(t, K[i - 1][0], K[i][0])); const a = K[i - 1][1], b = K[i][1]; return Array.isArray(a) ? a.map((v, j) => lerp(v, b[j], k)) : lerp(a, b, k); } return K.at(-1)[1]; } // active entry of a step list [[t, value], ...] export function step(t, L) { let v = null, at = -1; for (const [t0, x] of L) if (t >= t0) { v = x; at = t0; } return { v, at }; } // hop: parabolic jump from t0 lasting d, height h; returns {y, squash} export function hop(t, t0, d, h) { const k = (t - t0) / d; if (k < -0.15 || k > 1.35) return { y: 0, sq: 0 }; if (k < 0) return { y: 0, sq: -0.18 * Math.sin(seg(k, -0.15, 0) * Math.PI) }; // crouch if (k <= 1) return { y: 4 * h * k * (1 - k), sq: 0.12 * Math.sin(k * Math.PI) }; return { y: 0, sq: -0.16 * Math.sin(seg(k, 1, 1.35) * Math.PI) }; // land squash } ``` ### `engine/tex.js` ```js // Shared canvas helpers (drawn once, deterministic): the font names, a canvas factory and the paper-fibre texture // the 2D layer multiplies over its torn paper. Engine file. Never put real files, handles, reels or view counts on a texture. import { rng } from './lib.js'; export const FONT = { sans: '"Inter Tight 800"', coop: '"Cooper Black"', mono: '"Consolas Bold"', cond: '"Roboto Condensed"' }; export function cv(w, h) { const c = document.createElement('canvas'); c.width = w; c.height = h; return c; } // cardboard / paper fibres used by the 2D overlay (multiplied over shapes) export function paperCanvas(seed = 5, base = 236, spread = 26) { const W = 1024, H = 256, c = cv(W, H), g = c.getContext('2d'), img = g.createImageData(W, H), R = rng(seed); for (let i = 0; i < W * H; i++) { const v = base - R() * spread * 0.5; img.data[i * 4] = v; img.data[i * 4 + 1] = v; img.data[i * 4 + 2] = v - 3; img.data[i * 4 + 3] = 255; } g.putImageData(img, 0, 0); for (let k = 0; k < 90; k++) { g.strokeStyle = `rgba(120,110,95,${0.05 + R() * 0.08})`; g.lineWidth = 1 + R() * 2; g.beginPath(); let x = R() * W, y = R() * H; g.moveTo(x, y); for (let s = 0; s < 6; s++) { x += (R() - 0.5) * 160; y += (R() - 0.5) * 40; g.lineTo(x, y); } g.stroke(); } for (let k = 0; k < 40; k++) { const x = R() * W, y = R() * H, r = 20 + R() * 90; const gr = g.createRadialGradient(x, y, 0, x, y, r); gr.addColorStop(0, `rgba(255,255,255,${R() * 0.18})`); gr.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = gr; g.fillRect(x - r, y - r, r * 2, r * 2); } return c; } ``` ### `engine/papertex.js` ```js // Canvas textures of the papercraft world (drawn once at load, deterministic). Everything looks cut from paper: // mottled construction paper, felt, cardboard, brick, a painted rug, paper signs. Never real files, handles or faces. import { rng } from './lib.js'; import { cv, FONT } from './tex.js'; // value-noise field 0..1 (tileable), octaves of a random grid function field(W, H, seed, scales, weights) { const R = rng(seed), out = new Float32Array(W * H); for (let o = 0; o < scales.length; o++) { const n = scales[o], g = []; for (let i = 0; i < (n + 1) * (n + 1); i++) g.push(R()); const at = (i, j) => g[(j % n) * (n + 1) + (i % n)]; for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) { const fx = x / W * n, fy = y / H * n, ix = Math.floor(fx), iy = Math.floor(fy), ux = fx - ix, uy = fy - iy; const sx = ux * ux * (3 - 2 * ux), sy = uy * uy * (3 - 2 * uy); out[y * W + x] += weights[o] * ((at(ix, iy) * (1 - sx) + at(ix + 1, iy) * sx) * (1 - sy) + (at(ix, iy + 1) * (1 - sx) + at(ix + 1, iy + 1) * sx) * sy); } } return out; } const hex = c => [parseInt(c.slice(1, 3), 16), parseInt(c.slice(3, 5), 16), parseInt(c.slice(5, 7), 16)]; // construction paper: a base colour with darker blotches, lighter fibres and a fine grain (the reference's mottled orange) export function paperColor(base = '#e8784a', { seed = 1, size = 512, blot = 0.22, grain = 0.06, dark = null } = {}) { const c = cv(size, size), g = c.getContext('2d'), img = g.createImageData(size, size), [r, gg, b] = hex(base); const [dr, dg, db] = dark ? hex(dark) : [r * 0.62, gg * 0.5, b * 0.42]; const F = field(size, size, seed, [3, 7, 16], [0.55, 0.3, 0.15]), R = rng(seed + 9); for (let i = 0; i < size * size; i++) { let k = Math.min(1, Math.max(0, (F[i] - 0.42) * 2.4)) * blot; // blotches const n = (R() - 0.5) * grain; img.data[i * 4] = Math.max(0, Math.min(255, r + (dr - r) * k + n * 255)); img.data[i * 4 + 1] = Math.max(0, Math.min(255, gg + (dg - gg) * k + n * 255)); img.data[i * 4 + 2] = Math.max(0, Math.min(255, b + (db - b) * k + n * 255)); img.data[i * 4 + 3] = 255; } g.putImageData(img, 0, 0); for (let k = 0; k < 140; k++) { // fibres g.strokeStyle = `rgba(255,240,220,${0.03 + R() * 0.05})`; g.lineWidth = 0.6 + R() * 1.2; g.beginPath(); let x = R() * size, y = R() * size; g.moveTo(x, y); for (let s = 0; s < 4; s++) { x += (R() - 0.5) * 60; y += (R() - 0.5) * 60; g.lineTo(x, y); } g.stroke(); } return c; } // grey fibre multiply map (for materials that keep their own colour) export function fibreMap(seed = 3, size = 512, lo = 0.8) { const c = cv(size, size), g = c.getContext('2d'), img = g.createImageData(size, size); const F = field(size, size, seed, [4, 11, 30], [0.5, 0.3, 0.2]), R = rng(seed + 1); for (let i = 0; i < size * size; i++) { const v = 255 * (lo + (1 - lo) * Math.min(1, F[i] * 1.2) - R() * 0.04); img.data[i * 4] = img.data[i * 4 + 1] = img.data[i * 4 + 2] = v; img.data[i * 4 + 3] = 255; } g.putImageData(img, 0, 0); return c; } // the studio's grid window: panes + mullions. lit = false (cool night blue) | true (warm, glowing centre) export function windowCanvas(lit) { const W = 512, H = 720, c = cv(W, H), g = c.getContext('2d'), R = rng(lit ? 21 : 22); g.fillStyle = lit ? '#3a1d0e' : '#0d1530'; g.fillRect(0, 0, W, H); const cols = 4, rows = 6, m = 24, pw = (W - m * (cols + 1)) / cols, ph = (H - m * (rows + 1)) / rows; for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) { const x = m + i * (pw + m), y = m + j * (ph + m); const gr = g.createRadialGradient(W / 2, H * 0.45, 20, W / 2, H * 0.45, W * 0.9); if (lit) { gr.addColorStop(0, '#ffd08a'); gr.addColorStop(0.4, '#ff9d45'); gr.addColorStop(1, '#c4521f'); } else { gr.addColorStop(0, '#3c64c8'); gr.addColorStop(0.6, '#2a4797'); gr.addColorStop(1, '#1b2f6c'); } g.fillStyle = gr; g.fillRect(x, y, pw, ph); g.fillStyle = `rgba(255,255,255,${0.04 + R() * 0.06})`; g.fillRect(x + 4, y + 4, pw * 0.35, ph - 8); // sheen } return c; } // the show's logo panel: chunky metallic two-line wordmark on navy export function logoCanvas(l1 = 'SKILL', l2 = 'SHARKS') { const W = 640, H = 420, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#121a3f'; g.fillRect(0, 0, W, H); g.strokeStyle = '#6f9ee8'; g.lineWidth = 10; g.strokeRect(14, 14, W - 28, H - 28); const word = (t, y, size) => { g.font = `${size}px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.letterSpacing = '-2px'; g.save(); g.translate(W / 2, y); g.transform(1, 0, -0.12, 1, 0, 0); g.fillStyle = '#0a1028'; g.fillText(t, 6, 8); const gr = g.createLinearGradient(0, -size / 2, 0, size / 2); gr.addColorStop(0, '#f2f8ff'); gr.addColorStop(0.45, '#a9c9f2'); gr.addColorStop(0.55, '#6f93cf'); gr.addColorStop(1, '#c9defa'); g.fillStyle = gr; g.fillText(t, 0, 0); g.lineWidth = 3; g.strokeStyle = '#2b4a8f'; g.strokeText(t, 0, 0); g.restore(); }; word(l1, 140, 150); word(l2, 290, 150); return c; } // painted rug: deep blue, a gold/orange swirl medallion, red-gold border export function rugCanvas() { const W = 1024, H = 1024, c = cv(W, H), g = c.getContext('2d'), R = rng(31); g.fillStyle = '#17286a'; g.fillRect(0, 0, W, H); for (let k = 0; k < 3000; k++) { g.fillStyle = `rgba(${R() < 0.5 ? '8,14,50' : '50,80,170'},${R() * 0.22})`; g.fillRect(R() * W, R() * H, 2 + R() * 4, 2 + R() * 4); } g.lineWidth = 26; g.strokeStyle = '#7d2a1a'; g.strokeRect(34, 34, W - 68, H - 68); g.lineWidth = 6; g.strokeStyle = '#d9993a'; g.strokeRect(62, 62, W - 124, H - 124); const cx = W / 2, cy = H / 2; // thin ornamental swirls (gold, orange, a little red), low contrast like a printed rug for (let k = 0; k < 16; k++) { const a0 = k / 16 * Math.PI * 2, col = ['rgba(232,138,58,0.85)', 'rgba(242,193,78,0.8)', 'rgba(196,71,42,0.75)'][k % 3]; g.strokeStyle = col; g.lineWidth = 9 - (k % 3) * 2; g.lineCap = 'round'; g.beginPath(); for (let s2 = 0; s2 <= 34; s2++) { const a = a0 + s2 * 0.045, r = 120 + s2 * 9 + Math.sin(s2 * 0.6 + k) * 14; const x = cx + Math.cos(a) * r, y = cy + Math.sin(a) * r; s2 ? g.lineTo(x, y) : g.moveTo(x, y); } g.stroke(); const a = a0 + 1.6, r = 300 + (k % 2) * 60; g.beginPath(); g.arc(cx + Math.cos(a) * r, cy + Math.sin(a) * r, 22, 0, Math.PI * 1.5); g.stroke(); } for (let k = 0; k < 40; k++) { const a = R() * 7, r = 150 + R() * 300; g.fillStyle = ['#e98a3a', '#f2c14e', '#c4472a'][k % 3]; g.beginPath(); g.ellipse(cx + Math.cos(a) * r, cy + Math.sin(a) * r, 10, 5, a, 0, 7); g.fill(); } const md = g.createRadialGradient(cx, cy, 6, cx, cy, 96); md.addColorStop(0, '#ffe08a'); md.addColorStop(0.7, '#e9a83a'); md.addColorStop(1, '#b86a1e'); g.fillStyle = md; g.beginPath(); for (let k = 0; k <= 24; k++) { const a = k / 24 * Math.PI * 2, r = k % 2 ? 62 : 94; g.lineTo(cx + Math.cos(a) * r, cy + Math.sin(a) * r * 0.8); } g.closePath(); g.fill(); return c; } export function floorCanvas() { const W = 1024, H = 1024, c = cv(W, H), g = c.getContext('2d'), R = rng(41), n = 8, pw = W / n; for (let i = 0; i < n; i++) { let y = -R() * 400; while (y < H) { const len = 300 + R() * 500, v = 58 + R() * 18; g.fillStyle = `rgb(${v + 20},${v - 8},${v - 30})`; g.fillRect(i * pw, y, pw, len); for (let k = 0; k < 10; k++) { g.strokeStyle = `rgba(30,12,4,${0.1 + R() * 0.15})`; g.lineWidth = 1 + R() * 2; const x = i * pw + R() * pw; g.beginPath(); g.moveTo(x, y); g.lineTo(x + (R() - 0.5) * 8, y + len); g.stroke(); } g.fillStyle = 'rgba(20,8,2,0.7)'; g.fillRect(i * pw, y, pw, 4); y += len; } g.fillStyle = 'rgba(15,6,2,0.85)'; g.fillRect(i * pw, 0, 5, H); } return c; } // tufted leather for the armchairs export function leatherCanvas() { const W = 512, H = 512, c = cv(W, H), g = c.getContext('2d'), R = rng(51); g.fillStyle = '#6e2d1d'; g.fillRect(0, 0, W, H); for (let k = 0; k < 4000; k++) { g.fillStyle = `rgba(${R() < 0.5 ? '40,10,4' : '150,70,45'},${R() * 0.18})`; g.fillRect(R() * W, R() * H, 2 + R() * 6, 2 + R() * 6); } for (let y = 40; y < H; y += 85) for (let x = (y / 85 % 2) * 42 + 20; x < W; x += 85) { const gr = g.createRadialGradient(x, y, 2, x, y, 30); gr.addColorStop(0, 'rgba(25,6,2,0.65)'); gr.addColorStop(1, 'rgba(25,6,2,0)'); g.fillStyle = gr; g.fillRect(x - 30, y - 30, 60, 60); } return c; } // a paper sign card (the easel board, the wall sign): white paper with a small brand row and one or two lines // o = { brand, title, price, priceCol, sub, stamp, stampCol, bite: [[x, y, r], …] (cut-outs, 0..1 coords) } export function cardCanvas(o = {}) { const W = 1024, H = 640, c = cv(W, H), g = c.getContext('2d'), R = rng(61); g.fillStyle = '#f7f4ee'; g.fillRect(0, 0, W, H); for (let k = 0; k < 1500; k++) { g.fillStyle = `rgba(120,110,95,${R() * 0.06})`; g.fillRect(R() * W, R() * H, 2 + R() * 3, 2 + R() * 3); } if (o.brand) { g.fillStyle = o.brandCol || '#e8603c'; g.beginPath(); g.roundRect(60, 54, 64, 64, 14); g.fill(); g.fillStyle = '#fff'; g.font = `40px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(o.brandIcon || '✳', 92, 88); g.fillStyle = o.brandCol || '#e8603c'; g.font = `40px ${FONT.sans}`; g.textAlign = 'left'; g.fillText(o.brand, 144, 90); } if (o.title) { g.fillStyle = '#1d1d1f'; g.textAlign = 'center'; g.textBaseline = 'middle'; let s = o.titleSize || 86; g.font = `${s}px ${FONT.sans}`; while (g.measureText(o.title).width > W - 120 && s > 40) { s -= 4; g.font = `${s}px ${FONT.sans}`; } g.fillText(o.title, W / 2, o.price ? 255 : 330); } if (o.price) { let s = o.priceSize || 210; g.font = `${s}px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillStyle = 'rgba(0,0,0,0.12)'; g.fillText(o.price, W / 2 + 6, 445 + 8); g.fillStyle = o.priceCol || '#2f9e57'; g.fillText(o.price, W / 2, 445); } if (o.sub) { g.fillStyle = '#6b6b6b'; g.font = `34px ${FONT.sans}`; g.textAlign = 'center'; g.fillText(o.sub, W / 2, 590); } if (o.stamp) { g.save(); g.translate(W * 0.7, H * 0.62); g.rotate(-0.16); g.globalAlpha = 0.92; g.strokeStyle = o.stampCol || '#d23a2a'; g.fillStyle = o.stampCol || '#d23a2a'; g.lineWidth = 14; g.font = `120px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; const tw = g.measureText(o.stamp).width; g.strokeRect(-tw / 2 - 30, -78, tw + 60, 156); g.fillText(o.stamp, 0, 6); g.restore(); } if (o.bite) { g.globalCompositeOperation = 'destination-out'; for (const [x, y, r] of o.bite) { g.beginPath(); for (let k = 0; k <= 18; k++) { const a = k / 18 * Math.PI * 2, rr = r * W * (k % 2 ? 0.8 : 1); g.lineTo(x * W + Math.cos(a) * rr, y * H + Math.sin(a) * rr); } g.fill(); } g.globalCompositeOperation = 'source-over'; } return c; } // a red / green sign on a stick: "I'M OUT" · "$30" · "FREE" export function signCanvas(text, bg = '#d93b2b', ink = '#fff4ec') { const W = 512, H = 300, c = cv(W, H), g = c.getContext('2d'), R = rng(text.length * 7 + 3); g.fillStyle = bg; g.fillRect(0, 0, W, H); for (let k = 0; k < 900; k++) { g.fillStyle = `rgba(0,0,0,${R() * 0.08})`; g.fillRect(R() * W, R() * H, 2 + R() * 4, 2 + R() * 4); } g.fillStyle = ink; let s = 150; g.font = `${s}px ${FONT.sans}`; while (g.measureText(text).width > W - 70) { s -= 6; g.font = `${s}px ${FONT.sans}`; } g.textAlign = 'center'; g.textBaseline = 'middle'; g.save(); g.translate(W / 2, H / 2 + 6); g.rotate(-0.04); g.fillText(text, 0, 0); g.restore(); return c; } // LED display of the cash register export function ledCanvas(text) { const W = 512, H = 160, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#04140a'; g.fillRect(0, 0, W, H); g.font = `112px "Consolas Bold"`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.shadowColor = '#3dff8a'; g.shadowBlur = 24; g.fillStyle = '#8dffb6'; g.fillText(text, W / 2, H / 2 + 6); return c; } // banknote (paper money, our own design: no real currency art) export function billCanvas(seed = 1) { const W = 512, H = 230, c = cv(W, H), g = c.getContext('2d'), R = rng(70 + seed); g.fillStyle = '#9fd28b'; g.fillRect(0, 0, W, H); g.strokeStyle = '#3e7a3b'; g.lineWidth = 10; g.strokeRect(14, 14, W - 28, H - 28); g.fillStyle = '#5d9a52'; g.beginPath(); g.ellipse(W / 2, H / 2, 70, 70, 0, 0, 7); g.fill(); g.fillStyle = '#e9f6df'; g.font = `110px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('$', W / 2, H / 2 + 6); g.fillStyle = '#3e7a3b'; g.font = `40px ${FONT.sans}`; g.fillText('100', 70, 52); g.fillText('100', W - 70, H - 46); for (let k = 0; k < 600; k++) { g.fillStyle = `rgba(30,70,30,${R() * 0.12})`; g.fillRect(R() * W, R() * H, 2, 2); } return c; } // green felt, brown cardboard wall, grey concrete: big flat backdrops for the 2D diorama scenes export function feltCanvas(base = '#1f5a45', seed = 81) { return paperColor(base, { seed, size: 1024, blot: 0.32, grain: 0.07, dark: '#123a2c' }); } export function brickCanvas() { const W = 1024, H = 512, c = cv(W, H), g = c.getContext('2d'), R = rng(91); g.fillStyle = '#5e2c19'; g.fillRect(0, 0, W, H); const bw = 128, bh = 56, m = 8; for (let j = 0; j * (bh + m) < H; j++) for (let i = -1; i * (bw + m) < W; i++) { const x = i * (bw + m) + (j % 2) * (bw / 2), y = j * (bh + m) + m / 2, v = R(); g.fillStyle = `rgb(${168 + v * 30},${78 + v * 18},${46 + v * 12})`; g.fillRect(x, y, bw, bh); g.fillStyle = 'rgba(255,220,180,0.1)'; g.fillRect(x, y, bw, 6); g.fillStyle = 'rgba(40,10,4,0.18)'; g.fillRect(x, y + bh - 6, bw, 6); } return c; } // sticky note with a word (marker-ish heavy sans) export function noteCanvas(text, bg) { const W = 400, H = 360, c = cv(W, H), g = c.getContext('2d'), R = rng(text.length * 13 + 5); g.fillStyle = bg; g.fillRect(0, 0, W, H); g.fillStyle = 'rgba(0,0,0,0.07)'; g.fillRect(0, 0, W, 44); for (let k = 0; k < 500; k++) { g.fillStyle = `rgba(0,0,0,${R() * 0.05})`; g.fillRect(R() * W, R() * H, 2 + R() * 3, 2 + R() * 3); } g.fillStyle = '#1b1b1d'; g.textAlign = 'center'; g.textBaseline = 'middle'; const lines = text.split('\n'); let s = 76; g.font = `${s}px ${FONT.sans}`; while (Math.max(...lines.map(l => g.measureText(l).width)) > W - 50 && s > 30) { s -= 3; g.font = `${s}px ${FONT.sans}`; } lines.forEach((l, i) => g.fillText(l, W / 2, H / 2 + 14 + (i - (lines.length - 1) / 2) * s * 1.08)); return c; } // a book spine of the library (paper-wrapped): the format's name + a .md tag export function spineCanvas(name, bg, ink = '#fff8ee', isNew = false) { const W = 160, H = 640, c = cv(W, H), g = c.getContext('2d'), R = rng(name.length * 17 + 1); g.fillStyle = bg; g.fillRect(0, 0, W, H); for (let k = 0; k < 500; k++) { g.fillStyle = `rgba(0,0,0,${R() * 0.07})`; g.fillRect(R() * W, R() * H, 2 + R() * 4, 2 + R() * 4); } g.fillStyle = 'rgba(255,255,255,0.18)'; g.fillRect(0, 40, W, 12); g.fillRect(0, H - 52, W, 12); g.save(); g.translate(W / 2 + 10, H / 2); g.rotate(-Math.PI / 2); g.fillStyle = ink; g.textAlign = 'center'; g.textBaseline = 'middle'; let s = 70; g.font = `${s}px ${FONT.sans}`; while (g.measureText(name).width > H - 150 && s > 30) { s -= 3; g.font = `${s}px ${FONT.sans}`; } g.fillText(name, 0, 0); g.restore(); if (isNew) { g.fillStyle = '#ffd54a'; g.beginPath(); g.arc(W / 2, 92, 46, 0, 7); g.fill(); g.fillStyle = '#1b1b1d'; g.font = `30px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('NEW', W / 2, 94); } return c; } // a text file on paper: title row + lines of "text" (paper.md, SKILL.md) export function docCanvas(title, { stamp = null, stampCol = '#2f9e57', lines = 9 } = {}) { const W = 512, H = 680, c = cv(W, H), g = c.getContext('2d'), R = rng(title.length * 11 + 7); g.fillStyle = '#fbf8f2'; g.fillRect(0, 0, W, H); for (let k = 0; k < 900; k++) { g.fillStyle = `rgba(120,110,95,${R() * 0.07})`; g.fillRect(R() * W, R() * H, 2 + R() * 3, 2 + R() * 3); } g.fillStyle = '#1d1d1f'; let s = 72; g.font = `${s}px ${FONT.sans}`; while (g.measureText(title).width > W - 80) { s -= 3; g.font = `${s}px ${FONT.sans}`; } g.textAlign = 'left'; g.textBaseline = 'middle'; g.fillText(title, 40, 90); g.fillStyle = '#e8603c'; g.fillRect(40, 140, 120, 10); for (let k = 0; k < lines; k++) { const w = 200 + R() * 220; g.fillStyle = k % 4 === 0 ? '#3b3b40' : '#b9b4ab'; g.fillRect(40, 190 + k * 48, k % 4 === 0 ? w * 0.6 : w, k % 4 === 0 ? 20 : 14); } if (stamp) { g.save(); g.translate(W * 0.6, H * 0.66); g.rotate(-0.2); g.strokeStyle = stampCol; g.fillStyle = stampCol; g.lineWidth = 12; g.globalAlpha = 0.95; g.font = `112px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; const tw = g.measureText(stamp).width; g.strokeRect(-tw / 2 - 26, -70, tw + 52, 140); g.fillText(stamp, 0, 6); g.restore(); } return c; } // the format on the phone: a tiny papercraft reel (banner, orange critter, word tags) — drawn, not a real reel export function formatScreen() { const W = 360, H = 640, c = cv(W, H), g = c.getContext('2d'); const sky = g.createLinearGradient(0, 0, 0, H); sky.addColorStop(0, '#1b2350'); sky.addColorStop(1, '#3a1f17'); g.fillStyle = sky; g.fillRect(0, 0, W, H); for (let i = 0; i < 3; i++) { const gr = g.createLinearGradient(0, 160, 0, 380); gr.addColorStop(0, '#ffcf7a'); gr.addColorStop(1, '#e0702f'); g.fillStyle = gr; g.fillRect(30 + i * 108, 150, 84, 220); g.fillStyle = '#3a1d0e'; for (let k = 1; k < 4; k++) g.fillRect(30 + i * 108, 150 + k * 55, 84, 6); g.fillRect(30 + i * 108 + 40, 150, 6, 220); } g.fillStyle = '#f3eee4'; g.fillRect(28, 50, W - 56, 52); g.fillStyle = '#d9c99c'; g.fillRect(22, 44, 40, 18); g.fillRect(W - 62, 44, 40, 18); g.fillStyle = '#141414'; g.font = `24px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('A PAPER STORY', W / 2, 78); g.fillStyle = '#e8784a'; g.fillRect(120, 380, 120, 96); g.fillStyle = '#141414'; g.fillRect(146, 408, 16, 24); g.fillRect(198, 408, 16, 24); g.fillStyle = '#e8784a'; for (let k = 0; k < 4; k++) g.fillRect(128 + k * 28, 476, 14, 36); const tag = (t, x) => { g.font = `30px ${FONT.coop}`; const w = g.measureText(t).width + 22; g.fillStyle = '#cf6a43'; g.fillRect(x - w / 2, 548, w, 44); g.fillStyle = '#fdf3e4'; g.fillText(t, x, 571); }; tag('your', 120); tag('story', 236); return c; } // flame tongue (additive sprite): white-yellow core, orange edge export function flameCanvas() { const W = 256, H = 512, c = cv(W, H), g = c.getContext('2d'); const shape = (sc, col) => { g.beginPath(); g.moveTo(W / 2, H * (1 - 0.95 * sc)); g.bezierCurveTo(W * (0.5 + 0.42 * sc), H * 0.45, W * (0.5 + 0.38 * sc), H * 0.95, W / 2, H * 0.97); g.bezierCurveTo(W * (0.5 - 0.38 * sc), H * 0.95, W * (0.5 - 0.42 * sc), H * 0.45, W / 2, H * (1 - 0.95 * sc)); g.fillStyle = col; g.fill(); }; shape(1, 'rgba(255,140,40,0.9)'); shape(0.72, 'rgba(255,200,90,0.95)'); shape(0.45, 'rgba(255,245,200,1)'); return c; } // soft round dot (dust bokeh, sparkles) and a 4-point star export function dotCanvas() { const c = cv(128, 128), g = c.getContext('2d'), gr = g.createRadialGradient(64, 64, 0, 64, 64, 64); gr.addColorStop(0, 'rgba(255,255,255,1)'); gr.addColorStop(0.35, 'rgba(255,255,255,0.7)'); gr.addColorStop(1, 'rgba(255,255,255,0)'); g.fillStyle = gr; g.fillRect(0, 0, 128, 128); return c; } export function starCanvas() { const c = cv(128, 128), g = c.getContext('2d'); g.fillStyle = '#fff'; g.beginPath(); for (let k = 0; k < 8; k++) { const a = k / 8 * Math.PI * 2 - Math.PI / 2, r = k % 2 ? 12 : 62; g.lineTo(64 + Math.cos(a) * r, 64 + Math.sin(a) * r); } g.closePath(); g.fill(); return c; } // the city through the office window (flat paper cut-out buildings) export function skylineCanvas() { const W = 1024, H = 640, c = cv(W, H), g = c.getContext('2d'), R = rng(101); const sky = g.createLinearGradient(0, 0, 0, H); sky.addColorStop(0, '#9cc8f2'); sky.addColorStop(1, '#cfe4f7'); g.fillStyle = sky; g.fillRect(0, 0, W, H); for (let k = 0; k < 900; k++) { g.fillStyle = `rgba(255,255,255,${R() * 0.12})`; g.fillRect(R() * W, R() * H, 3, 3); } for (const layer of [0, 1]) { let x = -10; while (x < W) { const bw = 50 + R() * 70, bh = (layer ? 240 : 300) + R() * (layer ? 160 : 260); g.fillStyle = layer ? '#7d9fd6' : '#5b7ec4'; g.fillRect(x, H - bh, bw, bh); g.fillStyle = layer ? '#a9c3ea' : '#d7e6fa'; for (let yy = H - bh + 14; yy < H - 10; yy += 26) for (let xx = x + 8; xx < x + bw - 12; xx += 18) g.fillRect(xx, yy, 9, 14); x += bw + 8 + R() * 20; } } return c; } // a drawn face for the speech bubbles (our own archetypes, paper-cut style; never a real person) // kind: 'hoodie' (messy brown hair, sunglasses on head) · 'suit' (bald, round glasses) · 'pearls' (blonde bob) · // 'blonde' (long hair) · 'cap' (black cap, beard) · 'me' (the narrator critter with the blue cap) export function avatarCanvas(kind) { const S = 256, c = cv(S, S), g = c.getContext('2d'), R = rng(kind.length * 31 + 2); const bgc = { hoodie: '#f0d9b5', suit: '#cfe0f2', pearls: '#f6d2d8', blonde: '#e3d9f5', cap: '#d6eed5', me: '#ffe1c2' }[kind] || '#eee'; g.fillStyle = bgc; g.fillRect(0, 0, S, S); if (kind === 'me') { // the orange critter with the blue cap g.fillStyle = '#e8784a'; g.fillRect(48, 92, 160, 110); g.fillStyle = '#141414'; g.fillRect(88, 122, 20, 32); g.fillRect(148, 122, 20, 32); g.fillStyle = '#3b6fd8'; g.fillRect(52, 64, 152, 34); g.fillRect(150, 88, 74, 12); for (let k = 0; k < 4; k++) { g.fillStyle = '#e8784a'; g.fillRect(64 + k * 36, 202, 18, 40); } return c; } const skin = { hoodie: '#e9b48c', suit: '#efc39f', pearls: '#f1c6a2', blonde: '#f0c19c', cap: '#a8714c' }[kind]; // shoulders / clothes const cloth = { hoodie: '#1f2b4f', suit: '#2a2f3d', pearls: '#d23a2a', blonde: '#2f6e8f', cap: '#1d1d1f' }[kind]; g.fillStyle = cloth; g.beginPath(); g.ellipse(S / 2, S + 30, 120, 110, 0, 0, 7); g.fill(); if (kind === 'suit') { g.fillStyle = '#f4f1ea'; g.beginPath(); g.moveTo(S / 2 - 34, S - 92); g.lineTo(S / 2, S - 20); g.lineTo(S / 2 + 34, S - 92); g.fill(); g.fillStyle = '#c0392b'; g.fillRect(S / 2 - 6, S - 80, 12, 50); } if (kind === 'hoodie') { g.strokeStyle = '#f4f1ea'; g.lineWidth = 6; g.beginPath(); g.moveTo(S / 2 - 22, S - 84); g.lineTo(S / 2 - 26, S - 30); g.moveTo(S / 2 + 22, S - 84); g.lineTo(S / 2 + 26, S - 30); g.stroke(); } // neck + head g.fillStyle = skin; g.fillRect(S / 2 - 26, 150, 52, 50); g.beginPath(); g.ellipse(S / 2, 118, 62, 74, 0, 0, 7); g.fill(); if (kind === 'pearls') { g.fillStyle = '#fbf7ee'; for (let k = 0; k < 11; k++) { const a = Math.PI * (0.15 + k * 0.07); g.beginPath(); g.arc(S / 2 + Math.cos(a) * 60, 176 + Math.sin(a) * 34, 8, 0, 7); g.fill(); } } // hair if (kind === 'hoodie') { g.fillStyle = '#5a3a22'; g.beginPath(); g.ellipse(S / 2, 70, 70, 40, 0, Math.PI, 0); g.fill(); for (let k = 0; k < 7; k++) { g.beginPath(); g.ellipse(S / 2 - 54 + k * 18, 64 + R() * 8, 16, 22, R() - 0.5, 0, 7); g.fill(); } g.fillStyle = '#141414'; g.fillRect(S / 2 - 54, 50, 46, 20); g.fillRect(S / 2 + 8, 50, 46, 20); g.fillRect(S / 2 - 8, 56, 16, 6); } if (kind === 'pearls') { g.fillStyle = '#f2d27a'; g.beginPath(); g.ellipse(S / 2, 84, 80, 62, 0, Math.PI * 0.95, Math.PI * 2.05); g.fill(); g.fillRect(S / 2 - 80, 80, 26, 80); g.fillRect(S / 2 + 54, 80, 26, 80); for (let k = 0; k < 6; k++) { g.beginPath(); g.arc(S / 2 - 50 + k * 20, 66, 18, 0, 7); g.fill(); } } if (kind === 'blonde') { g.fillStyle = '#efd38a'; g.beginPath(); g.ellipse(S / 2, 90, 82, 70, 0, Math.PI, 0); g.fill(); g.fillRect(S / 2 - 82, 88, 34, 130); g.fillRect(S / 2 + 48, 88, 34, 130); } if (kind === 'cap') { g.fillStyle = '#1d1d1f'; g.beginPath(); g.ellipse(S / 2, 70, 68, 40, 0, Math.PI, 0); g.fill(); g.fillRect(S / 2 - 70, 64, 140, 16); g.fillRect(S / 2 - 6, 66, 110, 12); g.fillStyle = '#2a1a10'; g.beginPath(); g.ellipse(S / 2, 166, 46, 26, 0, 0, Math.PI); g.fill(); } if (kind === 'suit') { g.fillStyle = '#d9a982'; g.beginPath(); g.ellipse(S / 2, 70, 56, 24, 0, Math.PI, 0); g.fill(); } // face: eyes, brows, mouth (smug) g.fillStyle = '#1b1b1b'; const ey = kind === 'hoodie' ? 116 : 112; g.beginPath(); g.ellipse(S / 2 - 22, ey, 6, 8, 0, 0, 7); g.fill(); g.beginPath(); g.ellipse(S / 2 + 22, ey, 6, 8, 0, 0, 7); g.fill(); g.lineWidth = 5; g.strokeStyle = '#3a2416'; g.beginPath(); g.moveTo(S / 2 - 34, ey - 18); g.lineTo(S / 2 - 12, ey - 14); g.moveTo(S / 2 + 12, ey - 14); g.lineTo(S / 2 + 34, ey - 20); g.stroke(); if (kind === 'suit') { g.lineWidth = 4; g.strokeStyle = '#1b1b1b'; g.beginPath(); g.arc(S / 2 - 22, ey, 17, 0, 7); g.moveTo(S / 2 + 39, ey); g.arc(S / 2 + 22, ey, 17, 0, 7); g.moveTo(S / 2 - 5, ey); g.lineTo(S / 2 + 5, ey); g.stroke(); } g.strokeStyle = '#7a2e22'; g.lineWidth = 5; g.beginPath(); g.moveTo(S / 2 - 20, 150); g.quadraticCurveTo(S / 2 + 4, 162, S / 2 + 24, 144); g.stroke(); g.fillStyle = 'rgba(220,90,70,0.25)'; g.beginPath(); g.arc(S / 2 - 38, 140, 12, 0, 7); g.arc(S / 2 + 38, 140, 12, 0, 7); g.fill(); return c; } ``` ### `engine/world.js` ```js // The papercraft world: every set, character and prop of the "Paper" format, built once. Engine file. // build(cfg) -> { scene, R }. A video's world(t) shows one set at a time (R.show(name)), poses the characters and moves props. // Sets (far apart, one visible at a time): studio (0,0,0) · corridor (CORRIDOR_X) · felt (FELT_X) · brick (BRICK_X) · office (OFFICE_X). // cfg (a video's WORLD export) sets what things SAY: show logo, card faces, sign words, sticky notes, books, docs. import * as THREE from 'three'; import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js'; import * as P from './papertex.js'; import { cv, FONT } from './tex.js'; import { rng } from './lib.js'; export const CORRIDOR_X = -70, FELT_X = 70, BRICK_X = 120, OFFICE_X = 133; export const WORLD_DEFAULTS = { logo: ['PAPER', 'TANK'], // the show's logo panel (two words) door: 'STUDIO', // the lit sign over the corridor's doorway books: [['hooks.md', '#2b2b30'], ['scripts.md', '#3b6fd8'], ['voices.md', '#c4683f'], ['edits.md', '#d9b25f'], ['captions.md', '#5a3d8f'], ['paper.md', '#e8784a', true]], // [spine, colour, new?] notes: [['NO\nPAYWALLS', '#f4d34a'], ['NO\nSUBSCRIPTIONS', '#f3a3c2'], ['NO\nSTRINGS', '#8ec5f0']], signs: ['$30', 'FREE'], // the sharks' signs: front (red) and back (green); flip with card.rotation.y = π price: '$30', // the stamp press label, the money's tag, the stamp on the conveyor cards card: { title: 'SKILL.md', word: 'FREE' }, // the small card (grabbed, dropped in the box) and the conveyor cards giftTag: 'PREMIUM', shelfSign: 'LIBRARY', appBar: ['My App', 'Library'], doc: 'SKILL.md', held: 'paper.md', exit: 'EXIT', }; export function build(cfg = {}) { cfg = { ...WORLD_DEFAULTS, ...cfg }; const scene = new THREE.Scene(); const R = { sets: {}, dyn: [] }; const TX = new Map(); const tex = (key, make, { srgb = true, rep = null, aniso = 8 } = {}) => { if (TX.has(key)) return TX.get(key); const x = new THREE.CanvasTexture(make()); if (srgb) x.colorSpace = THREE.SRGBColorSpace; x.anisotropy = aniso; if (rep) { x.wrapS = x.wrapT = THREE.RepeatWrapping; x.repeat.set(...rep); } TX.set(key, x); return x; }; const FIB = tex('fib', () => P.fibreMap(3, 512, 0.78), { rep: [1, 1] }), FIB2 = tex('fib2', () => P.fibreMap(7, 512, 0.88)); const mat = (color, o = {}) => new THREE.MeshStandardMaterial({ color, roughness: o.rough ?? 0.9, metalness: o.metal ?? 0, map: o.map === null ? null : (o.map || FIB), emissive: o.emissive ?? 0x000000, emissiveIntensity: o.ei ?? 1, emissiveMap: o.emap || null, transparent: !!o.transparent, opacity: o.opacity ?? 1, side: o.side || THREE.FrontSide, alphaTest: o.alphaTest || 0, depthWrite: o.depthWrite ?? true }); const box = (w, h, d, m, r = 0) => { const g = r ? new RoundedBoxGeometry(w, h, d, 2, r) : new THREE.BoxGeometry(w, h, d); const x = new THREE.Mesh(g, m); x.castShadow = true; x.receiveShadow = true; return x; }; const plane = (w, h, m) => { const x = new THREE.Mesh(new THREE.PlaneGeometry(w, h), m); x.castShadow = true; x.receiveShadow = true; return x; }; const ORANGE = tex('orange', () => P.paperColor('#e8784a', { seed: 1 })), ORANGE2 = tex('orange2', () => P.paperColor('#e9804f', { seed: 4, blot: 0.3 })); const orangeM = mat(0xffffff, { map: ORANGE }), orangeM2 = mat(0xffffff, { map: ORANGE2 }), blackM = mat(0x141414, { map: null, rough: 0.6 }), whiteM = mat(0xf6f2ea, { map: FIB2 }); R.mat = mat; R.box = box; R.plane = plane; R.tex = tex; R.orangeM = orangeM; // a canvas-backed texture that a video redraws when its content changes (cards that flip, the register display, …) R.dynTex = (w, h, draw0) => { const c = cv(w, h), t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; t.anisotropy = 8; let key = null; const o = { c, t, set(k, draw) { if (k === key) return; key = k; const g = c.getContext('2d'); g.clearRect(0, 0, w, h); draw(g, w, h); t.needsUpdate = true; } }; if (draw0) o.set('init', draw0); return o; }; const fromCanvas = (key, canvas) => { const x = new THREE.CanvasTexture(canvas); x.colorSpace = THREE.SRGBColorSpace; x.anisotropy = 8; return x; }; R.fromCanvas = fromCanvas; const set = name => { const g = new THREE.Group(); g.name = name; scene.add(g); R.sets[name] = g; return g; }; R.show = (...names) => { for (const [n, g] of Object.entries(R.sets)) g.visible = names.includes(n); }; // ======================= characters ======================= // a seated shark / any orange block character. opts: { outfit: 'hoodie'|'suit'|'pearls'|'blonde'|'cap'|null, teeth, w, h, d } R.makeBlock = (opts = {}) => { const w = opts.w ?? 1.3, h = opts.h ?? 1.05, d = opts.d ?? 0.95, root = new THREE.Group(), pivot = new THREE.Group(); root.add(pivot); const body = box(w, h, d, opts.alt ? orangeM2 : orangeM, 0.03); body.position.y = h / 2; pivot.add(body); const face = new THREE.Group(); face.position.set(0, h * 0.62, d / 2 + 0.006); pivot.add(face); const eyes = [-1, 1].map(s => { const e = box(0.13, 0.2, 0.02, blackM); e.position.set(s * w * 0.2, 0, 0); face.add(e); return e; }); let mouth = null; if (opts.teeth) { mouth = plane(w * 0.55, h * 0.16, mat(0xffffff, { map: tex('teeth', teethCanvas), transparent: true, alphaTest: 0.3 })); mouth.position.set(0, -h * 0.3, 0.004); face.add(mouth); } const outfit = new THREE.Group(); pivot.add(outfit); const o = opts.outfit; if (o === 'hoodie' || o === 'cap') { const sh = box(w + 0.03, h * 0.4, d + 0.03, mat(o === 'cap' ? 0x1d1d22 : 0x23305a)); sh.position.y = h * 0.2; outfit.add(sh); for (const s of [-1, 1]) { const c = box(0.035, 0.22, 0.02, whiteM); c.position.set(s * 0.12, h * 0.26, d / 2 + 0.03); c.rotation.z = s * 0.08; outfit.add(c); } } if (o === 'suit') { const sh = box(w + 0.03, h * 0.42, d + 0.03, mat(0xffffff, { map: tex('pinstripe', pinstripeCanvas) })); sh.position.y = h * 0.21; outfit.add(sh); const v = new THREE.Mesh(new THREE.ShapeGeometry(tri(0.2, 0.3)), whiteM); v.position.set(0, h * 0.42, d / 2 + 0.017); v.rotation.z = Math.PI; outfit.add(v); const sq = box(0.1, 0.06, 0.02, mat(0xc8322a)); sq.position.set(-w * 0.3, h * 0.3, d / 2 + 0.02); outfit.add(sq); const btn = box(0.04, 0.04, 0.02, mat(0xd8b14a)); btn.position.set(0, h * 0.16, d / 2 + 0.02); outfit.add(btn); } if (o === 'pearls') { const sh = box(w + 0.03, h * 0.36, d + 0.03, mat(0xd2322a)); sh.position.y = h * 0.18; outfit.add(sh); for (let k = 0; k < 11; k++) { const a = Math.PI * (0.08 + k * 0.084); const p = new THREE.Mesh(new THREE.SphereGeometry(0.035, 10, 8), mat(0xfbf7ee, { map: null, rough: 0.3 })); p.position.set(Math.cos(a) * w * 0.3, h * 0.42 - Math.sin(a) * 0.12, d / 2 + 0.03); outfit.add(p); } } if (o === 'blonde') { const sh = box(w + 0.03, h * 0.36, d + 0.03, mat(0x2f6e8f)); sh.position.y = h * 0.18; outfit.add(sh); } // hair / hats on top const top = new THREE.Group(); top.position.y = h; pivot.add(top); const hair = opts.hair; if (hair === 'messy') { const hm = mat(0x5a3a22, { map: tex('brownHair', () => P.paperColor('#6a4528', { seed: 12, blot: 0.4 })) }); const R2 = rng(5); for (let k = 0; k < 9; k++) { const s = new THREE.Mesh(new THREE.SphereGeometry(0.22 + R2() * 0.08, 8, 6), hm); s.scale.y = 0.45; s.position.set(-w * 0.38 + (k % 5) * w * 0.19 + (R2() - 0.5) * 0.05, 0.02 + R2() * 0.04, -d * 0.25 + Math.floor(k / 5) * d * 0.45); s.castShadow = true; top.add(s); } } if (hair === 'bob' || hair === 'long') { const hm = mat(0xf0cc6a, { map: tex('blondeHair', () => P.paperColor('#efcf74', { seed: 13, blot: 0.35, dark: '#c99a3a' })) }); const R2 = rng(9); for (let k = 0; k < 12; k++) { const s = new THREE.Mesh(new THREE.SphereGeometry(0.2 + R2() * 0.06, 8, 6), hm); s.scale.y = 0.6; s.position.set(-w * 0.45 + (k % 6) * w * 0.18, 0.04, -d * 0.3 + Math.floor(k / 6) * d * 0.5); s.castShadow = true; top.add(s); } for (const sx of [-1, 1]) { const side = box(0.16, hair === 'long' ? h * 0.85 : h * 0.45, d * 0.9, hm); side.position.set(sx * (w / 2 + 0.06), hair === 'long' ? -h * 0.42 : -h * 0.2, -0.02); top.add(side); } } if (hair === 'bald') { const sk = box(w * 0.7, 0.04, d * 0.6, mat(0xd99a72)); sk.position.y = 0.02; top.add(sk); const gm = blackM; for (const s of [-1, 1]) { const fr = new THREE.Mesh(new THREE.TorusGeometry(0.1, 0.009, 6, 20), gm); fr.position.set(s * w * 0.2, h * 0.62 - h, d / 2 + 0.04); top.add(fr); } const br = box(0.06, 0.012, 0.012, gm); br.position.set(0, h * 0.62 - h, d / 2 + 0.04); top.add(br); } if (hair === 'cap') { const cm = mat(0x1a1a1f); const cap = box(w * 0.92, 0.2, d * 0.9, cm); cap.position.y = 0.1; top.add(cap); const brim = box(w * 0.6, 0.04, 0.4, cm); brim.position.set(0, 0.03, d / 2 + 0.15); top.add(brim); } if (hair === 'bluecap') { const cm = mat(0x3b6fd8); const cap = box(w * 0.95, 0.16, d * 0.92, cm); cap.position.y = 0.08; top.add(cap); const brim = box(w * 0.55, 0.035, 0.3, cm); brim.position.set(w * 0.12, 0.02, d / 2 + 0.12); top.add(brim); } // arms: pivots at the shoulders (rotation.z swings them out, rotation.x forward) const arms = [-1, 1].map(s => { const p = new THREE.Group(); p.position.set(s * (w / 2 + 0.07), h * 0.55, 0); const a = box(0.16, 0.42, 0.16, opts.alt ? orangeM2 : orangeM); a.position.y = -0.2; p.add(a); pivot.add(p); return p; }); const legs = [-1.5, -0.5, 0.5, 1.5].map(i => { const p = new THREE.Group(); p.position.set(i * w * 0.2, 0.02, 0.05); const l = box(0.16, 0.45, 0.16, opts.alt ? orangeM2 : orangeM); l.position.y = -0.22; p.add(l); pivot.add(p); return p; }); return { root, pivot, body, face, eyes, mouth, arms, legs, top, outfit, w, h, d }; }; // the narrator: the little Clawd-style critter with the blue cap R.makeCritter = () => { const root = new THREE.Group(), pivot = new THREE.Group(); root.add(pivot); const body = box(0.86, 0.52, 0.46, orangeM, 0.02); body.position.y = 0.62; pivot.add(body); const face = new THREE.Group(); face.position.set(0, 0.68, 0.236); pivot.add(face); const eyes = [-1, 1].map(s => { const e = box(0.075, 0.14, 0.02, blackM); e.position.set(s * 0.17, 0, 0); face.add(e); return e; }); const hands = [-1, 1].map(s => { const p = new THREE.Group(); p.position.set(s * 0.5, 0.62, 0); const hnd = box(0.16, 0.16, 0.16, orangeM); hnd.rotation.z = Math.PI / 4; p.add(hnd); pivot.add(p); return p; }); const legs = [-0.3, -0.1, 0.1, 0.3].map(x => { const p = new THREE.Group(); p.position.set(x, 0.37, 0); const l = box(0.1, 0.37, 0.12, orangeM); l.position.y = -0.18; p.add(l); pivot.add(p); return p; }); const cap = new THREE.Group(); cap.position.y = 0.88; pivot.add(cap); const cm = mat(0x3b6fd8); const c1 = box(0.8, 0.12, 0.44, cm); c1.position.y = 0.06; cap.add(c1); const c2 = box(0.42, 0.03, 0.22, cm); c2.position.set(0.12, 0.015, 0.3); cap.add(c2); return { root, pivot, body, face, eyes, hands, legs, cap }; }; // the giant shark of the hook: big orange block, dark mouth with zigzag teeth, a hinged jaw, fin, tail, legs, a "$" lollipop sign R.makeBigShark = () => { const root = new THREE.Group(), pivot = new THREE.Group(); root.add(pivot); const W = 2.5, H = 1.55, D = 1.9; // head = the upper block (y 0..H); under it a dark mouth slot (y −0.55..0) with the upper teeth; the hinged jaw below const head = new THREE.Group(); head.position.y = 2.3; pivot.add(head); const upper = box(W, H, D, orangeM, 0.04); upper.position.y = H / 2; head.add(upper); const mouthIn = box(W * 0.92, 0.56, D * 0.88, mat(0x2a0d0a, { map: null })); mouthIn.position.y = -0.27; head.add(mouthIn); const teethU = plane(W * 0.86, 0.32, mat(0xffffff, { map: tex('teethU', () => zigzagCanvas(false)), transparent: true, alphaTest: 0.3, side: THREE.DoubleSide })); teethU.position.set(0, -0.16, D / 2 - 0.04); head.add(teethU); const jaw = new THREE.Group(); jaw.position.set(0, -0.55, -D / 2 + 0.1); head.add(jaw); const lower = box(W, 0.5, D, orangeM, 0.04); lower.position.set(0, -0.25, D / 2 - 0.1); jaw.add(lower); const teethL = plane(W * 0.86, 0.3, mat(0xffffff, { map: tex('teethL', () => zigzagCanvas(true)), transparent: true, alphaTest: 0.3, side: THREE.DoubleSide })); teethL.position.set(0, 0.15, D - 0.14); jaw.add(teethL); const eyes = [-1, 1].map(s => { const e = box(0.32, 0.42, 0.04, blackM); e.position.set(s * 0.55, H * 0.62, D / 2 + 0.01); e.rotation.z = s * -0.18; head.add(e); return e; }); const finShape = new THREE.Shape(); finShape.moveTo(-0.5, 0); finShape.lineTo(0.55, 0); finShape.lineTo(-0.35, 1.0); finShape.closePath(); const finM = mat(0xc9603a, { map: ORANGE }); const fin = new THREE.Mesh(new THREE.ExtrudeGeometry(finShape, { depth: 0.12, bevelEnabled: false }), finM); fin.position.set(-0.1, H - 0.02, -0.06); fin.castShadow = true; head.add(fin); const tail = new THREE.Mesh(new THREE.ExtrudeGeometry(finShape, { depth: 0.12, bevelEnabled: false }), finM); tail.position.set(W / 2 + 0.2, 0.3, -0.06); tail.rotation.z = -Math.PI / 2 - 0.3; tail.castShadow = true; head.add(tail); const legs = [-0.9, -0.3, 0.3, 0.9].map(x => { const p = new THREE.Group(); p.position.set(x, 1.25, 0.2); const l = box(0.3, 1.28, 0.3, orangeM); l.position.y = -0.62; p.add(l); pivot.add(p); return p; }); const sign = new THREE.Group(); sign.position.set(0.5, H + 0.2, 0.3); head.add(sign); const stick = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.7, 8), mat(0x9b9b9b)); stick.position.y = 0.35; sign.add(stick); const discM = mat(0xb8b1a6, { map: tex('dollarDisc', () => discCanvas('$')) }); const disc = new THREE.Mesh(new THREE.CylinderGeometry(0.4, 0.4, 0.05, 32), [mat(0xb8b1a6), discM, discM]); disc.rotation.x = Math.PI / 2; disc.position.y = 0.95; disc.castShadow = true; sign.add(disc); return { root, pivot, head, jaw, eyes, legs, sign, fin, tail }; }; // ======================= STUDIO ======================= const S = set('studio'); { // floor, rug, walls, windows, pillars, logo, ceiling const floor = plane(60, 40, mat(0x8a6a52, { map: tex('floor', P.floorCanvas, { rep: [6, 4] }) })); floor.rotation.x = -Math.PI / 2; floor.position.z = -2; S.add(floor); const rug = plane(9, 7, mat(0xffffff, { map: tex('rug', P.rugCanvas) })); rug.rotation.x = -Math.PI / 2; rug.position.set(0, 0.006, 1.6); S.add(rug); R.rug = rug; const wallM = mat(0x1d2550, { map: tex('navyPaper', () => P.paperColor('#222b58', { seed: 21, blot: 0.35, dark: '#121735' })) }); const back = plane(40, 12, wallM); back.position.set(0, 6, -9); S.add(back); for (const sx of [-1, 1]) { const side = plane(30, 12, wallM); side.position.set(sx * 13, 6, 3); side.rotation.y = -sx * Math.PI / 2; S.add(side); } const ceil = plane(40, 30, mat(0x0c0f22, { map: null })); ceil.rotation.x = Math.PI / 2; ceil.position.set(0, 9.5, 2); S.add(ceil); R.winMats = []; const winNight = tex('winNight', () => P.windowCanvas(false)), winLit = tex('winLit', () => P.windowCanvas(true)); R.windows = [-7.6, -3.8, 0, 3.8, 7.6].map((x, i) => { const g = new THREE.Group(); g.position.set(x, 3.8, -8.85); S.add(g); const wm = new THREE.ShaderMaterial({ uniforms: { a: { value: winNight }, b: { value: winLit }, k: { value: 0 }, gain: { value: 1 } }, vertexShader: 'varying vec2 vUv; void main(){ vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.); }', fragmentShader: `varying vec2 vUv; uniform sampler2D a, b; uniform float k, gain; vec3 lin(vec3 c){ return pow(c, vec3(2.2)); } void main(){ vec3 c = mix(lin(texture2D(a, vUv).rgb) * 0.85, lin(texture2D(b, vUv).rgb) * 1.35, k); gl_FragColor = vec4(c * gain, 1.); }` }); R.winMats.push(wm); const p = new THREE.Mesh(new THREE.PlaneGeometry(2.9, 4.1), wm); g.add(p); const fr = mat(0x2a1c18, { map: FIB }); for (const [w, h, px, py] of [[3.15, 0.14, 0, 2.1], [3.15, 0.14, 0, -2.1], [0.14, 4.3, -1.52, 0], [0.14, 4.3, 1.52, 0]]) { const b = box(w, h, 0.2, fr); b.position.set(px, py, 0.05); g.add(b); } return g; }); const pil = mat(0x2a1d1a, { map: tex('pillar', () => P.paperColor('#3a2620', { seed: 23, blot: 0.4 })) }); for (const x of [-9.6, -5.7, -1.9, 1.9, 5.7, 9.6]) { const b = box(0.9, 9, 0.7, pil); b.position.set(x, 4.5, -8.6); S.add(b); } const beam = box(24, 0.9, 0.8, pil); beam.position.set(0, 6.3, -8.5); S.add(beam); const logo = box(3.0, 2.0, 0.2, [pil, pil, pil, pil, mat(0xffffff, { map: tex('logo', () => P.logoCanvas(...cfg.logo)), emissive: 0x6f9ee8, ei: 0.25, emap: tex('logo', () => P.logoCanvas(...cfg.logo)) }), pil]); logo.position.set(0, 7.4, -8.3); S.add(logo); R.logo = logo; const glow = plane(3.4, 2.4, new THREE.MeshBasicMaterial({ color: 0x4f7fe0, transparent: true, opacity: 0.25, depthWrite: false })); glow.position.set(0, 7.4, -8.42); S.add(glow); } // armchairs (tufted leather, brass studs) with side tables and cups; seated sharks const leather = tex('leather', P.leatherCanvas); const chairM = mat(0xffffff, { map: leather }), chairM2 = mat(0xc9b0a0, { map: leather }), studM = mat(0xd8b56a, { map: null, metal: 0.6, rough: 0.35 }); R.makeChair = () => { const g = new THREE.Group(); const seat = box(1.9, 0.5, 1.4, chairM, 0.06); seat.position.set(0, 0.45, 0.05); g.add(seat); const cush = box(1.5, 0.16, 1.15, chairM2, 0.06); cush.position.set(0, 0.76, 0.12); g.add(cush); const back = box(1.9, 1.5, 0.36, chairM, 0.08); back.position.set(0, 1.15, -0.6); g.add(back); for (const s of [-1, 1]) { const arm = box(0.3, 0.75, 1.5, chairM, 0.08); arm.position.set(s * 0.85, 0.85, 0.02); g.add(arm); for (let k = 0; k < 6; k++) { const st = new THREE.Mesh(new THREE.SphereGeometry(0.035, 8, 6), studM); st.position.set(s * 0.85, 0.5 + k * 0.11, 0.78); g.add(st); } } return g; }; const tableM = mat(0x2a2a30, { metal: 0.3, rough: 0.5 }), cupM = mat(0xeef3f7, { map: null, rough: 0.3 }); R.sharks = []; R.chairs = []; R.signs = []; const SHARKS = [{ outfit: 'cap', hair: 'cap' }, { outfit: 'hoodie', hair: 'messy' }, { outfit: 'suit', hair: 'bald' }, { outfit: 'pearls', hair: 'bob', teeth: true }, { outfit: 'blonde', hair: 'long' }]; const signFlip = tex('signOut', () => P.signCanvas(cfg.signs[0], '#d93b2b')); SHARKS.forEach((o, i) => { const x = (i - 2) * 3.1, z = -5.2 + Math.abs(i - 2) * 0.55, ry = -(i - 2) * 0.16; const g = new THREE.Group(); g.position.set(x, 0, z); g.rotation.y = ry; S.add(g); const ch = R.makeChair(); g.add(ch); R.chairs.push(g); const sh = R.makeBlock({ ...o, alt: i % 2 === 1 }); sh.root.position.set(0, 0.84, 0.05); g.add(sh.root); for (const l of sh.legs) l.rotation.x = -Math.PI / 2 + 0.15; // seated: legs on the cushion for (const a of sh.arms) a.rotation.z = 0; R.sharks.push(sh); // the sign on a stick each shark can raise: front = "$30" (red), back = "FREE" (green); flip = rotation.y π const sg = new THREE.Group(); sg.position.set(0.95, 1.2, 0.25); g.add(sg); const stick = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 1.2, 8), mat(0x8a7a6a)); stick.position.y = 0.6; sg.add(stick); const card = new THREE.Group(); card.position.y = 1.35; sg.add(card); const f = plane(1.1, 0.64, mat(0xffffff, { map: signFlip })); f.position.z = 0.012; card.add(f); const b = plane(1.1, 0.64, mat(0xffffff, { map: tex('signFree', () => P.signCanvas(cfg.signs[1], '#3a9d4f')) })); b.rotation.y = Math.PI; b.position.z = -0.012; card.add(b); const edge = box(1.12, 0.66, 0.02, mat(0xe9e2d6)); card.add(edge); sg.visible = false; R.signs.push({ g: sg, card, front: f }); const tb = new THREE.Group(); tb.position.set(1.35, 0, 0.5); g.add(tb); const top = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.05, 20), tableM); top.position.y = 0.9; top.castShadow = true; tb.add(top); const leg = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.9, 8), tableM); leg.position.y = 0.45; tb.add(leg); const cup = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.065, 0.2, 14), cupM); cup.position.set(0.05, 1.02, 0); cup.castShadow = true; tb.add(cup); }); // the easel with its card (a dynamic texture the video redraws: price flips, bites, stamps) R.easel = new THREE.Group(); S.add(R.easel); { const em = mat(0x2b2b2b, { map: null, rough: 0.5, metal: 0.4 }); for (const [x, rz, rx] of [[-0.55, 0.12, 0.05], [0.55, -0.12, 0.05], [0, 0, -0.32]]) { const l = new THREE.Mesh(new THREE.CylinderGeometry(0.03, 0.03, 2.4, 8), em); l.position.set(x * 0.9, 1.15, rx < 0 ? -0.35 : 0.05); l.rotation.set(rx, 0, rz); l.castShadow = true; R.easel.add(l); } const ledge = box(1.6, 0.06, 0.18, em); ledge.position.set(0, 0.95, 0.12); R.easel.add(ledge); R.cardTex = R.dynTex(1024, 640); const cardM = mat(0xffffff, { map: R.cardTex.t, transparent: true, alphaTest: 0.5, emissive: 0xffffff, ei: 0.14, emap: R.cardTex.t }); R.card = new THREE.Group(); R.card.position.set(0, 1.62, 0.16); R.card.rotation.x = -0.08; R.easel.add(R.card); const face = plane(2.0, 1.25, cardM); face.position.z = 0.012; R.card.add(face); R.cardFace = face; const backing = box(2.0, 1.25, 0.02, mat(0xe7e2d8)); backing.material = mat(0xe7e2d8); R.card.add(backing); R.cardBacking = backing; } // the narrator critter + the giant shark (positioned per shot) R.critter = R.makeCritter(); S.add(R.critter.root); R.big = R.makeBigShark(); S.add(R.big.root); // stage lights (visible cones are faked with soft additive planes) R.studioLights = new THREE.Group(); S.add(R.studioLights); R.hemi = new THREE.HemisphereLight(0x7a8ad8, 0x2a160e, 0.55); R.studioLights.add(R.hemi); R.key = new THREE.SpotLight(0xffd9b0, 260, 40, 0.55, 0.6, 1.4); R.key.position.set(4, 11, 9); R.key.target.position.set(0, 0.8, -1); R.key.castShadow = true; R.key.shadow.mapSize.set(2048, 2048); R.key.shadow.bias = -0.0004; R.key.shadow.normalBias = 0.03; R.key.shadow.radius = 5; R.studioLights.add(R.key, R.key.target); R.rim = new THREE.DirectionalLight(0x6f8fff, 1.2); R.rim.position.set(-3, 6, -10); R.studioLights.add(R.rim); R.winLights = [-6, 0, 6].map(x => { const l = new THREE.PointLight(0xff9a4a, 0, 14, 1.6); l.position.set(x, 4, -6.8); R.studioLights.add(l); return l; }); R.spot = new THREE.SpotLight(0xfff0d8, 0, 16, 0.32, 0.5, 1.2); R.spot.position.set(0, 9, 3); R.spot.target.position.set(0, 0, 1.5); R.studioLights.add(R.spot, R.spot.target); R.fill = new THREE.DirectionalLight(0xffc9a0, 0.35); R.fill.position.set(-5, 4, 8); R.studioLights.add(R.fill); // ======================= CORRIDOR (the way in: doors, a lit sign above them) ======================= const C = set('corridor'); C.position.x = CORRIDOR_X; { const wood = mat(0xffffff, { map: tex('woodPanel', () => P.paperColor('#6b3a22', { seed: 31, blot: 0.45, dark: '#3a1d0e' })) }); const fl = plane(8, 24, mat(0x6a4a36, { map: tex('floor', P.floorCanvas, { rep: [6, 4] }) })); fl.rotation.x = -Math.PI / 2; fl.position.set(0, 0, -2); C.add(fl); for (const sx of [-1, 1]) { const w = plane(24, 7, wood); w.position.set(sx * 3, 3.5, -2); w.rotation.y = -sx * Math.PI / 2; C.add(w); for (const z of [-6, -1, 4]) { const lamp = new THREE.Mesh(new THREE.SphereGeometry(0.18, 12, 10), new THREE.MeshBasicMaterial({ color: 0xffd08a })); lamp.position.set(sx * 2.85, 3.4, z); C.add(lamp); } } const ceil = plane(8, 24, mat(0x140b06, { map: null })); ceil.rotation.x = Math.PI / 2; ceil.position.set(0, 7, -2); C.add(ceil); const endW = plane(8, 7, wood); endW.position.set(0, 3.5, -10); C.add(endW); // doorway: glowing frame, two doors swung open, light behind const glowM = mat(0xffa040, { map: null, emissive: 0xffa040, ei: 2.2 }); for (const [w, h, x, y] of [[2.9, 0.16, 0, 3.6], [0.16, 3.6, -1.42, 1.8], [0.16, 3.6, 1.42, 1.8]]) { const b = box(w, h, 0.18, glowM); b.position.set(x, y, -9.85); C.add(b); } const light = plane(2.7, 3.5, new THREE.MeshBasicMaterial({ color: 0xffe7c0 })); light.position.set(0, 1.78, -9.95); C.add(light); R.doors = [-1, 1].map(s => { const p = new THREE.Group(); p.position.set(s * 1.32, 0, -9.82); C.add(p); const d = box(1.3, 3.4, 0.08, mat(0x5a2f18, { map: tex('woodPanel', () => null) })); d.material = wood; d.position.set(-s * 0.65, 1.7, 0); p.add(d); return p; }); const signM = mat(0xffffff, { map: tex('doorLogo', () => P.logoCanvas(cfg.door, '')), emissive: 0x9cc3f0, ei: 0.4, emap: tex('doorLogo', () => P.logoCanvas(cfg.door, '')) }); const sgn = box(2.2, 1.4, 0.15, [wood, wood, wood, wood, signM, wood]); sgn.position.set(0, 4.75, -9.85); C.add(sgn); R.doorSignM = signM; R.corLights = new THREE.Group(); C.add(R.corLights); const h = new THREE.HemisphereLight(0xffc89a, 0x2a160e, 0.5); R.corLights.add(h); const pl = new THREE.PointLight(0xffb066, 30, 18, 1.5); pl.position.set(0, 2.5, -8.5); R.corLights.add(pl); for (const z of [-6, -1, 4]) { const l = new THREE.PointLight(0xffc27a, 4, 6, 1.8); l.position.set(0, 3.3, z); R.corLights.add(l); } const rear = new THREE.PointLight(0xffd2a0, 9, 14, 1.4); rear.position.set(0, 2.6, 7.5); R.corLights.add(rear); } R.critter2 = R.makeCritter(); C.add(R.critter2.root); // the narrator walking in (carrying a card) R.carry = plane(1.2, 0.8, whiteM); R.critter2.pivot.add(R.carry); R.carry.position.set(0, 0.95, 0.3); // ======================= the 2D diorama sets: flat paper layers facing +z ======================= const layer = (grp, w, h, map, x, y, z, o = {}) => { const m = mat(0xffffff, { map, transparent: !!o.alpha, alphaTest: o.alpha ? 0.4 : 0, ...o.m }); const p = plane(w, h, m); p.position.set(x, y, z); grp.add(p); return p; }; const flatLight = grp => { const g = new THREE.Group(); grp.add(g); const h = new THREE.HemisphereLight(0xfff1de, 0x3a2a20, 0.9); g.add(h); const d = new THREE.DirectionalLight(0xfff0dc, 2.2); d.position.set(-3, 5, 9); d.target.position.set(0, 0, 0); d.castShadow = true; d.shadow.mapSize.set(2048, 2048); d.shadow.camera.left = -9; d.shadow.camera.right = 9; d.shadow.camera.top = 9; d.shadow.camera.bottom = -9; d.shadow.radius = 6; d.shadow.bias = -0.0005; g.add(d, d.target); return g; }; // FELT: the conveyor that stamps $30 on free cards and drops them in the piggy bank const F = set('felt'); F.position.x = FELT_X; R.feltLights = flatLight(F); { layer(F, 22, 26, tex('felt', () => P.feltCanvas()), 0, 2, -0.5).receiveShadow = true; const ground = layer(F, 22, 4, tex('feltDark', () => P.feltCanvas('#1c3f33', 82)), 0, -3.4, -0.3); const belt = box(14, 0.36, 0.3, mat(0x2b2b2e, { map: tex('belt', beltCanvas) })); belt.position.set(0, -0.5, 0); F.add(belt); for (let k = 0; k < 14; k++) { const r = new THREE.Mesh(new THREE.CylinderGeometry(0.11, 0.11, 0.32, 12), mat(0x9a9aa0, { metal: 0.5, rough: 0.4, map: null })); r.rotation.x = Math.PI / 2; r.position.set(-6.5 + k, -0.5, 0.05); F.add(r); } for (const x of [-2.75, -0.95, 0.95, 2.75]) { const post = box(0.14, 2.6, 0.1, mat(0x8d9096)); post.position.set(x, 0.8, -0.3); F.add(post); const dial = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.05, 20), [mat(0x777), mat(0xffffff, { map: tex('dial', dialCanvas) }), mat(0x777)]); dial.rotation.x = Math.PI / 2; dial.position.set(x, 1.5, -0.22); F.add(dial); } R.bills = [[-2.0, 3.25, 0.12], [2.05, 3.4, -0.1], [0.1, 4.6, 0.05]].map(([x, y, r], i) => { const b = layer(F, 1.9, 0.86, tex('bill' + i, () => P.billCanvas(i)), x, y, -0.4); b.rotation.z = r; return b; }); // the stamp press over the belt R.press = new THREE.Group(); R.press.position.set(0, 2.45, 0.05); F.add(R.press); const arm = box(0.3, 2.4, 0.25, mat(0x9a9aa0, { metal: 0.4, rough: 0.5 })); arm.position.y = 0.6; R.press.add(arm); R.pressHead = new THREE.Group(); R.press.add(R.pressHead); const head = box(1.1, 0.5, 0.5, mat(0xd23a2a)); R.pressHead.add(head); const pad = box(1.0, 0.12, 0.45, mat(0x3a1010)); pad.position.y = -0.3; R.pressHead.add(pad); const lbl = layer(R.pressHead, 0.9, 0.36, tex('pressLbl', () => P.signCanvas(cfg.price, '#d23a2a')), 0, 0, 0.26); // the cards riding the belt: front shows FREE; once stamped, the $30 face R.feltCards = Array.from({ length: 7 }, (_, i) => { const g = new THREE.Group(); F.add(g); const a = layer(g, 1.5, 1.0, tex('cardFree', () => P.cardCanvas({ title: cfg.card.title, price: cfg.card.word, priceCol: '#2f9e57', priceSize: 150, titleSize: 96 })), 0, 0, 0); const b = layer(g, 1.5, 1.0, tex('cardPaid', () => P.cardCanvas({ title: cfg.card.title, price: cfg.card.word, priceCol: '#2f9e57', priceSize: 150, titleSize: 96, stamp: cfg.price })), 0, 0, 0.002); b.visible = false; return { g, free: a, paid: b }; }); // the piggy bank (paper cut-out) R.piggy = layer(F, 3.0, 2.34, tex('piggy', piggyCanvas), 2.55, -0.3, 0.25, { alpha: true }); // the marquee sign with bulbs R.marqueeTex = R.dynTex(768, 300); R.marquee = layer(F, 1.8, 0.7, R.marqueeTex.t, 1.55, 3.05, 0.1, { m: { emissive: 0xffffff, ei: 0.35, emap: R.marqueeTex.t } }); // the narrator and the seller as flat cut-outs R.flatMe = layer(F, 1.05, 0.91, tex('flatMe', () => flatCritterCanvas(true)), -2.75, -1.35, 0.4, { alpha: true }); R.flatSeller = layer(F, 1.3, 1.53, tex('flatSeller', flatSellerCanvas), -1.75, -1.3, 0.4, { alpha: true }); R.lever = new THREE.Group(); R.lever.position.set(-0.75, -1.9, 0.35); F.add(R.lever); const lv = box(0.1, 1.2, 0.08, mat(0x8d9096)); lv.position.y = 0.6; R.lever.add(lv); const knob = new THREE.Mesh(new THREE.SphereGeometry(0.22, 16, 12), mat(0xd23a2a, { map: null, rough: 0.4 })); knob.position.y = 1.25; R.lever.add(knob); } // BRICK: brown wall, EXIT door, a brick wall, the sign that collects sticky notes, the narrator below const B = set('brick'); B.position.x = BRICK_X; R.brickLights = flatLight(B); { layer(B, 26, 24, tex('brownWall', () => P.paperColor('#4a2c1c', { seed: 71, blot: 0.3, size: 1024, dark: '#2e190e' })), 0, 2, -0.6); layer(B, 26, 6, tex('brownFloor', () => P.paperColor('#38200f', { seed: 72, blot: 0.3, dark: '#211208' })), 0, -4.8, -0.4); const brick = layer(B, 7, 3.4, tex('brick', P.brickCanvas), 2.6, -1.0, -0.2); const doorM = mat(0xffffff, { map: tex('doorFlat', doorCanvas) }); const door = plane(4.2, 4.6, doorM); door.position.set(-3.0, -0.4, -0.25); B.add(door); const exit = box(1.9, 0.62, 0.12, [blackM, blackM, blackM, blackM, mat(0xffffff, { map: tex('exit', () => exitCanvas(cfg.exit)), emissive: 0xffffff, ei: 0.5, emap: tex('exit', () => null) }), blackM]); exit.position.set(-1.95, 2.45, -0.15); B.add(exit); const lamp = new THREE.Mesh(new THREE.CylinderGeometry(0.34, 0.34, 0.06, 24), mat(0xfff1c0, { map: null, emissive: 0xffe08a, ei: 1.4 })); lamp.rotation.x = Math.PI / 2; lamp.position.set(3.05, 2.3, -0.2); B.add(lamp); const lstem = box(0.08, 0.6, 0.06, mat(0xb08a4a)); lstem.position.set(3.05, 1.85, -0.2); B.add(lstem); R.wallSignTex = R.dynTex(1024, 640); R.wallSign = new THREE.Group(); R.wallSign.position.set(0.6, 2.0, 0); B.add(R.wallSign); const ws = plane(4.2, 2.62, mat(0xffffff, { map: R.wallSignTex.t })); ws.position.z = 0.035; R.wallSign.add(ws); const wsb = box(4.25, 2.67, 0.04, mat(0xe7e2d8)); R.wallSign.add(wsb); R.notes = cfg.notes.map(([t, col], i) => { const g = new THREE.Group(); B.add(g); const n = plane(1.6, 1.44, mat(0xffffff, { map: tex('note' + i, () => P.noteCanvas(t, col)) })); g.add(n); g.visible = false; return g; }); R.flatMe2 = layer(B, 1.7, 1.47, tex('flatMe', () => flatCritterCanvas(true)), 0.55, -1.25, 0.25, { alpha: true }); // the string tied to the sign + the scissors that snip it R.string = new THREE.Group(); R.string.position.set(2.25, 0.72, 0.06); B.add(R.string); const st = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.015, 2.6, 6), mat(0xf1e6c8, { map: null })); st.position.y = -1.3; st.castShadow = true; R.string.add(st); R.stringLow = new THREE.Group(); R.stringLow.position.y = -1.3; R.string.add(R.stringLow); const st2 = new THREE.Mesh(new THREE.CylinderGeometry(0.015, 0.015, 1.3, 6), mat(0xf1e6c8, { map: null })); st2.position.y = -0.65; R.stringLow.add(st2); R.scissors = layer(B, 1.1, 1.1, tex('scissors', scissorsCanvas), 2.7, -0.5, 0.4, { alpha: true }); } // OFFICE: grey concrete, a big window on a paper city, a long table; the free text file gets its stamp const O = set('office'); O.position.x = OFFICE_X; R.officeLights = flatLight(O); { layer(O, 26, 24, tex('concrete', () => P.paperColor('#8f9298', { seed: 61, blot: 0.35, size: 1024, dark: '#6c6f75' })), 0, 2, -0.6); layer(O, 8.6, 4.8, tex('skyline', P.skylineCanvas), 0, 2.5, -0.5); const fr = mat(0xeef1f4); for (const [w, h, x, y] of [[8.9, 0.22, 0, 4.9], [8.9, 0.22, 0, 0.1], [0.22, 5, -4.4, 2.5], [0.22, 5, 4.4, 2.5], [0.14, 5, -1.45, 2.5], [0.14, 5, 1.45, 2.5]]) { const b = box(w, h, 0.15, fr); b.position.set(x, y, -0.4); O.add(b); } const table = box(10, 0.3, 0.6, mat(0xdfe3e8)); table.position.set(0, -0.85, 0.1); O.add(table); const front = box(10, 1.6, 0.1, mat(0xc5cad1)); front.position.set(0, -1.75, 0.38); O.add(front); R.people = [-1.55, 1.55].map((x, i) => layer(O, 1.45, 1.55, tex('person' + i, () => flatPersonCanvas(i)), x, -0.1, -0.1, { alpha: true })); R.docTex = R.dynTex(512, 680); R.officeDoc = new THREE.Group(); O.add(R.officeDoc); const dp = plane(1.5, 2.0, mat(0xffffff, { map: R.docTex.t })); dp.position.z = 0.022; R.officeDoc.add(dp); const db = box(1.52, 2.02, 0.02, mat(0xe9e4da)); R.officeDoc.add(db); R.check = layer(O, 1.0, 1.0, tex('check', checkCanvas), 3.8, 3.3, 0.3, { alpha: true }); R.check.visible = false; R.flatMe3 = layer(O, 1.5, 1.3, tex('flatMe', () => flatCritterCanvas(true)), -4.6, -0.2, 0.4, { alpha: true }); } // ======================= props (positioned per shot, in the studio) ======================= R.phone = new THREE.Group(); S.add(R.phone); { const body = box(0.78, 1.5, 0.08, mat(0x1d1e24, { map: null, rough: 0.3, metal: 0.3 }), 0.05); R.phone.add(body); R.screenTex = R.dynTex(360, 640, g => g.drawImage(P.formatScreen(), 0, 0)); // a video may redraw it: R.screenTex.set(key, (g, w, h) => …) const scr = plane(0.68, 1.36, mat(0xffffff, { map: R.screenTex.t, emissive: 0xffffff, ei: 0.12, emap: R.screenTex.t })); scr.position.z = 0.045; R.phone.add(scr); } R.skillDoc = new THREE.Group(); S.add(R.skillDoc); { const p = plane(1.0, 1.33, mat(0xffffff, { map: tex('skillDoc', () => P.docCanvas(cfg.doc)) })); p.position.z = 0.012; R.skillDoc.add(p); const b = box(1.02, 1.35, 0.02, mat(0xe9e4da)); R.skillDoc.add(b); } // the shiny box the card gets repackaged in R.gift = new THREE.Group(); S.add(R.gift); { const gm = mat(0xffffff, { map: tex('giftPaper', giftCanvas), rough: 0.35, metal: 0.25 }); const base = box(1.6, 0.9, 1.1, gm); base.position.y = 0.45; R.gift.add(base); R.giftLid = new THREE.Group(); R.giftLid.position.set(0, 0.9, -0.55); R.gift.add(R.giftLid); const lid = box(1.7, 0.22, 1.2, gm); lid.position.set(0, 0.11, 0.55); R.giftLid.add(lid); const rib = mat(0xf2c94c, { map: null, rough: 0.3, metal: 0.4 }); for (const [w, d, x, z] of [[0.18, 1.22, 0, 0.55], [1.72, 0.18, 0, 0.55]]) { const r = box(w, 0.24, d, rib); r.position.set(x, 0.12, z); R.giftLid.add(r); } R.bow = new THREE.Group(); R.bow.position.set(0, 0.3, 0.55); R.giftLid.add(R.bow); for (const s of [-1, 1]) { const l = new THREE.Mesh(new THREE.TorusGeometry(0.2, 0.06, 8, 16), rib); l.position.set(s * 0.2, 0.08, 0); l.rotation.set(0, Math.PI / 2, s * 0.5); l.castShadow = true; R.bow.add(l); } const tg = plane(0.7, 0.36, mat(0xffffff, { map: tex('premium', () => P.signCanvas(cfg.giftTag, '#1d1d1f', '#f2c94c')) })); tg.position.set(0.55, 0.5, 0.56); tg.rotation.z = -0.25; R.gift.add(tg); R.giftTag = tg; for (const [w, d] of [[0.18, 1.12], [1.62, 0.18]]) { const r = box(w, 0.9, d, rib); r.position.y = 0.45; R.gift.add(r); } } // the cash register with its LED display R.register = new THREE.Group(); S.add(R.register); { const tm = mat(0x2f8f86, { rough: 0.5 }); const body = box(1.8, 0.8, 1.3, tm, 0.06); body.position.y = 0.4; R.register.add(body); const top = box(1.5, 0.5, 0.7, tm, 0.06); top.position.set(0, 1.0, -0.2); top.rotation.x = -0.35; R.register.add(top); for (let j = 0; j < 3; j++) for (let i = 0; i < 4; i++) { const k = box(0.22, 0.08, 0.16, mat(0xe9eef0, { map: null })); k.position.set(-0.45 + i * 0.3, 1.18 - j * 0.07, -0.05 + j * 0.13); k.rotation.x = -0.35; R.register.add(k); } R.ledTex = R.dynTex(512, 160); const scrM = new THREE.MeshBasicMaterial({ map: R.ledTex.t }); const dsp = box(0.95, 0.32, 0.2, [tm, tm, tm, tm, scrM, tm]); dsp.position.set(0, 1.62, -0.4); R.register.add(dsp); const stand = box(0.12, 0.3, 0.12, tm); stand.position.set(0, 1.4, -0.4); R.register.add(stand); R.drawer = box(1.6, 0.32, 1.2, mat(0x24706a)); R.drawer.position.set(0, 0.2, 0.06); R.register.add(R.drawer); } // money in a paw that catches fire R.money = new THREE.Group(); S.add(R.money); { const bm = mat(0xffffff, { map: tex('billTop', () => P.billCanvas(5)) }), side = mat(0x7fbf6a); for (let k = 0; k < 6; k++) { const b = box(1.1, 0.07, 0.5, [side, side, bm, side, side, side]); b.position.set((k % 2) * 0.06, 0.04 + k * 0.075, (k % 3) * 0.03); b.rotation.y = (k % 3 - 1) * 0.08; R.money.add(b); } const tag = plane(0.6, 0.34, mat(0xffffff, { map: tex('price30', () => P.signCanvas(cfg.price, '#d93b2b')) })); tag.position.set(0.25, 0.5, 0.26); tag.rotation.set(-0.3, 0, 0.2); R.money.add(tag); R.moneyTag = tag; } R.fire = new THREE.Group(); S.add(R.fire); { const fm = new THREE.MeshBasicMaterial({ map: tex('flame', P.flameCanvas), transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide }); R.flames = [[-0.22, 0.8, 0.1], [0.08, 1.15, 0], [0.32, 0.75, -0.1], [-0.02, 0.9, 0.15]].map(([x, s, z]) => { const g = new THREE.Group(); g.position.set(x, 0, z); const p = new THREE.Mesh(new THREE.PlaneGeometry(0.42 * s, 0.85 * s), fm); p.position.y = 0.42 * s; g.add(p); R.fire.add(g); return g; }); R.fireLight = new THREE.PointLight(0xffa040, 0, 6, 1.6); R.fireLight.position.y = 0.8; R.fire.add(R.fireLight); } // the library shelf with the format books R.shelf = new THREE.Group(); S.add(R.shelf); R.books = []; { const wm = mat(0xffffff, { map: tex('shelfWood', () => P.paperColor('#7a4a2a', { seed: 91, blot: 0.4, dark: '#4a2a14' })) }); for (const [w, h, d, x, y, z] of [[4.4, 0.16, 0.9, 0, 0.08, 0], [4.4, 0.12, 0.9, 0, 1.4, 0], [4.4, 0.12, 0.9, 0, 2.7, 0], [4.4, 0.16, 0.9, 0, 4.0, 0], [0.16, 4.0, 0.9, -2.2, 2.0, 0], [0.16, 4.0, 0.9, 2.2, 2.0, 0], [4.4, 4.0, 0.06, 0, 2.0, -0.44]]) { const b = box(w, h, d, wm); b.position.set(x, y, z); R.shelf.add(b); } const sgM = mat(0xffffff, { map: tex('libSign', () => P.signCanvas(cfg.shelfSign, '#1d2550', '#ffe7b0')), emissive: 0xffd08a, ei: 0.25, emap: tex('libSign', () => null) }); R.shelfSign = box(2.6, 0.8, 0.1, [wm, wm, wm, wm, sgM, wm]); R.shelfSign.position.set(0, 4.55, 0.1); R.shelf.add(R.shelfSign); const all = [...cfg.books, ...cfg.books.slice(0, 5), ...cfg.books.slice(1, 6)]; all.forEach(([name, col, isNew], k) => { const row = Math.floor(k / 6), i = k % 6; const g = new THREE.Group(); g.position.set(-1.75 + i * 0.7, 0.16 + row * 1.3, 0.05); R.shelf.add(g); const sp = mat(0xffffff, { map: tex('spine' + name + (isNew ? 'n' : ''), () => P.spineCanvas(name, col, '#fff8ee', !!isNew)) }), cm = mat(col); const b = box(0.36, 1.08, 0.7, [cm, cm, cm, cm, sp, cm]); b.position.y = 0.54; g.add(b); R.books.push({ g, b, name, isNew: !!isNew }); }); } // paper.md, the card the narrator holds up R.paperDoc = new THREE.Group(); S.add(R.paperDoc); { const p = plane(1.3, 1.73, mat(0xffffff, { map: tex('paperDoc', () => P.docCanvas(cfg.held, { lines: 8 })) })); p.position.z = 0.012; R.paperDoc.add(p); const b = box(1.32, 1.75, 0.02, mat(0xe9e4da)); R.paperDoc.add(b); } // the studio's front wall: the entrance (a glowing doorway) seen from the sharks' side { const wallM = mat(0x1d2550, { map: tex('navyPaper', () => null) }); const fw = new THREE.Group(); fw.position.z = 8.5; fw.rotation.y = Math.PI; S.add(fw); for (const [w, x] of [[10.5, -6.75], [10.5, 6.75]]) { const p = plane(w, 12, wallM); p.position.set(x, 6, 0); fw.add(p); } const top = plane(3, 7.6, wallM); top.position.set(0, 8.2, 0); fw.add(top); const glowM = mat(0xffa040, { map: null, emissive: 0xffa040, ei: 2.0 }); for (const [w, h, x, y] of [[3.0, 0.16, 0, 4.4], [0.16, 4.4, -1.46, 2.2], [0.16, 4.4, 1.46, 2.2]]) { const b = box(w, h, 0.2, glowM); b.position.set(x, y, 0.05); fw.add(b); } const lt = plane(2.8, 4.3, new THREE.MeshBasicMaterial({ color: 0xffe2b8 })); lt.position.set(0, 2.15, -0.1); fw.add(lt); R.entranceLight = new THREE.PointLight(0xffb070, 0, 10, 1.6); R.entranceLight.position.set(0, 2.2, 7.6); S.add(R.entranceLight); } // paper money flying into the shark's mouth, paper scraps from its bites, confetti on the rug R.flyBills = Array.from({ length: 5 }, (_, i) => { const p = plane(0.62, 0.28, mat(0xffffff, { map: tex('bill' + (i % 3), () => P.billCanvas(i % 3)), side: THREE.DoubleSide })); S.add(p); return p; }); R.scraps = Array.from({ length: 18 }, (_, i) => { const p = plane(0.09 + (i % 3) * 0.03, 0.07 + (i % 2) * 0.03, mat(i % 4 ? 0xf6f2ea : 0xe8603c, { side: THREE.DoubleSide })); S.add(p); return p; }); { const Rr = rng(5); for (let k = 0; k < 60; k++) { const sh = new THREE.Shape(); sh.moveTo(0, 0); sh.lineTo(0.12, 0); sh.lineTo(0.05, 0.1); sh.closePath(); const c = new THREE.Mesh(new THREE.ShapeGeometry(sh), mat([0xf6f2ea, 0xd93b2b, 0xf2c14e][k % 3], { side: THREE.DoubleSide })); c.rotation.set(-Math.PI / 2, 0, Rr() * 6); c.position.set((Rr() - 0.5) * 7, 0.012, -1 + Rr() * 5.5); S.add(c); } } // out-of-focus shark paws for the sharks'-eye view (navy cuffs) R.fgPaws = new THREE.Group(); S.add(R.fgPaws); { const cuff = mat(0x23305a); for (const s of [-1, 1]) { const g = new THREE.Group(); g.position.x = s * 0.55; R.fgPaws.add(g); const a = box(0.32, 0.32, 0.9, orangeM); a.position.z = -0.1; g.add(a); const c = box(0.36, 0.36, 0.4, cuff); c.position.z = 0.45; g.add(c); } } // a small copy of the free card (a shark grabs it, it drops into the box) R.miniCard = new THREE.Group(); S.add(R.miniCard); { const p = plane(0.9, 0.56, mat(0xffffff, { map: tex('miniCard', () => P.cardCanvas({ title: cfg.card.title, price: cfg.card.word, priceCol: '#2f9e57', priceSize: 160, titleSize: 100 })), side: THREE.DoubleSide })); p.position.z = 0.008; R.miniCard.add(p); const b = box(0.9, 0.56, 0.012, mat(0xe7e2d8)); R.miniCard.add(b); } // a paw in a suit sleeve (holds the money that burns) R.suitPaw = new THREE.Group(); S.add(R.suitPaw); { const sl = box(0.5, 0.5, 1.6, mat(0xffffff, { map: tex('pinstripe', pinstripeCanvas) })); sl.position.z = -0.9; R.suitPaw.add(sl); const pw = box(0.62, 0.3, 0.7, orangeM); pw.position.set(0, -0.05, 0.2); R.suitPaw.add(pw); } // an app window the library lives in (a paper frame with a title bar) R.appFrame = new THREE.Group(); S.add(R.appFrame); { const fm = mat(0xffffff, { map: tex('appBar', () => appBarCanvas(...cfg.appBar)) }), side = mat(0x1b2040, { map: tex('navyPaper', () => null) }); const bar = box(5.2, 0.62, 0.12, [side, side, side, side, fm, side]); bar.position.set(0, 5.3, 0); R.appFrame.add(bar); for (const [w, h, x, y] of [[0.2, 5.4, -2.5, 2.6], [0.2, 5.4, 2.5, 2.6], [5.2, 0.2, 0, -0.06]]) { const b = box(w, h, 0.12, side); b.position.set(x, y, 0); R.appFrame.add(b); } } // dust motes (tiny glowing specks that the depth of field turns into bokeh) R.dust = new THREE.Group(); scene.add(R.dust); { const dm = new THREE.MeshBasicMaterial({ color: 0xc8a878 }); const Rr = rng(77); for (let k = 0; k < 34; k++) { const s = new THREE.Mesh(new THREE.SphereGeometry(0.006 + Rr() * 0.01, 6, 4), dm); s.userData = { x: Rr(), y: Rr(), z: Rr(), p: Rr() * 6 }; R.dust.add(s); } } // sparkle stars (CTA, stamps): sprites the video scales/positions R.sparkTex = tex('star', P.starCanvas); return { scene, R }; } // ---------- small canvas helpers for world-only textures ---------- function tri(w, h) { const s = new THREE.Shape(); s.moveTo(-w / 2, 0); s.lineTo(w / 2, 0); s.lineTo(0, h); s.closePath(); return s; } function teethCanvas() { const c = cv(256, 64), g = c.getContext('2d'); g.fillStyle = '#2a0d0a'; g.fillRect(0, 0, 256, 64); g.fillStyle = '#fbf7ee'; for (let k = 0; k < 8; k++) { g.beginPath(); g.moveTo(k * 32, 0); g.lineTo(k * 32 + 32, 0); g.lineTo(k * 32 + 16, 40); g.fill(); } return c; } function zigzagCanvas(up) { const c = cv(512, 96), g = c.getContext('2d'); g.fillStyle = '#fbf7ee'; for (let k = 0; k < 12; k++) { g.beginPath(); if (up) { g.moveTo(k * 42.6, 96); g.lineTo(k * 42.6 + 42.6, 96); g.lineTo(k * 42.6 + 21.3, 8); } else { g.moveTo(k * 42.6, 0); g.lineTo(k * 42.6 + 42.6, 0); g.lineTo(k * 42.6 + 21.3, 88); } g.fill(); } return c; } function discCanvas(ch) { const c = cv(256, 256), g = c.getContext('2d'); g.fillStyle = '#f6f1e8'; g.fillRect(0, 0, 256, 256); g.fillStyle = '#e8603c'; g.font = `180px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(ch, 128, 140); return c; } function pinstripeCanvas() { const c = cv(256, 256), g = c.getContext('2d'); g.fillStyle = '#2b2f3c'; g.fillRect(0, 0, 256, 256); g.strokeStyle = 'rgba(220,225,235,0.35)'; g.lineWidth = 2; for (let x = 8; x < 256; x += 22) { g.beginPath(); g.moveTo(x, 0); g.lineTo(x, 256); g.stroke(); } return c; } function beltCanvas() { const c = cv(1024, 64), g = c.getContext('2d'); g.fillStyle = '#2b2b2e'; g.fillRect(0, 0, 1024, 64); g.fillStyle = '#3a3a3e'; for (let x = 0; x < 1024; x += 48) g.fillRect(x, 0, 20, 64); return c; } function dialCanvas() { const c = cv(128, 128), g = c.getContext('2d'); g.fillStyle = '#f4f1ea'; g.beginPath(); g.arc(64, 64, 62, 0, 7); g.fill(); g.strokeStyle = '#d23a2a'; g.lineWidth = 8; g.beginPath(); g.moveTo(64, 64); g.lineTo(100, 34); g.stroke(); return c; } function piggyCanvas() { const W = 512, H = 400, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#f2a8b8'; g.beginPath(); g.ellipse(250, 220, 200, 140, 0, 0, 7); g.fill(); g.beginPath(); g.ellipse(440, 210, 56, 50, 0, 0, 7); g.fill(); g.fillStyle = '#e48aa0'; g.beginPath(); g.ellipse(450, 210, 30, 26, 0, 0, 7); g.fill(); g.fillStyle = '#7a2e44'; g.beginPath(); g.arc(442, 204, 6, 0, 7); g.arc(460, 204, 6, 0, 7); g.fill(); g.beginPath(); g.arc(360, 160, 10, 0, 7); g.fill(); g.fillStyle = '#f2a8b8'; g.beginPath(); g.moveTo(300, 100); g.lineTo(340, 40); g.lineTo(360, 110); g.fill(); for (const x of [130, 200, 300, 370]) { g.fillRect(x, 320, 44, 70); } g.fillStyle = '#2b2b30'; g.fillRect(200, 92, 120, 16); // coin slot g.fillStyle = '#3a3a40'; g.beginPath(); g.roundRect(130, 190, 200, 110, 20); g.fill(); g.strokeStyle = '#c9c9cf'; g.lineWidth = 6; for (let x = 150; x < 320; x += 22) { g.beginPath(); g.moveTo(x, 200); g.lineTo(x, 290); g.stroke(); } return c; } function flatCritterCanvas(cap) { const W = 300, H = 260, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#e8784a'; g.fillRect(60, 70, 180, 110); g.fillStyle = '#141414'; g.fillRect(105, 100, 22, 34); g.fillRect(173, 100, 22, 34); g.fillStyle = '#e8784a'; for (const x of [70, 115, 160, 205]) g.fillRect(x, 180, 24, 60); for (const s of [-1, 1]) { g.save(); g.translate(150 + s * 112, 120); g.rotate(Math.PI / 4); g.fillRect(-17, -17, 34, 34); g.restore(); } if (cap) { g.fillStyle = '#3b6fd8'; g.fillRect(62, 46, 176, 28); g.fillRect(170, 66, 80, 10); } return c; } function flatSellerCanvas() { const W = 340, H = 400, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#e9804f'; g.fillRect(60, 60, 220, 200); g.fillStyle = '#141414'; g.fillRect(118, 100, 22, 36); g.fillRect(200, 100, 22, 36); g.strokeStyle = '#141414'; g.lineWidth = 6; g.beginPath(); g.arc(129, 118, 26, 0, 7); g.moveTo(237, 118); g.arc(211, 118, 26, 0, 7); g.stroke(); g.fillStyle = '#2b2f3c'; g.fillRect(60, 170, 220, 90); g.fillStyle = '#f4f1ea'; g.beginPath(); g.moveTo(140, 170); g.lineTo(170, 230); g.lineTo(200, 170); g.fill(); g.fillStyle = '#c8322a'; g.fillRect(80, 186, 26, 14); g.strokeStyle = 'rgba(220,225,235,0.35)'; g.lineWidth = 2; for (let x = 66; x < 280; x += 16) { if (x > 136 && x < 204) continue; g.beginPath(); g.moveTo(x, 172); g.lineTo(x, 260); g.stroke(); } g.fillStyle = '#e9804f'; for (const x of [80, 135, 190, 245]) g.fillRect(x, 260, 26, 80); g.fillStyle = '#2b2f3c'; for (const x of [80, 135, 190, 245]) g.fillRect(x, 300, 26, 40); return c; } function flatPersonCanvas(i) { const W = 300, H = 320, c = cv(W, H), g = c.getContext('2d'), suit = ['#1f2b4f', '#2f6e4f', '#1d1d1f'][i]; g.fillStyle = '#e8784a'; g.fillRect(50, 50, 200, 150); g.fillStyle = '#141414'; g.fillRect(100, 90, 20, 32); g.fillRect(180, 90, 20, 32); g.fillStyle = suit; g.fillRect(50, 160, 200, 100); g.fillStyle = '#f4f1ea'; g.beginPath(); g.moveTo(125, 160); g.lineTo(150, 210); g.lineTo(175, 160); g.fill(); return c; } function doorCanvas() { const W = 512, H = 560, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#5a341e'; g.fillRect(0, 0, W, H); g.strokeStyle = '#c9a24a'; g.lineWidth = 10; g.strokeRect(20, 20, W / 2 - 30, H - 30); g.strokeRect(W / 2 + 10, 20, W / 2 - 30, H - 30); g.strokeStyle = 'rgba(30,12,4,0.5)'; g.lineWidth = 6; for (const x of [50, W / 2 + 40]) { g.strokeRect(x, 60, W / 2 - 90, 180); g.strokeRect(x, 290, W / 2 - 90, 220); } g.fillStyle = '#c9a24a'; g.fillRect(W / 2 - 30, 250, 12, 90); g.fillRect(W / 2 + 18, 250, 12, 90); return c; } function exitCanvas(word = 'EXIT') { const c = cv(380, 124), g = c.getContext('2d'); g.fillStyle = '#161616'; g.fillRect(0, 0, 380, 124); g.fillStyle = '#ff4a36'; g.font = `92px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(word, 190, 68, 340); return c; } function scissorsCanvas() { const W = 256, H = 256, c = cv(W, H), g = c.getContext('2d'); g.save(); g.translate(128, 128); g.rotate(-0.6); g.fillStyle = '#d7dce2'; g.beginPath(); g.moveTo(-10, -8); g.lineTo(110, -18); g.lineTo(-10, 6); g.fill(); g.beginPath(); g.moveTo(-10, 8); g.lineTo(110, 18); g.lineTo(-10, -6); g.fill(); g.lineWidth = 16; g.strokeStyle = '#e8603c'; g.beginPath(); g.arc(-50, -26, 26, 0, 7); g.stroke(); g.beginPath(); g.arc(-50, 26, 26, 0, 7); g.stroke(); g.restore(); return c; } function appBarCanvas(title = 'My App', right = 'Library') { const W = 1240, H = 140, c = cv(W, H), g = c.getContext('2d'); g.fillStyle = '#1b2040'; g.fillRect(0, 0, W, H); ['#ff5f57', '#febc2e', '#28c840'].forEach((col, i) => { g.fillStyle = col; g.beginPath(); g.arc(60 + i * 52, H / 2, 17, 0, 7); g.fill(); }); g.fillStyle = '#f3f3f1'; g.font = `64px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(title, W / 2, H / 2 + 4); g.fillStyle = 'rgba(195,202,255,0.9)'; g.font = `34px ${FONT.sans}`; g.textAlign = 'right'; g.fillText(right, W - 50, H / 2 + 2); return c; } function checkCanvas() { const c = cv(256, 256), g = c.getContext('2d'); g.fillStyle = '#2f9e57'; g.beginPath(); g.roundRect(8, 8, 240, 240, 26); g.fill(); g.strokeStyle = '#fff'; g.lineWidth = 30; g.lineCap = 'round'; g.lineJoin = 'round'; g.beginPath(); g.moveTo(62, 132); g.lineTo(108, 182); g.lineTo(196, 80); g.stroke(); return c; } function giftCanvas() { const c = cv(512, 512), g = c.getContext('2d'); const gr = g.createLinearGradient(0, 0, 512, 512); gr.addColorStop(0, '#c0392b'); gr.addColorStop(0.5, '#e74c3c'); gr.addColorStop(1, '#a93226'); g.fillStyle = gr; g.fillRect(0, 0, 512, 512); g.fillStyle = 'rgba(255,215,120,0.45)'; for (let y = 20; y < 512; y += 64) for (let x = (y / 64 % 2) * 32 + 16; x < 512; x += 64) { g.beginPath(); for (let k = 0; k < 10; k++) { const a = k / 10 * Math.PI * 2 - Math.PI / 2, r = k % 2 ? 6 : 14; g.lineTo(x + Math.cos(a) * r, y + Math.sin(a) * r); } g.fill(); } return c; } ``` ### `engine/overlay.js` ```js // The 2D layer over the 3D (1080x1920 canvas), in the reference's papercraft look: the torn paper banner on two strips of // tape (one per beat), orange torn-paper word tags (the captions), the blue torn-water news chyron, round speech bubbles // with drawn avatars, and the big COMMENT bubble of the CTA. Engine file; a video calls these from its overlay(g, t). // Every text element is placed inside the safe zone (SAFE below: the platforms cover the edges) and records its box, so the stills renderer // can draw the zone (--safe) and report anything outside it. import { FONT, paperCanvas } from './tex.js'; import { rng, seg, clamp, easeOut, easeOutBack, hash, lerp } from './lib.js'; export const OW = 1080, OH = 1920; // The safe zone: all text x 60–960, y 250–1480; captions centred on x 510, ≤ 820 wide, block within y 1150–1480. export const SAFE = { x0: 60, x1: 960, y0: 250, y1: 1480, cap0: 1150, cap1: 1480, cx: 510, capW: 820 }; export const LAYOUT = { bannerTop: 276, bannerW: 880, // paper banner: top edge and its (constant) width, like the reference's strip capY: 1400, capBottom: 1470, // caption block centre; its bottom never goes below capBottom chyY: 1336, // chyron: bottom edge (it sits right above the caption tags) }; const PAPER = paperCanvas(5, 242, 30), PAPER2 = paperCanvas(9, 225, 50); const TAG = '#cf6a43', TAG_TXT = '#fdf3e4', INK = '#161616'; // ---------- text boxes (for the safe-zone check) ---------- let BOXES = []; export function beginFrame() { BOXES = []; } export const boxes = () => BOXES; function mark(g, kind, text, x, y, w, h) { const m = g.getTransform(), P = [[x, y], [x + w, y], [x, y + h], [x + w, y + h]].map(([px, py]) => [m.a * px + m.c * py + m.e, m.b * px + m.d * py + m.f]); BOXES.push({ kind, text: String(text).slice(0, 40), x0: Math.min(...P.map(p => p[0])), x1: Math.max(...P.map(p => p[0])), y0: Math.min(...P.map(p => p[1])), y1: Math.max(...P.map(p => p[1])) }); } export function violations(list = BOXES) { const tol = 3, out = []; for (const b of list) { const cap = b.kind === 'caption'; const X0 = cap ? SAFE.cx - SAFE.capW / 2 : SAFE.x0, X1 = cap ? SAFE.cx + SAFE.capW / 2 : SAFE.x1, Y0 = cap ? SAFE.cap0 : SAFE.y0, Y1 = cap ? SAFE.cap1 : SAFE.y1; if (b.x0 < X0 - tol || b.x1 > X1 + tol || b.y0 < Y0 - tol || b.y1 > Y1 + tol) out.push({ ...b, x0: Math.round(b.x0), x1: Math.round(b.x1), y0: Math.round(b.y0), y1: Math.round(b.y1) }); } return out; } export function drawSafe(g, list = BOXES) { g.save(); g.clearRect(0, 0, OW, OH); g.fillStyle = 'rgba(255,0,60,0.26)'; g.fillRect(0, 0, OW, SAFE.y0); g.fillRect(0, SAFE.y1, OW, OH - SAFE.y1); g.fillRect(0, SAFE.y0, SAFE.x0, SAFE.y1 - SAFE.y0); g.fillRect(SAFE.x1, SAFE.y0, OW - SAFE.x1, SAFE.y1 - SAFE.y0); g.setLineDash([14, 10]); g.lineWidth = 3; g.strokeStyle = 'rgba(0,220,255,0.95)'; g.strokeRect(SAFE.cx - SAFE.capW / 2, SAFE.cap0, SAFE.capW, SAFE.cap1 - SAFE.cap0); g.beginPath(); g.moveTo(SAFE.cx, SAFE.cap0 - 40); g.lineTo(SAFE.cx, SAFE.cap1 + 40); g.stroke(); g.setLineDash([]); const bad = new Set(violations(list).map(b => b.kind + b.text + Math.round(b.x0) + Math.round(b.y0))); for (const b of list) { g.strokeStyle = bad.has(b.kind + b.text + Math.round(b.x0) + Math.round(b.y0)) ? '#ff2040' : '#30ff70'; g.lineWidth = 3; g.strokeRect(b.x0, b.y0, b.x1 - b.x0, b.y1 - b.y0); } g.font = '26px Consolas, monospace'; g.fillStyle = '#fff'; g.textBaseline = 'top'; g.fillText('SAFE text x 60–960 · y 250–1480 captions (cyan) y 1150–1480, ≤ 820 wide, centre x 510', 20, 20); g.restore(); } // ---------- paper helpers ---------- function torn(g, x, y, w, h, seed, jt = 2.2, js = 6, step = 12) { const R = rng(seed + 1); g.beginPath(); const top = [], right = [], bot = [], left = []; for (let s = 0; s <= w; s += step) top.push([x + s, y + (R() - 0.5) * jt * 2]); for (let s = 0; s <= h; s += 8) right.push([x + w + (R() - 0.5) * js * 2, y + s]); for (let s = w; s >= 0; s -= step) bot.push([x + s, y + h + (R() - 0.5) * jt * 2]); for (let s = h; s >= 0; s -= 8) left.push([x + (R() - 0.5) * js * 2, y + s]); [...top, ...right, ...bot, ...left].forEach(([px, py], k) => k ? g.lineTo(px, py) : g.moveTo(px, py)); g.closePath(); } function paper(g, x, y, w, h, seed, fill, { tex = PAPER, ta = 0.55, shadow = 1, jt, js, step } = {}) { g.save(); torn(g, x, y, w, h, seed, jt, js, step); if (shadow) { g.shadowColor = `rgba(0,0,0,${0.45 * shadow})`; g.shadowBlur = 22; g.shadowOffsetY = 8; } g.fillStyle = fill; g.fill(); g.restore(); g.save(); torn(g, x, y, w, h, seed, jt, js, step); g.clip(); g.globalCompositeOperation = 'multiply'; g.globalAlpha = ta; const sx = (seed * 97) % 600; g.drawImage(tex, sx, 0, Math.min(1024 - sx, 400), 256, x, y, w, h); g.restore(); } function tape(g, cx, cy, w, h, rot, seed) { g.save(); g.translate(cx, cy); g.rotate(rot); g.globalAlpha = 0.88; g.shadowColor = 'rgba(0,0,0,0.25)'; g.shadowBlur = 6; g.shadowOffsetY = 2; torn(g, -w / 2, -h / 2, w, h, seed, 1.2, 5, 8); g.fillStyle = '#d6c69a'; g.fill(); g.shadowColor = 'transparent'; g.clip(); g.globalCompositeOperation = 'multiply'; g.globalAlpha = 0.5; g.drawImage(PAPER2, 0, 0, 300, 120, -w / 2, -h / 2, w, h); g.restore(); } const fit = (g, text, font, max, size, min = 30) => { for (; size > min; size -= 1) { g.font = `${size}px ${font}`; if (g.measureText(text).width <= max) break; } return size; }; // ---------- banner: one torn strip across the top, taped at both corners; the beat's title in heavy caps ---------- // st: { text, at (start time), n (index → tilt/tape seed) } export function banner(g, st, t) { if (!st || !st.text) return; const k = t - st.at, first = st.at <= 0.001, pop = first ? 0 : 1 - easeOut(seg(k, 0, 0.16)); const w = LAYOUT.bannerW, h = 106, cy = LAYOUT.bannerTop + h / 2, rot = ((st.n % 2) ? 1 : -1) * 0.006; g.save(); g.translate(SAFE.cx, cy); g.rotate(rot); g.scale(1 + 0.035 * pop, 1 + 0.035 * pop); paper(g, -w / 2, -h / 2, w, h, 3 + st.n * 7, '#f1ece2', { jt: 3.2, js: 3, step: 9, ta: 0.6 }); tape(g, -w / 2 + 22, -h / 2 + 4, 118, 46, -0.78, 7 + st.n); tape(g, w / 2 - 22, -h / 2 + 4, 118, 46, 0.78, 13 + st.n); g.letterSpacing = '-0.5px'; const size = fit(g, st.text, FONT.sans, w - 110, 54, 34); g.font = `${size}px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillStyle = INK; const tw = g.measureText(st.text).width; mark(g, 'banner', st.text, -tw / 2, -size * 0.55, tw, size * 1.1); g.globalAlpha = first ? 1 : clamp(k / 0.05); g.fillText(st.text, 0, size * 0.05); g.restore(); } // ---------- captions (paper word tags) ---------- function tag(g, text, cx, cy, size, seed, sc, alpha, { fill = TAG, ink = TAG_TXT, font = FONT.coop, kind = 'caption' } = {}) { g.save(); g.font = `${size}px ${font}`; const tw = g.measureText(text).width, w = tw + size * 0.62, h = size * 1.42; g.translate(cx, cy); g.rotate((hash(seed) - 0.5) * 0.1); mark(g, kind, text, -w / 2, -h / 2, w, h); g.globalAlpha = alpha; g.scale(sc, sc); paper(g, -w / 2, -h / 2, w, h, seed * 3 + 1, fill, { ta: 0.42, jt: 2.2 * size / 64, js: 4 * size / 64 }); g.fillStyle = 'rgba(70,25,8,0.35)'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(text, 1.5, size * 0.06 + 3); g.fillStyle = ink; g.fillText(text, 0, size * 0.06); g.restore(); return w; } function layout(g, words, size, font, gap, maxW, pad) { g.font = `${size}px ${font}`; const rows = [[]]; let rw = 0; for (const w of words) { const ww = g.measureText(w.cap).width + size * pad; if (rows.at(-1).length && rw + gap + ww > maxW) { rows.push([]); rw = 0; } rows.at(-1).push({ w, ww }); rw += (rw ? gap : 0) + ww; } const out = []; const lh = size * 1.55; rows.forEach((r, ri) => { const tot = r.reduce((a, x) => a + x.ww, 0) + gap * (r.length - 1); let x = SAFE.cx - tot / 2; for (const it of r) { out.push({ ...it, cx: x + it.ww / 2, row: ri, rows: rows.length, lh }); x += it.ww + gap; } }); return out; } function blockY(rows, lh, h) { const half = ((rows - 1) * lh + h) / 2; return Math.max(SAFE.cap0 + half, Math.min(LAYOUT.capY, LAYOUT.capBottom - half)); } // words appear one by one as they are said (≤ 3 a chunk); the row re-centres as each new tag lands export function captions(g, film, t, st = {}) { const c = film.chunks.find(c => t >= c.t0 && t < c.t1); if (!c) return; const words = c.words.map(i => film.words[i]).filter(w => t >= w.t0 - 0.02); if (!words.length) return; const maxW = SAFE.capW - 24; let size = 62 * (st.scale || 1); g.font = `${size}px ${FONT.coop}`; const widest = Math.max(...c.words.map(i => g.measureText(film.words[i].cap).width + size * 0.62)); if (widest > maxW) size *= maxW / widest; const gap = 10 * size / 64; const L = layout(g, words, size, FONT.coop, gap, maxW, 0.62), Lp = words.length > 1 ? layout(g, words.slice(0, -1), size, FONT.coop, gap, maxW, 0.62) : null; const Y = blockY(L[0].rows, L[0].lh, size * 1.42); const slide = easeOut(seg(t, words.at(-1).t0, words.at(-1).t0 + 0.12)); L.forEach((it, j) => { const p = Lp && Lp[j] ? Lp[j] : null; const cx = p ? lerp(p.cx, it.cx, slide) : it.cx, row = p ? lerp(p.row - (p.rows - 1) / 2, it.row - (it.rows - 1) / 2, slide) : it.row - (it.rows - 1) / 2; const k = seg(t, it.w.t0 - 0.02, it.w.t0 + 0.13); tag(g, it.w.cap, cx, Y + row * it.lh + (hash(it.w.i + 9) - 0.5) * 12 * size / 64, size, it.w.i + 1, easeOutBack(k, 2.2) * 0.4 + 0.6 * clamp(k * 1.5), clamp(k * 4), st.fill ? { fill: st.fill } : {}); }); } // ---------- chyron: the blue lower third with a torn, foamy water edge (the reference's "SEEKING $1M" panel) ---------- // st: { lines: ['MY OFFER:', 'FORMAT + SKILL.md FOR $0'], at, out } export function chyron(g, st, t) { if (!st || t < st.at) return; const inK = easeOut(seg(t, st.at, st.at + 0.2)), outK = st.out != null ? seg(t, st.out, st.out + 0.14) : 0; if (outK >= 1) return; const size = st.size || 60, lh = size * 1.02, n = st.lines.length, padT = 40, padB = 24; g.save(); g.font = `700 ${size}px ${FONT.cond}`; g.letterSpacing = '0.5px'; const tw = Math.max(...st.lines.map(l => g.measureText(l).width)), W = Math.min(900, Math.max(560, tw + 150)), H = padT + n * lh + padB; const y1 = LAYOUT.chyY, y0 = y1 - H, slide = (1 - inK) * -(W + 40) + outK * -(W + 40); g.translate(slide, 0); // panel with a wavy top edge const R = rng(st.seed || 3), wave = x => Math.sin(x * 0.045 + 1.3) * 6 + Math.sin(x * 0.13) * 3 + (R() - 0.5) * 3; g.beginPath(); g.moveTo(-10, y1); g.lineTo(-10, y0 + wave(0)); for (let x = 0; x <= W; x += 12) g.lineTo(x, y0 + wave(x)); g.lineTo(W + 6, y0 + 10); g.lineTo(W - 6, y1); g.closePath(); const gr = g.createLinearGradient(0, y0, 0, y1); gr.addColorStop(0, '#1f5cc0'); gr.addColorStop(0.35, '#17479f'); gr.addColorStop(1, '#0e2f74'); g.shadowColor = 'rgba(0,0,0,0.45)'; g.shadowBlur = 20; g.shadowOffsetY = 6; g.fillStyle = gr; g.fill(); g.shadowColor = 'transparent'; // foam along the edge: a light band + white dots and a few sparkles const R2 = rng((st.seed || 3) + 7); g.strokeStyle = 'rgba(160,205,255,0.9)'; g.lineWidth = 5; g.beginPath(); for (let x = 0; x <= W; x += 12) { const y = y0 + wave(x) + 2; x ? g.lineTo(x, y) : g.moveTo(x, y); } g.stroke(); for (let k = 0; k < 70; k++) { const x = R2() * W, y = y0 + 6 + R2() * 18 - 4; g.fillStyle = `rgba(255,255,255,${0.35 + R2() * 0.6})`; g.beginPath(); g.arc(x, y + Math.sin(x * 0.045 + 1.3) * 6, 1.5 + R2() * 3, 0, 7); g.fill(); } for (let k = 0; k < 10; k++) { const x = R2() * W, y = y0 + 30 + R2() * (H - 50); g.fillStyle = `rgba(190,220,255,${0.25 + R2() * 0.3})`; g.beginPath(); g.arc(x, y, 1.5 + R2() * 2.5, 0, 7); g.fill(); } // text g.fillStyle = '#ffffff'; g.textAlign = 'left'; g.textBaseline = 'middle'; g.shadowColor = 'rgba(0,10,40,0.5)'; g.shadowBlur = 6; g.shadowOffsetY = 2; // the words only show once the panel has landed (and leave before it slides out), so no text crosses the safe edge const ta = clamp((inK - 0.986) / 0.014) * (outK > 0 ? 0 : 1); if (ta > 0) { g.globalAlpha = ta; st.lines.forEach((l, i) => { const y = y0 + padT + (i + 0.5) * lh; g.fillText(l, 72, y); mark(g, 'chyron', l, 72, y - size * 0.5, g.measureText(l).width, size); }); } g.restore(); } // ---------- speech bubble: a white ring with a drawn avatar and a little tail (x, y = the point it hangs over) ---------- // st: { at, out, r (radius, px), img (canvas), tail: 'down' | 'downL' | 'downR' } export function bubble(g, x, y, st, t) { if (!st || t < st.at || !st.img) return; const k = seg(t, st.at, st.at + 0.22), outK = st.out != null ? seg(t, st.out, st.out + 0.12) : 0; if (outK >= 1) return; const s = easeOutBack(k, 2.4) * (1 - outK), r = (st.r || 82) * s; if (r < 1) return; const bob = Math.sin((t - st.at) * 3.1 + (st.seed || 0)) * 3, cy = y - r - 28 + bob; g.save(); g.shadowColor = 'rgba(0,0,0,0.42)'; g.shadowBlur = 18; g.shadowOffsetY = 6; g.fillStyle = '#ffffff'; const tx = st.tail === 'downR' ? 0.45 : st.tail === 'downL' ? -0.45 : 0; g.beginPath(); g.arc(x, cy, r + 9 * s, 0, Math.PI * 2); g.fill(); g.beginPath(); g.moveTo(x + (tx * r) - 16 * s, cy + r * 0.8); g.lineTo(x + tx * r * 1.4, cy + r + 30 * s); g.lineTo(x + (tx * r) + 18 * s, cy + r * 0.78); g.closePath(); g.fill(); g.shadowColor = 'transparent'; g.beginPath(); g.arc(x, cy, r, 0, Math.PI * 2); g.clip(); g.drawImage(st.img, x - r, cy - r, r * 2, r * 2); g.restore(); g.save(); g.lineWidth = 3 * s; g.strokeStyle = 'rgba(40,30,25,0.35)'; g.beginPath(); g.arc(x, cy, r, 0, Math.PI * 2); g.stroke(); g.restore(); } // ---------- the COMMENT bubble (CTA): a big puffy white bubble, "COMMENT" + the keyword in red, a burst and sparkles ---------- // C: { at, word, x, y } export function commentBubble(g, t, C, starImg) { if (!C || t < C.at) return; const k = seg(t, C.at, C.at + 0.28), s = easeOutBack(k, 2.0), x = C.x ?? SAFE.cx, y = C.y ?? 1010, w = 600, h = 300; g.save(); g.translate(x, y); g.scale(s, s); // burst ring const bk = seg(t, C.at, C.at + 0.5); if (bk < 1) { g.save(); g.globalAlpha = 1 - bk; g.strokeStyle = '#ffffff'; g.lineWidth = 8 * (1 - bk) + 2; g.beginPath(); for (let a = 0; a <= 40; a++) { const ang = a / 40 * Math.PI * 2, rr = (1 + bk * 0.5) * (w / 2) * (a % 2 ? 0.92 : 1.05); g.lineTo(Math.cos(ang) * rr, Math.sin(ang) * rr * 0.62); } g.closePath(); g.stroke(); for (let a = 0; a < 12; a++) { const ang = a / 12 * Math.PI * 2, r0 = w * 0.34 * (1 + bk), r1 = r0 + 60; g.beginPath(); g.moveTo(Math.cos(ang) * r0, Math.sin(ang) * r0 * 0.62); g.lineTo(Math.cos(ang) * r1, Math.sin(ang) * r1 * 0.62); g.stroke(); } g.restore(); } g.shadowColor = 'rgba(0,0,0,0.35)'; g.shadowBlur = 30; g.shadowOffsetY = 10; const gr = g.createLinearGradient(0, -h / 2, 0, h / 2); gr.addColorStop(0, 'rgba(255,255,255,0.97)'); gr.addColorStop(1, 'rgba(232,230,240,0.95)'); g.fillStyle = gr; g.beginPath(); g.ellipse(0, 0, w / 2, h / 2, 0, 0, Math.PI * 2); g.fill(); g.beginPath(); g.moveTo(-w * 0.26, h * 0.32); g.lineTo(-w * 0.34, h * 0.68); g.lineTo(-w * 0.08, h * 0.44); g.closePath(); g.fill(); g.shadowColor = 'transparent'; g.fillStyle = '#7d7a86'; g.font = `34px ${FONT.sans}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.letterSpacing = '3px'; g.fillText('COMMENT', 0, -64); mark(g, 'comment', 'COMMENT', -100, -84, 200, 40); g.letterSpacing = '-1px'; const size = fit(g, C.word, FONT.sans, w - 120, 128, 60); g.font = `${size}px ${FONT.sans}`; const wg = g.createLinearGradient(0, -size / 2, 0, size / 2); wg.addColorStop(0, '#ff6a5a'); wg.addColorStop(1, '#d42f2f'); g.fillStyle = 'rgba(120,20,20,0.25)'; g.fillText(C.word, 4, 34 + 5); g.fillStyle = wg; g.fillText(C.word, 0, 34); const ww = g.measureText(C.word).width; mark(g, 'comment', C.word, -ww / 2, 34 - size * 0.5, ww, size); g.restore(); // sparkles twinkling around it if (starImg) for (let i = 0; i < 6; i++) { const ph = (t - C.at) * 4 + i * 1.7, a = Math.max(0, Math.sin(ph)); if (a <= 0 || k < 0.6) continue; const ang = i / 6 * Math.PI * 2 + 0.4, px = x + Math.cos(ang) * (w * 0.55), py = y + Math.sin(ang) * (h * 0.62), ss = 26 + 26 * a; g.save(); g.globalAlpha = a; g.translate(px, py); g.rotate(ph * 0.3); g.drawImage(starImg, -ss / 2, -ss / 2, ss, ss); g.restore(); } } // ---------- paper plane (the DM) flying off to the top right — decoration, not text ---------- export function plane(g, t, t0, x0, y0) { if (t < t0 || t > t0 + 0.95) return; const k = seg(t, t0, t0 + 0.9), e = easeOut(k); const x = lerp(x0, 1180, e) - Math.sin(k * Math.PI) * 80, yy = lerp(y0, 380, e) - Math.sin(k * Math.PI) * 160; g.save(); g.translate(x, yy); g.rotate(-0.6 + k * 0.4); g.globalAlpha = 1 - seg(k, 0.82, 1); g.shadowColor = 'rgba(0,0,0,0.4)'; g.shadowBlur = 14; g.fillStyle = '#ffffff'; g.beginPath(); g.moveTo(-60, 0); g.lineTo(66, -36); g.lineTo(-12, 41); g.lineTo(-17, 12); g.closePath(); g.fill(); g.fillStyle = '#d7dbe3'; g.beginPath(); g.moveTo(-17, 12); g.lineTo(66, -36); g.lineTo(-12, 41); g.closePath(); g.fill(); g.restore(); } ``` ### `engine/look.js` ```js // Lights + grade per set, as dials a video turns over time. Engine file. // set 'studio' | 'corridor' | 'felt' | 'brick' | 'office' (which set's lights are on; world(t) shows that set) // lit 0..1 studio windows from cool night blue to warm glowing orange (+ warm window lights, warm grade) // spot 0..1 the stage spotlight; key 0..2 multiplies the key light; fire 0..1 the fire light // warm 0..1 extra warm grade; exposure multiplies import { lerp } from './lib.js'; export function applyLook(E, t, o = {}) { const { R, post } = E, set = o.set || 'studio', lit = o.lit ?? 0; for (const [n, g] of Object.entries({ studio: R.studioLights, corridor: R.corLights, felt: R.feltLights, brick: R.brickLights, office: R.officeLights })) if (g) g.visible = n === set; const wA = Math.min(1, (o.warm ?? 0) + (set === 'studio' ? lit * 0.3 : set === 'corridor' ? 0.35 : 0.1)); post.U.wA.value = wA; post.F.wA.value = wA; post.U.wM.value = 0; post.F.wM.value = 0; post.U.bloom.value = o.bloom ?? (set === 'studio' ? lerp(0.4, 0.36, lit) : set === 'corridor' ? 0.5 : 0.26); post.U.exposure.value = (o.exposure ?? 1) * (set === 'studio' ? lerp(0.95, 1.05, lit) : set === 'corridor' ? 1.0 : 1.08); if (set === 'studio') { for (const m of R.winMats) { m.uniforms.k.value = lit; m.uniforms.gain.value = o.winGain ?? 0.85; } R.key.position.set(...(o.keyPos || [4, 11, 9])); R.key.intensity = 300 * (o.key ?? 1) * lerp(0.85, 1, lit); R.key.color.setRGB(1, lerp(0.82, 0.78, lit), lerp(0.7, 0.58, lit)); R.hemi.color.setRGB(lerp(0.42, 0.62, lit), lerp(0.5, 0.52, lit), lerp(0.9, 0.62, lit)); R.hemi.groundColor.setRGB(0.06, 0.05, 0.08); R.hemi.intensity = lerp(0.5, 0.42, lit); R.rim.intensity = lerp(1.4, 0.9, lit); for (const l of R.winLights) l.intensity = 16 * lit; R.spot.intensity = 110 * (o.spot ?? 0); R.fill.intensity = lerp(0.55, 0.7, lit); } R.fireLight.intensity = 14 * (o.fire ?? 0); } ``` ### `engine/post.js` ```js // Post pipeline: scene (MSAA + depth) -> bloom chain -> comp (DOF, bloom, tone map, grade) -> final (whip/zoom blur, CA, leak, flash, vignette, overlay, grain). // Engine file: a video never edits this. Grain is kept light (0.028) because it decides the file size; flash is capped by flashMax. import { FLASH_MAX, GRAIN } from './fx.js'; import * as THREE from 'three'; const VS = 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); }'; export function makePost(renderer, W, H) { const cam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2)); const fsScene = new THREE.Scene(); fsScene.add(quad); const pass = (frag, uniforms) => new THREE.ShaderMaterial({ vertexShader: VS, fragmentShader: frag, uniforms, depthTest: false, depthWrite: false }); const run = (m, target) => { quad.material = m; renderer.setRenderTarget(target); renderer.render(fsScene, cam); }; const rt = (w, h, o = {}) => new THREE.WebGLRenderTarget(w, h, { type: THREE.HalfFloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, ...o }); const depthTex = new THREE.DepthTexture(W, H); depthTex.type = THREE.FloatType; const rtScene = rt(W, H, { samples: 4, depthTexture: depthTex }); const rtBright = rt(W / 2, H / 2); const levels = [4, 8, 16].map(d => [rt(W / d, H / d), rt(W / d, H / d)]); const rtC = rt(W, H); const rtF = [0, 1].map(() => new THREE.WebGLRenderTarget(W, H, { type: THREE.UnsignedByteType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter })); const brightM = pass(`varying vec2 vUv; uniform sampler2D t; uniform float thr; void main(){ vec3 c = texture2D(t, vUv).rgb; float l = max(c.r, max(c.g, c.b)); gl_FragColor = vec4(c * smoothstep(thr, thr + 0.6, l), 1.); }`, { t: { value: null }, thr: { value: 0.9 } }); const copyM = pass(`varying vec2 vUv; uniform sampler2D t; uniform vec2 px; void main(){ vec3 c = texture2D(t, vUv + px*vec2(-.5,-.5)).rgb + texture2D(t, vUv + px*vec2(.5,-.5)).rgb + texture2D(t, vUv + px*vec2(-.5,.5)).rgb + texture2D(t, vUv + px*vec2(.5,.5)).rgb; gl_FragColor = vec4(c*.25, 1.); }`, { t: { value: null }, px: { value: new THREE.Vector2() } }); const blurM = pass(`varying vec2 vUv; uniform sampler2D t; uniform vec2 dir; void main(){ vec3 c = texture2D(t, vUv).rgb * 0.227027; c += (texture2D(t, vUv + dir*1.3846).rgb + texture2D(t, vUv - dir*1.3846).rgb) * 0.3162162; c += (texture2D(t, vUv + dir*3.2308).rgb + texture2D(t, vUv - dir*3.2308).rgb) * 0.0702703; gl_FragColor = vec4(c, 1.); }`, { t: { value: null }, dir: { value: new THREE.Vector2() } }); const U = { tScene: { value: rtScene.texture }, tDepth: { value: depthTex }, b1: { value: levels[0][0].texture }, b2: { value: levels[1][0].texture }, b3: { value: levels[2][0].texture }, res: { value: new THREE.Vector2(W, H) }, near: { value: 0.1 }, far: { value: 200 }, focus: { value: 5 }, aperture: { value: 10 }, maxBlur: { value: 16 }, bloom: { value: 0.55 }, exposure: { value: 1 }, wA: { value: 0 }, wM: { value: 0 }, }; const compM = pass(`varying vec2 vUv; uniform sampler2D tScene, tDepth, b1, b2, b3; uniform vec2 res; uniform float near, far, focus, aperture, maxBlur, bloom, exposure, wA, wM; float linZ(float d){ float z = d * 2. - 1.; return 2. * near * far / (far + near - z * (far - near)); } float coc(float z){ return clamp(aperture * abs(1. - focus / z), 0., maxBlur); } vec3 aces(vec3 x){ return clamp((x*(2.51*x+0.03))/(x*(2.43*x+0.59)+0.14), 0., 1.); } void main(){ float z = linZ(texture2D(tDepth, vUv).x); float c0 = coc(z); vec3 acc = texture2D(tScene, vUv).rgb; float ws = 1.; if (c0 > 0.6) { for (int i = 1; i < 40; i++) { float r = sqrt(float(i) / 40.); float a = float(i) * 2.39996; vec2 o = vec2(cos(a), sin(a)) * r * c0 / res; float sz = linZ(texture2D(tDepth, vUv + o).x); float sc = coc(sz); float w = sz < z ? smoothstep(r * c0 - 1.5, r * c0, sc + 1.) : 1.; w = max(w, 0.15); acc += texture2D(tScene, vUv + o).rgb * w; ws += w; } } vec3 col = acc / ws; col += (texture2D(b1, vUv).rgb * 0.5 + texture2D(b2, vUv).rgb * 0.8 + texture2D(b3, vUv).rgb * 1.1) * bloom; col *= exposure; col *= mix(vec3(1.), vec3(1.16, 1.0, 0.8), wA); col *= mix(vec3(1.), vec3(0.78, 0.9, 1.12), wM); col = aces(col); col = pow(col, vec3(1. / 2.2)); float l = dot(col, vec3(0.2126, 0.7152, 0.0722)); float sat = 1.1 - 0.05 * wA - 0.5 * wM; col = mix(vec3(l), col, sat); float con = 1.04 - 0.08 * wA + 0.22 * wM; col = (col - 0.5) * con + 0.5; col += vec3(0.04, 0.022, 0.01) * wA + vec3(0.0, 0.01, 0.028) * wM; gl_FragColor = vec4(clamp(col, 0., 1.), 1.); }`, U); const F = { tC: { value: rtC.texture }, tO: { value: null }, oOn: { value: 1 }, oShift: { value: new THREE.Vector2() }, res: { value: new THREE.Vector2(W, H) }, ca: { value: 1.0 }, vig: { value: 0.36 }, grain: { value: GRAIN }, time: { value: 0 }, mbDir: { value: new THREE.Vector2() }, zoom: { value: 0 }, zoomC: { value: new THREE.Vector2(0.5, 0.5) }, leak: { value: 0 }, leakX: { value: 0 }, flash: { value: 0 }, flashMax: { value: FLASH_MAX }, flashCol: { value: new THREE.Color(1, 1, 1) }, wM: { value: 0 }, wA: { value: 0 }, fade: { value: 1 }, }; const finalM = pass(`varying vec2 vUv; uniform sampler2D tC, tO; uniform float oOn, ca, vig, grain, time, zoom, leak, leakX, flash, flashMax, wM, wA, fade; uniform vec2 oShift, res, mbDir, zoomC; uniform vec3 flashCol; float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } vec3 caS(vec2 uv){ vec2 d = uv - 0.5; float r2 = dot(d, d); vec2 off = d * r2 * ca * 4.0 / res.x * 6.0; return vec3(texture2D(tC, uv + off).r, texture2D(tC, uv).g, texture2D(tC, uv - off).b); } void main(){ vec2 uv = vUv; vec3 col; float mb = length(mbDir) + zoom; if (mb > 0.0005) { col = vec3(0.); for (int k = 0; k < 16; k++) { float f = float(k) / 15. - 0.5; vec2 o = mbDir * f + (uv - zoomC) * zoom * f; col += caS(uv + o); } col /= 16.; } else col = caS(uv); // warm light leak sweeping across (aesthetic warm-up) if (leak > 0.) { float x = uv.x * 0.8 + uv.y * 0.35 - leakX; float g = exp(-x * x * 9.) ; vec3 lc = mix(vec3(1.0, 0.55, 0.25), vec3(1.0, 0.85, 0.55), uv.y); col += lc * g * leak * 0.9; col = mix(col, col * vec3(1.06, 1.0, 0.92), leak * 0.4); } // vignette vec2 d = uv - 0.5; d.x *= res.x / res.y; float v = smoothstep(0.95, 0.25, length(d) * (1.0 + 0.35 * wM)); col *= mix(1. - vig - 0.25 * wM, 1., v); // halation glow in aesthetic col = mix(col, 1. - (1. - col) * (1. - col * vec3(0.18, 0.08, 0.02)), wA * 0.6); // flash: capped and eased toward white so a lightning hit never washes the frame out float fl = min(flash, flashMax); col += flashCol * fl * (1.0 - 0.55 * col); // overlay (straight alpha, display space) if (oOn > 0.5) { vec4 o = texture2D(tO, uv - oShift / res); col = mix(col, o.rgb, o.a); } col += (h(uv * res + fract(time * 7.13) * 91.7) - 0.5) * grain; col *= fade; gl_FragColor = vec4(clamp(col, 0., 1.), 1.); }`, F); function render(scene, camera, target, o = {}) { U.near.value = camera.near; U.far.value = camera.far; renderer.setRenderTarget(rtScene); renderer.render(scene, camera); brightM.uniforms.t.value = rtScene.texture; run(brightM, rtBright); let src = rtBright; for (const [a, b] of levels) { copyM.uniforms.t.value = src.texture; copyM.uniforms.px.value.set(1 / src.width, 1 / src.height); run(copyM, a); blurM.uniforms.t.value = a.texture; blurM.uniforms.dir.value.set(1 / a.width, 0); run(blurM, b); blurM.uniforms.t.value = b.texture; blurM.uniforms.dir.value.set(0, 1 / a.height); run(blurM, a); src = a; } run(compM, rtC); run(finalM, target); } return { U, F, render, rtF, brightM }; } ``` ### `engine/camera.js` ```js // Camera from a video's SHOTS list. Engine file. // A shot: { t: [start, end], P: [[t, [x,y,z], ease?], ...], L: [[t, [x,y,z], ease?], ...], fov, fov1?, ap, sh, up?, focus?, fit?, frameY? } // P = camera position keys, L = look-at keys (put L ON the subject: it is also the focus distance). // fit = how many world units the frame must hold across at L (default FIT). The camera is pushed back // along its own line until that fits, so a close-up can never get tighter than that. fit: 0 = off (screen inserts). // frameY = where L lands on screen, as a fraction of the height (default FRAME_Y, a lens shift: the subject sits above // the terminal bar and the caption band instead of behind them). 0.5 = centre. import { lerp, seg, easeInOut, fbm1 } from './lib.js'; export const FRAME_Y = 0.44; // subject at y ≈ 845 of 1920; terminal ≈ 1092, captions 1150–1480 export const FIT = 1.8; // a Claude with arms is ~1.5 wide → it fills ≤ ~80 % of the width (the source's 1.2-unit close-up cut it off) export function keysE(t, K) { // [[t, value, ease?], ...] if (t <= K[0][0]) return K[0][1]; for (let i = 1; i < K.length; i++) if (t < K[i][0]) { const e = K[i][2] || easeInOut; const k = e(seg(t, K[i - 1][0], K[i][0])); const a = K[i - 1][1], b = K[i][1]; return Array.isArray(a) ? a.map((v, j) => lerp(v, b[j], k)) : lerp(a, b, k); } return K.at(-1)[1]; } export const shotIndex = (SHOTS, t) => { const i = SHOTS.findIndex(s => t >= s.t[0] && t < s.t[1]); return i < 0 ? SHOTS.length - 1 : i; }; // closest camera-to-target distance at which `fit` world units fill the frame's width (portrait: the width is the tight side) export function minDistance(fovDeg, aspect, fit = FIT) { return fit / (2 * Math.tan(fovDeg * Math.PI / 360) * aspect); } export function placeCamera(E, SHOTS, IMPULSE, t) { const { camera, post } = E; const i = shotIndex(SHOTS, t), s = SHOTS[i]; let p = keysE(t, s.P); const l = keysE(t, s.L); const fov = s.fov1 != null ? lerp(s.fov, s.fov1, easeInOut(seg(t, s.t[0], s.t[1]))) : s.fov; let d = Math.hypot(p[0] - l[0], p[1] - l[1], p[2] - l[2]), clamped = 0; const fit = s.fit ?? FIT; if (fit > 0) { const md = minDistance(fov, camera.aspect, fit); if (d < md - 1e-4) { const k = md / d; p = p.map((v, j) => l[j] + (v - l[j]) * k); clamped = md - d; d = md; } } const sh = s.sh || 0; const hp = [fbm1(t * 0.55, 1) * sh * 6, fbm1(t * 0.55, 2) * sh * 4, fbm1(t * 0.5, 4) * sh * 3], hl = [fbm1(t * 0.5, 3) * sh * 3, fbm1(t * 0.5, 5) * sh * 3, 0]; let im = 0; for (const [t0, a] of IMPULSE) if (t >= t0 && t < t0 + 0.5) im += a * Math.exp(-(t - t0) * 12) * Math.sin((t - t0) * 70); camera.position.set(p[0] + hp[0], p[1] + hp[1] + im, p[2] + hp[2]); camera.up.set(...(s.up || [0, 1, 0])); camera.lookAt(l[0] + hl[0], l[1] + hl[1] + im * 0.6, l[2]); const dy = Math.round((0.5 - (s.frameY ?? FRAME_Y)) * E.H); if (dy) camera.setViewOffset(E.W, E.H, 0, dy, E.W, E.H); else camera.clearViewOffset(); camera.fov = fov; camera.updateProjectionMatrix(); post.U.focus.value = s.focus || d; post.U.aperture.value = s.ap; return { shot: i, clamped }; } ``` ### `engine/fx.js` ```js // Post-effect helpers for a video's effects(t): zoom punches, whip blur, flashes, overlay shake. // Engine file. The caps below are the engine's defaults: a video can't wash the frame out by accident. import { seg, easeIn } from './lib.js'; export const FLASH_MAX = 0.24; // strongest full-frame flash (additive, display space). 0.55 washed the frame white for 3 frames. export const LIGHTNING_MAX = 2.2; // strongest 3D lightning light (the source used 6 → white-out with bloom) export const GRAIN = 0.028; // film grain amount. 0.045 doubled the file size (113 MB for 55 s). // [[t0, amount, [r,g,b]?], ...] → { v, col }: the strongest flash at t, decaying fast, capped at FLASH_MAX export function flash(t, list, { dur = 0.35, decay = 14 } = {}) { let v = 0, col = [1, 1, 1]; for (const [f0, a, c] of list) if (t >= f0 && t < f0 + dur) { const x = a * Math.exp(-(t - f0) * decay); if (x > v) { v = x; col = c || [1, 1, 1]; } } return { v: Math.min(v, FLASH_MAX), col }; } // [[t0, amount], ...] → 0..1 decaying pulse (lightning light, sparks) export function pulse(t, list, decay = 16, dur = 0.3) { let v = 0; for (const [f0, a] of list) if (t >= f0 && t < f0 + dur) v = Math.max(v, a * Math.exp(-(t - f0) * decay)); return v; } // zoom punch into a cut: punchIn(t, cutT, lead, amount) ramps up before the cut, punchOut settles after it export const punchIn = (t, cut, lead, amt) => t >= cut - lead && t < cut ? amt * easeIn(seg(t, cut - lead, cut)) : 0; export const punchOut = (t, cut, dur, amt) => t >= cut && t < cut + dur ? amt * (1 - seg(t, cut, cut + dur)) : 0; // [[t0, dx, dy], ...] → motion-blur direction around whip cuts (±0.1 s) export function whips(t, list, half = 0.1) { for (const [t0, dx, dy] of list) { const k = Math.abs(t - t0); if (k < half) { const a = 1 - k / half; return [dx * a, dy * a]; } } return [0, 0]; } // overlay shake on slams: [t0, ...] → [sx, sy] in px export function shake(t, list, amp = 16) { let sx = 0, sy = 0; for (const s0 of list) if (t >= s0 && t < s0 + 0.3) { const a = amp * Math.exp(-(t - s0) * 14); sx += Math.sin((t - s0) * 90) * a; sy += Math.cos((t - s0) * 70) * a; } return [sx, sy]; } // write everything to the post pass export function apply(E, t, o = {}) { const F = E.post.F; F.zoom.value = o.zoom || 0; F.zoomC.value.set(...(o.zoomC || [0.5, 0.5])); F.mbDir.value.set(...(o.whip || [0, 0])); F.leak.value = o.leak || 0; F.leakX.value = o.leakX || 0; const fl = o.flash || { v: 0, col: [1, 1, 1] }; F.flash.value = Math.min(fl.v, FLASH_MAX); F.flashCol.value.setRGB(...fl.col); F.oShift.value.set(...(o.shake || [0, 0])); F.time.value = t; F.fade.value = o.fade ?? 1; } ``` ### `engine/common.mjs` ```js // Shared bits for the Node scripts. Usage everywhere: node engine/