@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/catalog.json

@@ -0,0 +1,2253 @@
+[
+  {
+    "id": "creator-motion",
+    "num": "01",
+    "name": "Creator Motion Graphics",
+    "family": "Kinetic Type",
+    "look": "The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.",
+    "how": "Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.",
+    "fonts": "Anton, Instrument Serif (italic), Inter",
+    "demo": "How to land your first client",
+    "replace": "TL, CUTS, PUNCH, SHAKE, FLASH, LEAK, PUSH, the value curves, the scene functions, SCENES, the chrome() label text and scoreSound()",
+    "keep": "slam, row, swipe, slamMarked, strike, scribble, handArrow, drawYaw, bubble, background, finishing and the compositor",
+    "sizes": "keep statement text at 80 px or more, any label the story depends on at 28 px or more, and key numbers at 120 px or more",
+    "voLine": "Every on-screen word slams in at the start of its spoken word, within 0.03 s. Show 2 to 6 key words per sentence, not a full transcript.",
+    "full": "- Full mix (no voiceover): keep the music, have at most about 3 sounds at once, and leave a moment of near-silence before the biggest hit.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark small sounds (pops, ticks, markers, keys) soft: true. Keep booms for the 2 or 3 biggest moments, never put a riser over a spoken sentence, and keep the drone out from under speech.",
+    "sheet": [
+      "Surface: a near-black editing-room background with slow warm and cool glows, a faint drifting grid, a vignette and film grain stepped at 24 fps. Run background() and finishing() on every frame at the reference’s strength.",
+      "Type: Anton in caps for statements, set big (80 to 220 px). Instrument Serif italic in yellow for the one soft or emotional phrase. Inter for labels and small supporting lines. At most one yellow word per line; green only for money and growth numbers; red only for the wrong idea.",
+      "How things appear: words slam in one at a time (large and blurred, settling with an expo ease). Cards, chips and pills pop with overshoot. Mockups swing in with a 3D tilt (drawYaw) or slide up from below.",
+      "Emphasis: punch zoom plus shake on the hardest words; a yellow highlighter swipe that turns the word dark; a hand-drawn circle and arrow onto the thing that matters; a red strike-through for the wrong idea; a stamp for a flat rejection.",
+      "Numbers: a rolling counter in green with a glow. When it locks: a boom, a white flash, a light leak and spark streaks.",
+      "Proof shots: stylized mockups drawn in code (browser pages, phone chats, dashboards, cards) with invented, generic names. No real logos, brand names or real people, and nothing that would pass as a real receipt or a real message. Label figures as examples when they are illustrative.",
+      "Scene changes: every new idea gets a cut, rotating between whip pans with motion blur, RGB glitches and flash cuts. Inside a scene keep things continuous: lines stack, shift up, get struck out, and new lines arrive.",
+      "Chrome: a small topic label at the top left, plus a STEP pill only when the content is a real sequence.",
+      "Pace: the hook lands in under 2 seconds, something new happens every 0.5 to 1.5 seconds, and the takeaway holds about 1.5 seconds at the end."
+    ],
+    "sound": [
+      "Music: a low drone and a riser into the first big word, the half-time beat (k.music) under the body, a tape stop on the wrong idea, and the beat back for the takeaway. Booms duck the music on their own.",
+      "Map events to the kit: word slams get \"slam\" (bigger word, more gain); pills, chips and cards get \"pop\"; cuts get \"whoosh\", \"glitch\" or a \"slam\" on the flash; highlighter and hand-drawn marks get \"marker\"; strike-throughs get \"strike\"; typing gets \"keys\"; a sent message \"send\", an incoming one \"ping\"; clicks \"click\"; counters \"tick\" only when the shown number changes and never more than 12 per second; the big number lands on \"boom\" + \"slam\" + \"shimmer\"; a rejection gets \"stamp\"."
+    ],
+    "sourceFile": "sources/creator-motion.html",
+    "promptFile": "prompts/creator-motion.md",
+    "sourceBytes": 65127,
+    "prompt": "I want an animated video in the \"Creator Motion Graphics\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, PUNCH, SHAKE, FLASH, LEAK, PUSH, the value curves, the scene functions, SCENES, the chrome() label text and scoreSound(). Keep and reuse the style's helpers (slam, row, swipe, slamMarked, strike, scribble, handArrow, drawYaw, bubble, background, finishing and the compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Instrument Serif (italic), Inter.\n\nTHE STYLE\n- Surface: a near-black editing-room background with slow warm and cool glows, a faint drifting grid, a vignette and film grain stepped at 24 fps. Run background() and finishing() on every frame at the reference’s strength.\n- Type: Anton in caps for statements, set big (80 to 220 px). Instrument Serif italic in yellow for the one soft or emotional phrase. Inter for labels and small supporting lines. At most one yellow word per line; green only for money and growth numbers; red only for the wrong idea.\n- How things appear: words slam in one at a time (large and blurred, settling with an expo ease). Cards, chips and pills pop with overshoot. Mockups swing in with a 3D tilt (drawYaw) or slide up from below.\n- Emphasis: punch zoom plus shake on the hardest words; a yellow highlighter swipe that turns the word dark; a hand-drawn circle and arrow onto the thing that matters; a red strike-through for the wrong idea; a stamp for a flat rejection.\n- Numbers: a rolling counter in green with a glow. When it locks: a boom, a white flash, a light leak and spark streaks.\n- Proof shots: stylized mockups drawn in code (browser pages, phone chats, dashboards, cards) with invented, generic names. No real logos, brand names or real people, and nothing that would pass as a real receipt or a real message. Label figures as examples when they are illustrative.\n- Scene changes: every new idea gets a cut, rotating between whip pans with motion blur, RGB glitches and flash cuts. Inside a scene keep things continuous: lines stack, shift up, get struck out, and new lines arrive.\n- Chrome: a small topic label at the top left, plus a STEP pill only when the content is a real sequence.\n- Pace: the hook lands in under 2 seconds, something new happens every 0.5 to 1.5 seconds, and the takeaway holds about 1.5 seconds at the end.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep statement text at 80 px or more, any label the story depends on at 28 px or more, and key numbers at 120 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How to land your first client\") unless my content asks for it.\n\nSOUND\n- Music: a low drone and a riser into the first big word, the half-time beat (k.music) under the body, a tape stop on the wrong idea, and the beat back for the takeaway. Booms duck the music on their own.\n- Map events to the kit: word slams get \"slam\" (bigger word, more gain); pills, chips and cards get \"pop\"; cuts get \"whoosh\", \"glitch\" or a \"slam\" on the flash; highlighter and hand-drawn marks get \"marker\"; strike-throughs get \"strike\"; typing gets \"keys\"; a sent message \"send\", an incoming one \"ping\"; clicks \"click\"; counters \"tick\" only when the shown number changes and never more than 12 per second; the big number lands on \"boom\" + \"slam\" + \"shimmer\"; a rejection gets \"stamp\".\n- Full mix (no voiceover): keep the music, have at most about 3 sounds at once, and leave a moment of near-silence before the biggest hit.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Creator Motion Graphics\nFamily: Kinetic Type\nLook: The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.\nHow it explains: Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.\n",
+    "promptVo": "I want an animated video in the \"Creator Motion Graphics\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Every on-screen word slams in at the start of its spoken word, within 0.03 s. Show 2 to 6 key words per sentence, not a full transcript.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, PUNCH, SHAKE, FLASH, LEAK, PUSH, the value curves, the scene functions, SCENES, the chrome() label text and scoreSound(). Keep and reuse the style's helpers (slam, row, swipe, slamMarked, strike, scribble, handArrow, drawYaw, bubble, background, finishing and the compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Instrument Serif (italic), Inter.\n\nTHE STYLE\n- Surface: a near-black editing-room background with slow warm and cool glows, a faint drifting grid, a vignette and film grain stepped at 24 fps. Run background() and finishing() on every frame at the reference’s strength.\n- Type: Anton in caps for statements, set big (80 to 220 px). Instrument Serif italic in yellow for the one soft or emotional phrase. Inter for labels and small supporting lines. At most one yellow word per line; green only for money and growth numbers; red only for the wrong idea.\n- How things appear: words slam in one at a time (large and blurred, settling with an expo ease). Cards, chips and pills pop with overshoot. Mockups swing in with a 3D tilt (drawYaw) or slide up from below.\n- Emphasis: punch zoom plus shake on the hardest words; a yellow highlighter swipe that turns the word dark; a hand-drawn circle and arrow onto the thing that matters; a red strike-through for the wrong idea; a stamp for a flat rejection.\n- Numbers: a rolling counter in green with a glow. When it locks: a boom, a white flash, a light leak and spark streaks.\n- Proof shots: stylized mockups drawn in code (browser pages, phone chats, dashboards, cards) with invented, generic names. No real logos, brand names or real people, and nothing that would pass as a real receipt or a real message. Label figures as examples when they are illustrative.\n- Scene changes: every new idea gets a cut, rotating between whip pans with motion blur, RGB glitches and flash cuts. Inside a scene keep things continuous: lines stack, shift up, get struck out, and new lines arrive.\n- Chrome: a small topic label at the top left, plus a STEP pill only when the content is a real sequence.\n- Pace: the hook lands in under 2 seconds, something new happens every 0.5 to 1.5 seconds, and the takeaway holds about 1.5 seconds at the end.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep statement text at 80 px or more, any label the story depends on at 28 px or more, and key numbers at 120 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How to land your first client\") unless my content asks for it.\n\nSOUND\n- Music: a low drone and a riser into the first big word, the half-time beat (k.music) under the body, a tape stop on the wrong idea, and the beat back for the takeaway. Booms duck the music on their own.\n- Map events to the kit: word slams get \"slam\" (bigger word, more gain); pills, chips and cards get \"pop\"; cuts get \"whoosh\", \"glitch\" or a \"slam\" on the flash; highlighter and hand-drawn marks get \"marker\"; strike-throughs get \"strike\"; typing gets \"keys\"; a sent message \"send\", an incoming one \"ping\"; clicks \"click\"; counters \"tick\" only when the shown number changes and never more than 12 per second; the big number lands on \"boom\" + \"slam\" + \"shimmer\"; a rejection gets \"stamp\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark small sounds (pops, ticks, markers, keys) soft: true. Keep booms for the 2 or 3 biggest moments, never put a riser over a spoken sentence, and keep the drone out from under speech.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Creator Motion Graphics\nFamily: Kinetic Type\nLook: The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.\nHow it explains: Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.\n"
+  },
+  {
+    "id": "chalk-talk",
+    "num": "02",
+    "name": "Chalk Talk",
+    "family": "Hand-Drawn",
+    "look": "A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.",
+    "how": "One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.",
+    "fonts": "Cabin Sketch (700), Kalam (400 and 700)",
+    "demo": "Get 1% better every day",
+    "replace": "TL, CAM, the counter curve (cntStep, cntVal, cntText), ITEMS, drawCounter(), WIPE and its timing, and scoreSound()",
+    "keep": "board(), tooth(), noise2, chalkLine, chalkText, layoutText, resample, quad, ellipse, wipeMask, the frame and tray, the chalk stick, the eraser, dust() and the compositor",
+    "sizes": "keep headings at 90 px or more, chalked writing at 56 px or more, labels at 36 px or more, and key numbers at 72 px or more",
+    "voLine": "Each line of chalk starts being written as its first word is spoken and finishes by the end of that phrase; a short label can land on a single word. Write the key phrase on the board, not the whole transcript.",
+    "full": "- Full mix (no voiceover): room tone, chalk and eraser sounds, and soft plucks on the big moments. No music.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chalk scratches and taps soft: true so they sit under the voice, keep the room tone very low, and keep plucks for the 2 or 3 biggest moments only.",
+    "sheet": [
+      "Surface: one long slate (BW wide, 720 tall) baked once with mottled green, faint chalk ghosts of old lessons and old eraser smears. The tooth pattern is punched out of the chalk layer every frame so strokes break like real chalk. Keep the wooden frame, the tray with chalk pieces, the classroom light falloff and the fine grain.",
+      "Writing: everything appears by being chalked on in order. Letters arrive one at a time with a little jitter; lines are drawn along their path with small skips. The chalk stick follows the tip whenever something is being written, and dust falls from it.",
+      "Type: Cabin Sketch for titles and the big takeaway, Kalam for equations, labels and notes. White chalk for content, yellow for the main idea and curves, pink for emphasis and key numbers, blue for side notes. Exponents and small marks use the dy offset on text parts.",
+      "Camera: one board, one continuous shot. The camera tracks along the slate to a fresh stretch for each new idea (CAM keys) and leans in gently on the key moment. No cuts.",
+      "Emphasis: pink rings around the key number or point, yellow underlines and brackets, chalk arrows that lead the eye along the board.",
+      "Numbers: re-chalked as they count (a fresh scrawl about 10 times a second), then ringed when they land.",
+      "Scene change: the felt eraser wipes a section back and forth, leaving a faint haze, and the next idea is written in the cleared space.",
+      "Diagrams: draw real charts to scale for the topic, with axes, labels and curves computed from the actual function.",
+      "Pace: something is always being written. Allow 0.4 to 1.2 seconds per line and hold the takeaway about 1.5 seconds."
+    ],
+    "sound": [
+      "Bed: quiet room tone only, no music. A double knock on the board can open the lesson.",
+      "Chalk: every word gets its own scratch (grainy band-passed noise bursts with a tap where the stick lands), timed by character position across its write window. Lines get one long scratch; rings and underlines a little louder. Use the score helpers tap, scratch, write and pluck, built on k.hiss and k.voice.",
+      "Counter: a short scratch each time the shown number changes. Eraser: a felt swish for each pass, panned with the eraser.",
+      "Big moments: soft plucked notes, two for a landed number and a rising arpeggio for the takeaway. Keep it gentle; this is a lesson, not a trailer."
+    ],
+    "sourceFile": "sources/chalk-talk.html",
+    "promptFile": "prompts/chalk-talk.md",
+    "sourceBytes": 48241,
+    "prompt": "I want an animated video in the \"Chalk Talk\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CAM, the counter curve (cntStep, cntVal, cntText), ITEMS, drawCounter(), WIPE and its timing, and scoreSound(). Keep and reuse the style's helpers (board(), tooth(), noise2, chalkLine, chalkText, layoutText, resample, quad, ellipse, wipeMask, the frame and tray, the chalk stick, the eraser, dust() and the compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Cabin Sketch (700), Kalam (400 and 700).\n\nTHE STYLE\n- Surface: one long slate (BW wide, 720 tall) baked once with mottled green, faint chalk ghosts of old lessons and old eraser smears. The tooth pattern is punched out of the chalk layer every frame so strokes break like real chalk. Keep the wooden frame, the tray with chalk pieces, the classroom light falloff and the fine grain.\n- Writing: everything appears by being chalked on in order. Letters arrive one at a time with a little jitter; lines are drawn along their path with small skips. The chalk stick follows the tip whenever something is being written, and dust falls from it.\n- Type: Cabin Sketch for titles and the big takeaway, Kalam for equations, labels and notes. White chalk for content, yellow for the main idea and curves, pink for emphasis and key numbers, blue for side notes. Exponents and small marks use the dy offset on text parts.\n- Camera: one board, one continuous shot. The camera tracks along the slate to a fresh stretch for each new idea (CAM keys) and leans in gently on the key moment. No cuts.\n- Emphasis: pink rings around the key number or point, yellow underlines and brackets, chalk arrows that lead the eye along the board.\n- Numbers: re-chalked as they count (a fresh scrawl about 10 times a second), then ringed when they land.\n- Scene change: the felt eraser wipes a section back and forth, leaving a faint haze, and the next idea is written in the cleared space.\n- Diagrams: draw real charts to scale for the topic, with axes, labels and curves computed from the actual function.\n- Pace: something is always being written. Allow 0.4 to 1.2 seconds per line and hold the takeaway about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headings at 90 px or more, chalked writing at 56 px or more, labels at 36 px or more, and key numbers at 72 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Get 1% better every day\") unless my content asks for it.\n\nSOUND\n- Bed: quiet room tone only, no music. A double knock on the board can open the lesson.\n- Chalk: every word gets its own scratch (grainy band-passed noise bursts with a tap where the stick lands), timed by character position across its write window. Lines get one long scratch; rings and underlines a little louder. Use the score helpers tap, scratch, write and pluck, built on k.hiss and k.voice.\n- Counter: a short scratch each time the shown number changes. Eraser: a felt swish for each pass, panned with the eraser.\n- Big moments: soft plucked notes, two for a landed number and a rising arpeggio for the takeaway. Keep it gentle; this is a lesson, not a trailer.\n- Full mix (no voiceover): room tone, chalk and eraser sounds, and soft plucks on the big moments. No music.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Chalk Talk\nFamily: Hand-Drawn\nLook: A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.\nHow it explains: One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Chalk Talk\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each line of chalk starts being written as its first word is spoken and finishes by the end of that phrase; a short label can land on a single word. Write the key phrase on the board, not the whole transcript.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CAM, the counter curve (cntStep, cntVal, cntText), ITEMS, drawCounter(), WIPE and its timing, and scoreSound(). Keep and reuse the style's helpers (board(), tooth(), noise2, chalkLine, chalkText, layoutText, resample, quad, ellipse, wipeMask, the frame and tray, the chalk stick, the eraser, dust() and the compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Cabin Sketch (700), Kalam (400 and 700).\n\nTHE STYLE\n- Surface: one long slate (BW wide, 720 tall) baked once with mottled green, faint chalk ghosts of old lessons and old eraser smears. The tooth pattern is punched out of the chalk layer every frame so strokes break like real chalk. Keep the wooden frame, the tray with chalk pieces, the classroom light falloff and the fine grain.\n- Writing: everything appears by being chalked on in order. Letters arrive one at a time with a little jitter; lines are drawn along their path with small skips. The chalk stick follows the tip whenever something is being written, and dust falls from it.\n- Type: Cabin Sketch for titles and the big takeaway, Kalam for equations, labels and notes. White chalk for content, yellow for the main idea and curves, pink for emphasis and key numbers, blue for side notes. Exponents and small marks use the dy offset on text parts.\n- Camera: one board, one continuous shot. The camera tracks along the slate to a fresh stretch for each new idea (CAM keys) and leans in gently on the key moment. No cuts.\n- Emphasis: pink rings around the key number or point, yellow underlines and brackets, chalk arrows that lead the eye along the board.\n- Numbers: re-chalked as they count (a fresh scrawl about 10 times a second), then ringed when they land.\n- Scene change: the felt eraser wipes a section back and forth, leaving a faint haze, and the next idea is written in the cleared space.\n- Diagrams: draw real charts to scale for the topic, with axes, labels and curves computed from the actual function.\n- Pace: something is always being written. Allow 0.4 to 1.2 seconds per line and hold the takeaway about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headings at 90 px or more, chalked writing at 56 px or more, labels at 36 px or more, and key numbers at 72 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Get 1% better every day\") unless my content asks for it.\n\nSOUND\n- Bed: quiet room tone only, no music. A double knock on the board can open the lesson.\n- Chalk: every word gets its own scratch (grainy band-passed noise bursts with a tap where the stick lands), timed by character position across its write window. Lines get one long scratch; rings and underlines a little louder. Use the score helpers tap, scratch, write and pluck, built on k.hiss and k.voice.\n- Counter: a short scratch each time the shown number changes. Eraser: a felt swish for each pass, panned with the eraser.\n- Big moments: soft plucked notes, two for a landed number and a rising arpeggio for the takeaway. Keep it gentle; this is a lesson, not a trailer.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chalk scratches and taps soft: true so they sit under the voice, keep the room tone very low, and keep plucks for the 2 or 3 biggest moments only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Chalk Talk\nFamily: Hand-Drawn\nLook: A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.\nHow it explains: One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.\n"
+  },
+  {
+    "id": "clean-tech",
+    "num": "03",
+    "name": "Clean Tech",
+    "family": "Kinetic Type",
+    "look": "A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.",
+    "how": "Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.",
+    "fonts": "Inter Tight (500 to 800), JetBrains Mono (500 and 700)",
+    "demo": "How AI agents get work done",
+    "replace": "TL, CUTS, BUMPS, the counter curve (stepCount), LOOP and ARCS, promptCard(), node(), the scene functions, SCENES and scoreSound()",
+    "keep": "the ui-kit helpers (rr, track, rise, riseLine, pillBehind, typed, softCard, checkMark, composite, padBed), background(), cam() and the vignette in explainer()",
+    "sizes": "keep statements at 78 px or more, card text at 26 px or more, mono labels at 18 px or more, and key numbers at 120 px or more",
+    "voLine": "Each word rises at the start of its spoken word, within 0.03 s, and the blue pill lands on the stressed word. Show 2 to 6 key words per sentence, not a full transcript.",
+    "full": "- Full mix (no voiceover): keep the soft pad with light hats, at most about 3 sounds at once, and a short gap before the takeaway pill.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark word ticks, pops and row ticks soft: true, keep swipes for the 2 or 3 key pills, and never put a riser over a spoken sentence.",
+    "sheet": [
+      "Surface: cool off-white (#f5f6f8) with a slowly drifting dot grid, a faint blue glow top right and a faint green glow bottom left, and a light vignette. Keep background() and the vignette on every frame.",
+      "Type: Inter Tight 800 for statements, centered or left aligned, never all caps. Inter Tight 500 to 700 for card text. JetBrains Mono in caps with letter spacing for small labels (THE SHIFT, TASKS, STEPS TAKEN). Ink #0d0f14, muted grey for secondary text, electric blue #2f5bff as the only accent, green #18b46b only for done and checked.",
+      "How things appear: each word rises from behind a mask with an expo ease (rise, riseLine). Cards slide up and fade in, nodes pop in with a small overshoot, text in input cards is typed with a blinking caret.",
+      "Emphasis: a blue pill grows behind the one key word and the word turns white (pillBehind). Small blue glows on whatever is active. A green check pops in for anything finished.",
+      "Diagrams: build ideas from small UI pieces drawn in code: white rounded cards (softCard), mono labels, progress bars, a dashed path with a travelling dot, a counter. Use invented, generic names for any companies or products.",
+      "Camera: a gentle push-in over each scene and a small bump when a pill lands (cam with BUMPS).",
+      "Scene changes: clean horizontal pushes for a new idea and a zoom-through into a detail (composite with CUTS). No glitches or flashes.",
+      "Pace: the hook lands in under 2 seconds, one new element every 0.3 to 1 second, and the takeaway holds about 1.5 seconds."
+    ],
+    "sound": [
+      "Bed: a soft synth pad (padBed) with light hats and a gentle kick under the body, dropping out for the hook and the ending.",
+      "Map events to the kit: rising words get a tiny glassy tick (rise1); blue pills get a clean swipe with a bell note; cards and nodes get \"pop\"; typing gets \"keys\" and sending gets \"send\"; scene pushes get \"whoosh\"; a zoom-through gets a short \"riser\" then a whoosh; finished tasks and checks get a two-note chime; counters \"tick\" only when the shown number changes."
+    ],
+    "sourceFile": "sources/clean-tech.html",
+    "promptFile": "prompts/clean-tech.md",
+    "sourceBytes": 47242,
+    "prompt": "I want an animated video in the \"Clean Tech\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, BUMPS, the counter curve (stepCount), LOOP and ARCS, promptCard(), node(), the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, typed, softCard, checkMark, composite, padBed), background(), cam() and the vignette in explainer()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter Tight (500 to 800), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Surface: cool off-white (#f5f6f8) with a slowly drifting dot grid, a faint blue glow top right and a faint green glow bottom left, and a light vignette. Keep background() and the vignette on every frame.\n- Type: Inter Tight 800 for statements, centered or left aligned, never all caps. Inter Tight 500 to 700 for card text. JetBrains Mono in caps with letter spacing for small labels (THE SHIFT, TASKS, STEPS TAKEN). Ink #0d0f14, muted grey for secondary text, electric blue #2f5bff as the only accent, green #18b46b only for done and checked.\n- How things appear: each word rises from behind a mask with an expo ease (rise, riseLine). Cards slide up and fade in, nodes pop in with a small overshoot, text in input cards is typed with a blinking caret.\n- Emphasis: a blue pill grows behind the one key word and the word turns white (pillBehind). Small blue glows on whatever is active. A green check pops in for anything finished.\n- Diagrams: build ideas from small UI pieces drawn in code: white rounded cards (softCard), mono labels, progress bars, a dashed path with a travelling dot, a counter. Use invented, generic names for any companies or products.\n- Camera: a gentle push-in over each scene and a small bump when a pill lands (cam with BUMPS).\n- Scene changes: clean horizontal pushes for a new idea and a zoom-through into a detail (composite with CUTS). No glitches or flashes.\n- Pace: the hook lands in under 2 seconds, one new element every 0.3 to 1 second, and the takeaway holds about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep statements at 78 px or more, card text at 26 px or more, mono labels at 18 px or more, and key numbers at 120 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How AI agents get work done\") unless my content asks for it.\n\nSOUND\n- Bed: a soft synth pad (padBed) with light hats and a gentle kick under the body, dropping out for the hook and the ending.\n- Map events to the kit: rising words get a tiny glassy tick (rise1); blue pills get a clean swipe with a bell note; cards and nodes get \"pop\"; typing gets \"keys\" and sending gets \"send\"; scene pushes get \"whoosh\"; a zoom-through gets a short \"riser\" then a whoosh; finished tasks and checks get a two-note chime; counters \"tick\" only when the shown number changes.\n- Full mix (no voiceover): keep the soft pad with light hats, at most about 3 sounds at once, and a short gap before the takeaway pill.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Clean Tech\nFamily: Kinetic Type\nLook: A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.\nHow it explains: Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.\n",
+    "promptVo": "I want an animated video in the \"Clean Tech\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each word rises at the start of its spoken word, within 0.03 s, and the blue pill lands on the stressed word. Show 2 to 6 key words per sentence, not a full transcript.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, BUMPS, the counter curve (stepCount), LOOP and ARCS, promptCard(), node(), the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, typed, softCard, checkMark, composite, padBed), background(), cam() and the vignette in explainer()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter Tight (500 to 800), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Surface: cool off-white (#f5f6f8) with a slowly drifting dot grid, a faint blue glow top right and a faint green glow bottom left, and a light vignette. Keep background() and the vignette on every frame.\n- Type: Inter Tight 800 for statements, centered or left aligned, never all caps. Inter Tight 500 to 700 for card text. JetBrains Mono in caps with letter spacing for small labels (THE SHIFT, TASKS, STEPS TAKEN). Ink #0d0f14, muted grey for secondary text, electric blue #2f5bff as the only accent, green #18b46b only for done and checked.\n- How things appear: each word rises from behind a mask with an expo ease (rise, riseLine). Cards slide up and fade in, nodes pop in with a small overshoot, text in input cards is typed with a blinking caret.\n- Emphasis: a blue pill grows behind the one key word and the word turns white (pillBehind). Small blue glows on whatever is active. A green check pops in for anything finished.\n- Diagrams: build ideas from small UI pieces drawn in code: white rounded cards (softCard), mono labels, progress bars, a dashed path with a travelling dot, a counter. Use invented, generic names for any companies or products.\n- Camera: a gentle push-in over each scene and a small bump when a pill lands (cam with BUMPS).\n- Scene changes: clean horizontal pushes for a new idea and a zoom-through into a detail (composite with CUTS). No glitches or flashes.\n- Pace: the hook lands in under 2 seconds, one new element every 0.3 to 1 second, and the takeaway holds about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep statements at 78 px or more, card text at 26 px or more, mono labels at 18 px or more, and key numbers at 120 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How AI agents get work done\") unless my content asks for it.\n\nSOUND\n- Bed: a soft synth pad (padBed) with light hats and a gentle kick under the body, dropping out for the hook and the ending.\n- Map events to the kit: rising words get a tiny glassy tick (rise1); blue pills get a clean swipe with a bell note; cards and nodes get \"pop\"; typing gets \"keys\" and sending gets \"send\"; scene pushes get \"whoosh\"; a zoom-through gets a short \"riser\" then a whoosh; finished tasks and checks get a two-note chime; counters \"tick\" only when the shown number changes.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark word ticks, pops and row ticks soft: true, keep swipes for the 2 or 3 key pills, and never put a riser over a spoken sentence.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Clean Tech\nFamily: Kinetic Type\nLook: A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.\nHow it explains: Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.\n"
+  },
+  {
+    "id": "software-walkthrough",
+    "num": "04",
+    "name": "Software Walkthrough",
+    "family": "Screen and UI",
+    "look": "A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.",
+    "how": "It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.",
+    "fonts": "DM Sans (400 to 700), DM Mono (400 and 500)",
+    "demo": "Your first automation in an invented app called Flowdesk",
+    "replace": "TL, CAM, CURSOR, STEP_NAMES, the app pieces (sidebar, header, homePage, emptyState, modal, editor), the spotlight calls in explainer(), titleCard(), notification(), outroCard() and scoreSound()",
+    "keep": "the ui-kit helpers (rr, track, rise, riseLine, typed, softCard, cursorArrow, checkMark, padBed), wallpaper(), appWindow() as the frame, spotlight(), cursor(), stepCallout() and the camera transform in explainer()",
+    "sizes": "keep the title card at 90 px or more, step callouts at 28 px, app text at 18 px or more (the camera zooms in on anything smaller), and the lower third at 40 px",
+    "voLine": "Each click lands on the spoken word that names it, the camera starts moving about 0.3 s before the thing it shows is mentioned, and each step pill appears as its step is introduced.",
+    "full": "- Full mix (no voiceover): keep the warm pad and soft hats, crisp clicks on every click, and a quiet moment before the result appears.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Keep clicks at full level (they are the proof), mark camera whooshes and ticks soft: true, and keep chimes for the step pills and the final result only.",
+    "sheet": [
+      "Surface: a desktop with a soft indigo to teal gradient wallpaper and two slow light blooms. On it, one app window (rounded, deep shadow) with a title bar, a sidebar and a main area. The whole UI is drawn in code, crisp and believable, for an invented app with an invented name. Never copy a real product’s UI, name or logo.",
+      "Type: DM Sans for all UI and titles (700 for headings and selected items, 400 to 500 for body), DM Mono in caps for tiny labels (WHEN, THEN, LIVE). Ink #14161c, muted #6a6f7c, one accent (#5b5bf6) for buttons, selection and the cursor ripple, green #1fb46e for live and success, yellow #ffd60a only for spotlight edges.",
+      "Cursor: a classic arrow that moves along eased waypoints (CURSOR keys), dips slightly on each click, and leaves an accent ripple. Every click has a visible result within 0.1 s: a pressed button, a selected row, an opened menu.",
+      "Camera: one continuous screen recording. Zoom in (1.2x to 1.6x) toward the area being used, hold, and ease back out to the full window between steps (CAM keys). The camera leads the cursor slightly.",
+      "Emphasis: a spotlight dims everything except a rounded cutout with a yellow edge around the one control that matters. Toasts, notifications and a side panel slide in to prove the result.",
+      "Chrome: a title card first (small mono tag, a big two-line title, a pill with the step count and time), a dark numbered step pill at the bottom left that swaps as each step starts, and a dark lower third with a green check at the end.",
+      "Flow: real UI behaviour in order: navigate, empty state, modal with choices, dropdown, continue, editor with connected nodes, typed fields, chips, a toggle that turns on, and the outcome happening (a new row, a message, a file).",
+      "Pace: 3 to 5 seconds per step, never more than one new action at a time, and a 1.5 second hold on the result."
+    ],
+    "sound": [
+      "Bed: a warm, slow pad (padBed) with soft hats while the steps run, no kick. It drops away under the title card for a moment.",
+      "Map events to the kit: every cursor click gets \"click\"; modals, menus, nodes and chips get \"pop\" (higher pitch for smaller things); typing gets \"keys\"; every camera zoom in or out gets a soft pink-noise swell; step pills get a two-note chime that climbs a little with each step; the toggle gets a short bright swish; a toast or the result gets a chime; an incoming notification gets \"ping\"; panels sliding in get a soft \"whoosh\"."
+    ],
+    "sourceFile": "sources/software-walkthrough.html",
+    "promptFile": "prompts/software-walkthrough.md",
+    "sourceBytes": 57846,
+    "prompt": "I want an animated video in the \"Software Walkthrough\" style (Screen and UI) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CAM, CURSOR, STEP_NAMES, the app pieces (sidebar, header, homePage, emptyState, modal, editor), the spotlight calls in explainer(), titleCard(), notification(), outroCard() and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, typed, softCard, cursorArrow, checkMark, padBed), wallpaper(), appWindow() as the frame, spotlight(), cursor(), stepCallout() and the camera transform in explainer()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: DM Sans (400 to 700), DM Mono (400 and 500).\n\nTHE STYLE\n- Surface: a desktop with a soft indigo to teal gradient wallpaper and two slow light blooms. On it, one app window (rounded, deep shadow) with a title bar, a sidebar and a main area. The whole UI is drawn in code, crisp and believable, for an invented app with an invented name. Never copy a real product’s UI, name or logo.\n- Type: DM Sans for all UI and titles (700 for headings and selected items, 400 to 500 for body), DM Mono in caps for tiny labels (WHEN, THEN, LIVE). Ink #14161c, muted #6a6f7c, one accent (#5b5bf6) for buttons, selection and the cursor ripple, green #1fb46e for live and success, yellow #ffd60a only for spotlight edges.\n- Cursor: a classic arrow that moves along eased waypoints (CURSOR keys), dips slightly on each click, and leaves an accent ripple. Every click has a visible result within 0.1 s: a pressed button, a selected row, an opened menu.\n- Camera: one continuous screen recording. Zoom in (1.2x to 1.6x) toward the area being used, hold, and ease back out to the full window between steps (CAM keys). The camera leads the cursor slightly.\n- Emphasis: a spotlight dims everything except a rounded cutout with a yellow edge around the one control that matters. Toasts, notifications and a side panel slide in to prove the result.\n- Chrome: a title card first (small mono tag, a big two-line title, a pill with the step count and time), a dark numbered step pill at the bottom left that swaps as each step starts, and a dark lower third with a green check at the end.\n- Flow: real UI behaviour in order: navigate, empty state, modal with choices, dropdown, continue, editor with connected nodes, typed fields, chips, a toggle that turns on, and the outcome happening (a new row, a message, a file).\n- Pace: 3 to 5 seconds per step, never more than one new action at a time, and a 1.5 second hold on the result.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep the title card at 90 px or more, step callouts at 28 px, app text at 18 px or more (the camera zooms in on anything smaller), and the lower third at 40 px. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Your first automation in an invented app called Flowdesk\") unless my content asks for it.\n\nSOUND\n- Bed: a warm, slow pad (padBed) with soft hats while the steps run, no kick. It drops away under the title card for a moment.\n- Map events to the kit: every cursor click gets \"click\"; modals, menus, nodes and chips get \"pop\" (higher pitch for smaller things); typing gets \"keys\"; every camera zoom in or out gets a soft pink-noise swell; step pills get a two-note chime that climbs a little with each step; the toggle gets a short bright swish; a toast or the result gets a chime; an incoming notification gets \"ping\"; panels sliding in get a soft \"whoosh\".\n- Full mix (no voiceover): keep the warm pad and soft hats, crisp clicks on every click, and a quiet moment before the result appears.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Software Walkthrough\nFamily: Screen and UI\nLook: A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.\nHow it explains: It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.\n",
+    "promptVo": "I want an animated video in the \"Software Walkthrough\" style (Screen and UI) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each click lands on the spoken word that names it, the camera starts moving about 0.3 s before the thing it shows is mentioned, and each step pill appears as its step is introduced.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CAM, CURSOR, STEP_NAMES, the app pieces (sidebar, header, homePage, emptyState, modal, editor), the spotlight calls in explainer(), titleCard(), notification(), outroCard() and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, typed, softCard, cursorArrow, checkMark, padBed), wallpaper(), appWindow() as the frame, spotlight(), cursor(), stepCallout() and the camera transform in explainer()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: DM Sans (400 to 700), DM Mono (400 and 500).\n\nTHE STYLE\n- Surface: a desktop with a soft indigo to teal gradient wallpaper and two slow light blooms. On it, one app window (rounded, deep shadow) with a title bar, a sidebar and a main area. The whole UI is drawn in code, crisp and believable, for an invented app with an invented name. Never copy a real product’s UI, name or logo.\n- Type: DM Sans for all UI and titles (700 for headings and selected items, 400 to 500 for body), DM Mono in caps for tiny labels (WHEN, THEN, LIVE). Ink #14161c, muted #6a6f7c, one accent (#5b5bf6) for buttons, selection and the cursor ripple, green #1fb46e for live and success, yellow #ffd60a only for spotlight edges.\n- Cursor: a classic arrow that moves along eased waypoints (CURSOR keys), dips slightly on each click, and leaves an accent ripple. Every click has a visible result within 0.1 s: a pressed button, a selected row, an opened menu.\n- Camera: one continuous screen recording. Zoom in (1.2x to 1.6x) toward the area being used, hold, and ease back out to the full window between steps (CAM keys). The camera leads the cursor slightly.\n- Emphasis: a spotlight dims everything except a rounded cutout with a yellow edge around the one control that matters. Toasts, notifications and a side panel slide in to prove the result.\n- Chrome: a title card first (small mono tag, a big two-line title, a pill with the step count and time), a dark numbered step pill at the bottom left that swaps as each step starts, and a dark lower third with a green check at the end.\n- Flow: real UI behaviour in order: navigate, empty state, modal with choices, dropdown, continue, editor with connected nodes, typed fields, chips, a toggle that turns on, and the outcome happening (a new row, a message, a file).\n- Pace: 3 to 5 seconds per step, never more than one new action at a time, and a 1.5 second hold on the result.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep the title card at 90 px or more, step callouts at 28 px, app text at 18 px or more (the camera zooms in on anything smaller), and the lower third at 40 px. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Your first automation in an invented app called Flowdesk\") unless my content asks for it.\n\nSOUND\n- Bed: a warm, slow pad (padBed) with soft hats while the steps run, no kick. It drops away under the title card for a moment.\n- Map events to the kit: every cursor click gets \"click\"; modals, menus, nodes and chips get \"pop\" (higher pitch for smaller things); typing gets \"keys\"; every camera zoom in or out gets a soft pink-noise swell; step pills get a two-note chime that climbs a little with each step; the toggle gets a short bright swish; a toast or the result gets a chime; an incoming notification gets \"ping\"; panels sliding in get a soft \"whoosh\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Keep clicks at full level (they are the proof), mark camera whooshes and ticks soft: true, and keep chimes for the step pills and the final result only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Software Walkthrough\nFamily: Screen and UI\nLook: A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.\nHow it explains: It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.\n"
+  },
+  {
+    "id": "data-story",
+    "num": "05",
+    "name": "Data Story",
+    "family": "Data",
+    "look": "A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.",
+    "how": "Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.",
+    "fonts": "Archivo (500 to 800), IBM Plex Mono (500 and 600)",
+    "demo": "How we got to 8 billion people (UN World Population Prospects)",
+    "replace": "the data (POP, BILLIONS, YEARS_PER), TL, CUTS, the X and Y scales, the scene functions, SCENES, the source line text and scoreSound()",
+    "keep": "the ui-kit helpers (rr, track, rise, riseLine, pillBehind, composite, padBed), background(), tag(), cam(), popAt() (monotone curve), inverseYear(), the counter and the bar, card and pill drawing patterns",
+    "sizes": "keep headlines at 50 px or more, the takeaway at 80 px or more, key numbers at 100 px or more, and axis labels at 16 px or more",
+    "voLine": "A number starts counting as it is spoken and locks on its last syllable; a line reaches each milestone as that year or value is said; each bar grows as its label is named.",
+    "full": "- Full mix (no voiceover): keep the low pad with a soft pulse, at most about 3 sounds at once, and a short gap before the big comparison lands.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark counter ticks and word ticks soft: true, keep the data plucks quiet and short, and keep \"boom\" for the single biggest number.",
+    "sheet": [
+      "Data first: use real, sourced numbers for my topic and plot them to scale (no invented values, no cropped axes that exaggerate). Put a short \"Source: ...\" line at the bottom left of every frame. If a figure is an estimate, say so in the narration or a label. If you cannot verify a number, ask me instead of guessing.",
+      "Surface: deep ink (#0f141c) with a faint coral glow top left and a faint teal glow bottom right, very subtle gridlines, and a vignette.",
+      "Type: Archivo 800 for headlines and big numbers, IBM Plex Mono for every label, axis value, unit and the source line, and a small coral mono tag in caps above each headline. Ink #eef1f5, muted #7d8796.",
+      "Color has meaning: one accent per idea. Coral for the main series, teal for supporting bars, sand (#f2c14e) for the one thing the viewer should remember. Never more than three colors on screen.",
+      "Charts: lines draw left to right with a glowing head and a soft area fill, using a monotone curve through the real points so it never overshoots; milestone dots pop as the line passes them; bars grow from the baseline one by one with their value counting up on top; the key bar or span gets a sand ring or a sand re-trace with a glow.",
+      "Numbers: big counters with thousands separators count up with an expo ease and lock; a comparison card pair shows two numbers side by side with a sand multiplier counting between them.",
+      "Scene changes: soft slide-ups and clean pushes (composite with CUTS). The first number can shrink into a chart label so the opening flows into the chart without a cut.",
+      "Takeaway: one plain sentence in Archivo with a sand pill behind the key phrase, then a single mono context line. Hold about 1.5 seconds."
+    ],
+    "sound": [
+      "Bed: a low, thoughtful pad (padBed) with a soft pulse once the charts start; no big drums.",
+      "Map events to the kit: counters \"tick\" only when the shown number changes, rising in pitch; each data milestone the line passes gets a soft pluck that climbs a pentatonic scale; each bar gets a pluck whose pitch follows its height; rings and pills get a bright swipe; scene changes get \"whoosh\"; cards get \"pop\"; the single biggest number lands on \"boom\" with a bell note; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/data-story.html",
+    "promptFile": "prompts/data-story.md",
+    "sourceBytes": 48005,
+    "prompt": "I want an animated video in the \"Data Story\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: the data (POP, BILLIONS, YEARS_PER), TL, CUTS, the X and Y scales, the scene functions, SCENES, the source line text and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, composite, padBed), background(), tag(), cam(), popAt() (monotone curve), inverseYear(), the counter and the bar, card and pill drawing patterns).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo (500 to 800), IBM Plex Mono (500 and 600).\n\nTHE STYLE\n- Data first: use real, sourced numbers for my topic and plot them to scale (no invented values, no cropped axes that exaggerate). Put a short \"Source: ...\" line at the bottom left of every frame. If a figure is an estimate, say so in the narration or a label. If you cannot verify a number, ask me instead of guessing.\n- Surface: deep ink (#0f141c) with a faint coral glow top left and a faint teal glow bottom right, very subtle gridlines, and a vignette.\n- Type: Archivo 800 for headlines and big numbers, IBM Plex Mono for every label, axis value, unit and the source line, and a small coral mono tag in caps above each headline. Ink #eef1f5, muted #7d8796.\n- Color has meaning: one accent per idea. Coral for the main series, teal for supporting bars, sand (#f2c14e) for the one thing the viewer should remember. Never more than three colors on screen.\n- Charts: lines draw left to right with a glowing head and a soft area fill, using a monotone curve through the real points so it never overshoots; milestone dots pop as the line passes them; bars grow from the baseline one by one with their value counting up on top; the key bar or span gets a sand ring or a sand re-trace with a glow.\n- Numbers: big counters with thousands separators count up with an expo ease and lock; a comparison card pair shows two numbers side by side with a sand multiplier counting between them.\n- Scene changes: soft slide-ups and clean pushes (composite with CUTS). The first number can shrink into a chart label so the opening flows into the chart without a cut.\n- Takeaway: one plain sentence in Archivo with a sand pill behind the key phrase, then a single mono context line. Hold about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headlines at 50 px or more, the takeaway at 80 px or more, key numbers at 100 px or more, and axis labels at 16 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How we got to 8 billion people (UN World Population Prospects)\") unless my content asks for it.\n\nSOUND\n- Bed: a low, thoughtful pad (padBed) with a soft pulse once the charts start; no big drums.\n- Map events to the kit: counters \"tick\" only when the shown number changes, rising in pitch; each data milestone the line passes gets a soft pluck that climbs a pentatonic scale; each bar gets a pluck whose pitch follows its height; rings and pills get a bright swipe; scene changes get \"whoosh\"; cards get \"pop\"; the single biggest number lands on \"boom\" with a bell note; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the low pad with a soft pulse, at most about 3 sounds at once, and a short gap before the big comparison lands.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Data Story\nFamily: Data\nLook: A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.\nHow it explains: Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.\n",
+    "promptVo": "I want an animated video in the \"Data Story\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. A number starts counting as it is spoken and locks on its last syllable; a line reaches each milestone as that year or value is said; each bar grows as its label is named.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: the data (POP, BILLIONS, YEARS_PER), TL, CUTS, the X and Y scales, the scene functions, SCENES, the source line text and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, composite, padBed), background(), tag(), cam(), popAt() (monotone curve), inverseYear(), the counter and the bar, card and pill drawing patterns).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo (500 to 800), IBM Plex Mono (500 and 600).\n\nTHE STYLE\n- Data first: use real, sourced numbers for my topic and plot them to scale (no invented values, no cropped axes that exaggerate). Put a short \"Source: ...\" line at the bottom left of every frame. If a figure is an estimate, say so in the narration or a label. If you cannot verify a number, ask me instead of guessing.\n- Surface: deep ink (#0f141c) with a faint coral glow top left and a faint teal glow bottom right, very subtle gridlines, and a vignette.\n- Type: Archivo 800 for headlines and big numbers, IBM Plex Mono for every label, axis value, unit and the source line, and a small coral mono tag in caps above each headline. Ink #eef1f5, muted #7d8796.\n- Color has meaning: one accent per idea. Coral for the main series, teal for supporting bars, sand (#f2c14e) for the one thing the viewer should remember. Never more than three colors on screen.\n- Charts: lines draw left to right with a glowing head and a soft area fill, using a monotone curve through the real points so it never overshoots; milestone dots pop as the line passes them; bars grow from the baseline one by one with their value counting up on top; the key bar or span gets a sand ring or a sand re-trace with a glow.\n- Numbers: big counters with thousands separators count up with an expo ease and lock; a comparison card pair shows two numbers side by side with a sand multiplier counting between them.\n- Scene changes: soft slide-ups and clean pushes (composite with CUTS). The first number can shrink into a chart label so the opening flows into the chart without a cut.\n- Takeaway: one plain sentence in Archivo with a sand pill behind the key phrase, then a single mono context line. Hold about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headlines at 50 px or more, the takeaway at 80 px or more, key numbers at 100 px or more, and axis labels at 16 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How we got to 8 billion people (UN World Population Prospects)\") unless my content asks for it.\n\nSOUND\n- Bed: a low, thoughtful pad (padBed) with a soft pulse once the charts start; no big drums.\n- Map events to the kit: counters \"tick\" only when the shown number changes, rising in pitch; each data milestone the line passes gets a soft pluck that climbs a pentatonic scale; each bar gets a pluck whose pitch follows its height; rings and pills get a bright swipe; scene changes get \"whoosh\"; cards get \"pop\"; the single biggest number lands on \"boom\" with a bell note; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark counter ticks and word ticks soft: true, keep the data plucks quiet and short, and keep \"boom\" for the single biggest number.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Data Story\nFamily: Data\nLook: A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.\nHow it explains: Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.\n"
+  },
+  {
+    "id": "warm-canvas",
+    "num": "06",
+    "name": "Warm Canvas",
+    "family": "Talking Head",
+    "look": "A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.",
+    "how": "Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.",
+    "fonts": "Fraunces (500 to 700) and Inter (500 to 700)",
+    "demo": "Can AI really plan my week?",
+    "replace": "TL, CUTS, PUNCH (the jump-cut zooms inside the A-roll), the chapter card titles, the caption words, the side chips, the scene functions, SCENES and scoreSound()",
+    "keep": "the palette C, SERIF and SANS, PIP and COLX, toneText(), shadowCard(), tag(), enter(), fadeOut(), the icon set, canvasBG(), the A-roll stand-in and fullARoll(), caption(), titleChip(), sideChip(), chapterCard(), the card, table and planner drawing patterns, the vertical push compositor, and the Load A-roll button with window.loadARoll()",
+    "sizes": "keep headlines and chapter titles at 52 px or more, captions at 60 px or more, card titles at 28 px or more, and UI labels at 14 px or more",
+    "voLine": "Each caption word fades up as it is spoken, key words in blue on their stressed syllable; a card, chip or pill lands as its idea is named; a counter locks on its last spoken syllable; the PiP shrink and the canvas arrive on the first word of a new idea, and the A-roll returns as the speaker gets personal again.",
+    "full": "- Full mix (no voiceover): no music bed beyond the one quiet pad under the canvas, at most 2 sounds at once, and plenty of air between them.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark slides, taps and keys soft: true, keep the swells for the vertical pushes only, and never put a sound on top of a stressed word.",
+    "sheet": [
+      "Built for my own footage (A-roll): the speaker is the star and the graphics only explain. Keep the \"Load A-roll\" button and window.loadARoll(url) working so I can drop in my clip and see it in sync; until then the defocused stand-in shows where I sit in frame. If I give you my recording, time everything to it.",
+      "Two modes only. Mode 1: full-frame A-roll with at most one centered caption (white Fraunces 600 with a soft shadow, key words in sky blue #4f9cf0) and small white side chips with an icon and a two-line label. Mode 2: the warm canvas (#f7f5f4 with one big soft swoosh #ebe6e2), the speaker in a rounded 272x384 picture-in-picture at the right with a thin blue ring, and the content centered in the left column (COLX).",
+      "Type: Fraunces 600 for headlines, captions and card titles, tracked -2%, in two tones (ink #111111 plus sky blue for the key phrase). Inter 500 to 600 for UI labels, tags and small text in #2b2826 and #8f8a87. Title case for headlines.",
+      "Cards: white, radius 20, a very soft warm shadow, pastel tinted tags (blue, purple, green, yellow tints) and simple code-drawn icons. Never more than one window or two cards on the canvas at once.",
+      "One idea per beat: a title chip at the top of the column, then the explanation (cards with a dashed arrow, a table, a mock app window, or three takeaway pills). Each beat clears before the next arrives.",
+      "Motion is gentle: fades with a small rise (enter), soft counters, cards that slide together, never a bounce or a shake. Chapter cards (a blue number tile, a two-tone title and a progress dash row) push in and out vertically. Everything else is a clean cut.",
+      "Show me 2 to 4 beats on the canvas between A-roll moments, and come back to the full-frame A-roll for the personal lines."
+    ],
+    "sound": [
+      "Quiet and tactile, built to sit under a real voice: soft paper slides (pink noise through a rising bandpass) for chips, cards and title chips, low wooden taps for list items, pills and table rows, a light keyboard patter for counters, a breathy swell for each vertical push, and one quiet pad under the canvas section.",
+      "No chimes, bells, pings, sparkles or risers, and no music beat. Never more than 2 sounds at once."
+    ],
+    "sourceFile": "sources/warm-canvas.html",
+    "promptFile": "prompts/warm-canvas.md",
+    "sourceBytes": 65938,
+    "prompt": "I want an animated video in the \"Warm Canvas\" style (Talking Head) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, PUNCH (the jump-cut zooms inside the A-roll), the chapter card titles, the caption words, the side chips, the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the palette C, SERIF and SANS, PIP and COLX, toneText(), shadowCard(), tag(), enter(), fadeOut(), the icon set, canvasBG(), the A-roll stand-in and fullARoll(), caption(), titleChip(), sideChip(), chapterCard(), the card, table and planner drawing patterns, the vertical push compositor, and the Load A-roll button with window.loadARoll()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fraunces (500 to 700) and Inter (500 to 700).\n\nTHE STYLE\n- Built for my own footage (A-roll): the speaker is the star and the graphics only explain. Keep the \"Load A-roll\" button and window.loadARoll(url) working so I can drop in my clip and see it in sync; until then the defocused stand-in shows where I sit in frame. If I give you my recording, time everything to it.\n- Two modes only. Mode 1: full-frame A-roll with at most one centered caption (white Fraunces 600 with a soft shadow, key words in sky blue #4f9cf0) and small white side chips with an icon and a two-line label. Mode 2: the warm canvas (#f7f5f4 with one big soft swoosh #ebe6e2), the speaker in a rounded 272x384 picture-in-picture at the right with a thin blue ring, and the content centered in the left column (COLX).\n- Type: Fraunces 600 for headlines, captions and card titles, tracked -2%, in two tones (ink #111111 plus sky blue for the key phrase). Inter 500 to 600 for UI labels, tags and small text in #2b2826 and #8f8a87. Title case for headlines.\n- Cards: white, radius 20, a very soft warm shadow, pastel tinted tags (blue, purple, green, yellow tints) and simple code-drawn icons. Never more than one window or two cards on the canvas at once.\n- One idea per beat: a title chip at the top of the column, then the explanation (cards with a dashed arrow, a table, a mock app window, or three takeaway pills). Each beat clears before the next arrives.\n- Motion is gentle: fades with a small rise (enter), soft counters, cards that slide together, never a bounce or a shake. Chapter cards (a blue number tile, a two-tone title and a progress dash row) push in and out vertically. Everything else is a clean cut.\n- Show me 2 to 4 beats on the canvas between A-roll moments, and come back to the full-frame A-roll for the personal lines.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headlines and chapter titles at 52 px or more, captions at 60 px or more, card titles at 28 px or more, and UI labels at 14 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Can AI really plan my week?\") unless my content asks for it.\n\nSOUND\n- Quiet and tactile, built to sit under a real voice: soft paper slides (pink noise through a rising bandpass) for chips, cards and title chips, low wooden taps for list items, pills and table rows, a light keyboard patter for counters, a breathy swell for each vertical push, and one quiet pad under the canvas section.\n- No chimes, bells, pings, sparkles or risers, and no music beat. Never more than 2 sounds at once.\n- Full mix (no voiceover): no music bed beyond the one quiet pad under the canvas, at most 2 sounds at once, and plenty of air between them.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Warm Canvas\nFamily: Talking Head\nLook: A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.\nHow it explains: Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.\n",
+    "promptVo": "I want an animated video in the \"Warm Canvas\" style (Talking Head) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each caption word fades up as it is spoken, key words in blue on their stressed syllable; a card, chip or pill lands as its idea is named; a counter locks on its last spoken syllable; the PiP shrink and the canvas arrive on the first word of a new idea, and the A-roll returns as the speaker gets personal again.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, CUTS, PUNCH (the jump-cut zooms inside the A-roll), the chapter card titles, the caption words, the side chips, the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the palette C, SERIF and SANS, PIP and COLX, toneText(), shadowCard(), tag(), enter(), fadeOut(), the icon set, canvasBG(), the A-roll stand-in and fullARoll(), caption(), titleChip(), sideChip(), chapterCard(), the card, table and planner drawing patterns, the vertical push compositor, and the Load A-roll button with window.loadARoll()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fraunces (500 to 700) and Inter (500 to 700).\n\nTHE STYLE\n- Built for my own footage (A-roll): the speaker is the star and the graphics only explain. Keep the \"Load A-roll\" button and window.loadARoll(url) working so I can drop in my clip and see it in sync; until then the defocused stand-in shows where I sit in frame. If I give you my recording, time everything to it.\n- Two modes only. Mode 1: full-frame A-roll with at most one centered caption (white Fraunces 600 with a soft shadow, key words in sky blue #4f9cf0) and small white side chips with an icon and a two-line label. Mode 2: the warm canvas (#f7f5f4 with one big soft swoosh #ebe6e2), the speaker in a rounded 272x384 picture-in-picture at the right with a thin blue ring, and the content centered in the left column (COLX).\n- Type: Fraunces 600 for headlines, captions and card titles, tracked -2%, in two tones (ink #111111 plus sky blue for the key phrase). Inter 500 to 600 for UI labels, tags and small text in #2b2826 and #8f8a87. Title case for headlines.\n- Cards: white, radius 20, a very soft warm shadow, pastel tinted tags (blue, purple, green, yellow tints) and simple code-drawn icons. Never more than one window or two cards on the canvas at once.\n- One idea per beat: a title chip at the top of the column, then the explanation (cards with a dashed arrow, a table, a mock app window, or three takeaway pills). Each beat clears before the next arrives.\n- Motion is gentle: fades with a small rise (enter), soft counters, cards that slide together, never a bounce or a shake. Chapter cards (a blue number tile, a two-tone title and a progress dash row) push in and out vertically. Everything else is a clean cut.\n- Show me 2 to 4 beats on the canvas between A-roll moments, and come back to the full-frame A-roll for the personal lines.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 keep headlines and chapter titles at 52 px or more, captions at 60 px or more, card titles at 28 px or more, and UI labels at 14 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Can AI really plan my week?\") unless my content asks for it.\n\nSOUND\n- Quiet and tactile, built to sit under a real voice: soft paper slides (pink noise through a rising bandpass) for chips, cards and title chips, low wooden taps for list items, pills and table rows, a light keyboard patter for counters, a breathy swell for each vertical push, and one quiet pad under the canvas section.\n- No chimes, bells, pings, sparkles or risers, and no music beat. Never more than 2 sounds at once.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark slides, taps and keys soft: true, keep the swells for the vertical pushes only, and never put a sound on top of a stressed word.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Warm Canvas\nFamily: Talking Head\nLook: A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.\nHow it explains: Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.\n"
+  },
+  {
+    "id": "pop-info",
+    "num": "07",
+    "name": "Pop Info",
+    "family": "Illustrated",
+    "look": "A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.",
+    "how": "The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.",
+    "fonts": "Fredoka (500 to 700)",
+    "demo": "Why is the milk always at the back of the store?",
+    "replace": "TL, the scene (drawRoom, drawShelf and the product layout ROWS, or a new setting for my topic), the character (drawShopper) and its reactions, the bubble contents (drawBubble: mascot, counter and tag), drawPath, the camera move in renderAt and scoreSound()",
+    "keep": "the 680 x 383 design space with renderAt() scaling it to the canvas, prog(), popS(), wobble(), blink(), the easings, rr(), the dust layer, the iris wipe (drawWipe), the parallax split between background and foreground, and the explainer() compositor",
+    "sizes": "in the 680 x 383 design space keep the main number at 21 px or more, labels at 11 px or more and any title at 26 px or more (that is about 40, 21 and 50 px at 1280x720), and keep the character and the bubble large",
+    "voLine": "The character reacts on the word that carries the feeling; the bubble pops in as the idea is introduced; the counter starts as the number is spoken and locks on its last syllable; the path draws while the journey is described and the pin drops on the destination.",
+    "full": "- Full mix (no voiceover): a light, friendly music bed (k.music at a low gain), at most about 3 sounds at once, and a short quiet moment before the pin or the payoff lands.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark taps, counter ticks and path dots soft: true and keep pops for the bubble, the tag and the pin.",
+    "sheet": [
+      "Everything is original flat vector art drawn with canvas paths: no images, no outlines, simple rounded shapes, one flat shadow tone per object, soft highlights, and a few drifting dust specks for life. Invent the setting and characters for my topic; never copy a real brand, logo, mascot or packaging.",
+      "Draw in the 680 x 383 design space and let renderAt() scale it, so the art stays crisp at any size. Keep shapes big and readable on a phone.",
+      "Palette: a muted, desaturated room (sage wall #D7DCCB, warm floor #C4B79D), warm accent objects (#E07A5F, #F2CC8F, #81B29A, #6C9BB8), deep teal #2F6F73 for the idea bubble, coral #E85D4A for alerts and signs, and sunny yellow #FFD86B for tags, the iris ring and sparkles. Text is white or dark teal.",
+      "One character with a strong, simple emotion (eyebrows, mouth, blinks, a sweat drop, a sigh) is the emotional anchor. It sits in the foreground with gentle parallax while the camera pushes the background.",
+      "The idea lives in a bubble: a friendly mascot or icon, a number that counts up with an eased curve, and a small pill tag. Numbers must be real or clearly framed as an example; if you cannot verify one, ask me.",
+      "Motion is springy and playful: things pop in with a back-eased scale (popS), settle with a decaying wobble, the scene slides in from the sides, a dotted path draws itself and a pin drops, and the camera does one slow push. Open and close with the teal iris wipe with a yellow ring.",
+      "Keep it to one scene per idea, with clear staging: setting, character reaction, the idea in the bubble, the visual proof (path, arrow or chart), then the iris closes."
+    ],
+    "sound": [
+      "Soft, toy-like and sparse: rounded pops for the bubble, tags and pin, little sine bloops for character reactions, wooden taps for landings, counter steps and path dots (thinning out as the counter lands), airy whooshes for the iris and the slides, and one breathy sigh.",
+      "No chimes, bells, pings or sparkle sounds, even for winks and sparkles on screen. The cartoon carries the charm; the sound only gives it weight."
+    ],
+    "sourceFile": "sources/pop-info.html",
+    "promptFile": "prompts/pop-info.md",
+    "sourceBytes": 48814,
+    "prompt": "I want an animated video in the \"Pop Info\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, the scene (drawRoom, drawShelf and the product layout ROWS, or a new setting for my topic), the character (drawShopper) and its reactions, the bubble contents (drawBubble: mascot, counter and tag), drawPath, the camera move in renderAt and scoreSound(). Keep and reuse the style's helpers (the 680 x 383 design space with renderAt() scaling it to the canvas, prog(), popS(), wobble(), blink(), the easings, rr(), the dust layer, the iris wipe (drawWipe), the parallax split between background and foreground, and the explainer() compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).\n\nTHE STYLE\n- Everything is original flat vector art drawn with canvas paths: no images, no outlines, simple rounded shapes, one flat shadow tone per object, soft highlights, and a few drifting dust specks for life. Invent the setting and characters for my topic; never copy a real brand, logo, mascot or packaging.\n- Draw in the 680 x 383 design space and let renderAt() scale it, so the art stays crisp at any size. Keep shapes big and readable on a phone.\n- Palette: a muted, desaturated room (sage wall #D7DCCB, warm floor #C4B79D), warm accent objects (#E07A5F, #F2CC8F, #81B29A, #6C9BB8), deep teal #2F6F73 for the idea bubble, coral #E85D4A for alerts and signs, and sunny yellow #FFD86B for tags, the iris ring and sparkles. Text is white or dark teal.\n- One character with a strong, simple emotion (eyebrows, mouth, blinks, a sweat drop, a sigh) is the emotional anchor. It sits in the foreground with gentle parallax while the camera pushes the background.\n- The idea lives in a bubble: a friendly mascot or icon, a number that counts up with an eased curve, and a small pill tag. Numbers must be real or clearly framed as an example; if you cannot verify one, ask me.\n- Motion is springy and playful: things pop in with a back-eased scale (popS), settle with a decaying wobble, the scene slides in from the sides, a dotted path draws itself and a pin drops, and the camera does one slow push. Open and close with the teal iris wipe with a yellow ring.\n- Keep it to one scene per idea, with clear staging: setting, character reaction, the idea in the bubble, the visual proof (path, arrow or chart), then the iris closes.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 in the 680 x 383 design space keep the main number at 21 px or more, labels at 11 px or more and any title at 26 px or more (that is about 40, 21 and 50 px at 1280x720), and keep the character and the bubble large. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why is the milk always at the back of the store?\") unless my content asks for it.\n\nSOUND\n- Soft, toy-like and sparse: rounded pops for the bubble, tags and pin, little sine bloops for character reactions, wooden taps for landings, counter steps and path dots (thinning out as the counter lands), airy whooshes for the iris and the slides, and one breathy sigh.\n- No chimes, bells, pings or sparkle sounds, even for winks and sparkles on screen. The cartoon carries the charm; the sound only gives it weight.\n- Full mix (no voiceover): a light, friendly music bed (k.music at a low gain), at most about 3 sounds at once, and a short quiet moment before the pin or the payoff lands.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Pop Info\nFamily: Illustrated\nLook: A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.\nHow it explains: The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Pop Info\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The character reacts on the word that carries the feeling; the bubble pops in as the idea is introduced; the counter starts as the number is spoken and locks on its last syllable; the path draws while the journey is described and the pin drops on the destination.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.\n- Replace the demo's story: TL, the scene (drawRoom, drawShelf and the product layout ROWS, or a new setting for my topic), the character (drawShopper) and its reactions, the bubble contents (drawBubble: mascot, counter and tag), drawPath, the camera move in renderAt and scoreSound(). Keep and reuse the style's helpers (the 680 x 383 design space with renderAt() scaling it to the canvas, prog(), popS(), wobble(), blink(), the easings, rr(), the dust layer, the iris wipe (drawWipe), the parallax split between background and foreground, and the explainer() compositor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).\n\nTHE STYLE\n- Everything is original flat vector art drawn with canvas paths: no images, no outlines, simple rounded shapes, one flat shadow tone per object, soft highlights, and a few drifting dust specks for life. Invent the setting and characters for my topic; never copy a real brand, logo, mascot or packaging.\n- Draw in the 680 x 383 design space and let renderAt() scale it, so the art stays crisp at any size. Keep shapes big and readable on a phone.\n- Palette: a muted, desaturated room (sage wall #D7DCCB, warm floor #C4B79D), warm accent objects (#E07A5F, #F2CC8F, #81B29A, #6C9BB8), deep teal #2F6F73 for the idea bubble, coral #E85D4A for alerts and signs, and sunny yellow #FFD86B for tags, the iris ring and sparkles. Text is white or dark teal.\n- One character with a strong, simple emotion (eyebrows, mouth, blinks, a sweat drop, a sigh) is the emotional anchor. It sits in the foreground with gentle parallax while the camera pushes the background.\n- The idea lives in a bubble: a friendly mascot or icon, a number that counts up with an eased curve, and a small pill tag. Numbers must be real or clearly framed as an example; if you cannot verify one, ask me.\n- Motion is springy and playful: things pop in with a back-eased scale (popS), settle with a decaying wobble, the scene slides in from the sides, a dotted path draws itself and a pin drops, and the camera does one slow push. Open and close with the teal iris wipe with a yellow ring.\n- Keep it to one scene per idea, with clear staging: setting, character reaction, the idea in the bubble, the visual proof (path, arrow or chart), then the iris closes.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 1280x720 in the 680 x 383 design space keep the main number at 21 px or more, labels at 11 px or more and any title at 26 px or more (that is about 40, 21 and 50 px at 1280x720), and keep the character and the bubble large. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why is the milk always at the back of the store?\") unless my content asks for it.\n\nSOUND\n- Soft, toy-like and sparse: rounded pops for the bubble, tags and pin, little sine bloops for character reactions, wooden taps for landings, counter steps and path dots (thinning out as the counter lands), airy whooshes for the iris and the slides, and one breathy sigh.\n- No chimes, bells, pings or sparkle sounds, even for winks and sparkles on screen. The cartoon carries the charm; the sound only gives it weight.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark taps, counter ticks and path dots soft: true and keep pops for the bubble, the tag and the pin.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Pop Info\nFamily: Illustrated\nLook: A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.\nHow it explains: The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.\n"
+  },
+  {
+    "id": "clay-diorama",
+    "num": "08",
+    "name": "Clay Diorama",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.",
+    "how": "The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.",
+    "fonts": "Fredoka (500 to 700), JetBrains Mono (700)",
+    "demo": "How a volcano erupts",
+    "replace": "TL, BLOBS, the clay world in init3() (the base, the props and their colours), pose(t), the cards in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3(), M3/P3/put, proj3(), the round base and grass disc, the orbiting camera in pose(), tiltShift(), card(), pop/slam/wordLine/chip and grain()",
+    "sizes": "keep card headlines at 54 px or more, card text at 30 px or more, mono labels at 22 px or more, and keep the diorama filling the middle third of the frame",
+    "voLine": "Each prop pops in as it is named, a card lands on the first word of its beat, a counter starts as its number is spoken and locks on its last syllable, and the big event (the eruption, the crash, the reveal) lands on its stressed word.",
+    "full": "- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and leave a short gap before the biggest moment.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark bloops, ticks and thuds soft: true, keep the boom for the single biggest moment, and never put a riser over a spoken sentence.",
+    "sheet": [
+      "Everything 3D is real Three.js geometry built once in init3() and posed from t in pose(t): no images, no models from the web. Every object is a simple rounded primitive (cylinders, cones, spheres, capsules) in matte clay colours with soft shadows.",
+      "The world sits on one round base with a grass or sand disc, like a tabletop miniature. Keep it in the middle third of the frame and keep the tilt-shift blur at the top and bottom on every frame.",
+      "Palette: warm peach background (#f5d5c0), clay browns, soft greens (#94c56a, #5aa65a), cream cards (#fffaf5), dark brown text (#5b3424) and one hot accent (#e2561e) for the key word. Invent colours for new props in the same matte, slightly desaturated range.",
+      "Type: Fredoka 600 to 700 on cream cards with 44 px corners and a soft brown shadow. One card per beat, popping in with a back ease. JetBrains Mono only for small chips and units.",
+      "Motion is toy-like: things pop up with overshoot, wobble with squash and stretch before a big moment, fly on real ballistic arcs and splat flat when they land. The camera orbits slowly the whole time and pulls back for the takeaway.",
+      "Numbers count up inside a chip or a gauge bar on a card. Draw every subject accurately for the topic (a real heart has four chambers, a real bridge has supports) while keeping the clay simplicity.",
+      "Pace: the hook card lands in under 1 second, one new thing every 0.5 to 1.5 seconds, the takeaway card holds about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a bright, simple pad (padBed) with light hats, and a soft kick only during the action.",
+      "Map events to the kit: props popping up get SND.bloop with rising pitch; cards get SND.paper plus \"pop\"; building tension gets a brown-noise rumble that grows; the big moment gets \"riser\" into \"boom\" and \"slam\"; landings get SND.thud; counters \"tick\" only when the shown number changes; the takeaway gets an open major chord (SND.chord)."
+    ],
+    "sourceFile": "sources/clay-diorama.html",
+    "promptFile": "prompts/clay-diorama.md",
+    "sourceBytes": 66433,
+    "prompt": "I want an animated video in the \"Clay Diorama\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, BLOBS, the clay world in init3() (the base, the props and their colours), pose(t), the cards in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), M3/P3/put, proj3(), the round base and grass disc, the orbiting camera in pose(), tiltShift(), card(), pop/slam/wordLine/chip and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700), JetBrains Mono (700).\n\nTHE STYLE\n- Everything 3D is real Three.js geometry built once in init3() and posed from t in pose(t): no images, no models from the web. Every object is a simple rounded primitive (cylinders, cones, spheres, capsules) in matte clay colours with soft shadows.\n- The world sits on one round base with a grass or sand disc, like a tabletop miniature. Keep it in the middle third of the frame and keep the tilt-shift blur at the top and bottom on every frame.\n- Palette: warm peach background (#f5d5c0), clay browns, soft greens (#94c56a, #5aa65a), cream cards (#fffaf5), dark brown text (#5b3424) and one hot accent (#e2561e) for the key word. Invent colours for new props in the same matte, slightly desaturated range.\n- Type: Fredoka 600 to 700 on cream cards with 44 px corners and a soft brown shadow. One card per beat, popping in with a back ease. JetBrains Mono only for small chips and units.\n- Motion is toy-like: things pop up with overshoot, wobble with squash and stretch before a big moment, fly on real ballistic arcs and splat flat when they land. The camera orbits slowly the whole time and pulls back for the takeaway.\n- Numbers count up inside a chip or a gauge bar on a card. Draw every subject accurately for the topic (a real heart has four chambers, a real bridge has supports) while keeping the clay simplicity.\n- Pace: the hook card lands in under 1 second, one new thing every 0.5 to 1.5 seconds, the takeaway card holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep card headlines at 54 px or more, card text at 30 px or more, mono labels at 22 px or more, and keep the diorama filling the middle third of the frame. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a volcano erupts\") unless my content asks for it.\n\nSOUND\n- Bed: a bright, simple pad (padBed) with light hats, and a soft kick only during the action.\n- Map events to the kit: props popping up get SND.bloop with rising pitch; cards get SND.paper plus \"pop\"; building tension gets a brown-noise rumble that grows; the big moment gets \"riser\" into \"boom\" and \"slam\"; landings get SND.thud; counters \"tick\" only when the shown number changes; the takeaway gets an open major chord (SND.chord).\n- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and leave a short gap before the biggest moment.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Clay Diorama\nFamily: 3D\nLook: A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.\nHow it explains: The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Clay Diorama\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each prop pops in as it is named, a card lands on the first word of its beat, a counter starts as its number is spoken and locks on its last syllable, and the big event (the eruption, the crash, the reveal) lands on its stressed word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, BLOBS, the clay world in init3() (the base, the props and their colours), pose(t), the cards in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), M3/P3/put, proj3(), the round base and grass disc, the orbiting camera in pose(), tiltShift(), card(), pop/slam/wordLine/chip and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700), JetBrains Mono (700).\n\nTHE STYLE\n- Everything 3D is real Three.js geometry built once in init3() and posed from t in pose(t): no images, no models from the web. Every object is a simple rounded primitive (cylinders, cones, spheres, capsules) in matte clay colours with soft shadows.\n- The world sits on one round base with a grass or sand disc, like a tabletop miniature. Keep it in the middle third of the frame and keep the tilt-shift blur at the top and bottom on every frame.\n- Palette: warm peach background (#f5d5c0), clay browns, soft greens (#94c56a, #5aa65a), cream cards (#fffaf5), dark brown text (#5b3424) and one hot accent (#e2561e) for the key word. Invent colours for new props in the same matte, slightly desaturated range.\n- Type: Fredoka 600 to 700 on cream cards with 44 px corners and a soft brown shadow. One card per beat, popping in with a back ease. JetBrains Mono only for small chips and units.\n- Motion is toy-like: things pop up with overshoot, wobble with squash and stretch before a big moment, fly on real ballistic arcs and splat flat when they land. The camera orbits slowly the whole time and pulls back for the takeaway.\n- Numbers count up inside a chip or a gauge bar on a card. Draw every subject accurately for the topic (a real heart has four chambers, a real bridge has supports) while keeping the clay simplicity.\n- Pace: the hook card lands in under 1 second, one new thing every 0.5 to 1.5 seconds, the takeaway card holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep card headlines at 54 px or more, card text at 30 px or more, mono labels at 22 px or more, and keep the diorama filling the middle third of the frame. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a volcano erupts\") unless my content asks for it.\n\nSOUND\n- Bed: a bright, simple pad (padBed) with light hats, and a soft kick only during the action.\n- Map events to the kit: props popping up get SND.bloop with rising pitch; cards get SND.paper plus \"pop\"; building tension gets a brown-noise rumble that grows; the big moment gets \"riser\" into \"boom\" and \"slam\"; landings get SND.thud; counters \"tick\" only when the shown number changes; the takeaway gets an open major chord (SND.chord).\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark bloops, ticks and thuds soft: true, keep the boom for the single biggest moment, and never put a riser over a spoken sentence.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Clay Diorama\nFamily: 3D\nLook: A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.\nHow it explains: The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.\n"
+  },
+  {
+    "id": "bio-glow",
+    "num": "09",
+    "name": "Bio Glow",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.",
+    "how": "The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.",
+    "fonts": "Space Grotesk (500 and 700), JetBrains Mono (500 and 700)",
+    "demo": "Your blood in 60 seconds",
+    "replace": "TL, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom",
+    "sizes": "keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more",
+    "voLine": "The hero object swims into its close-up as it is named, each label draws its leader line on the word it names, small things arrive on the word that introduces them, and the counter locks on the last syllable of its number.",
+    "full": "- Full mix (no voiceover): keep the heartbeat and the dark pad, at most about 3 sounds at once, and drop the heartbeat for one beat before the counter locks.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the heartbeat very low, mark pings and ticks soft: true, and keep the shimmer for the takeaway only.",
+    "sheet": [
+      "Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.",
+      "The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.",
+      "Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything \"fresh\", off-white for defenders.",
+      "Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.",
+      "One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.",
+      "Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.",
+      "Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.",
+      "Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow \"whoosh\"; counters \"tick\" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets \"shimmer\"."
+    ],
+    "sourceFile": "sources/bio-glow.html",
+    "promptFile": "prompts/bio-glow.md",
+    "sourceBytes": 62642,
+    "prompt": "I want an animated video in the \"Bio Glow\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.\n- The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.\n- Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything \"fresh\", off-white for defenders.\n- Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.\n- One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.\n- Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.\n- Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Your blood in 60 seconds\") unless my content asks for it.\n\nSOUND\n- Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.\n- Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow \"whoosh\"; counters \"tick\" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets \"shimmer\".\n- Full mix (no voiceover): keep the heartbeat and the dark pad, at most about 3 sounds at once, and drop the heartbeat for one beat before the counter locks.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Bio Glow\nFamily: 3D\nLook: Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.\nHow it explains: The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Bio Glow\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The hero object swims into its close-up as it is named, each label draws its leader line on the word it names, small things arrive on the word that introduces them, and the counter locks on the last syllable of its number.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.\n- The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.\n- Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything \"fresh\", off-white for defenders.\n- Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.\n- One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.\n- Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.\n- Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Your blood in 60 seconds\") unless my content asks for it.\n\nSOUND\n- Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.\n- Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow \"whoosh\"; counters \"tick\" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the heartbeat very low, mark pings and ticks soft: true, and keep the shimmer for the takeaway only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Bio Glow\nFamily: 3D\nLook: Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.\nHow it explains: The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.\n"
+  },
+  {
+    "id": "cosmic-scale",
+    "num": "10",
+    "name": "Cosmic Scale",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.",
+    "how": "It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.",
+    "fonts": "Space Grotesk (500 and 700), JetBrains Mono (500 and 700)",
+    "demo": "How big is the Sun?",
+    "replace": "TL, BODIES (names, real radii, positions, painted textures), the CAM keyframes, the labels and counter in overlay() and scoreSound()",
+    "keep": "makeGL(), the painted canvas textures (paintTex), the starfield, the log-scale camera track (camAt), proj3() labels that only show when a body is big enough, the sun glow pass, chip(), wordLine() and grain()",
+    "sizes": "keep headlines at 56 px or more, labels at 22 px or more and the counter at 90 px or more",
+    "voLine": "Each pull-back starts about 0.3 s before the next object is named, its label lands on its name, and the reveal of the biggest object lands on the stressed word.",
+    "full": "- Full mix (no voiceover): keep the deep drone, at most about 3 sounds at once, and a moment of near-silence before the big reveal.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone very low, mark label pings soft: true and keep the boom for the single reveal.",
+    "sheet": [
+      "Sizes are real: every body uses its true radius relative to the others (Earth = 1 unit), lined up side by side. Never fake a ratio; let tiny things be tiny and point them out with a ring and a label.",
+      "Every surface is painted in code on a canvas (paintTex): oceans and continents, gas bands, craters, granulated plasma. No photos or downloaded textures.",
+      "The camera moves on a log scale (camAt keys hold the log of the distance), so each pull-back feels like the same size of jump. Stars stay fixed far away so the motion reads as scale, not travel.",
+      "Palette: black space (#02030a), white stars, warm sun orange (#ffb347 to #ff7a12) with a soft screen-blended glow, cool label blue (#bfe1ff). One warm accent (#ffcf8a) for the second headline line.",
+      "Type: Space Grotesk 700 headlines at the top, JetBrains Mono labels with the real size, a dashed ring around anything smaller than a few pixels.",
+      "Pace: hold the familiar object for 2 to 3 seconds, then one pull-back every 1.5 to 2.5 seconds, and hold the final reveal for about 3 seconds."
+    ],
+    "sound": [
+      "Bed: a deep, slow drone with a filtered pad; no beat.",
+      "Map events to the kit: every pull-back gets a long, low \"whoosh\"; each label gets a soft ping; the final reveal gets \"riser\" into \"boom\"; the counter \"tick\"s only when the shown number changes; the takeaway gets \"shimmer\"."
+    ],
+    "sourceFile": "sources/cosmic-scale.html",
+    "promptFile": "prompts/cosmic-scale.md",
+    "sourceBytes": 62264,
+    "prompt": "I want an animated video in the \"Cosmic Scale\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, BODIES (names, real radii, positions, painted textures), the CAM keyframes, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the painted canvas textures (paintTex), the starfield, the log-scale camera track (camAt), proj3() labels that only show when a body is big enough, the sun glow pass, chip(), wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Sizes are real: every body uses its true radius relative to the others (Earth = 1 unit), lined up side by side. Never fake a ratio; let tiny things be tiny and point them out with a ring and a label.\n- Every surface is painted in code on a canvas (paintTex): oceans and continents, gas bands, craters, granulated plasma. No photos or downloaded textures.\n- The camera moves on a log scale (camAt keys hold the log of the distance), so each pull-back feels like the same size of jump. Stars stay fixed far away so the motion reads as scale, not travel.\n- Palette: black space (#02030a), white stars, warm sun orange (#ffb347 to #ff7a12) with a soft screen-blended glow, cool label blue (#bfe1ff). One warm accent (#ffcf8a) for the second headline line.\n- Type: Space Grotesk 700 headlines at the top, JetBrains Mono labels with the real size, a dashed ring around anything smaller than a few pixels.\n- Pace: hold the familiar object for 2 to 3 seconds, then one pull-back every 1.5 to 2.5 seconds, and hold the final reveal for about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more and the counter at 90 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How big is the Sun?\") unless my content asks for it.\n\nSOUND\n- Bed: a deep, slow drone with a filtered pad; no beat.\n- Map events to the kit: every pull-back gets a long, low \"whoosh\"; each label gets a soft ping; the final reveal gets \"riser\" into \"boom\"; the counter \"tick\"s only when the shown number changes; the takeaway gets \"shimmer\".\n- Full mix (no voiceover): keep the deep drone, at most about 3 sounds at once, and a moment of near-silence before the big reveal.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Cosmic Scale\nFamily: 3D\nLook: Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.\nHow it explains: It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.\n",
+    "promptVo": "I want an animated video in the \"Cosmic Scale\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each pull-back starts about 0.3 s before the next object is named, its label lands on its name, and the reveal of the biggest object lands on the stressed word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, BODIES (names, real radii, positions, painted textures), the CAM keyframes, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the painted canvas textures (paintTex), the starfield, the log-scale camera track (camAt), proj3() labels that only show when a body is big enough, the sun glow pass, chip(), wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Sizes are real: every body uses its true radius relative to the others (Earth = 1 unit), lined up side by side. Never fake a ratio; let tiny things be tiny and point them out with a ring and a label.\n- Every surface is painted in code on a canvas (paintTex): oceans and continents, gas bands, craters, granulated plasma. No photos or downloaded textures.\n- The camera moves on a log scale (camAt keys hold the log of the distance), so each pull-back feels like the same size of jump. Stars stay fixed far away so the motion reads as scale, not travel.\n- Palette: black space (#02030a), white stars, warm sun orange (#ffb347 to #ff7a12) with a soft screen-blended glow, cool label blue (#bfe1ff). One warm accent (#ffcf8a) for the second headline line.\n- Type: Space Grotesk 700 headlines at the top, JetBrains Mono labels with the real size, a dashed ring around anything smaller than a few pixels.\n- Pace: hold the familiar object for 2 to 3 seconds, then one pull-back every 1.5 to 2.5 seconds, and hold the final reveal for about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more and the counter at 90 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How big is the Sun?\") unless my content asks for it.\n\nSOUND\n- Bed: a deep, slow drone with a filtered pad; no beat.\n- Map events to the kit: every pull-back gets a long, low \"whoosh\"; each label gets a soft ping; the final reveal gets \"riser\" into \"boom\"; the counter \"tick\"s only when the shown number changes; the takeaway gets \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone very low, mark label pings soft: true and keep the boom for the single reveal.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Cosmic Scale\nFamily: 3D\nLook: Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.\nHow it explains: It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.\n"
+  },
+  {
+    "id": "exploded-view",
+    "num": "11",
+    "name": "Exploded View",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.",
+    "how": "The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.",
+    "fonts": "Space Grotesk (500 and 700), JetBrains Mono (500 and 700)",
+    "demo": "What's inside a phone",
+    "replace": "TL, PARTS (names, sizes, colours, details), the build in init3(), the highlight beat, the labels in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3(), the shadow-only floor, the slow turntable rotation, the lift-apart and snap-back motion in pose(), the right-hand label column with leader lines, chip() and wordLine()",
+    "sizes": "keep headlines at 60 px or more, part names at 24 px or more and part numbers at 20 px or more",
+    "voLine": "Each part lifts away as it is named, its label draws on the same word, the highlight glows on the stressed word, and the snap-back lands on the first word of the takeaway.",
+    "full": "- Full mix (no voiceover): keep the clean pad, at most about 3 sounds at once, and a short gap before the snap-back.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark servo whirs and ticks soft: true and keep the thud for the snap-back only.",
+    "sheet": [
+      "Build the object in Three.js from real proportions: boxes, cylinders and extrusions for each layer, small boxes for chips and parts, real materials (glass is transparent, metal is metallic). Never copy a real brand or logo; invent nothing that pretends to be a real model.",
+      "The studio: light grey background (#e7eaee), a shadow-only floor, soft key light from the upper right. The object turns slowly the whole time.",
+      "Parts lift straight up (or along their assembly axis) one at a time with an ease-out, leaving even gaps, then later snap back in reverse order.",
+      "Labels: a right-hand column of numbered labels (blue number, dark name in JetBrains Mono) joined to each part by a 2 px leader line that draws itself.",
+      "Type: Space Grotesk 700 headline top left in near-black (#14171f) with the second line in blue (#2f6bff).",
+      "Highlight: one part glows (emissive pulse) with a big chip explaining why it matters.",
+      "Pace: closed object for 1.5 to 2 seconds, one part every 0.4 to 0.6 seconds, hold the highlight 2 to 3 seconds."
+    ],
+    "sound": [
+      "Bed: a clean, light pad (padBed) with soft hats.",
+      "Map events to the kit: each part lifting gets a short servo whir (a filtered sawtooth sweep) and a \"click\" when it stops; labels get a soft tick; the highlight gets a hum swell and a chime; the snap-back gets a reversed whir and a thud; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/exploded-view.html",
+    "promptFile": "prompts/exploded-view.md",
+    "sourceBytes": 59563,
+    "prompt": "I want an animated video in the \"Exploded View\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, PARTS (names, sizes, colours, details), the build in init3(), the highlight beat, the labels in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the shadow-only floor, the slow turntable rotation, the lift-apart and snap-back motion in pose(), the right-hand label column with leader lines, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Build the object in Three.js from real proportions: boxes, cylinders and extrusions for each layer, small boxes for chips and parts, real materials (glass is transparent, metal is metallic). Never copy a real brand or logo; invent nothing that pretends to be a real model.\n- The studio: light grey background (#e7eaee), a shadow-only floor, soft key light from the upper right. The object turns slowly the whole time.\n- Parts lift straight up (or along their assembly axis) one at a time with an ease-out, leaving even gaps, then later snap back in reverse order.\n- Labels: a right-hand column of numbered labels (blue number, dark name in JetBrains Mono) joined to each part by a 2 px leader line that draws itself.\n- Type: Space Grotesk 700 headline top left in near-black (#14171f) with the second line in blue (#2f6bff).\n- Highlight: one part glows (emissive pulse) with a big chip explaining why it matters.\n- Pace: closed object for 1.5 to 2 seconds, one part every 0.4 to 0.6 seconds, hold the highlight 2 to 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 60 px or more, part names at 24 px or more and part numbers at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"What's inside a phone\") unless my content asks for it.\n\nSOUND\n- Bed: a clean, light pad (padBed) with soft hats.\n- Map events to the kit: each part lifting gets a short servo whir (a filtered sawtooth sweep) and a \"click\" when it stops; labels get a soft tick; the highlight gets a hum swell and a chime; the snap-back gets a reversed whir and a thud; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the clean pad, at most about 3 sounds at once, and a short gap before the snap-back.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Exploded View\nFamily: 3D\nLook: A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.\nHow it explains: The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Exploded View\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each part lifts away as it is named, its label draws on the same word, the highlight glows on the stressed word, and the snap-back lands on the first word of the takeaway.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, PARTS (names, sizes, colours, details), the build in init3(), the highlight beat, the labels in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the shadow-only floor, the slow turntable rotation, the lift-apart and snap-back motion in pose(), the right-hand label column with leader lines, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Build the object in Three.js from real proportions: boxes, cylinders and extrusions for each layer, small boxes for chips and parts, real materials (glass is transparent, metal is metallic). Never copy a real brand or logo; invent nothing that pretends to be a real model.\n- The studio: light grey background (#e7eaee), a shadow-only floor, soft key light from the upper right. The object turns slowly the whole time.\n- Parts lift straight up (or along their assembly axis) one at a time with an ease-out, leaving even gaps, then later snap back in reverse order.\n- Labels: a right-hand column of numbered labels (blue number, dark name in JetBrains Mono) joined to each part by a 2 px leader line that draws itself.\n- Type: Space Grotesk 700 headline top left in near-black (#14171f) with the second line in blue (#2f6bff).\n- Highlight: one part glows (emissive pulse) with a big chip explaining why it matters.\n- Pace: closed object for 1.5 to 2 seconds, one part every 0.4 to 0.6 seconds, hold the highlight 2 to 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 60 px or more, part names at 24 px or more and part numbers at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"What's inside a phone\") unless my content asks for it.\n\nSOUND\n- Bed: a clean, light pad (padBed) with soft hats.\n- Map events to the kit: each part lifting gets a short servo whir (a filtered sawtooth sweep) and a \"click\" when it stops; labels get a soft tick; the highlight gets a hum swell and a chime; the snap-back gets a reversed whir and a thud; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark servo whirs and ticks soft: true and keep the thud for the snap-back only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Exploded View\nFamily: 3D\nLook: A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.\nHow it explains: The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.\n"
+  },
+  {
+    "id": "low-poly-atlas",
+    "num": "12",
+    "name": "Low-Poly Atlas",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Faceted low-poly terrain in warm sunset light, built in Three.js: flat-shaded hills, sand coasts and blue water, with roads, routes and campaign arrows drawing themselves across the land.",
+    "how": "The camera drifts over the land while a route draws itself from a city, a red campaign arrow marches along it, more routes branch out, and a counter adds up the distance. Serif headlines and mono date chips give it the feel of a history book.",
+    "fonts": "Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700)",
+    "demo": "Why Rome built roads",
+    "replace": "TL, hgt() (the shape of the land), ROADS (from and to, in order), the city props, the arrow timing, the labels and counter in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3(), the flat-shaded vertex-coloured terrain built from hgt(), the water plane, growing tubes with setDrawRange(), the arrow that follows a curve, the drifting camera, proj3() labels, chip() and wordLine()",
+    "sizes": "keep headlines at 64 px or more, place names at 22 px or more and the counter at 80 px or more",
+    "voLine": "A route starts drawing as it is mentioned and reaches its end on the destination word, the arrow moves while the march is described, a date chip lands on the date, and the counter locks on its last spoken syllable.",
+    "full": "- Full mix (no voiceover): keep the low drums and the horn chords, at most about 3 sounds at once, and a short gap before the counter locks.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drums low, mark ticks and steps soft: true, and keep the horn for the title and the last line.",
+    "sheet": [
+      "The land is one flat-shaded plane displaced by hgt(x, z) and coloured per face by height (sand, grass, forest, rock, snow). Shape the land for the topic (coasts, a peninsula, a river valley) but keep it stylised, never a traced real map.",
+      "Light: low warm sunset key (#ffcf99) from one side, warm fog, peach sky (#f2b07a). Water is a single slightly transparent blue plane.",
+      "Routes are tubes along Catmull-Rom curves that hug the terrain and grow with setDrawRange. Campaign arrows are red (#c4302b) extrusions that follow a route.",
+      "Type: Playfair Display 900 headline at the top over a warm fade, the second line italic. JetBrains Mono for dates and place chips (dark brown #2a1a10 on cream).",
+      "Use real dates, places and distances, and say \"about\" for estimates.",
+      "Camera: one slow drift and orbit over the land, no cuts; let the routes do the storytelling.",
+      "Pace: the title holds about 2 seconds, each route takes 1.5 to 2.5 seconds to draw, and the takeaway holds about 2 seconds."
+    ],
+    "sound": [
+      "Bed: low, slow drums (deep thumps with a short noise tail) and a warm pad; horn-like chords (filtered sawtooth) for the title and the end.",
+      "Map events to the kit: a route drawing gets a soft scratching quill (SND.scratch); the marching arrow gets steady soft steps; chips get a soft tick; the counter \"tick\"s when the shown number changes; the final line gets the horn chord."
+    ],
+    "sourceFile": "sources/low-poly-atlas.html",
+    "promptFile": "prompts/low-poly-atlas.md",
+    "sourceBytes": 62360,
+    "prompt": "I want an animated video in the \"Low-Poly Atlas\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, hgt() (the shape of the land), ROADS (from and to, in order), the city props, the arrow timing, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the flat-shaded vertex-coloured terrain built from hgt(), the water plane, growing tubes with setDrawRange(), the arrow that follows a curve, the drifting camera, proj3() labels, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- The land is one flat-shaded plane displaced by hgt(x, z) and coloured per face by height (sand, grass, forest, rock, snow). Shape the land for the topic (coasts, a peninsula, a river valley) but keep it stylised, never a traced real map.\n- Light: low warm sunset key (#ffcf99) from one side, warm fog, peach sky (#f2b07a). Water is a single slightly transparent blue plane.\n- Routes are tubes along Catmull-Rom curves that hug the terrain and grow with setDrawRange. Campaign arrows are red (#c4302b) extrusions that follow a route.\n- Type: Playfair Display 900 headline at the top over a warm fade, the second line italic. JetBrains Mono for dates and place chips (dark brown #2a1a10 on cream).\n- Use real dates, places and distances, and say \"about\" for estimates.\n- Camera: one slow drift and orbit over the land, no cuts; let the routes do the storytelling.\n- Pace: the title holds about 2 seconds, each route takes 1.5 to 2.5 seconds to draw, and the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 64 px or more, place names at 22 px or more and the counter at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why Rome built roads\") unless my content asks for it.\n\nSOUND\n- Bed: low, slow drums (deep thumps with a short noise tail) and a warm pad; horn-like chords (filtered sawtooth) for the title and the end.\n- Map events to the kit: a route drawing gets a soft scratching quill (SND.scratch); the marching arrow gets steady soft steps; chips get a soft tick; the counter \"tick\"s when the shown number changes; the final line gets the horn chord.\n- Full mix (no voiceover): keep the low drums and the horn chords, at most about 3 sounds at once, and a short gap before the counter locks.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Low-Poly Atlas\nFamily: 3D\nLook: Faceted low-poly terrain in warm sunset light, built in Three.js: flat-shaded hills, sand coasts and blue water, with roads, routes and campaign arrows drawing themselves across the land.\nHow it explains: The camera drifts over the land while a route draws itself from a city, a red campaign arrow marches along it, more routes branch out, and a counter adds up the distance. Serif headlines and mono date chips give it the feel of a history book.\n",
+    "promptVo": "I want an animated video in the \"Low-Poly Atlas\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. A route starts drawing as it is mentioned and reaches its end on the destination word, the arrow moves while the march is described, a date chip lands on the date, and the counter locks on its last spoken syllable.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, hgt() (the shape of the land), ROADS (from and to, in order), the city props, the arrow timing, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the flat-shaded vertex-coloured terrain built from hgt(), the water plane, growing tubes with setDrawRange(), the arrow that follows a curve, the drifting camera, proj3() labels, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- The land is one flat-shaded plane displaced by hgt(x, z) and coloured per face by height (sand, grass, forest, rock, snow). Shape the land for the topic (coasts, a peninsula, a river valley) but keep it stylised, never a traced real map.\n- Light: low warm sunset key (#ffcf99) from one side, warm fog, peach sky (#f2b07a). Water is a single slightly transparent blue plane.\n- Routes are tubes along Catmull-Rom curves that hug the terrain and grow with setDrawRange. Campaign arrows are red (#c4302b) extrusions that follow a route.\n- Type: Playfair Display 900 headline at the top over a warm fade, the second line italic. JetBrains Mono for dates and place chips (dark brown #2a1a10 on cream).\n- Use real dates, places and distances, and say \"about\" for estimates.\n- Camera: one slow drift and orbit over the land, no cuts; let the routes do the storytelling.\n- Pace: the title holds about 2 seconds, each route takes 1.5 to 2.5 seconds to draw, and the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 64 px or more, place names at 22 px or more and the counter at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why Rome built roads\") unless my content asks for it.\n\nSOUND\n- Bed: low, slow drums (deep thumps with a short noise tail) and a warm pad; horn-like chords (filtered sawtooth) for the title and the end.\n- Map events to the kit: a route drawing gets a soft scratching quill (SND.scratch); the marching arrow gets steady soft steps; chips get a soft tick; the counter \"tick\"s when the shown number changes; the final line gets the horn chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drums low, mark ticks and steps soft: true, and keep the horn for the title and the last line.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Low-Poly Atlas\nFamily: 3D\nLook: Faceted low-poly terrain in warm sunset light, built in Three.js: flat-shaded hills, sand coasts and blue water, with roads, routes and campaign arrows drawing themselves across the land.\nHow it explains: The camera drifts over the land while a route draws itself from a city, a red campaign arrow marches along it, more routes branch out, and a counter adds up the distance. Serif headlines and mono date chips give it the feel of a history book.\n"
+  },
+  {
+    "id": "size-lineup",
+    "num": "13",
+    "name": "Size Lineup",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.",
+    "how": "The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.",
+    "fonts": "Archivo Black, JetBrains Mono (500 and 700)",
+    "demo": "How big is a blue whale?",
+    "replace": "TL, ITEMS (names, real sizes, shapes, colours, positions), the shapes in init3(), the camera keys in CAMK, the tags in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3(), the endless floor with GridHelper and fog, the camera track (track over CAMK), dimension lines drawn from proj3() of base and top, the dark height chips, wordLine() and grain()",
+    "sizes": "keep the headline at 60 px or more, height tags at 24 px or more and names at 20 px or more",
+    "voLine": "The camera starts moving to the next object about 0.3 s before it is named, its dimension line draws on its name and its tag lands on the number.",
+    "full": "- Full mix (no voiceover): keep the light pad, soft steps while the camera travels, and a short silence before the giant is revealed.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark steps and plucks soft: true and keep the low swell for the final reveal.",
+    "sheet": [
+      "Every object is built from simple Three.js primitives at its real size in metres (1 unit = 1 m) and stands on the same floor. Simplify shapes (capsules, ellipsoids, boxes) but keep proportions true: never scale anything up \"for readability\".",
+      "Order is always smallest to biggest, left to right, with even gaps. The camera trucks right and pulls back so each new object enters from the right.",
+      "Floor: pale blue-grey (#e8eef4) with a soft grid and fog so it reads as endless. One soft shadow-casting light.",
+      "Tags: a 2 px dimension line with end ticks beside each object (base to top), a dark navy chip (#14263d) with the size, and a small mono name above it.",
+      "Type: Archivo Black headline at the top in navy with the second line in blue (#2f6bd8). JetBrains Mono for every number.",
+      "Use real, typical sizes and say \"up to\" when you show a maximum.",
+      "Pace: hold the first object about 2 seconds, then one new object every 2 to 2.5 seconds, and hold the full lineup about 3 seconds."
+    ],
+    "sound": [
+      "Bed: a light, curious pad (padBed) with soft hats.",
+      "Map events to the kit: soft footsteps (SND.tap) while the camera travels; each new tag gets a pluck that climbs in pitch; dimension lines get a short \"tick\"; the giant gets a long, low swell with a slow pitch bend and a \"boom\"; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/size-lineup.html",
+    "promptFile": "prompts/size-lineup.md",
+    "sourceBytes": 60143,
+    "prompt": "I want an animated video in the \"Size Lineup\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, ITEMS (names, real sizes, shapes, colours, positions), the shapes in init3(), the camera keys in CAMK, the tags in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the endless floor with GridHelper and fog, the camera track (track over CAMK), dimension lines drawn from proj3() of base and top, the dark height chips, wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Every object is built from simple Three.js primitives at its real size in metres (1 unit = 1 m) and stands on the same floor. Simplify shapes (capsules, ellipsoids, boxes) but keep proportions true: never scale anything up \"for readability\".\n- Order is always smallest to biggest, left to right, with even gaps. The camera trucks right and pulls back so each new object enters from the right.\n- Floor: pale blue-grey (#e8eef4) with a soft grid and fog so it reads as endless. One soft shadow-casting light.\n- Tags: a 2 px dimension line with end ticks beside each object (base to top), a dark navy chip (#14263d) with the size, and a small mono name above it.\n- Type: Archivo Black headline at the top in navy with the second line in blue (#2f6bd8). JetBrains Mono for every number.\n- Use real, typical sizes and say \"up to\" when you show a maximum.\n- Pace: hold the first object about 2 seconds, then one new object every 2 to 2.5 seconds, and hold the full lineup about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, height tags at 24 px or more and names at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How big is a blue whale?\") unless my content asks for it.\n\nSOUND\n- Bed: a light, curious pad (padBed) with soft hats.\n- Map events to the kit: soft footsteps (SND.tap) while the camera travels; each new tag gets a pluck that climbs in pitch; dimension lines get a short \"tick\"; the giant gets a long, low swell with a slow pitch bend and a \"boom\"; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the light pad, soft steps while the camera travels, and a short silence before the giant is revealed.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Size Lineup\nFamily: 3D\nLook: Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.\nHow it explains: The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.\n",
+    "promptVo": "I want an animated video in the \"Size Lineup\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The camera starts moving to the next object about 0.3 s before it is named, its dimension line draws on its name and its tag lands on the number.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, ITEMS (names, real sizes, shapes, colours, positions), the shapes in init3(), the camera keys in CAMK, the tags in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the endless floor with GridHelper and fog, the camera track (track over CAMK), dimension lines drawn from proj3() of base and top, the dark height chips, wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Every object is built from simple Three.js primitives at its real size in metres (1 unit = 1 m) and stands on the same floor. Simplify shapes (capsules, ellipsoids, boxes) but keep proportions true: never scale anything up \"for readability\".\n- Order is always smallest to biggest, left to right, with even gaps. The camera trucks right and pulls back so each new object enters from the right.\n- Floor: pale blue-grey (#e8eef4) with a soft grid and fog so it reads as endless. One soft shadow-casting light.\n- Tags: a 2 px dimension line with end ticks beside each object (base to top), a dark navy chip (#14263d) with the size, and a small mono name above it.\n- Type: Archivo Black headline at the top in navy with the second line in blue (#2f6bd8). JetBrains Mono for every number.\n- Use real, typical sizes and say \"up to\" when you show a maximum.\n- Pace: hold the first object about 2 seconds, then one new object every 2 to 2.5 seconds, and hold the full lineup about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, height tags at 24 px or more and names at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How big is a blue whale?\") unless my content asks for it.\n\nSOUND\n- Bed: a light, curious pad (padBed) with soft hats.\n- Map events to the kit: soft footsteps (SND.tap) while the camera travels; each new tag gets a pluck that climbs in pitch; dimension lines get a short \"tick\"; the giant gets a long, low swell with a slow pitch bend and a \"boom\"; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark steps and plucks soft: true and keep the low swell for the final reveal.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Size Lineup\nFamily: 3D\nLook: Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.\nHow it explains: The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.\n"
+  },
+  {
+    "id": "data-city",
+    "num": "14",
+    "name": "Data City",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.",
+    "how": "Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.",
+    "fonts": "Space Grotesk (500 and 700), JetBrains Mono (700)",
+    "demo": "Hours online per day, 2018 to 2024 (example data)",
+    "replace": "TL, DATA (labels and values), the colour ramp, the highlight index, the headline, callout and takeaway text in overlay() and scoreSound()",
+    "keep": "makeGL(), the grid floor and fog, towers built from DATA with window strips and emissive roofs, the rise-and-count timing, the orbiting camera, the beam, proj3() value labels, the glow pass, chip() and wordLine()",
+    "sizes": "keep the headline at 56 px or more, values at 26 px or more and axis labels at 20 px or more",
+    "voLine": "Each tower starts rising as its label is said and its value locks on the number; the beam lands on the stressed word of the highlight.",
+    "full": "- Full mix (no voiceover): keep the pulsing bass pad, at most about 3 sounds at once, and a short gap before the highlight.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks and ticks soft: true and keep the swell for the highlight.",
+    "sheet": [
+      "Data first: tower heights are exactly proportional to the values (one scale, baseline at zero). Label every tower on the floor and print its value above it. If the data is illustrative, keep an \"EXAMPLE DATA\" chip on screen.",
+      "Towers: navy boxes (#1c2a6e) with thin lit window strips on the front and a glowing roof whose colour runs from cyan (#33e1ff) to magenta (#ff4fd8) across the series.",
+      "Night city: deep navy background (#080d22), a blue grid floor, fog so the far edge fades, and a soft screen-blended glow above each roof.",
+      "Camera: a slow orbit around the skyline, then a rise above it for the takeaway. No cuts.",
+      "Type: Space Grotesk 700 headline top left in white with the second line in cyan; JetBrains Mono for values and labels.",
+      "Highlight: a translucent beam rises from the key tower, with a white callout card.",
+      "Pace: one tower every 0.3 to 0.5 seconds, hold the full skyline about 2 seconds, then the highlight and the takeaway."
+    ],
+    "sound": [
+      "Bed: a dark synth pad with a pulsing bass on the beat (padBed with kick) and light hats.",
+      "Map events to the kit: each tower rising gets a pluck whose pitch follows its height; values \"tick\" while counting; the beam gets \"riser\" and a bright swell; the callout gets \"pop\"; the takeaway gets \"shimmer\"."
+    ],
+    "sourceFile": "sources/data-city.html",
+    "promptFile": "prompts/data-city.md",
+    "sourceBytes": 59756,
+    "prompt": "I want an animated video in the \"Data City\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, DATA (labels and values), the colour ramp, the highlight index, the headline, callout and takeaway text in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the grid floor and fog, towers built from DATA with window strips and emissive roofs, the rise-and-count timing, the orbiting camera, the beam, proj3() value labels, the glow pass, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).\n\nTHE STYLE\n- Data first: tower heights are exactly proportional to the values (one scale, baseline at zero). Label every tower on the floor and print its value above it. If the data is illustrative, keep an \"EXAMPLE DATA\" chip on screen.\n- Towers: navy boxes (#1c2a6e) with thin lit window strips on the front and a glowing roof whose colour runs from cyan (#33e1ff) to magenta (#ff4fd8) across the series.\n- Night city: deep navy background (#080d22), a blue grid floor, fog so the far edge fades, and a soft screen-blended glow above each roof.\n- Camera: a slow orbit around the skyline, then a rise above it for the takeaway. No cuts.\n- Type: Space Grotesk 700 headline top left in white with the second line in cyan; JetBrains Mono for values and labels.\n- Highlight: a translucent beam rises from the key tower, with a white callout card.\n- Pace: one tower every 0.3 to 0.5 seconds, hold the full skyline about 2 seconds, then the highlight and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, values at 26 px or more and axis labels at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Hours online per day, 2018 to 2024 (example data)\") unless my content asks for it.\n\nSOUND\n- Bed: a dark synth pad with a pulsing bass on the beat (padBed with kick) and light hats.\n- Map events to the kit: each tower rising gets a pluck whose pitch follows its height; values \"tick\" while counting; the beam gets \"riser\" and a bright swell; the callout gets \"pop\"; the takeaway gets \"shimmer\".\n- Full mix (no voiceover): keep the pulsing bass pad, at most about 3 sounds at once, and a short gap before the highlight.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Data City\nFamily: 3D\nLook: A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.\nHow it explains: Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.\n",
+    "promptVo": "I want an animated video in the \"Data City\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each tower starts rising as its label is said and its value locks on the number; the beam lands on the stressed word of the highlight.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, DATA (labels and values), the colour ramp, the highlight index, the headline, callout and takeaway text in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the grid floor and fog, towers built from DATA with window strips and emissive roofs, the rise-and-count timing, the orbiting camera, the beam, proj3() value labels, the glow pass, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).\n\nTHE STYLE\n- Data first: tower heights are exactly proportional to the values (one scale, baseline at zero). Label every tower on the floor and print its value above it. If the data is illustrative, keep an \"EXAMPLE DATA\" chip on screen.\n- Towers: navy boxes (#1c2a6e) with thin lit window strips on the front and a glowing roof whose colour runs from cyan (#33e1ff) to magenta (#ff4fd8) across the series.\n- Night city: deep navy background (#080d22), a blue grid floor, fog so the far edge fades, and a soft screen-blended glow above each roof.\n- Camera: a slow orbit around the skyline, then a rise above it for the takeaway. No cuts.\n- Type: Space Grotesk 700 headline top left in white with the second line in cyan; JetBrains Mono for values and labels.\n- Highlight: a translucent beam rises from the key tower, with a white callout card.\n- Pace: one tower every 0.3 to 0.5 seconds, hold the full skyline about 2 seconds, then the highlight and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, values at 26 px or more and axis labels at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Hours online per day, 2018 to 2024 (example data)\") unless my content asks for it.\n\nSOUND\n- Bed: a dark synth pad with a pulsing bass on the beat (padBed with kick) and light hats.\n- Map events to the kit: each tower rising gets a pluck whose pitch follows its height; values \"tick\" while counting; the beam gets \"riser\" and a bright swell; the callout gets \"pop\"; the takeaway gets \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks and ticks soft: true and keep the swell for the highlight.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Data City\nFamily: 3D\nLook: A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.\nHow it explains: Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.\n"
+  },
+  {
+    "id": "glass-icons",
+    "num": "15",
+    "name": "Glass Icons",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.",
+    "how": "The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.",
+    "fonts": "Inter (500 to 900), JetBrains Mono (700)",
+    "demo": "5 AI tools that save hours (tool types, not brands)",
+    "replace": "TL, ICONS (colours, symbols, names, one-liners), the focus order, the headline and takeaway text and scoreSound()",
+    "keep": "makeGL(), the rounded-square extruded icon geometry with clearcoat glass, the coloured point lights, the float/focus/line-up motion in pose(), the frosted info card, the gradient background, chip() and wordLine()",
+    "sizes": "keep the headline at 64 px or more, the card title at 48 px or more and card text at 28 px or more",
+    "voLine": "An icon swings forward on the first word of its item, its name lands on that word, and the line-up lands on the first word of the takeaway.",
+    "full": "- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and a clean glass chime on each focus.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chimes and ticks soft: true and keep the whoosh quiet.",
+    "sheet": [
+      "Icons are real 3D: rounded squares extruded with a bevel, MeshPhysicalMaterial with clearcoat and slight transparency, each a different soft colour, with a simple white 3D symbol on the face. Never use a real app logo or brand; describe tool types.",
+      "Background: a soft three-colour gradient (mint #c7f0e4, sky #c8dcff, peach #ffd9c7) painted in 2D behind a transparent WebGL canvas, lit by two coloured point lights for glassy highlights.",
+      "One icon is in focus at a time: it swings to the centre, grows and faces the camera; the rest float smaller and dimmer behind it.",
+      "Info card: frosted white (rgba white 0.7, white border) under the focused icon with a mono number, an Inter 800 name and one plain benefit line.",
+      "Type: Inter 900 headline in near-black (#0f1a2a), second line blue (#2d5bff); JetBrains Mono for numbers and tags.",
+      "Pace: icons arrive in the first 1.5 seconds, then one focus every 2 seconds, and the line-up holds about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a bright, airy pad with light hats.",
+      "Map events to the kit: icons arriving get soft glassy pings; each focus gets a soft \"whoosh\" and a two-note glass chime (SND.chime) that climbs; card text gets a soft tick; the line-up gets a rising arpeggio and \"shimmer\"."
+    ],
+    "sourceFile": "sources/glass-icons.html",
+    "promptFile": "prompts/glass-icons.md",
+    "sourceBytes": 59698,
+    "prompt": "I want an animated video in the \"Glass Icons\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, ICONS (colours, symbols, names, one-liners), the focus order, the headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the rounded-square extruded icon geometry with clearcoat glass, the coloured point lights, the float/focus/line-up motion in pose(), the frosted info card, the gradient background, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (500 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Icons are real 3D: rounded squares extruded with a bevel, MeshPhysicalMaterial with clearcoat and slight transparency, each a different soft colour, with a simple white 3D symbol on the face. Never use a real app logo or brand; describe tool types.\n- Background: a soft three-colour gradient (mint #c7f0e4, sky #c8dcff, peach #ffd9c7) painted in 2D behind a transparent WebGL canvas, lit by two coloured point lights for glassy highlights.\n- One icon is in focus at a time: it swings to the centre, grows and faces the camera; the rest float smaller and dimmer behind it.\n- Info card: frosted white (rgba white 0.7, white border) under the focused icon with a mono number, an Inter 800 name and one plain benefit line.\n- Type: Inter 900 headline in near-black (#0f1a2a), second line blue (#2d5bff); JetBrains Mono for numbers and tags.\n- Pace: icons arrive in the first 1.5 seconds, then one focus every 2 seconds, and the line-up holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, the card title at 48 px or more and card text at 28 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"5 AI tools that save hours (tool types, not brands)\") unless my content asks for it.\n\nSOUND\n- Bed: a bright, airy pad with light hats.\n- Map events to the kit: icons arriving get soft glassy pings; each focus gets a soft \"whoosh\" and a two-note glass chime (SND.chime) that climbs; card text gets a soft tick; the line-up gets a rising arpeggio and \"shimmer\".\n- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and a clean glass chime on each focus.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Glass Icons\nFamily: 3D\nLook: Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.\nHow it explains: The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.\n",
+    "promptVo": "I want an animated video in the \"Glass Icons\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. An icon swings forward on the first word of its item, its name lands on that word, and the line-up lands on the first word of the takeaway.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, ICONS (colours, symbols, names, one-liners), the focus order, the headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the rounded-square extruded icon geometry with clearcoat glass, the coloured point lights, the float/focus/line-up motion in pose(), the frosted info card, the gradient background, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (500 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Icons are real 3D: rounded squares extruded with a bevel, MeshPhysicalMaterial with clearcoat and slight transparency, each a different soft colour, with a simple white 3D symbol on the face. Never use a real app logo or brand; describe tool types.\n- Background: a soft three-colour gradient (mint #c7f0e4, sky #c8dcff, peach #ffd9c7) painted in 2D behind a transparent WebGL canvas, lit by two coloured point lights for glassy highlights.\n- One icon is in focus at a time: it swings to the centre, grows and faces the camera; the rest float smaller and dimmer behind it.\n- Info card: frosted white (rgba white 0.7, white border) under the focused icon with a mono number, an Inter 800 name and one plain benefit line.\n- Type: Inter 900 headline in near-black (#0f1a2a), second line blue (#2d5bff); JetBrains Mono for numbers and tags.\n- Pace: icons arrive in the first 1.5 seconds, then one focus every 2 seconds, and the line-up holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, the card title at 48 px or more and card text at 28 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"5 AI tools that save hours (tool types, not brands)\") unless my content asks for it.\n\nSOUND\n- Bed: a bright, airy pad with light hats.\n- Map events to the kit: icons arriving get soft glassy pings; each focus gets a soft \"whoosh\" and a two-note glass chime (SND.chime) that climbs; card text gets a soft tick; the line-up gets a rising arpeggio and \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chimes and ticks soft: true and keep the whoosh quiet.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Glass Icons\nFamily: 3D\nLook: Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.\nHow it explains: The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.\n"
+  },
+  {
+    "id": "iso-cutaway",
+    "num": "16",
+    "name": "Iso Cutaway",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.",
+    "how": "A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.",
+    "fonts": "Bricolage Grotesque (600 and 800), JetBrains Mono (700)",
+    "demo": "A day inside a bakery",
+    "replace": "TL, FLOORS (wall colours, props, people and their paths), the clock range, the labels, the headline and takeaway and scoreSound()",
+    "keep": "makeGL(), the orthographic iso camera, the floor slab and two back walls per storey, tiny capsule people that walk between waypoints, the night-to-day sky and light ramp, the clock chip, the dark labels on leader lines, wordLine()",
+    "sizes": "keep the headline at 60 px or more, labels at 22 px or more and the clock at 40 px or more",
+    "voLine": "The clock jumps to each time as it is said, the floor it names lights up on the same word, and its label lands on the time.",
+    "full": "- Full mix (no voiceover): keep the cosy pad and the clock ticks, at most about 3 sounds at once.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the clock ticks soft: true and very low.",
+    "sheet": [
+      "One building, seen in true isometric with an OrthographicCamera, built from boxes: a slab per floor, two back walls per floor in a distinct warm colour, props from boxes, cylinders and spheres, people as tiny capsules with round heads.",
+      "Time is the story: a clock chip at the top runs through the day, the sky colour and light warm from night blue (#1d2a4a) to morning cream (#fde8d2), and each floor gets its moment.",
+      "Only the active floor is fully lit; the others sit slightly darker. People walk between waypoints with an ease and a small bob.",
+      "Labels: dark brown chips (#3b2416) with a mono time and verb, on leader lines from the floor to the right edge.",
+      "Type: Bricolage Grotesque 800 headline in dark brown with the second line in the accent (#d9542b).",
+      "Pace: one floor beat every 2.5 to 3 seconds, clock ticks every half hour of story time."
+    ],
+    "sound": [
+      "Bed: a cosy, warm pad (padBed) and a steady soft clock tick.",
+      "Map events to the kit: each floor lighting up gets a soft \"whoosh\" and a pluck; machines get a low hum; people stepping get soft taps; the shop opening gets a two-note bell (SND.chime); the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/iso-cutaway.html",
+    "promptFile": "prompts/iso-cutaway.md",
+    "sourceBytes": 61401,
+    "prompt": "I want an animated video in the \"Iso Cutaway\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, FLOORS (wall colours, props, people and their paths), the clock range, the labels, the headline and takeaway and scoreSound(). Keep and reuse the style's helpers (makeGL(), the orthographic iso camera, the floor slab and two back walls per storey, tiny capsule people that walk between waypoints, the night-to-day sky and light ramp, the clock chip, the dark labels on leader lines, wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Bricolage Grotesque (600 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- One building, seen in true isometric with an OrthographicCamera, built from boxes: a slab per floor, two back walls per floor in a distinct warm colour, props from boxes, cylinders and spheres, people as tiny capsules with round heads.\n- Time is the story: a clock chip at the top runs through the day, the sky colour and light warm from night blue (#1d2a4a) to morning cream (#fde8d2), and each floor gets its moment.\n- Only the active floor is fully lit; the others sit slightly darker. People walk between waypoints with an ease and a small bob.\n- Labels: dark brown chips (#3b2416) with a mono time and verb, on leader lines from the floor to the right edge.\n- Type: Bricolage Grotesque 800 headline in dark brown with the second line in the accent (#d9542b).\n- Pace: one floor beat every 2.5 to 3 seconds, clock ticks every half hour of story time.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, labels at 22 px or more and the clock at 40 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A day inside a bakery\") unless my content asks for it.\n\nSOUND\n- Bed: a cosy, warm pad (padBed) and a steady soft clock tick.\n- Map events to the kit: each floor lighting up gets a soft \"whoosh\" and a pluck; machines get a low hum; people stepping get soft taps; the shop opening gets a two-note bell (SND.chime); the takeaway gets an open chord.\n- Full mix (no voiceover): keep the cosy pad and the clock ticks, at most about 3 sounds at once.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Iso Cutaway\nFamily: 3D\nLook: An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.\nHow it explains: A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.\n",
+    "promptVo": "I want an animated video in the \"Iso Cutaway\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The clock jumps to each time as it is said, the floor it names lights up on the same word, and its label lands on the time.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, FLOORS (wall colours, props, people and their paths), the clock range, the labels, the headline and takeaway and scoreSound(). Keep and reuse the style's helpers (makeGL(), the orthographic iso camera, the floor slab and two back walls per storey, tiny capsule people that walk between waypoints, the night-to-day sky and light ramp, the clock chip, the dark labels on leader lines, wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Bricolage Grotesque (600 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- One building, seen in true isometric with an OrthographicCamera, built from boxes: a slab per floor, two back walls per floor in a distinct warm colour, props from boxes, cylinders and spheres, people as tiny capsules with round heads.\n- Time is the story: a clock chip at the top runs through the day, the sky colour and light warm from night blue (#1d2a4a) to morning cream (#fde8d2), and each floor gets its moment.\n- Only the active floor is fully lit; the others sit slightly darker. People walk between waypoints with an ease and a small bob.\n- Labels: dark brown chips (#3b2416) with a mono time and verb, on leader lines from the floor to the right edge.\n- Type: Bricolage Grotesque 800 headline in dark brown with the second line in the accent (#d9542b).\n- Pace: one floor beat every 2.5 to 3 seconds, clock ticks every half hour of story time.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, labels at 22 px or more and the clock at 40 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A day inside a bakery\") unless my content asks for it.\n\nSOUND\n- Bed: a cosy, warm pad (padBed) and a steady soft clock tick.\n- Map events to the kit: each floor lighting up gets a soft \"whoosh\" and a pluck; machines get a low hum; people stepping get soft taps; the shop opening gets a two-note bell (SND.chime); the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the clock ticks soft: true and very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Iso Cutaway\nFamily: 3D\nLook: An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.\nHow it explains: A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.\n"
+  },
+  {
+    "id": "globe-arcs",
+    "num": "17",
+    "name": "Globe Arcs",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.",
+    "how": "The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.",
+    "fonts": "Space Grotesk (500 and 700), JetBrains Mono (700)",
+    "demo": "Where your coffee travels",
+    "replace": "TL, the land mask in landAt(), ROUTES (lat/lon pairs and names), the travelling dot, labels, counter, headline and takeaway text and scoreSound()",
+    "keep": "makeGL(), the dotted globe built from landAt(), ll() lat/lon placement, arcs as growing tubes (setDrawRange) on great-circle curves, pins with glow, the atmosphere pass, the starfield, proj3() labels, chip() and wordLine()",
+    "sizes": "keep the headline at 60 px or more, place labels at 22 px or more and the counter at 60 px or more",
+    "voLine": "A route starts drawing as its start is named and lands on its destination word, its pin glows on the same word, and the counter locks on the last spoken syllable of the distance.",
+    "full": "- Full mix (no voiceover): keep the airy pad, at most about 3 sounds at once, sonar pings for pins.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and ticks soft: true and keep whooshes low.",
+    "sheet": [
+      "The globe is a dark sphere plus thousands of small cyan points placed where land is. For a real-world topic, make landAt(lat, lon) follow real continents (simple polygons or a coarse mask is fine) so routes start and end in the right places.",
+      "Routes are amber (#ffb547) tubes on great-circle arcs that lift off the surface (higher for longer routes) and grow with setDrawRange. Pins are small glowing spheres.",
+      "Space: near-black navy (#040913), a fixed starfield, and a soft blue atmosphere ring painted in 2D behind the labels.",
+      "Type: Space Grotesk 700 headline in white with the second line amber; JetBrains Mono for place chips (amber fill, dark text) and distances.",
+      "Use real places, real distances (say \"about\") and real times.",
+      "Pace: the globe turns into position in about 1.5 seconds, then one route every 1.5 to 2 seconds."
+    ],
+    "sound": [
+      "Bed: an airy, slow pad with a soft low drone.",
+      "Map events to the kit: pins get a soft sonar ping (a sine with long verb); each arc gets a rising airy \"whoosh\"; the travelling dot gets a faint tick trail; the counter \"tick\"s when the shown number changes; the takeaway gets \"shimmer\"."
+    ],
+    "sourceFile": "sources/globe-arcs.html",
+    "promptFile": "prompts/globe-arcs.md",
+    "sourceBytes": 61641,
+    "prompt": "I want an animated video in the \"Globe Arcs\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the land mask in landAt(), ROUTES (lat/lon pairs and names), the travelling dot, labels, counter, headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dotted globe built from landAt(), ll() lat/lon placement, arcs as growing tubes (setDrawRange) on great-circle curves, pins with glow, the atmosphere pass, the starfield, proj3() labels, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).\n\nTHE STYLE\n- The globe is a dark sphere plus thousands of small cyan points placed where land is. For a real-world topic, make landAt(lat, lon) follow real continents (simple polygons or a coarse mask is fine) so routes start and end in the right places.\n- Routes are amber (#ffb547) tubes on great-circle arcs that lift off the surface (higher for longer routes) and grow with setDrawRange. Pins are small glowing spheres.\n- Space: near-black navy (#040913), a fixed starfield, and a soft blue atmosphere ring painted in 2D behind the labels.\n- Type: Space Grotesk 700 headline in white with the second line amber; JetBrains Mono for place chips (amber fill, dark text) and distances.\n- Use real places, real distances (say \"about\") and real times.\n- Pace: the globe turns into position in about 1.5 seconds, then one route every 1.5 to 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, place labels at 22 px or more and the counter at 60 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Where your coffee travels\") unless my content asks for it.\n\nSOUND\n- Bed: an airy, slow pad with a soft low drone.\n- Map events to the kit: pins get a soft sonar ping (a sine with long verb); each arc gets a rising airy \"whoosh\"; the travelling dot gets a faint tick trail; the counter \"tick\"s when the shown number changes; the takeaway gets \"shimmer\".\n- Full mix (no voiceover): keep the airy pad, at most about 3 sounds at once, sonar pings for pins.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Globe Arcs\nFamily: 3D\nLook: A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.\nHow it explains: The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Globe Arcs\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. A route starts drawing as its start is named and lands on its destination word, its pin glows on the same word, and the counter locks on the last spoken syllable of the distance.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the land mask in landAt(), ROUTES (lat/lon pairs and names), the travelling dot, labels, counter, headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dotted globe built from landAt(), ll() lat/lon placement, arcs as growing tubes (setDrawRange) on great-circle curves, pins with glow, the atmosphere pass, the starfield, proj3() labels, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).\n\nTHE STYLE\n- The globe is a dark sphere plus thousands of small cyan points placed where land is. For a real-world topic, make landAt(lat, lon) follow real continents (simple polygons or a coarse mask is fine) so routes start and end in the right places.\n- Routes are amber (#ffb547) tubes on great-circle arcs that lift off the surface (higher for longer routes) and grow with setDrawRange. Pins are small glowing spheres.\n- Space: near-black navy (#040913), a fixed starfield, and a soft blue atmosphere ring painted in 2D behind the labels.\n- Type: Space Grotesk 700 headline in white with the second line amber; JetBrains Mono for place chips (amber fill, dark text) and distances.\n- Use real places, real distances (say \"about\") and real times.\n- Pace: the globe turns into position in about 1.5 seconds, then one route every 1.5 to 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, place labels at 22 px or more and the counter at 60 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Where your coffee travels\") unless my content asks for it.\n\nSOUND\n- Bed: an airy, slow pad with a soft low drone.\n- Map events to the kit: pins get a soft sonar ping (a sine with long verb); each arc gets a rising airy \"whoosh\"; the travelling dot gets a faint tick trail; the counter \"tick\"s when the shown number changes; the takeaway gets \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and ticks soft: true and keep whooshes low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Globe Arcs\nFamily: 3D\nLook: A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.\nHow it explains: The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.\n"
+  },
+  {
+    "id": "physics-toybox",
+    "num": "18",
+    "name": "Physics Toybox",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.",
+    "how": "A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.",
+    "fonts": "Archivo Black, Inter (700 and 800), JetBrains Mono (700)",
+    "demo": "What if you tip a chain of growing dominoes?",
+    "replace": "TL, the chain (count, sizes, path, colours), the slow-motion window in simT(), the props, the facts in overlay() and scoreSound()",
+    "keep": "makeGL(), lights3() with shadows, the floor, the deterministic fall model (each piece starts when the previous one hits it), the simT() time remap for slow motion, motion streaks, chip() and wordLine()",
+    "sizes": "keep the headline at 56 px or more, the fact chip at 28 px or more and the slow-mo tag at 22 px or more",
+    "voLine": "The first hit lands on the word that starts the chain, slow motion begins on the word that sets up the key moment, and the last piece lands on the stressed word of the punchline.",
+    "full": "- Full mix (no voiceover): keep the playful pad, every hit audible, and a short gap before the last, biggest hit.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark clacks soft: true and keep the final thud full.",
+    "sheet": [
+      "Every object is a simple, glossy Three.js primitive in toy colours (#ff5a5f, #2ec4b6, #3a86ff, #ff9f1c, #8f5bff) on a warm yellow floor (#ffe39b) with sharp soft shadows.",
+      "Motion must be physically believable but deterministic: compute fall angles, rolls and bounces from t with simple formulas (no physics engine), each piece starting when the previous one reaches it.",
+      "Slow motion: remap time with simT(t) for one key window (0.25×) and show a dark \"0.25× SLOW-MO\" chip while it runs.",
+      "Type: Archivo Black headline in near-black with the second line red; one white fact chip at the bottom in Inter 700.",
+      "Use real physics facts (with the source idea in plain words).",
+      "Pace: the setup holds under 2 seconds, the chain runs, slow motion lasts 2 to 3 seconds, the takeaway holds about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a playful, light pad with soft hats.",
+      "Map events to the kit: a rolling ball gets a soft filtered noise roll; each domino hit gets a \"click\" plus a wooden tap whose pitch drops as the pieces get bigger; slow motion gets a pitched-down \"whoosh\"; the last big hit gets SND.thud and \"boom\"; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/physics-toybox.html",
+    "promptFile": "prompts/physics-toybox.md",
+    "sourceBytes": 60015,
+    "prompt": "I want an animated video in the \"Physics Toybox\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the chain (count, sizes, path, colours), the slow-motion window in simT(), the props, the facts in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3() with shadows, the floor, the deterministic fall model (each piece starts when the previous one hits it), the simT() time remap for slow motion, motion streaks, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- Every object is a simple, glossy Three.js primitive in toy colours (#ff5a5f, #2ec4b6, #3a86ff, #ff9f1c, #8f5bff) on a warm yellow floor (#ffe39b) with sharp soft shadows.\n- Motion must be physically believable but deterministic: compute fall angles, rolls and bounces from t with simple formulas (no physics engine), each piece starting when the previous one reaches it.\n- Slow motion: remap time with simT(t) for one key window (0.25×) and show a dark \"0.25× SLOW-MO\" chip while it runs.\n- Type: Archivo Black headline in near-black with the second line red; one white fact chip at the bottom in Inter 700.\n- Use real physics facts (with the source idea in plain words).\n- Pace: the setup holds under 2 seconds, the chain runs, slow motion lasts 2 to 3 seconds, the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, the fact chip at 28 px or more and the slow-mo tag at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"What if you tip a chain of growing dominoes?\") unless my content asks for it.\n\nSOUND\n- Bed: a playful, light pad with soft hats.\n- Map events to the kit: a rolling ball gets a soft filtered noise roll; each domino hit gets a \"click\" plus a wooden tap whose pitch drops as the pieces get bigger; slow motion gets a pitched-down \"whoosh\"; the last big hit gets SND.thud and \"boom\"; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the playful pad, every hit audible, and a short gap before the last, biggest hit.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Physics Toybox\nFamily: 3D\nLook: Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.\nHow it explains: A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Physics Toybox\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The first hit lands on the word that starts the chain, slow motion begins on the word that sets up the key moment, and the last piece lands on the stressed word of the punchline.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the chain (count, sizes, path, colours), the slow-motion window in simT(), the props, the facts in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3() with shadows, the floor, the deterministic fall model (each piece starts when the previous one hits it), the simT() time remap for slow motion, motion streaks, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- Every object is a simple, glossy Three.js primitive in toy colours (#ff5a5f, #2ec4b6, #3a86ff, #ff9f1c, #8f5bff) on a warm yellow floor (#ffe39b) with sharp soft shadows.\n- Motion must be physically believable but deterministic: compute fall angles, rolls and bounces from t with simple formulas (no physics engine), each piece starting when the previous one reaches it.\n- Slow motion: remap time with simT(t) for one key window (0.25×) and show a dark \"0.25× SLOW-MO\" chip while it runs.\n- Type: Archivo Black headline in near-black with the second line red; one white fact chip at the bottom in Inter 700.\n- Use real physics facts (with the source idea in plain words).\n- Pace: the setup holds under 2 seconds, the chain runs, slow motion lasts 2 to 3 seconds, the takeaway holds about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, the fact chip at 28 px or more and the slow-mo tag at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"What if you tip a chain of growing dominoes?\") unless my content asks for it.\n\nSOUND\n- Bed: a playful, light pad with soft hats.\n- Map events to the kit: a rolling ball gets a soft filtered noise roll; each domino hit gets a \"click\" plus a wooden tap whose pitch drops as the pieces get bigger; slow motion gets a pitched-down \"whoosh\"; the last big hit gets SND.thud and \"boom\"; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark clacks soft: true and keep the final thud full.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Physics Toybox\nFamily: 3D\nLook: Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.\nHow it explains: A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.\n"
+  },
+  {
+    "id": "deep-layers",
+    "num": "19",
+    "name": "Deep Layers",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.",
+    "how": "The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.",
+    "fonts": "Anton, JetBrains Mono (500 and 700)",
+    "demo": "How deep have we dug?",
+    "replace": "TL, LAYERS (names, thickness, colours, the real depth each one starts at), the props on top, the depth curve in depthAt(), the labels and the takeaway in overlay() and scoreSound()",
+    "keep": "makeGL(), the stacked cross-section block, the surface props, the drill line and glowing tip, the descending camera, the depth counter, the side tick ruler, the NOT TO SCALE chip, chip() and wordLine()",
+    "sizes": "keep the headline at 64 px or more, the depth counter at 80 px or more and layer labels at 22 px or more",
+    "voLine": "The drill reaches each layer as it is named and its label lands on that word; the counter locks on the last spoken syllable of the final depth.",
+    "full": "- Full mix (no voiceover): keep the drill hum and the rumble, a beep for each layer, and a hiss of heat at the bottom.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drill hum very low and mark beeps soft: true.",
+    "sheet": [
+      "The block is a stack of Three.js boxes, one per layer, each a believable material colour (grass green, soil brown, sand, grey rocks, dark granite, glowing orange heat). Thickness is compressed for the frame, so a \"NOT TO SCALE\" chip stays on screen, but every label shows the real depth.",
+      "A small surface scene (a house, trees) on top tells you where you are. The drill is a thin white cylinder with a glowing yellow tip that grows downward.",
+      "The camera dives down beside the cut face, always a little ahead of the drill tip.",
+      "Labels: dark mono chips on the left with the layer name and its real depth, joined to the face by ticks on a side ruler.",
+      "Type: Anton for the headline (white with a dark outline, second line yellow) and the depth counter, which glows warmer as it goes deeper.",
+      "Pace: one layer every 1.5 to 2 seconds; hold the bottom for about 2 seconds before the takeaway."
+    ],
+    "sound": [
+      "Bed: a drill hum (filtered sawtooth with a slight wobble) over a low rumble that grows with depth.",
+      "Map events to the kit: each new layer gets a short beep (SND.beep) and a soft \"tick\"; the counter \"tick\"s when the shown number changes; reaching the hot layer gets a hiss and a low \"boom\"; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/deep-layers.html",
+    "promptFile": "prompts/deep-layers.md",
+    "sourceBytes": 60698,
+    "prompt": "I want an animated video in the \"Deep Layers\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, LAYERS (names, thickness, colours, the real depth each one starts at), the props on top, the depth curve in depthAt(), the labels and the takeaway in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the stacked cross-section block, the surface props, the drill line and glowing tip, the descending camera, the depth counter, the side tick ruler, the NOT TO SCALE chip, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (500 and 700).\n\nTHE STYLE\n- The block is a stack of Three.js boxes, one per layer, each a believable material colour (grass green, soil brown, sand, grey rocks, dark granite, glowing orange heat). Thickness is compressed for the frame, so a \"NOT TO SCALE\" chip stays on screen, but every label shows the real depth.\n- A small surface scene (a house, trees) on top tells you where you are. The drill is a thin white cylinder with a glowing yellow tip that grows downward.\n- The camera dives down beside the cut face, always a little ahead of the drill tip.\n- Labels: dark mono chips on the left with the layer name and its real depth, joined to the face by ticks on a side ruler.\n- Type: Anton for the headline (white with a dark outline, second line yellow) and the depth counter, which glows warmer as it goes deeper.\n- Pace: one layer every 1.5 to 2 seconds; hold the bottom for about 2 seconds before the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, the depth counter at 80 px or more and layer labels at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How deep have we dug?\") unless my content asks for it.\n\nSOUND\n- Bed: a drill hum (filtered sawtooth with a slight wobble) over a low rumble that grows with depth.\n- Map events to the kit: each new layer gets a short beep (SND.beep) and a soft \"tick\"; the counter \"tick\"s when the shown number changes; reaching the hot layer gets a hiss and a low \"boom\"; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the drill hum and the rumble, a beep for each layer, and a hiss of heat at the bottom.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Deep Layers\nFamily: 3D\nLook: A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.\nHow it explains: The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.\n",
+    "promptVo": "I want an animated video in the \"Deep Layers\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The drill reaches each layer as it is named and its label lands on that word; the counter locks on the last spoken syllable of the final depth.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, LAYERS (names, thickness, colours, the real depth each one starts at), the props on top, the depth curve in depthAt(), the labels and the takeaway in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the stacked cross-section block, the surface props, the drill line and glowing tip, the descending camera, the depth counter, the side tick ruler, the NOT TO SCALE chip, chip() and wordLine()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (500 and 700).\n\nTHE STYLE\n- The block is a stack of Three.js boxes, one per layer, each a believable material colour (grass green, soil brown, sand, grey rocks, dark granite, glowing orange heat). Thickness is compressed for the frame, so a \"NOT TO SCALE\" chip stays on screen, but every label shows the real depth.\n- A small surface scene (a house, trees) on top tells you where you are. The drill is a thin white cylinder with a glowing yellow tip that grows downward.\n- The camera dives down beside the cut face, always a little ahead of the drill tip.\n- Labels: dark mono chips on the left with the layer name and its real depth, joined to the face by ticks on a side ruler.\n- Type: Anton for the headline (white with a dark outline, second line yellow) and the depth counter, which glows warmer as it goes deeper.\n- Pace: one layer every 1.5 to 2 seconds; hold the bottom for about 2 seconds before the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, the depth counter at 80 px or more and layer labels at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How deep have we dug?\") unless my content asks for it.\n\nSOUND\n- Bed: a drill hum (filtered sawtooth with a slight wobble) over a low rumble that grows with depth.\n- Map events to the kit: each new layer gets a short beep (SND.beep) and a soft \"tick\"; the counter \"tick\"s when the shown number changes; reaching the hot layer gets a hiss and a low \"boom\"; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drill hum very low and mark beeps soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Deep Layers\nFamily: 3D\nLook: A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.\nHow it explains: The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.\n"
+  },
+  {
+    "id": "synth-grid",
+    "num": "20",
+    "name": "Synth Grid",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.",
+    "how": "The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking \"press start\" style sign-off.",
+    "fonts": "Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700)",
+    "demo": "The future of gaming: 3 trends",
+    "replace": "TL, POINTS (the numbered items), the title and sign-off text, the sun colours if needed and scoreSound()",
+    "keep": "makeGL(), the scrolling wireframe terrain (mountains at the sides, flat road in the middle), the striped sun, the sky gradient, chrome() titles, the neon frames, the blinking sign-off, grain() and the scanlines",
+    "sizes": "keep the chrome title at 80 px or more, item text at 36 px or more and numbers at 26 px or more",
+    "voLine": "The title slams on the first stressed word, each neon frame slides in as its point is introduced, and the sign-off blinks on the last word.",
+    "full": "- Full mix (no voiceover): keep the synthwave beat (bass arpeggio, gated snare, saw pad), at most about 3 effects at once.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low. Mark zaps soft: true.",
+    "sheet": [
+      "The ground is one Three.js wireframe plane (magenta #ff3df0) over a solid dark plane, scrolled toward the camera by moving it modulo one grid cell so the loop is seamless. Mountains rise only at the sides; the middle stays a flat road.",
+      "The sky is a 2D gradient (#0b0221 to #3d0b5f to #ff3d81) with a big striped sun (yellow to pink, horizontal cut bands) sitting on the horizon and a soft pink glow.",
+      "Type: Anton skewed 10 degrees with a chrome gradient (white, pale blue, a dark horizon line, lilac) and a pink outer glow; Permanent Marker in cyan (#5ff6ff) with a cyan glow for the second line; JetBrains Mono for numbers.",
+      "Items live in neon frames: dark translucent boxes with a 3 px glowing cyan or pink border, sliding in from the side.",
+      "Scanlines and light grain on top of everything.",
+      "Pace: the title lands within 1 second, one item every 2 seconds, the sign-off blinks for the last 2 seconds."
+    ],
+    "sound": [
+      "Music: a synthwave loop (sawtooth bass arpeggio on 16ths, a big gated snare on 2 and 4, a soft kick, a wide saw pad) built with k.voice and k.hiss.",
+      "Map events to the kit: the title gets \"slam\" and \"riser\" before it; frames get a laser \"zap\" (a fast falling square sweep) and a soft \"whoosh\"; the sign-off gets a chiptune arpeggio."
+    ],
+    "sourceFile": "sources/synth-grid.html",
+    "promptFile": "prompts/synth-grid.md",
+    "sourceBytes": 59456,
+    "prompt": "I want an animated video in the \"Synth Grid\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, POINTS (the numbered items), the title and sign-off text, the sun colours if needed and scoreSound(). Keep and reuse the style's helpers (makeGL(), the scrolling wireframe terrain (mountains at the sides, flat road in the middle), the striped sun, the sky gradient, chrome() titles, the neon frames, the blinking sign-off, grain() and the scanlines).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700).\n\nTHE STYLE\n- The ground is one Three.js wireframe plane (magenta #ff3df0) over a solid dark plane, scrolled toward the camera by moving it modulo one grid cell so the loop is seamless. Mountains rise only at the sides; the middle stays a flat road.\n- The sky is a 2D gradient (#0b0221 to #3d0b5f to #ff3d81) with a big striped sun (yellow to pink, horizontal cut bands) sitting on the horizon and a soft pink glow.\n- Type: Anton skewed 10 degrees with a chrome gradient (white, pale blue, a dark horizon line, lilac) and a pink outer glow; Permanent Marker in cyan (#5ff6ff) with a cyan glow for the second line; JetBrains Mono for numbers.\n- Items live in neon frames: dark translucent boxes with a 3 px glowing cyan or pink border, sliding in from the side.\n- Scanlines and light grain on top of everything.\n- Pace: the title lands within 1 second, one item every 2 seconds, the sign-off blinks for the last 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the chrome title at 80 px or more, item text at 36 px or more and numbers at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The future of gaming: 3 trends\") unless my content asks for it.\n\nSOUND\n- Music: a synthwave loop (sawtooth bass arpeggio on 16ths, a big gated snare on 2 and 4, a soft kick, a wide saw pad) built with k.voice and k.hiss.\n- Map events to the kit: the title gets \"slam\" and \"riser\" before it; frames get a laser \"zap\" (a fast falling square sweep) and a soft \"whoosh\"; the sign-off gets a chiptune arpeggio.\n- Full mix (no voiceover): keep the synthwave beat (bass arpeggio, gated snare, saw pad), at most about 3 effects at once.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Synth Grid\nFamily: 3D\nLook: A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.\nHow it explains: The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking \"press start\" style sign-off.\n",
+    "promptVo": "I want an animated video in the \"Synth Grid\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The title slams on the first stressed word, each neon frame slides in as its point is introduced, and the sign-off blinks on the last word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, POINTS (the numbered items), the title and sign-off text, the sun colours if needed and scoreSound(). Keep and reuse the style's helpers (makeGL(), the scrolling wireframe terrain (mountains at the sides, flat road in the middle), the striped sun, the sky gradient, chrome() titles, the neon frames, the blinking sign-off, grain() and the scanlines).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700).\n\nTHE STYLE\n- The ground is one Three.js wireframe plane (magenta #ff3df0) over a solid dark plane, scrolled toward the camera by moving it modulo one grid cell so the loop is seamless. Mountains rise only at the sides; the middle stays a flat road.\n- The sky is a 2D gradient (#0b0221 to #3d0b5f to #ff3d81) with a big striped sun (yellow to pink, horizontal cut bands) sitting on the horizon and a soft pink glow.\n- Type: Anton skewed 10 degrees with a chrome gradient (white, pale blue, a dark horizon line, lilac) and a pink outer glow; Permanent Marker in cyan (#5ff6ff) with a cyan glow for the second line; JetBrains Mono for numbers.\n- Items live in neon frames: dark translucent boxes with a 3 px glowing cyan or pink border, sliding in from the side.\n- Scanlines and light grain on top of everything.\n- Pace: the title lands within 1 second, one item every 2 seconds, the sign-off blinks for the last 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the chrome title at 80 px or more, item text at 36 px or more and numbers at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The future of gaming: 3 trends\") unless my content asks for it.\n\nSOUND\n- Music: a synthwave loop (sawtooth bass arpeggio on 16ths, a big gated snare on 2 and 4, a soft kick, a wide saw pad) built with k.voice and k.hiss.\n- Map events to the kit: the title gets \"slam\" and \"riser\" before it; frames get a laser \"zap\" (a fast falling square sweep) and a soft \"whoosh\"; the sign-off gets a chiptune arpeggio.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low. Mark zaps soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Synth Grid\nFamily: 3D\nLook: A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.\nHow it explains: The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking \"press start\" style sign-off.\n"
+  },
+  {
+    "id": "product-turntable",
+    "num": "21",
+    "name": "Product Turntable",
+    "family": "3D",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "three": true,
+    "look": "A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.",
+    "how": "The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.",
+    "fonts": "Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500)",
+    "demo": "Meet Luma (an invented skincare bottle)",
+    "replace": "TL, the product shape (the lathe profile, cap, band), the label texture text, CALLOUTS (text and anchor points), the name and tagline and scoreSound()",
+    "keep": "makeGL(), the dark studio with spot key, rim and fill lights, the glossy pedestal with the emissive rim ring, the turning product, the light sweep pass, callouts on leader lines, the hero name card and grain()",
+    "sizes": "keep the product name at 80 px or more, callout titles at 26 px or more and callout details at 18 px or more",
+    "voLine": "Each callout pops as its feature is named, the light sweep passes on the product name, and the hero card lands on the last line.",
+    "full": "- Full mix (no voiceover): keep the soft luxury pad, warm swells, a glassy sparkle per callout, and one deep hit for the hero card.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark sparkles soft: true and keep the swells low.",
+    "sheet": [
+      "The product is built in Three.js from a LatheGeometry profile (bottles, jars, cups), cylinders and boxes, with physical materials (clearcoat, metal caps) and a label texture painted on a canvas. Always an invented product and brand; never a real logo, packaging or brand name.",
+      "Studio: near-black (#141417) with one warm spot key from the upper left, a cool blue rim light from behind, and a glossy dark pedestal with a thin glowing amber ring.",
+      "The product turns slowly the whole time; the camera eases in at the start and settles for the hero frame.",
+      "Callouts: white Inter 700 titles with small mono details, on thin amber leader lines from points on the product, alternating left and right.",
+      "Type: Instrument Serif italic for the product name (white, huge); Inter and JetBrains Mono for specs; nothing else.",
+      "Claims must be true for the product you are showing; label invented figures as examples.",
+      "Pace: the first callout lands by second 2, one callout every 1.5 to 2 seconds, hold the hero frame about 3 seconds."
+    ],
+    "sound": [
+      "Bed: a soft, warm luxury pad with no drums.",
+      "Map events to the kit: callouts get a glassy \"sparkle\" and a soft tick; the light sweep gets a slow airy \"whoosh\"; the hero card gets a deep, soft hit (a low sine boom) with an open chord."
+    ],
+    "sourceFile": "sources/product-turntable.html",
+    "promptFile": "prompts/product-turntable.md",
+    "sourceBytes": 59527,
+    "prompt": "I want an animated video in the \"Product Turntable\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the product shape (the lathe profile, cap, band), the label texture text, CALLOUTS (text and anchor points), the name and tagline and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dark studio with spot key, rim and fill lights, the glossy pedestal with the emissive rim ring, the turning product, the light sweep pass, callouts on leader lines, the hero name card and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500).\n\nTHE STYLE\n- The product is built in Three.js from a LatheGeometry profile (bottles, jars, cups), cylinders and boxes, with physical materials (clearcoat, metal caps) and a label texture painted on a canvas. Always an invented product and brand; never a real logo, packaging or brand name.\n- Studio: near-black (#141417) with one warm spot key from the upper left, a cool blue rim light from behind, and a glossy dark pedestal with a thin glowing amber ring.\n- The product turns slowly the whole time; the camera eases in at the start and settles for the hero frame.\n- Callouts: white Inter 700 titles with small mono details, on thin amber leader lines from points on the product, alternating left and right.\n- Type: Instrument Serif italic for the product name (white, huge); Inter and JetBrains Mono for specs; nothing else.\n- Claims must be true for the product you are showing; label invented figures as examples.\n- Pace: the first callout lands by second 2, one callout every 1.5 to 2 seconds, hold the hero frame about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the product name at 80 px or more, callout titles at 26 px or more and callout details at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Meet Luma (an invented skincare bottle)\") unless my content asks for it.\n\nSOUND\n- Bed: a soft, warm luxury pad with no drums.\n- Map events to the kit: callouts get a glassy \"sparkle\" and a soft tick; the light sweep gets a slow airy \"whoosh\"; the hero card gets a deep, soft hit (a low sine boom) with an open chord.\n- Full mix (no voiceover): keep the soft luxury pad, warm swells, a glassy sparkle per callout, and one deep hit for the hero card.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Product Turntable\nFamily: 3D\nLook: A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.\nHow it explains: The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.\n",
+    "promptVo": "I want an animated video in the \"Product Turntable\" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each callout pops as its feature is named, the light sweep passes on the product name, and the hero card lands on the last line.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.\n- Replace the demo's story: TL, the product shape (the lathe profile, cap, band), the label texture text, CALLOUTS (text and anchor points), the name and tagline and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dark studio with spot key, rim and fill lights, the glossy pedestal with the emissive rim ring, the turning product, the light sweep pass, callouts on leader lines, the hero name card and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500).\n\nTHE STYLE\n- The product is built in Three.js from a LatheGeometry profile (bottles, jars, cups), cylinders and boxes, with physical materials (clearcoat, metal caps) and a label texture painted on a canvas. Always an invented product and brand; never a real logo, packaging or brand name.\n- Studio: near-black (#141417) with one warm spot key from the upper left, a cool blue rim light from behind, and a glossy dark pedestal with a thin glowing amber ring.\n- The product turns slowly the whole time; the camera eases in at the start and settles for the hero frame.\n- Callouts: white Inter 700 titles with small mono details, on thin amber leader lines from points on the product, alternating left and right.\n- Type: Instrument Serif italic for the product name (white, huge); Inter and JetBrains Mono for specs; nothing else.\n- Claims must be true for the product you are showing; label invented figures as examples.\n- Pace: the first callout lands by second 2, one callout every 1.5 to 2 seconds, hold the hero frame about 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the product name at 80 px or more, callout titles at 26 px or more and callout details at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Meet Luma (an invented skincare bottle)\") unless my content asks for it.\n\nSOUND\n- Bed: a soft, warm luxury pad with no drums.\n- Map events to the kit: callouts get a glassy \"sparkle\" and a soft tick; the light sweep gets a slow airy \"whoosh\"; the hero card gets a deep, soft hit (a low sine boom) with an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark sparkles soft: true and keep the swells low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Product Turntable\nFamily: 3D\nLook: A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.\nHow it explains: The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.\n"
+  },
+  {
+    "id": "paper-craft",
+    "num": "22",
+    "name": "Paper Craft",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.",
+    "how": "The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.",
+    "fonts": "Fredoka (500 to 700)",
+    "demo": "How bees make honey",
+    "replace": "TL, the scene pieces (hills, sky props), the hero character (drawBee) and its PATH, the STEPS strips, the fact chip, the takeaway and scoreSound()",
+    "keep": "the 12 fps stop-motion clock (stop()), the paper boil jitter (boil()), paper() shadows, hill() layers, the fibre texture, tornStrip(), the slide-up build and the Fredoka strips",
+    "sizes": "keep strip titles at 44 px or more, step text at 34 px or more and chips at 26 px or more",
+    "voLine": "Each layer or prop lands on the word that names it, the character moves while the action is described, and each step strip slaps on its first word.",
+    "full": "- Full mix (no voiceover): keep the marimba melody, paper rustles on every slap, and the bee buzz under the motion.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz low and mark rustles soft: true.",
+    "sheet": [
+      "Everything is flat paper drawn in code: solid shapes with a soft drop shadow (offset down, 10 px blur), a faint fibre texture over the frame, no outlines, no gradients except the sky.",
+      "Stop-motion timing: animated positions are sampled on a 12 fps clock (stop(t)), and every layer boils by a pixel or two each step. Never move anything smoothly at 30 fps.",
+      "Palette: sky blue (#b9e2f0), layered greens (#a4d36f to #4b8c3b), sunny yellow (#ffd04d), honey (#f2b33d), pink and white flowers, dark brown text (#3a2a16), honey accent (#e08a00).",
+      "Titles and steps sit on torn white paper strips, slightly rotated, slapped on with a quick overshoot.",
+      "One small hand-made character carries the story (flapping wings, a dotted path behind it).",
+      "Pace: the build takes about 1.5 seconds, then one step every 2 to 2.5 seconds."
+    ],
+    "sound": [
+      "Music: a gentle marimba melody (k.voice triangle notes with short decay) over a soft pad.",
+      "Map events to the kit: every paper layer or strip landing gets a paper rustle (SND.paper) and a soft tap; the bee gets a buzzing hum (a sawtooth with wobble) while it flies; arriving gets a bloop; the fact chip gets \"pop\"; the takeaway gets a marimba run."
+    ],
+    "sourceFile": "sources/paper-craft.html",
+    "promptFile": "prompts/paper-craft.md",
+    "sourceBytes": 62141,
+    "prompt": "I want an animated video in the \"Paper Craft\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the scene pieces (hills, sky props), the hero character (drawBee) and its PATH, the STEPS strips, the fact chip, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 12 fps stop-motion clock (stop()), the paper boil jitter (boil()), paper() shadows, hill() layers, the fibre texture, tornStrip(), the slide-up build and the Fredoka strips).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).\n\nTHE STYLE\n- Everything is flat paper drawn in code: solid shapes with a soft drop shadow (offset down, 10 px blur), a faint fibre texture over the frame, no outlines, no gradients except the sky.\n- Stop-motion timing: animated positions are sampled on a 12 fps clock (stop(t)), and every layer boils by a pixel or two each step. Never move anything smoothly at 30 fps.\n- Palette: sky blue (#b9e2f0), layered greens (#a4d36f to #4b8c3b), sunny yellow (#ffd04d), honey (#f2b33d), pink and white flowers, dark brown text (#3a2a16), honey accent (#e08a00).\n- Titles and steps sit on torn white paper strips, slightly rotated, slapped on with a quick overshoot.\n- One small hand-made character carries the story (flapping wings, a dotted path behind it).\n- Pace: the build takes about 1.5 seconds, then one step every 2 to 2.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep strip titles at 44 px or more, step text at 34 px or more and chips at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How bees make honey\") unless my content asks for it.\n\nSOUND\n- Music: a gentle marimba melody (k.voice triangle notes with short decay) over a soft pad.\n- Map events to the kit: every paper layer or strip landing gets a paper rustle (SND.paper) and a soft tap; the bee gets a buzzing hum (a sawtooth with wobble) while it flies; arriving gets a bloop; the fact chip gets \"pop\"; the takeaway gets a marimba run.\n- Full mix (no voiceover): keep the marimba melody, paper rustles on every slap, and the bee buzz under the motion.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Paper Craft\nFamily: Illustrated\nLook: Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.\nHow it explains: The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.\n",
+    "promptVo": "I want an animated video in the \"Paper Craft\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each layer or prop lands on the word that names it, the character moves while the action is described, and each step strip slaps on its first word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the scene pieces (hills, sky props), the hero character (drawBee) and its PATH, the STEPS strips, the fact chip, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 12 fps stop-motion clock (stop()), the paper boil jitter (boil()), paper() shadows, hill() layers, the fibre texture, tornStrip(), the slide-up build and the Fredoka strips).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).\n\nTHE STYLE\n- Everything is flat paper drawn in code: solid shapes with a soft drop shadow (offset down, 10 px blur), a faint fibre texture over the frame, no outlines, no gradients except the sky.\n- Stop-motion timing: animated positions are sampled on a 12 fps clock (stop(t)), and every layer boils by a pixel or two each step. Never move anything smoothly at 30 fps.\n- Palette: sky blue (#b9e2f0), layered greens (#a4d36f to #4b8c3b), sunny yellow (#ffd04d), honey (#f2b33d), pink and white flowers, dark brown text (#3a2a16), honey accent (#e08a00).\n- Titles and steps sit on torn white paper strips, slightly rotated, slapped on with a quick overshoot.\n- One small hand-made character carries the story (flapping wings, a dotted path behind it).\n- Pace: the build takes about 1.5 seconds, then one step every 2 to 2.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep strip titles at 44 px or more, step text at 34 px or more and chips at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How bees make honey\") unless my content asks for it.\n\nSOUND\n- Music: a gentle marimba melody (k.voice triangle notes with short decay) over a soft pad.\n- Map events to the kit: every paper layer or strip landing gets a paper rustle (SND.paper) and a soft tap; the bee gets a buzzing hum (a sawtooth with wobble) while it flies; arriving gets a bloop; the fact chip gets \"pop\"; the takeaway gets a marimba run.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz low and mark rustles soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Paper Craft\nFamily: Illustrated\nLook: Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.\nHow it explains: The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.\n"
+  },
+  {
+    "id": "marker-board",
+    "num": "23",
+    "name": "Marker Board",
+    "family": "Hand-Drawn",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A clean whiteboard in a grey frame: black, blue, red and green marker doodles that draw themselves stroke by stroke, a visible marker pen following the tip, hand-drawn boxes, arrows, a red circle on the key idea and Caveat side notes.",
+    "how": "Everything appears by being drawn: the title writes on, then boxes, arrows and words are inked in order with the pen moving to each stroke. The key idea gets circled in red with a handwritten note, and a green tick or symbol lands the takeaway.",
+    "fonts": "Permanent Marker, Caveat (700)",
+    "demo": "The 3-step funnel",
+    "replace": "TL and STROKES (the ordered list of what gets drawn: text, boxes, arrows, circles, notes, with their times and colours) and scoreSound()",
+    "keep": "the board, frame and tray, the ghost smudges, drawText() write-on reveal, hd() hand-drawn lines and ellipses, the pen that follows the active stroke tip, the four marker colours and the Caveat notes",
+    "sizes": "keep the title at 56 px or more, box words at 40 px or more and notes at 34 px or more",
+    "voLine": "Each stroke starts as its word is spoken and finishes by the end of that phrase; the red circle draws on the stressed word.",
+    "full": "- Full mix (no voiceover): marker squeaks on every stroke, a cap click at the start, and a soft pad under it all.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark marker sounds soft: true so they sit under the voice.",
+    "sheet": [
+      "One whiteboard (#f9fafa) in a light grey frame with a tray at the bottom and faint ghost smudges of old erasing. No cuts: the whole idea is drawn on one board.",
+      "Everything is drawn in order: text is revealed left to right with a clip (drawText), lines and shapes with hd() at the stroke progress. A marker pen (body, cap, tip) follows the tip of whatever is being drawn.",
+      "Colours mean things: black for structure, blue for the title and labels, red only for the key idea (circle, underline, note), green only for the payoff.",
+      "Type: Permanent Marker for all board writing; Caveat 700 for small handwritten side notes.",
+      "Keep strokes chunky (4 to 6 px) and slightly wobbly, with two passes per line.",
+      "Pace: something is always being drawn. Allow 0.4 to 1 second per stroke, and hold the finished board about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a quiet, warm pad.",
+      "Map events to the kit: every stroke gets a marker squeak (\"marker\" for its duration, soft); a cap click (click) at the start; the red circle gets a longer, louder marker; the green payoff gets a pluck; the end gets an open chord."
+    ],
+    "sourceFile": "sources/marker-board.html",
+    "promptFile": "prompts/marker-board.md",
+    "sourceBytes": 58612,
+    "prompt": "I want an animated video in the \"Marker Board\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL and STROKES (the ordered list of what gets drawn: text, boxes, arrows, circles, notes, with their times and colours) and scoreSound(). Keep and reuse the style's helpers (the board, frame and tray, the ghost smudges, drawText() write-on reveal, hd() hand-drawn lines and ellipses, the pen that follows the active stroke tip, the four marker colours and the Caveat notes).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Permanent Marker, Caveat (700).\n\nTHE STYLE\n- One whiteboard (#f9fafa) in a light grey frame with a tray at the bottom and faint ghost smudges of old erasing. No cuts: the whole idea is drawn on one board.\n- Everything is drawn in order: text is revealed left to right with a clip (drawText), lines and shapes with hd() at the stroke progress. A marker pen (body, cap, tip) follows the tip of whatever is being drawn.\n- Colours mean things: black for structure, blue for the title and labels, red only for the key idea (circle, underline, note), green only for the payoff.\n- Type: Permanent Marker for all board writing; Caveat 700 for small handwritten side notes.\n- Keep strokes chunky (4 to 6 px) and slightly wobbly, with two passes per line.\n- Pace: something is always being drawn. Allow 0.4 to 1 second per stroke, and hold the finished board about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title at 56 px or more, box words at 40 px or more and notes at 34 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The 3-step funnel\") unless my content asks for it.\n\nSOUND\n- Bed: a quiet, warm pad.\n- Map events to the kit: every stroke gets a marker squeak (\"marker\" for its duration, soft); a cap click (click) at the start; the red circle gets a longer, louder marker; the green payoff gets a pluck; the end gets an open chord.\n- Full mix (no voiceover): marker squeaks on every stroke, a cap click at the start, and a soft pad under it all.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Marker Board\nFamily: Hand-Drawn\nLook: A clean whiteboard in a grey frame: black, blue, red and green marker doodles that draw themselves stroke by stroke, a visible marker pen following the tip, hand-drawn boxes, arrows, a red circle on the key idea and Caveat side notes.\nHow it explains: Everything appears by being drawn: the title writes on, then boxes, arrows and words are inked in order with the pen moving to each stroke. The key idea gets circled in red with a handwritten note, and a green tick or symbol lands the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Marker Board\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each stroke starts as its word is spoken and finishes by the end of that phrase; the red circle draws on the stressed word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL and STROKES (the ordered list of what gets drawn: text, boxes, arrows, circles, notes, with their times and colours) and scoreSound(). Keep and reuse the style's helpers (the board, frame and tray, the ghost smudges, drawText() write-on reveal, hd() hand-drawn lines and ellipses, the pen that follows the active stroke tip, the four marker colours and the Caveat notes).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Permanent Marker, Caveat (700).\n\nTHE STYLE\n- One whiteboard (#f9fafa) in a light grey frame with a tray at the bottom and faint ghost smudges of old erasing. No cuts: the whole idea is drawn on one board.\n- Everything is drawn in order: text is revealed left to right with a clip (drawText), lines and shapes with hd() at the stroke progress. A marker pen (body, cap, tip) follows the tip of whatever is being drawn.\n- Colours mean things: black for structure, blue for the title and labels, red only for the key idea (circle, underline, note), green only for the payoff.\n- Type: Permanent Marker for all board writing; Caveat 700 for small handwritten side notes.\n- Keep strokes chunky (4 to 6 px) and slightly wobbly, with two passes per line.\n- Pace: something is always being drawn. Allow 0.4 to 1 second per stroke, and hold the finished board about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title at 56 px or more, box words at 40 px or more and notes at 34 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The 3-step funnel\") unless my content asks for it.\n\nSOUND\n- Bed: a quiet, warm pad.\n- Map events to the kit: every stroke gets a marker squeak (\"marker\" for its duration, soft); a cap click (click) at the start; the red circle gets a longer, louder marker; the green payoff gets a pluck; the end gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark marker sounds soft: true so they sit under the voice.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Marker Board\nFamily: Hand-Drawn\nLook: A clean whiteboard in a grey frame: black, blue, red and green marker doodles that draw themselves stroke by stroke, a visible marker pen following the tip, hand-drawn boxes, arrows, a red circle on the key idea and Caveat side notes.\nHow it explains: Everything appears by being drawn: the title writes on, then boxes, arrows and words are inked in order with the pen moving to each stroke. The key idea gets circled in red with a handwritten note, and a green tick or symbol lands the takeaway.\n"
+  },
+  {
+    "id": "blueprint",
+    "num": "24",
+    "name": "Blueprint",
+    "family": "Hand-Drawn",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.",
+    "how": "The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.",
+    "fonts": "Space Grotesk (700), JetBrains Mono (500 and 700)",
+    "demo": "How a pin tumbler lock works",
+    "replace": "TL, the mechanism geometry (PINS, CUTS, the housing and key profile in keyY()), the callouts, the wrong-version beat, the takeaway in the title block and scoreSound()",
+    "keep": "the blueprint grid, line(), the ink-in reveal, dim() dimension lines, the dashed yellow reference line, callout() mono labels on leaders, the corner title block, the moving-mechanism approach (positions computed from the driving part)",
+    "sizes": "keep the headline at 60 px or more, callouts at 22 px or more and dimension text at 20 px or more",
+    "voLine": "The drawing inks in during the intro sentence, the driving part moves while its action is described, the highlight lands on the word that says it works, and the wrong version appears on \"but\" or \"if\".",
+    "full": "- Full mix (no voiceover): drafting-pen scratches during the ink-in, a metallic click for every part that moves, and a soft pad.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark scratches and clicks soft: true.",
+    "sheet": [
+      "Background: blueprint blue (#0d3a6e) with a fine 12 px grid and a 60 px major grid. All line work is pale (#d8eeff), 2 px, with no fills except faint hatching.",
+      "Draw the real mechanism with correct proportions and part names. Compute every moving part from the part that drives it (here each pin height comes from the key profile under it), so the motion is physically right.",
+      "Yellow (#ffd75e) is only for the critical reference (a dashed line or a highlight) and the success state; red (#ff6b6b) only for a failure.",
+      "Dimension lines with arrowheads and mono measurements; callouts in JetBrains Mono on thin leader lines; a title block in the bottom-right corner with sheet number and scale.",
+      "Type: Space Grotesk 700 headline at the top (white, second line pale blue).",
+      "Pace: ink-in about 2 seconds, then the mechanism in 2 to 3 seconds, the success beat, the failure beat, and the takeaway."
+    ],
+    "sound": [
+      "Bed: a soft, steady pad with a slow pulse.",
+      "Map events to the kit: line work gets drafting-pen scratches (SND.scratch); each part that lifts or drops gets a small metallic click; success gets a two-note chime and \"click\"; failure gets a dull thud; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/blueprint.html",
+    "promptFile": "prompts/blueprint.md",
+    "sourceBytes": 62493,
+    "prompt": "I want an animated video in the \"Blueprint\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the mechanism geometry (PINS, CUTS, the housing and key profile in keyY()), the callouts, the wrong-version beat, the takeaway in the title block and scoreSound(). Keep and reuse the style's helpers (the blueprint grid, line(), the ink-in reveal, dim() dimension lines, the dashed yellow reference line, callout() mono labels on leaders, the corner title block, the moving-mechanism approach (positions computed from the driving part)).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Background: blueprint blue (#0d3a6e) with a fine 12 px grid and a 60 px major grid. All line work is pale (#d8eeff), 2 px, with no fills except faint hatching.\n- Draw the real mechanism with correct proportions and part names. Compute every moving part from the part that drives it (here each pin height comes from the key profile under it), so the motion is physically right.\n- Yellow (#ffd75e) is only for the critical reference (a dashed line or a highlight) and the success state; red (#ff6b6b) only for a failure.\n- Dimension lines with arrowheads and mono measurements; callouts in JetBrains Mono on thin leader lines; a title block in the bottom-right corner with sheet number and scale.\n- Type: Space Grotesk 700 headline at the top (white, second line pale blue).\n- Pace: ink-in about 2 seconds, then the mechanism in 2 to 3 seconds, the success beat, the failure beat, and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, callouts at 22 px or more and dimension text at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a pin tumbler lock works\") unless my content asks for it.\n\nSOUND\n- Bed: a soft, steady pad with a slow pulse.\n- Map events to the kit: line work gets drafting-pen scratches (SND.scratch); each part that lifts or drops gets a small metallic click; success gets a two-note chime and \"click\"; failure gets a dull thud; the takeaway gets an open chord.\n- Full mix (no voiceover): drafting-pen scratches during the ink-in, a metallic click for every part that moves, and a soft pad.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Blueprint\nFamily: Hand-Drawn\nLook: A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.\nHow it explains: The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Blueprint\" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The drawing inks in during the intro sentence, the driving part moves while its action is described, the highlight lands on the word that says it works, and the wrong version appears on \"but\" or \"if\".\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the mechanism geometry (PINS, CUTS, the housing and key profile in keyY()), the callouts, the wrong-version beat, the takeaway in the title block and scoreSound(). Keep and reuse the style's helpers (the blueprint grid, line(), the ink-in reveal, dim() dimension lines, the dashed yellow reference line, callout() mono labels on leaders, the corner title block, the moving-mechanism approach (positions computed from the driving part)).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Space Grotesk (700), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Background: blueprint blue (#0d3a6e) with a fine 12 px grid and a 60 px major grid. All line work is pale (#d8eeff), 2 px, with no fills except faint hatching.\n- Draw the real mechanism with correct proportions and part names. Compute every moving part from the part that drives it (here each pin height comes from the key profile under it), so the motion is physically right.\n- Yellow (#ffd75e) is only for the critical reference (a dashed line or a highlight) and the success state; red (#ff6b6b) only for a failure.\n- Dimension lines with arrowheads and mono measurements; callouts in JetBrains Mono on thin leader lines; a title block in the bottom-right corner with sheet number and scale.\n- Type: Space Grotesk 700 headline at the top (white, second line pale blue).\n- Pace: ink-in about 2 seconds, then the mechanism in 2 to 3 seconds, the success beat, the failure beat, and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, callouts at 22 px or more and dimension text at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a pin tumbler lock works\") unless my content asks for it.\n\nSOUND\n- Bed: a soft, steady pad with a slow pulse.\n- Map events to the kit: line work gets drafting-pen scratches (SND.scratch); each part that lifts or drops gets a small metallic click; success gets a two-note chime and \"click\"; failure gets a dull thud; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark scratches and clicks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Blueprint\nFamily: Hand-Drawn\nLook: A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.\nHow it explains: The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.\n"
+  },
+  {
+    "id": "zine-collage",
+    "num": "25",
+    "name": "Zine Collage",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A DIY zine on kraft paper: torn pink and black paper, halftone cutouts drawn in code, ransom-note letters each in a different font and colour, translucent tape strips and handwritten notes, all slapped on at a jittery 8 frames a second.",
+    "how": "Pieces are slapped onto the page one after another like someone building a collage live: torn paper, a halftone object, tape, then the title drops in letter by letter. Each fact arrives as a new torn scrap or sticker with a slap and a little shake.",
+    "fonts": "Anton, Archivo Black, Bangers, Playfair Display 900, Special Elite, Caveat 700 (mixed like ransom-note letters)",
+    "demo": "The rise of vinyl",
+    "replace": "TL, the halftone subject (drawRecord or your own halftoneShape), the ransom title text, SCRAPS (fact cards and their text), the takeaway and scoreSound()",
+    "keep": "the kraft paper texture, torn() edges, the halftone dot renderer, ransom() letter boxes, tape(), the 8 fps slap timing (slapT) with jitter, the shadows and the Caveat handwriting",
+    "sizes": "keep ransom letters at 48 px or more, scrap text at 30 px or more and handwriting at 38 px or more",
+    "voLine": "Each scrap slaps down on the first word of its fact, the title letters drop while the title is said, and the halftone subject lands on its name.",
+    "full": "- Full mix (no voiceover): keep the lo-fi beat with vinyl crackle, a paper slap for every piece and a tape rip for every tape strip.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the beat low. Mark slaps and rips soft: true.",
+    "sheet": [
+      "Background: kraft paper (#e2d2b2) with speckles. Pieces are torn shapes (jagged edges from torn()) in hot pink (#ff5c8a), black, white and yellow, each with a short drop shadow.",
+      "The subject is drawn as a halftone: a dot grid whose dot size follows a brightness function of your shape (here a record with grooves and a red label). No photos.",
+      "Ransom-note titles: each letter in its own box with a random font (Anton, Playfair Display, Special Elite, Archivo Black, Bangers), colour pair and small rotation, all seeded so it never changes between frames.",
+      "Timing is stop-motion: pieces appear on an 8 fps clock (slapT) with a 1 to 2 px jitter, and each slap lands with a tiny overshoot.",
+      "Use real, checked facts on the scraps, and handwriting (Caveat) for the personal aside.",
+      "Pace: a new piece every 0.3 to 0.8 seconds, a fact scrap every 2 seconds."
+    ],
+    "sound": [
+      "Music: a lo-fi hip-hop beat (soft kick, dusty snare, closed hats) with constant vinyl crackle on top.",
+      "Map events to the kit: every piece gets a paper slap (a short noise burst plus SND.tap); tape gets a rip (a rising band-pass noise sweep); letters get tiny ticks; the record gets a needle drop (a soft thud and crackle swell)."
+    ],
+    "sourceFile": "sources/zine-collage.html",
+    "promptFile": "prompts/zine-collage.md",
+    "sourceBytes": 61178,
+    "prompt": "I want an animated video in the \"Zine Collage\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the halftone subject (drawRecord or your own halftoneShape), the ransom title text, SCRAPS (fact cards and their text), the takeaway and scoreSound(). Keep and reuse the style's helpers (the kraft paper texture, torn() edges, the halftone dot renderer, ransom() letter boxes, tape(), the 8 fps slap timing (slapT) with jitter, the shadows and the Caveat handwriting).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Archivo Black, Bangers, Playfair Display 900, Special Elite, Caveat 700 (mixed like ransom-note letters).\n\nTHE STYLE\n- Background: kraft paper (#e2d2b2) with speckles. Pieces are torn shapes (jagged edges from torn()) in hot pink (#ff5c8a), black, white and yellow, each with a short drop shadow.\n- The subject is drawn as a halftone: a dot grid whose dot size follows a brightness function of your shape (here a record with grooves and a red label). No photos.\n- Ransom-note titles: each letter in its own box with a random font (Anton, Playfair Display, Special Elite, Archivo Black, Bangers), colour pair and small rotation, all seeded so it never changes between frames.\n- Timing is stop-motion: pieces appear on an 8 fps clock (slapT) with a 1 to 2 px jitter, and each slap lands with a tiny overshoot.\n- Use real, checked facts on the scraps, and handwriting (Caveat) for the personal aside.\n- Pace: a new piece every 0.3 to 0.8 seconds, a fact scrap every 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep ransom letters at 48 px or more, scrap text at 30 px or more and handwriting at 38 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The rise of vinyl\") unless my content asks for it.\n\nSOUND\n- Music: a lo-fi hip-hop beat (soft kick, dusty snare, closed hats) with constant vinyl crackle on top.\n- Map events to the kit: every piece gets a paper slap (a short noise burst plus SND.tap); tape gets a rip (a rising band-pass noise sweep); letters get tiny ticks; the record gets a needle drop (a soft thud and crackle swell).\n- Full mix (no voiceover): keep the lo-fi beat with vinyl crackle, a paper slap for every piece and a tape rip for every tape strip.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Zine Collage\nFamily: Illustrated\nLook: A DIY zine on kraft paper: torn pink and black paper, halftone cutouts drawn in code, ransom-note letters each in a different font and colour, translucent tape strips and handwritten notes, all slapped on at a jittery 8 frames a second.\nHow it explains: Pieces are slapped onto the page one after another like someone building a collage live: torn paper, a halftone object, tape, then the title drops in letter by letter. Each fact arrives as a new torn scrap or sticker with a slap and a little shake.\n",
+    "promptVo": "I want an animated video in the \"Zine Collage\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each scrap slaps down on the first word of its fact, the title letters drop while the title is said, and the halftone subject lands on its name.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the halftone subject (drawRecord or your own halftoneShape), the ransom title text, SCRAPS (fact cards and their text), the takeaway and scoreSound(). Keep and reuse the style's helpers (the kraft paper texture, torn() edges, the halftone dot renderer, ransom() letter boxes, tape(), the 8 fps slap timing (slapT) with jitter, the shadows and the Caveat handwriting).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Archivo Black, Bangers, Playfair Display 900, Special Elite, Caveat 700 (mixed like ransom-note letters).\n\nTHE STYLE\n- Background: kraft paper (#e2d2b2) with speckles. Pieces are torn shapes (jagged edges from torn()) in hot pink (#ff5c8a), black, white and yellow, each with a short drop shadow.\n- The subject is drawn as a halftone: a dot grid whose dot size follows a brightness function of your shape (here a record with grooves and a red label). No photos.\n- Ransom-note titles: each letter in its own box with a random font (Anton, Playfair Display, Special Elite, Archivo Black, Bangers), colour pair and small rotation, all seeded so it never changes between frames.\n- Timing is stop-motion: pieces appear on an 8 fps clock (slapT) with a 1 to 2 px jitter, and each slap lands with a tiny overshoot.\n- Use real, checked facts on the scraps, and handwriting (Caveat) for the personal aside.\n- Pace: a new piece every 0.3 to 0.8 seconds, a fact scrap every 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep ransom letters at 48 px or more, scrap text at 30 px or more and handwriting at 38 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The rise of vinyl\") unless my content asks for it.\n\nSOUND\n- Music: a lo-fi hip-hop beat (soft kick, dusty snare, closed hats) with constant vinyl crackle on top.\n- Map events to the kit: every piece gets a paper slap (a short noise burst plus SND.tap); tape gets a rip (a rising band-pass noise sweep); letters get tiny ticks; the record gets a needle drop (a soft thud and crackle swell).\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the beat low. Mark slaps and rips soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Zine Collage\nFamily: Illustrated\nLook: A DIY zine on kraft paper: torn pink and black paper, halftone cutouts drawn in code, ransom-note letters each in a different font and colour, translucent tape strips and handwritten notes, all slapped on at a jittery 8 frames a second.\nHow it explains: Pieces are slapped onto the page one after another like someone building a collage live: torn paper, a halftone object, tape, then the title drops in letter by letter. Each fact arrives as a new torn scrap or sticker with a slap and a little shake.\n"
+  },
+  {
+    "id": "comic-panels",
+    "num": "26",
+    "name": "Comic Panels",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.",
+    "how": "The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.",
+    "fonts": "Bangers",
+    "demo": "The day the internet broke",
+    "replace": "TL, the PANELS layout, what is drawn in each panel (props, the character face and expression), the balloon and caption text, the burst word, the camera keys in CAMK and scoreSound()",
+    "keep": "the page grid with gutters, panel() halftone fills and 6 px borders, face() with expressive eyes and mouth, balloon() with tail, caption(), burst() spiky polygons, the reading-order camera (CAMK track) and the shake on the big hit",
+    "sizes": "keep balloon text at 36 px or more, captions at 30 px or more and the title panel at 80 px or more",
+    "voLine": "The camera moves to each panel as its line starts, each balloon pops on its first word, and the burst lands with the shake on the loudest word.",
+    "full": "- Full mix (no voiceover): keep a bouncy pad, a boing for every balloon, a whoosh for every camera move, and a crash and boom for the burst.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark boings soft: true and keep the crash for the burst only.",
+    "sheet": [
+      "One comic page: a white page with 4 to 6 panels, 10 px gutters and 6 px black borders. Each panel has a flat colour fill with a halftone dot pattern on top.",
+      "Characters are simple and expressive: round heads, big white eyes with dots, eyebrows and an open mouth, a sweat drop for stress. Original characters only, never a known comic hero.",
+      "Speech balloons are white ellipses with a black outline and a pointed tail; captions are yellow boxes; sound effects are spiky bursts with Bangers lettering in yellow with a thick black stroke.",
+      "Camera: zoom into one panel at a time in reading order (CAMK), eased; shake on the big sound effect; pull out to the full page at the end.",
+      "Type: Bangers everywhere, all caps, slightly letter-spaced.",
+      "Pace: about 2 to 3 seconds per panel, and hold the full page about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a light, bouncy pad with hats.",
+      "Map events to the kit: camera moves get a quick \"whoosh\"; balloons get a boing (a sine that bends up and down); captions get a soft \"pop\"; the burst gets \"glitch\", \"boom\" and \"slam\"; the full-page reveal gets \"shimmer\"."
+    ],
+    "sourceFile": "sources/comic-panels.html",
+    "promptFile": "prompts/comic-panels.md",
+    "sourceBytes": 60301,
+    "prompt": "I want an animated video in the \"Comic Panels\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the PANELS layout, what is drawn in each panel (props, the character face and expression), the balloon and caption text, the burst word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the page grid with gutters, panel() halftone fills and 6 px borders, face() with expressive eyes and mouth, balloon() with tail, caption(), burst() spiky polygons, the reading-order camera (CAMK track) and the shake on the big hit).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Bangers.\n\nTHE STYLE\n- One comic page: a white page with 4 to 6 panels, 10 px gutters and 6 px black borders. Each panel has a flat colour fill with a halftone dot pattern on top.\n- Characters are simple and expressive: round heads, big white eyes with dots, eyebrows and an open mouth, a sweat drop for stress. Original characters only, never a known comic hero.\n- Speech balloons are white ellipses with a black outline and a pointed tail; captions are yellow boxes; sound effects are spiky bursts with Bangers lettering in yellow with a thick black stroke.\n- Camera: zoom into one panel at a time in reading order (CAMK), eased; shake on the big sound effect; pull out to the full page at the end.\n- Type: Bangers everywhere, all caps, slightly letter-spaced.\n- Pace: about 2 to 3 seconds per panel, and hold the full page about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep balloon text at 36 px or more, captions at 30 px or more and the title panel at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The day the internet broke\") unless my content asks for it.\n\nSOUND\n- Bed: a light, bouncy pad with hats.\n- Map events to the kit: camera moves get a quick \"whoosh\"; balloons get a boing (a sine that bends up and down); captions get a soft \"pop\"; the burst gets \"glitch\", \"boom\" and \"slam\"; the full-page reveal gets \"shimmer\".\n- Full mix (no voiceover): keep a bouncy pad, a boing for every balloon, a whoosh for every camera move, and a crash and boom for the burst.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Comic Panels\nFamily: Illustrated\nLook: A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.\nHow it explains: The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.\n",
+    "promptVo": "I want an animated video in the \"Comic Panels\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The camera moves to each panel as its line starts, each balloon pops on its first word, and the burst lands with the shake on the loudest word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the PANELS layout, what is drawn in each panel (props, the character face and expression), the balloon and caption text, the burst word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the page grid with gutters, panel() halftone fills and 6 px borders, face() with expressive eyes and mouth, balloon() with tail, caption(), burst() spiky polygons, the reading-order camera (CAMK track) and the shake on the big hit).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Bangers.\n\nTHE STYLE\n- One comic page: a white page with 4 to 6 panels, 10 px gutters and 6 px black borders. Each panel has a flat colour fill with a halftone dot pattern on top.\n- Characters are simple and expressive: round heads, big white eyes with dots, eyebrows and an open mouth, a sweat drop for stress. Original characters only, never a known comic hero.\n- Speech balloons are white ellipses with a black outline and a pointed tail; captions are yellow boxes; sound effects are spiky bursts with Bangers lettering in yellow with a thick black stroke.\n- Camera: zoom into one panel at a time in reading order (CAMK), eased; shake on the big sound effect; pull out to the full page at the end.\n- Type: Bangers everywhere, all caps, slightly letter-spaced.\n- Pace: about 2 to 3 seconds per panel, and hold the full page about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep balloon text at 36 px or more, captions at 30 px or more and the title panel at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The day the internet broke\") unless my content asks for it.\n\nSOUND\n- Bed: a light, bouncy pad with hats.\n- Map events to the kit: camera moves get a quick \"whoosh\"; balloons get a boing (a sine that bends up and down); captions get a soft \"pop\"; the burst gets \"glitch\", \"boom\" and \"slam\"; the full-page reveal gets \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark boings soft: true and keep the crash for the burst only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Comic Panels\nFamily: Illustrated\nLook: A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.\nHow it explains: The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.\n"
+  },
+  {
+    "id": "parchment-map",
+    "num": "27",
+    "name": "Parchment Map",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.",
+    "how": "The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.",
+    "fonts": "Playfair Display (700 and 900, italic), Special Elite",
+    "demo": "The first trip around the world, 1519 to 1522",
+    "replace": "TL, the land outlines in LAND (if the area changes), ROUTE (lon/lat waypoints with arrival times), STAMPS, the title, the counter and takeaway and scoreSound()",
+    "keep": "the pre-rendered parchment map layer (stains, graticule, double-inked coasts), the lon/lat to map projection, the camera that follows the ship, the dashed red route with arrowhead, the ship, the compass rose, the burnt-edge vignette and the Special Elite stamps",
+    "sizes": "keep the headline at 64 px or more, stamps at 26 px or more and the counter at 60 px or more",
+    "voLine": "The ship reaches each place as it is named, the date stamp drops on the date, and the final stamp lands on the last spoken number.",
+    "full": "- Full mix (no voiceover): keep the slow sea swell, the quill scratch while the route draws, a creak or bell at each stamp, and a warm chord at the end.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sea swell very low and mark scratches soft: true.",
+    "sheet": [
+      "The map is a pre-rendered parchment layer: warm paper (#efdcb2 to #dfc28a) with brown stains, a faint graticule every 30 degrees, and coastlines inked twice in sepia (#5a3a1c) with a pale fill. Keep geography roughly real for real places.",
+      "Project lon/lat to the map with one scale; route waypoints carry their real coordinates and their arrival time, so the ship always moves at story speed.",
+      "The route is a red (#a3261c) dashed line that grows behind the ship, with an arrowhead at the front. The ship is a small inked hull with two sails that bobs on the waves.",
+      "The camera pans across the map following the ship; the title and stamps stay fixed on screen.",
+      "Type: Playfair Display 900 for the title (second line italic), Special Elite typewriter text for date stamps on cream labels with a red border.",
+      "Burnt edges (a dark brown vignette) and paper grain on top of everything.",
+      "Pace: one stamp every 2 to 3 seconds of travel; hold the final stamp about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a slow, low sea swell (brown noise with a slow filter sweep) and a warm, sparse pad.",
+      "Map events to the kit: the drawing route gets a soft quill scratch (SND.scratch); each stamp gets a stamp thud (\"stamp\" at low gain) and a soft bell; storms or deaths get a low swell; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/parchment-map.html",
+    "promptFile": "prompts/parchment-map.md",
+    "sourceBytes": 64033,
+    "prompt": "I want an animated video in the \"Parchment Map\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the land outlines in LAND (if the area changes), ROUTE (lon/lat waypoints with arrival times), STAMPS, the title, the counter and takeaway and scoreSound(). Keep and reuse the style's helpers (the pre-rendered parchment map layer (stains, graticule, double-inked coasts), the lon/lat to map projection, the camera that follows the ship, the dashed red route with arrowhead, the ship, the compass rose, the burnt-edge vignette and the Special Elite stamps).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), Special Elite.\n\nTHE STYLE\n- The map is a pre-rendered parchment layer: warm paper (#efdcb2 to #dfc28a) with brown stains, a faint graticule every 30 degrees, and coastlines inked twice in sepia (#5a3a1c) with a pale fill. Keep geography roughly real for real places.\n- Project lon/lat to the map with one scale; route waypoints carry their real coordinates and their arrival time, so the ship always moves at story speed.\n- The route is a red (#a3261c) dashed line that grows behind the ship, with an arrowhead at the front. The ship is a small inked hull with two sails that bobs on the waves.\n- The camera pans across the map following the ship; the title and stamps stay fixed on screen.\n- Type: Playfair Display 900 for the title (second line italic), Special Elite typewriter text for date stamps on cream labels with a red border.\n- Burnt edges (a dark brown vignette) and paper grain on top of everything.\n- Pace: one stamp every 2 to 3 seconds of travel; hold the final stamp about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, stamps at 26 px or more and the counter at 60 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The first trip around the world, 1519 to 1522\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, low sea swell (brown noise with a slow filter sweep) and a warm, sparse pad.\n- Map events to the kit: the drawing route gets a soft quill scratch (SND.scratch); each stamp gets a stamp thud (\"stamp\" at low gain) and a soft bell; storms or deaths get a low swell; the takeaway gets an open chord.\n- Full mix (no voiceover): keep the slow sea swell, the quill scratch while the route draws, a creak or bell at each stamp, and a warm chord at the end.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Parchment Map\nFamily: Illustrated\nLook: An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.\nHow it explains: The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Parchment Map\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The ship reaches each place as it is named, the date stamp drops on the date, and the final stamp lands on the last spoken number.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the land outlines in LAND (if the area changes), ROUTE (lon/lat waypoints with arrival times), STAMPS, the title, the counter and takeaway and scoreSound(). Keep and reuse the style's helpers (the pre-rendered parchment map layer (stains, graticule, double-inked coasts), the lon/lat to map projection, the camera that follows the ship, the dashed red route with arrowhead, the ship, the compass rose, the burnt-edge vignette and the Special Elite stamps).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), Special Elite.\n\nTHE STYLE\n- The map is a pre-rendered parchment layer: warm paper (#efdcb2 to #dfc28a) with brown stains, a faint graticule every 30 degrees, and coastlines inked twice in sepia (#5a3a1c) with a pale fill. Keep geography roughly real for real places.\n- Project lon/lat to the map with one scale; route waypoints carry their real coordinates and their arrival time, so the ship always moves at story speed.\n- The route is a red (#a3261c) dashed line that grows behind the ship, with an arrowhead at the front. The ship is a small inked hull with two sails that bobs on the waves.\n- The camera pans across the map following the ship; the title and stamps stay fixed on screen.\n- Type: Playfair Display 900 for the title (second line italic), Special Elite typewriter text for date stamps on cream labels with a red border.\n- Burnt edges (a dark brown vignette) and paper grain on top of everything.\n- Pace: one stamp every 2 to 3 seconds of travel; hold the final stamp about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, stamps at 26 px or more and the counter at 60 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The first trip around the world, 1519 to 1522\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, low sea swell (brown noise with a slow filter sweep) and a warm, sparse pad.\n- Map events to the kit: the drawing route gets a soft quill scratch (SND.scratch); each stamp gets a stamp thud (\"stamp\" at low gain) and a soft bell; storms or deaths get a low swell; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sea swell very low and mark scratches soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Parchment Map\nFamily: Illustrated\nLook: An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.\nHow it explains: The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.\n"
+  },
+  {
+    "id": "timeline-rail",
+    "num": "28",
+    "name": "Timeline Rail",
+    "family": "Data",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A deep green page with a cream vertical rail: glowing year nodes, cream event cards with a big gold year and a small drawn icon, and a running year odometer in the corner, as the camera scrolls down through time.",
+    "how": "The camera scrolls down the rail like a feed. As it reaches each year the node lights up, the odometer rolls to that year and the card drops in with its icon. The last card is the present, and the takeaway closes the story.",
+    "fonts": "Archivo Black, Space Grotesk (700), Inter (600 and 700)",
+    "demo": "The phone in 150 years",
+    "replace": "TL, EVENTS (year, text, icon painter), the scroll keys, the headline, the takeaway and scoreSound()",
+    "keep": "the long content layer with the rail, nodes and cards, the scroll camera, the drop-in card motion, the year odometer, the icon painter approach (small flat icons in the page colour), wordLine() and grain()",
+    "sizes": "keep years at 52 px or more, card text at 26 px or more and the headline at 64 px or more",
+    "voLine": "The camera reaches each card and its year as the year is said; the card text lands on the event.",
+    "full": "- Full mix (no voiceover): a ticking pad, a soft whoosh for each scroll, a tick for the odometer and a chime per card.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and chimes soft: true.",
+    "sheet": [
+      "One long vertical page (a content layer taller than the screen) in deep green (#0f2a24) with a cream rail (#e8dcc0) down the left. The camera scrolls down it; no cuts.",
+      "Each event is a cream card (#f3ead7) with rounded corners, a big gold year (#e8b04b) in Space Grotesk, one short line of text and a small flat icon drawn in code in the page colour.",
+      "The current node glows gold; past nodes stay filled, future nodes stay hollow.",
+      "A year odometer in the top-right rolls between events (digits slide), always showing the year the camera is at.",
+      "Use real dates and real firsts; keep each card to one line of fact.",
+      "Pace: about 2 seconds per card, including the scroll."
+    ],
+    "sound": [
+      "Bed: a warm pad with a soft clock-like pulse.",
+      "Map events to the kit: each scroll gets a soft \"whoosh\"; the odometer gets fast ticks while it rolls; each card gets a soft thud as it lands and a chime; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/timeline-rail.html",
+    "promptFile": "prompts/timeline-rail.md",
+    "sourceBytes": 58926,
+    "prompt": "I want an animated video in the \"Timeline Rail\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, EVENTS (year, text, icon painter), the scroll keys, the headline, the takeaway and scoreSound(). Keep and reuse the style's helpers (the long content layer with the rail, nodes and cards, the scroll camera, the drop-in card motion, the year odometer, the icon painter approach (small flat icons in the page colour), wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Space Grotesk (700), Inter (600 and 700).\n\nTHE STYLE\n- One long vertical page (a content layer taller than the screen) in deep green (#0f2a24) with a cream rail (#e8dcc0) down the left. The camera scrolls down it; no cuts.\n- Each event is a cream card (#f3ead7) with rounded corners, a big gold year (#e8b04b) in Space Grotesk, one short line of text and a small flat icon drawn in code in the page colour.\n- The current node glows gold; past nodes stay filled, future nodes stay hollow.\n- A year odometer in the top-right rolls between events (digits slide), always showing the year the camera is at.\n- Use real dates and real firsts; keep each card to one line of fact.\n- Pace: about 2 seconds per card, including the scroll.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep years at 52 px or more, card text at 26 px or more and the headline at 64 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The phone in 150 years\") unless my content asks for it.\n\nSOUND\n- Bed: a warm pad with a soft clock-like pulse.\n- Map events to the kit: each scroll gets a soft \"whoosh\"; the odometer gets fast ticks while it rolls; each card gets a soft thud as it lands and a chime; the takeaway gets an open chord.\n- Full mix (no voiceover): a ticking pad, a soft whoosh for each scroll, a tick for the odometer and a chime per card.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Timeline Rail\nFamily: Data\nLook: A deep green page with a cream vertical rail: glowing year nodes, cream event cards with a big gold year and a small drawn icon, and a running year odometer in the corner, as the camera scrolls down through time.\nHow it explains: The camera scrolls down the rail like a feed. As it reaches each year the node lights up, the odometer rolls to that year and the card drops in with its icon. The last card is the present, and the takeaway closes the story.\n",
+    "promptVo": "I want an animated video in the \"Timeline Rail\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The camera reaches each card and its year as the year is said; the card text lands on the event.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, EVENTS (year, text, icon painter), the scroll keys, the headline, the takeaway and scoreSound(). Keep and reuse the style's helpers (the long content layer with the rail, nodes and cards, the scroll camera, the drop-in card motion, the year odometer, the icon painter approach (small flat icons in the page colour), wordLine() and grain()).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Space Grotesk (700), Inter (600 and 700).\n\nTHE STYLE\n- One long vertical page (a content layer taller than the screen) in deep green (#0f2a24) with a cream rail (#e8dcc0) down the left. The camera scrolls down it; no cuts.\n- Each event is a cream card (#f3ead7) with rounded corners, a big gold year (#e8b04b) in Space Grotesk, one short line of text and a small flat icon drawn in code in the page colour.\n- The current node glows gold; past nodes stay filled, future nodes stay hollow.\n- A year odometer in the top-right rolls between events (digits slide), always showing the year the camera is at.\n- Use real dates and real firsts; keep each card to one line of fact.\n- Pace: about 2 seconds per card, including the scroll.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep years at 52 px or more, card text at 26 px or more and the headline at 64 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The phone in 150 years\") unless my content asks for it.\n\nSOUND\n- Bed: a warm pad with a soft clock-like pulse.\n- Map events to the kit: each scroll gets a soft \"whoosh\"; the odometer gets fast ticks while it rolls; each card gets a soft thud as it lands and a chime; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and chimes soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Timeline Rail\nFamily: Data\nLook: A deep green page with a cream vertical rail: glowing year nodes, cream event cards with a big gold year and a small drawn icon, and a running year odometer in the corner, as the camera scrolls down through time.\nHow it explains: The camera scrolls down the rail like a feed. As it reaches each year the node lights up, the odometer rolls to that year and the card drops in with its icon. The last card is the present, and the takeaway closes the story.\n"
+  },
+  {
+    "id": "isotype",
+    "num": "29",
+    "name": "Isotype",
+    "family": "Data",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.",
+    "how": "The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.",
+    "fonts": "Archivo Black, Inter (500 and 800), JetBrains Mono (700)",
+    "demo": "1 in 3 US adults sleep less than 7 hours",
+    "replace": "TL, the stat (RATIO, the headline text and the big number), the icon shape in personIcon() if the subject is not people, the source line, the takeaway and scoreSound()",
+    "keep": "the 9 by 9 icon grid, the row-by-row pop in, the one-by-one colour fill, the regroup into a solid block (sorted target slots), the big number, the source line and the restrained palette",
+    "sizes": "keep the big number at 120 px or more, the statement at 30 px or more and the source at 20 px or more",
+    "voLine": "The crowd fills while the group is described, the colour fill runs while the share is said, the big number slams on the number, and the regroup happens on the comparison.",
+    "full": "- Full mix (no voiceover): a calm pad, a soft tick per row, a rising pluck per coloured icon, and a low hit on the big number.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and plucks soft: true.",
+    "sheet": [
+      "One icon equals a fixed number of people (say so if it is not 1). Use a real, sourced ratio and keep the count of coloured icons exact for it.",
+      "Icons are simple and identical: a round head and a rounded body, grey (#c3ced8) by default, coral (#ff5a3c) for the share that matters. No other colours.",
+      "Background: cool pale grey-blue (#edf2f6); text in deep navy (#13212e).",
+      "Order: fill the crowd row by row, colour the share one by one, then move the coloured icons into a solid block at the start of the grid (sorted target slots) so the split reads at a glance.",
+      "Type: Archivo Black for the big number, Inter 800 for the statement (second line in coral), JetBrains Mono for the source line at the bottom.",
+      "Pace: crowd in about 1.5 seconds, colour fill about 2 seconds, regroup about 1.5 seconds."
+    ],
+    "sound": [
+      "Bed: a calm, light pad (padBed).",
+      "Map events to the kit: each row gets a soft \"tick\"; each coloured icon gets a short pluck that climbs; the big number gets \"slam\"; the regroup gets a soft \"whoosh\"; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/isotype.html",
+    "promptFile": "prompts/isotype.md",
+    "sourceBytes": 57101,
+    "prompt": "I want an animated video in the \"Isotype\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the stat (RATIO, the headline text and the big number), the icon shape in personIcon() if the subject is not people, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 9 by 9 icon grid, the row-by-row pop in, the one-by-one colour fill, the regroup into a solid block (sorted target slots), the big number, the source line and the restrained palette).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- One icon equals a fixed number of people (say so if it is not 1). Use a real, sourced ratio and keep the count of coloured icons exact for it.\n- Icons are simple and identical: a round head and a rounded body, grey (#c3ced8) by default, coral (#ff5a3c) for the share that matters. No other colours.\n- Background: cool pale grey-blue (#edf2f6); text in deep navy (#13212e).\n- Order: fill the crowd row by row, colour the share one by one, then move the coloured icons into a solid block at the start of the grid (sorted target slots) so the split reads at a glance.\n- Type: Archivo Black for the big number, Inter 800 for the statement (second line in coral), JetBrains Mono for the source line at the bottom.\n- Pace: crowd in about 1.5 seconds, colour fill about 2 seconds, regroup about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the big number at 120 px or more, the statement at 30 px or more and the source at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"1 in 3 US adults sleep less than 7 hours\") unless my content asks for it.\n\nSOUND\n- Bed: a calm, light pad (padBed).\n- Map events to the kit: each row gets a soft \"tick\"; each coloured icon gets a short pluck that climbs; the big number gets \"slam\"; the regroup gets a soft \"whoosh\"; the takeaway gets an open chord.\n- Full mix (no voiceover): a calm pad, a soft tick per row, a rising pluck per coloured icon, and a low hit on the big number.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Isotype\nFamily: Data\nLook: Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.\nHow it explains: The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.\n",
+    "promptVo": "I want an animated video in the \"Isotype\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The crowd fills while the group is described, the colour fill runs while the share is said, the big number slams on the number, and the regroup happens on the comparison.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the stat (RATIO, the headline text and the big number), the icon shape in personIcon() if the subject is not people, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 9 by 9 icon grid, the row-by-row pop in, the one-by-one colour fill, the regroup into a solid block (sorted target slots), the big number, the source line and the restrained palette).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500 and 800), JetBrains Mono (700).\n\nTHE STYLE\n- One icon equals a fixed number of people (say so if it is not 1). Use a real, sourced ratio and keep the count of coloured icons exact for it.\n- Icons are simple and identical: a round head and a rounded body, grey (#c3ced8) by default, coral (#ff5a3c) for the share that matters. No other colours.\n- Background: cool pale grey-blue (#edf2f6); text in deep navy (#13212e).\n- Order: fill the crowd row by row, colour the share one by one, then move the coloured icons into a solid block at the start of the grid (sorted target slots) so the split reads at a glance.\n- Type: Archivo Black for the big number, Inter 800 for the statement (second line in coral), JetBrains Mono for the source line at the bottom.\n- Pace: crowd in about 1.5 seconds, colour fill about 2 seconds, regroup about 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the big number at 120 px or more, the statement at 30 px or more and the source at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"1 in 3 US adults sleep less than 7 hours\") unless my content asks for it.\n\nSOUND\n- Bed: a calm, light pad (padBed).\n- Map events to the kit: each row gets a soft \"tick\"; each coloured icon gets a short pluck that climbs; the big number gets \"slam\"; the regroup gets a soft \"whoosh\"; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and plucks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Isotype\nFamily: Data\nLook: Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.\nHow it explains: The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.\n"
+  },
+  {
+    "id": "evidence-board",
+    "num": "30",
+    "name": "Evidence Board",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.",
+    "how": "The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.",
+    "fonts": "Special Elite, Caveat (700), Anton",
+    "demo": "The missing painting (an invented case)",
+    "replace": "TL, ITEMS (what is pinned, where, and what it shows), LINKS (which pins the string joins and when), the typed card text, the stamp word, the camera keys in CAMK and scoreSound()",
+    "keep": "the cork texture, polaroid(), indexCard() with typewriter reveal, sticky(), pins, sagging string() that draws pin to pin, the case-file label, the stamp with distressed edges, the clue-to-clue camera (CAMK) and the final pull-back",
+    "sizes": "keep typed text at 30 px or more, captions at 36 px or more and the stamp at 90 px or more",
+    "voLine": "The camera arrives at each clue as it is mentioned, string draws while the connection is explained, the card types out while it is read, and the stamp slams on the verdict word.",
+    "full": "- Full mix (no voiceover): a tense low pad, a pin push for every pin, a string twang, typewriter keys, and a heavy stamp.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark keys and pins soft: true.",
+    "sheet": [
+      "The board is one large layer (bigger than the screen) with cork speckle; the camera moves across it with eased pans and zooms, then pulls back to show everything.",
+      "Clues are physical objects drawn in code: polaroids (white frame, dark photo area with a simple sketch, Caveat caption), lined index cards with Special Elite typing, yellow sticky notes in Caveat, each slightly rotated with a drop shadow and a red pin.",
+      "Red string (#c1121f) sags between pins and draws itself from one pin to the next.",
+      "Verdict: a rubber stamp (red, double border, distressed with knocked-out specks) slams onto the board with a shake.",
+      "True crime needs care: for real cases use only documented facts, no speculation presented as fact, and respect for victims; invented cases must say so.",
+      "Pace: about 2 seconds per clue, the stamp in the last 3 seconds."
+    ],
+    "sound": [
+      "Bed: a low, tense pad and a slow pulse.",
+      "Map events to the kit: pins get a soft push (SND.tap low); string gets a short twang (a plucked low note with a bend); typing gets \"keys\"; camera moves get a soft \"whoosh\"; the stamp gets \"stamp\" and a low \"boom\"."
+    ],
+    "sourceFile": "sources/evidence-board.html",
+    "promptFile": "prompts/evidence-board.md",
+    "sourceBytes": 61521,
+    "prompt": "I want an animated video in the \"Evidence Board\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, ITEMS (what is pinned, where, and what it shows), LINKS (which pins the string joins and when), the typed card text, the stamp word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the cork texture, polaroid(), indexCard() with typewriter reveal, sticky(), pins, sagging string() that draws pin to pin, the case-file label, the stamp with distressed edges, the clue-to-clue camera (CAMK) and the final pull-back).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Special Elite, Caveat (700), Anton.\n\nTHE STYLE\n- The board is one large layer (bigger than the screen) with cork speckle; the camera moves across it with eased pans and zooms, then pulls back to show everything.\n- Clues are physical objects drawn in code: polaroids (white frame, dark photo area with a simple sketch, Caveat caption), lined index cards with Special Elite typing, yellow sticky notes in Caveat, each slightly rotated with a drop shadow and a red pin.\n- Red string (#c1121f) sags between pins and draws itself from one pin to the next.\n- Verdict: a rubber stamp (red, double border, distressed with knocked-out specks) slams onto the board with a shake.\n- True crime needs care: for real cases use only documented facts, no speculation presented as fact, and respect for victims; invented cases must say so.\n- Pace: about 2 seconds per clue, the stamp in the last 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep typed text at 30 px or more, captions at 36 px or more and the stamp at 90 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The missing painting (an invented case)\") unless my content asks for it.\n\nSOUND\n- Bed: a low, tense pad and a slow pulse.\n- Map events to the kit: pins get a soft push (SND.tap low); string gets a short twang (a plucked low note with a bend); typing gets \"keys\"; camera moves get a soft \"whoosh\"; the stamp gets \"stamp\" and a low \"boom\".\n- Full mix (no voiceover): a tense low pad, a pin push for every pin, a string twang, typewriter keys, and a heavy stamp.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Evidence Board\nFamily: Illustrated\nLook: A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.\nHow it explains: The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.\n",
+    "promptVo": "I want an animated video in the \"Evidence Board\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The camera arrives at each clue as it is mentioned, string draws while the connection is explained, the card types out while it is read, and the stamp slams on the verdict word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, ITEMS (what is pinned, where, and what it shows), LINKS (which pins the string joins and when), the typed card text, the stamp word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the cork texture, polaroid(), indexCard() with typewriter reveal, sticky(), pins, sagging string() that draws pin to pin, the case-file label, the stamp with distressed edges, the clue-to-clue camera (CAMK) and the final pull-back).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Special Elite, Caveat (700), Anton.\n\nTHE STYLE\n- The board is one large layer (bigger than the screen) with cork speckle; the camera moves across it with eased pans and zooms, then pulls back to show everything.\n- Clues are physical objects drawn in code: polaroids (white frame, dark photo area with a simple sketch, Caveat caption), lined index cards with Special Elite typing, yellow sticky notes in Caveat, each slightly rotated with a drop shadow and a red pin.\n- Red string (#c1121f) sags between pins and draws itself from one pin to the next.\n- Verdict: a rubber stamp (red, double border, distressed with knocked-out specks) slams onto the board with a shake.\n- True crime needs care: for real cases use only documented facts, no speculation presented as fact, and respect for victims; invented cases must say so.\n- Pace: about 2 seconds per clue, the stamp in the last 3 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep typed text at 30 px or more, captions at 36 px or more and the stamp at 90 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The missing painting (an invented case)\") unless my content asks for it.\n\nSOUND\n- Bed: a low, tense pad and a slow pulse.\n- Map events to the kit: pins get a soft push (SND.tap low); string gets a short twang (a plucked low note with a bend); typing gets \"keys\"; camera moves get a soft \"whoosh\"; the stamp gets \"stamp\" and a low \"boom\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark keys and pins soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Evidence Board\nFamily: Illustrated\nLook: A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.\nHow it explains: The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.\n"
+  },
+  {
+    "id": "storybook",
+    "num": "31",
+    "name": "Storybook",
+    "family": "Illustrated",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.",
+    "how": "Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.",
+    "fonts": "Playfair Display (700, italic), Inter (600)",
+    "demo": "The fox who counted stars (a bedtime fable)",
+    "replace": "TL, the PAGES (washes, the character outline paths, details, the sentence on each page), the counter or ending, and scoreSound()",
+    "keep": "the paper grain, wash() bloom (layered irregular blobs with soft edges), inkPath() line reveal, the gold ink stars, the word-by-word storyline, the page frame and the page-turn cut",
+    "sizes": "keep the storyline at 48 px or more and the chapter line at 20 px or more",
+    "voLine": "Each wash blooms while its part of the scene is described, the ink line draws while the character is introduced, and each storyline word fades in as it is spoken.",
+    "full": "- Full mix (no voiceover): keep the music-box melody, a soft brush swish per wash, and a paper sound for each page turn.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the music box very low and mark swishes soft: true.",
+    "sheet": [
+      "Paper: warm cream watercolour paper (#fbf7ee) with fine grain and a thin brown frame around the picture area. The text area sits below the picture.",
+      "Washes: each area is several overlapping irregular blobs at low alpha (wash()), blooming outward from a centre over about a second, with a slightly darker edge.",
+      "Ink: one thin brown line (#3a2a20, 2 to 3 px) that draws the character and key objects along their path. Small gold details (#e8c35a) for stars and sparkles.",
+      "Palette: night blue washes (#2d4a8a), warm moon (#f6e1a0), green hills (#6a9a5b), the character in one warm colour (#e0793a).",
+      "Type: Playfair Display italic for the storyline, word by word, centred; Inter small caps for the chapter line.",
+      "Pace: a page takes about 6 seconds: washes, ink, details, then the sentence. Page turns take 0.8 seconds."
+    ],
+    "sound": [
+      "Music: a slow music-box melody (high sine notes with a little reverb) over a very soft pad.",
+      "Map events to the kit: each wash gets a soft brush swish (SND.paper, soft); ink lines get a very quiet scratch; stars get small high chimes; page turns get a longer paper sweep; the ending gets a gentle chord."
+    ],
+    "sourceFile": "sources/storybook.html",
+    "promptFile": "prompts/storybook.md",
+    "sourceBytes": 60083,
+    "prompt": "I want an animated video in the \"Storybook\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the PAGES (washes, the character outline paths, details, the sentence on each page), the counter or ending, and scoreSound(). Keep and reuse the style's helpers (the paper grain, wash() bloom (layered irregular blobs with soft edges), inkPath() line reveal, the gold ink stars, the word-by-word storyline, the page frame and the page-turn cut).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700, italic), Inter (600).\n\nTHE STYLE\n- Paper: warm cream watercolour paper (#fbf7ee) with fine grain and a thin brown frame around the picture area. The text area sits below the picture.\n- Washes: each area is several overlapping irregular blobs at low alpha (wash()), blooming outward from a centre over about a second, with a slightly darker edge.\n- Ink: one thin brown line (#3a2a20, 2 to 3 px) that draws the character and key objects along their path. Small gold details (#e8c35a) for stars and sparkles.\n- Palette: night blue washes (#2d4a8a), warm moon (#f6e1a0), green hills (#6a9a5b), the character in one warm colour (#e0793a).\n- Type: Playfair Display italic for the storyline, word by word, centred; Inter small caps for the chapter line.\n- Pace: a page takes about 6 seconds: washes, ink, details, then the sentence. Page turns take 0.8 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the storyline at 48 px or more and the chapter line at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The fox who counted stars (a bedtime fable)\") unless my content asks for it.\n\nSOUND\n- Music: a slow music-box melody (high sine notes with a little reverb) over a very soft pad.\n- Map events to the kit: each wash gets a soft brush swish (SND.paper, soft); ink lines get a very quiet scratch; stars get small high chimes; page turns get a longer paper sweep; the ending gets a gentle chord.\n- Full mix (no voiceover): keep the music-box melody, a soft brush swish per wash, and a paper sound for each page turn.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Storybook\nFamily: Illustrated\nLook: A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.\nHow it explains: Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.\n",
+    "promptVo": "I want an animated video in the \"Storybook\" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each wash blooms while its part of the scene is described, the ink line draws while the character is introduced, and each storyline word fades in as it is spoken.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the PAGES (washes, the character outline paths, details, the sentence on each page), the counter or ending, and scoreSound(). Keep and reuse the style's helpers (the paper grain, wash() bloom (layered irregular blobs with soft edges), inkPath() line reveal, the gold ink stars, the word-by-word storyline, the page frame and the page-turn cut).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700, italic), Inter (600).\n\nTHE STYLE\n- Paper: warm cream watercolour paper (#fbf7ee) with fine grain and a thin brown frame around the picture area. The text area sits below the picture.\n- Washes: each area is several overlapping irregular blobs at low alpha (wash()), blooming outward from a centre over about a second, with a slightly darker edge.\n- Ink: one thin brown line (#3a2a20, 2 to 3 px) that draws the character and key objects along their path. Small gold details (#e8c35a) for stars and sparkles.\n- Palette: night blue washes (#2d4a8a), warm moon (#f6e1a0), green hills (#6a9a5b), the character in one warm colour (#e0793a).\n- Type: Playfair Display italic for the storyline, word by word, centred; Inter small caps for the chapter line.\n- Pace: a page takes about 6 seconds: washes, ink, details, then the sentence. Page turns take 0.8 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the storyline at 48 px or more and the chapter line at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The fox who counted stars (a bedtime fable)\") unless my content asks for it.\n\nSOUND\n- Music: a slow music-box melody (high sine notes with a little reverb) over a very soft pad.\n- Map events to the kit: each wash gets a soft brush swish (SND.paper, soft); ink lines get a very quiet scratch; stars get small high chimes; page turns get a longer paper sweep; the ending gets a gentle chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the music box very low and mark swishes soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Storybook\nFamily: Illustrated\nLook: A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.\nHow it explains: Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.\n"
+  },
+  {
+    "id": "pixel-quest",
+    "num": "32",
+    "name": "Pixel Quest",
+    "family": "Retro",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.",
+    "how": "The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.",
+    "fonts": "Press Start 2P",
+    "demo": "Level up your sleep",
+    "replace": "TL, the LEVEL layout (gaps, platforms, gems), the hero sprite colours, QUESTS (dialog text and when they appear), the level-up text and scoreSound()",
+    "keep": "the low-res world canvas (180×320) scaled 4× with smoothing off, the walking/jumping hero sprite, the scrolling camera, pixel hearts, the XP bar and LVL counter, the typewriter dialog box, the level-up flash and the Press Start 2P lettering",
+    "sizes": "keep dialog text at 20 px or more, HUD text at 24 px or more and titles at 44 px or more (all in Press Start 2P)",
+    "voLine": "Each quest box opens on the first word of its tip and types while it is read, gems ping as they are counted, and the level-up flash lands on the payoff word.",
+    "full": "- Full mix (no voiceover): keep the chiptune loop (square lead, triangle bass, noise hats), with jump, gem and level-up sounds on top.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the loop low. Mark gem pings and text blips soft: true.",
+    "sheet": [
+      "All world art is drawn at 180×320 on its own canvas with whole-pixel rectangles, then scaled 4× with image smoothing off. No anti-aliased shapes in the world layer.",
+      "Original sprites only: a small hero with a cap and two walking frames, gems (not coins), brick platforms and flags. Never copy a real game character, item or level.",
+      "Palette: limited and bright: sky bands (#5fcde4 to #a6e6f0), greens (#3f9b4f, #5ac85a), brown dirt (#8b5a2b), brick orange (#c86b2b), gem yellow (#ffd23f), hero red cap (#e63946) and blue overalls (#1d4ed8).",
+      "HUD on top in screen pixels: pixel hearts, an XP bar, a LVL number and a score, all in Press Start 2P with a black outline.",
+      "Dialog box: black with a white 3 px border at the bottom, text typed at about 30 characters a second with a blinking ▼.",
+      "Pace: the hero never stops walking; one quest every 2.5 seconds; the level-up near the end."
+    ],
+    "sound": [
+      "Music: a chiptune loop: a square-wave lead melody, a triangle bass on the beat, and short noise hats.",
+      "Map events to the kit: jumps get a rising square sweep; gems get a two-note bleep (SND.beep); dialog text gets tiny blips per few characters; level-up gets a fast rising arpeggio; the title blinks with a soft blip."
+    ],
+    "sourceFile": "sources/pixel-quest.html",
+    "promptFile": "prompts/pixel-quest.md",
+    "sourceBytes": 60908,
+    "prompt": "I want an animated video in the \"Pixel Quest\" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the LEVEL layout (gaps, platforms, gems), the hero sprite colours, QUESTS (dialog text and when they appear), the level-up text and scoreSound(). Keep and reuse the style's helpers (the low-res world canvas (180×320) scaled 4× with smoothing off, the walking/jumping hero sprite, the scrolling camera, pixel hearts, the XP bar and LVL counter, the typewriter dialog box, the level-up flash and the Press Start 2P lettering).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Press Start 2P.\n\nTHE STYLE\n- All world art is drawn at 180×320 on its own canvas with whole-pixel rectangles, then scaled 4× with image smoothing off. No anti-aliased shapes in the world layer.\n- Original sprites only: a small hero with a cap and two walking frames, gems (not coins), brick platforms and flags. Never copy a real game character, item or level.\n- Palette: limited and bright: sky bands (#5fcde4 to #a6e6f0), greens (#3f9b4f, #5ac85a), brown dirt (#8b5a2b), brick orange (#c86b2b), gem yellow (#ffd23f), hero red cap (#e63946) and blue overalls (#1d4ed8).\n- HUD on top in screen pixels: pixel hearts, an XP bar, a LVL number and a score, all in Press Start 2P with a black outline.\n- Dialog box: black with a white 3 px border at the bottom, text typed at about 30 characters a second with a blinking ▼.\n- Pace: the hero never stops walking; one quest every 2.5 seconds; the level-up near the end.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep dialog text at 20 px or more, HUD text at 24 px or more and titles at 44 px or more (all in Press Start 2P). Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Level up your sleep\") unless my content asks for it.\n\nSOUND\n- Music: a chiptune loop: a square-wave lead melody, a triangle bass on the beat, and short noise hats.\n- Map events to the kit: jumps get a rising square sweep; gems get a two-note bleep (SND.beep); dialog text gets tiny blips per few characters; level-up gets a fast rising arpeggio; the title blinks with a soft blip.\n- Full mix (no voiceover): keep the chiptune loop (square lead, triangle bass, noise hats), with jump, gem and level-up sounds on top.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Pixel Quest\nFamily: Retro\nLook: Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.\nHow it explains: The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.\n",
+    "promptVo": "I want an animated video in the \"Pixel Quest\" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each quest box opens on the first word of its tip and types while it is read, gems ping as they are counted, and the level-up flash lands on the payoff word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the LEVEL layout (gaps, platforms, gems), the hero sprite colours, QUESTS (dialog text and when they appear), the level-up text and scoreSound(). Keep and reuse the style's helpers (the low-res world canvas (180×320) scaled 4× with smoothing off, the walking/jumping hero sprite, the scrolling camera, pixel hearts, the XP bar and LVL counter, the typewriter dialog box, the level-up flash and the Press Start 2P lettering).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Press Start 2P.\n\nTHE STYLE\n- All world art is drawn at 180×320 on its own canvas with whole-pixel rectangles, then scaled 4× with image smoothing off. No anti-aliased shapes in the world layer.\n- Original sprites only: a small hero with a cap and two walking frames, gems (not coins), brick platforms and flags. Never copy a real game character, item or level.\n- Palette: limited and bright: sky bands (#5fcde4 to #a6e6f0), greens (#3f9b4f, #5ac85a), brown dirt (#8b5a2b), brick orange (#c86b2b), gem yellow (#ffd23f), hero red cap (#e63946) and blue overalls (#1d4ed8).\n- HUD on top in screen pixels: pixel hearts, an XP bar, a LVL number and a score, all in Press Start 2P with a black outline.\n- Dialog box: black with a white 3 px border at the bottom, text typed at about 30 characters a second with a blinking ▼.\n- Pace: the hero never stops walking; one quest every 2.5 seconds; the level-up near the end.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep dialog text at 20 px or more, HUD text at 24 px or more and titles at 44 px or more (all in Press Start 2P). Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Level up your sleep\") unless my content asks for it.\n\nSOUND\n- Music: a chiptune loop: a square-wave lead melody, a triangle bass on the beat, and short noise hats.\n- Map events to the kit: jumps get a rising square sweep; gems get a two-note bleep (SND.beep); dialog text gets tiny blips per few characters; level-up gets a fast rising arpeggio; the title blinks with a soft blip.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the loop low. Mark gem pings and text blips soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Pixel Quest\nFamily: Retro\nLook: Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.\nHow it explains: The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.\n"
+  },
+  {
+    "id": "terminal",
+    "num": "33",
+    "name": "Terminal",
+    "family": "Retro",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A glowing green-on-black terminal: typed commands with a block cursor, dim grey output, red and amber warnings, an ASCII progress bar and ASCII box diagrams, with scanlines, a soft phosphor glow and a dark vignette.",
+    "how": "The story is a terminal session: a command types itself, output scrolls out line by line, a progress bar or counter runs, and the result lands in red or amber. A second command shows the contrast, and an ASCII comparison box sums it up.",
+    "fonts": "JetBrains Mono (500 and 700)",
+    "demo": "Why 'password123' fails in 0.02 seconds",
+    "replace": "TL and SESSION (each line: its time, whether it is typed or printed, its text and its colour), the progress bar or counter, the ASCII box and the takeaway, and scoreSound()",
+    "keep": "the black screen with phosphor glow, the line-by-line session renderer with typed commands and printed output, the block cursor, the ASCII progress bar, scanlines and vignette, and the colour rules",
+    "sizes": "keep command text at 24 px or more, the headline at 36 px or more and the takeaway at 34 px or more",
+    "voLine": "Each command types while it is described, output prints on the word it reports, and the result line lands on the stressed word.",
+    "full": "- Full mix (no voiceover): keyboard typing, a hum, short beeps for output, an alarm tone for the bad result and a confirm tone for the good one.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep keys soft: true and the hum very low.",
+    "sheet": [
+      "Black screen (#040805), JetBrains Mono everywhere. Commands are bright green (#3dff7f) with a \"$\" prompt; output is dim green (#1f8f47); warnings amber (#ffcf4d); failures red (#ff5f56); white only for the takeaway.",
+      "Text glows softly (a green shadow blur). Scanlines every 3 px and a dark vignette sit on top.",
+      "Commands type at about 28 characters a second; output lines print instantly one after another; a blinking block cursor sits after the last character.",
+      "Progress and comparisons are ASCII: [#####.....] bars, box-drawing tables. No icons or images.",
+      "Teach safely: show how to defend (stronger passwords, updates, two-factor), never step-by-step instructions for attacking real systems.",
+      "Pace: a command every 2 to 3 seconds; the result line holds at least 1 second."
+    ],
+    "sound": [
+      "Bed: a low electrical hum and a quiet dark pad.",
+      "Map events to the kit: typed commands get \"keys\"; each printed line gets a soft short beep (SND.beep); a bad result gets a two-tone alarm; a good result gets a rising confirm beep; the takeaway gets a low swell."
+    ],
+    "sourceFile": "sources/terminal.html",
+    "promptFile": "prompts/terminal.md",
+    "sourceBytes": 57204,
+    "prompt": "I want an animated video in the \"Terminal\" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL and SESSION (each line: its time, whether it is typed or printed, its text and its colour), the progress bar or counter, the ASCII box and the takeaway, and scoreSound(). Keep and reuse the style's helpers (the black screen with phosphor glow, the line-by-line session renderer with typed commands and printed output, the block cursor, the ASCII progress bar, scanlines and vignette, and the colour rules).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Black screen (#040805), JetBrains Mono everywhere. Commands are bright green (#3dff7f) with a \"$\" prompt; output is dim green (#1f8f47); warnings amber (#ffcf4d); failures red (#ff5f56); white only for the takeaway.\n- Text glows softly (a green shadow blur). Scanlines every 3 px and a dark vignette sit on top.\n- Commands type at about 28 characters a second; output lines print instantly one after another; a blinking block cursor sits after the last character.\n- Progress and comparisons are ASCII: [#####.....] bars, box-drawing tables. No icons or images.\n- Teach safely: show how to defend (stronger passwords, updates, two-factor), never step-by-step instructions for attacking real systems.\n- Pace: a command every 2 to 3 seconds; the result line holds at least 1 second.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep command text at 24 px or more, the headline at 36 px or more and the takeaway at 34 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why 'password123' fails in 0.02 seconds\") unless my content asks for it.\n\nSOUND\n- Bed: a low electrical hum and a quiet dark pad.\n- Map events to the kit: typed commands get \"keys\"; each printed line gets a soft short beep (SND.beep); a bad result gets a two-tone alarm; a good result gets a rising confirm beep; the takeaway gets a low swell.\n- Full mix (no voiceover): keyboard typing, a hum, short beeps for output, an alarm tone for the bad result and a confirm tone for the good one.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Terminal\nFamily: Retro\nLook: A glowing green-on-black terminal: typed commands with a block cursor, dim grey output, red and amber warnings, an ASCII progress bar and ASCII box diagrams, with scanlines, a soft phosphor glow and a dark vignette.\nHow it explains: The story is a terminal session: a command types itself, output scrolls out line by line, a progress bar or counter runs, and the result lands in red or amber. A second command shows the contrast, and an ASCII comparison box sums it up.\n",
+    "promptVo": "I want an animated video in the \"Terminal\" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each command types while it is described, output prints on the word it reports, and the result line lands on the stressed word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL and SESSION (each line: its time, whether it is typed or printed, its text and its colour), the progress bar or counter, the ASCII box and the takeaway, and scoreSound(). Keep and reuse the style's helpers (the black screen with phosphor glow, the line-by-line session renderer with typed commands and printed output, the block cursor, the ASCII progress bar, scanlines and vignette, and the colour rules).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Black screen (#040805), JetBrains Mono everywhere. Commands are bright green (#3dff7f) with a \"$\" prompt; output is dim green (#1f8f47); warnings amber (#ffcf4d); failures red (#ff5f56); white only for the takeaway.\n- Text glows softly (a green shadow blur). Scanlines every 3 px and a dark vignette sit on top.\n- Commands type at about 28 characters a second; output lines print instantly one after another; a blinking block cursor sits after the last character.\n- Progress and comparisons are ASCII: [#####.....] bars, box-drawing tables. No icons or images.\n- Teach safely: show how to defend (stronger passwords, updates, two-factor), never step-by-step instructions for attacking real systems.\n- Pace: a command every 2 to 3 seconds; the result line holds at least 1 second.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep command text at 24 px or more, the headline at 36 px or more and the takeaway at 34 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why 'password123' fails in 0.02 seconds\") unless my content asks for it.\n\nSOUND\n- Bed: a low electrical hum and a quiet dark pad.\n- Map events to the kit: typed commands get \"keys\"; each printed line gets a soft short beep (SND.beep); a bad result gets a two-tone alarm; a good result gets a rising confirm beep; the takeaway gets a low swell.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep keys soft: true and the hum very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Terminal\nFamily: Retro\nLook: A glowing green-on-black terminal: typed commands with a block cursor, dim grey output, red and amber warnings, an ASCII progress bar and ASCII box diagrams, with scanlines, a soft phosphor glow and a dark vignette.\nHow it explains: The story is a terminal session: a command types itself, output scrolls out line by line, a progress bar or counter runs, and the result lands in red or amber. A second command shows the contrast, and an ASCII comparison box sums it up.\n"
+  },
+  {
+    "id": "swiss-grid",
+    "num": "34",
+    "name": "Swiss Grid",
+    "family": "Kinetic Type",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.",
+    "how": "Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.",
+    "fonts": "Archivo Black, Inter (500, 700 and 900)",
+    "demo": "73% of your brain is water",
+    "replace": "TL, the fact (NUM, its unit, the statement lines, the second point), the block layout in LAYOUTS, the source line, the takeaway and scoreSound()",
+    "keep": "the six-column grid, the wipe-in blocks, the digit-by-digit counter, the line-by-line mask reveals, the grid re-arrangement between LAYOUTS, the strict left alignment and the red, black and blue palette",
+    "sizes": "keep the big number at 180 px or more, statements at 46 px or more and labels at 18 px or more",
+    "voLine": "Blocks wipe in on the beat of the first sentence, the number locks on its last spoken syllable, each statement line snaps on its first word, and the re-arrangement lands on the turn (\"but\", \"and\").",
+    "full": "- Full mix (no voiceover): a minimal pulse (a soft sine bass and clicks), a crisp click per block, a low hit when the number locks.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark clicks soft: true.",
+    "sheet": [
+      "Off-white ground (#f5f5f2) with a faint six-column grid (60 px columns plus margins). Everything snaps to the grid; nothing is centred except by the grid.",
+      "Colour is structural: red (#e1251b) and blue (#1f4fd8) blocks, black (#111) type and bars, nothing else.",
+      "One huge number in Archivo Black, counting up digit by digit; statements in Inter 900, flush left, tight leading; labels in Inter 700 small caps with tracking.",
+      "Motion is precise: rectangular wipes, mask reveals that rise exactly one line, and layout changes where every block slides to a new grid position with the same easing.",
+      "Always show the source in small type at the bottom.",
+      "Pace: the composition builds in about 2 seconds, the number counts for about 1.5 seconds, one re-arrangement, then the takeaway."
+    ],
+    "sound": [
+      "Bed: a minimal pulse: a soft sine bass note on each beat and a quiet click track.",
+      "Map events to the kit: each block wipe gets a crisp \"click\"; number digits get a \"tick\" each; the lock gets a low sine hit; the re-arrangement gets a short \"whoosh\"; the takeaway gets a single clean chord."
+    ],
+    "sourceFile": "sources/swiss-grid.html",
+    "promptFile": "prompts/swiss-grid.md",
+    "sourceBytes": 57266,
+    "prompt": "I want an animated video in the \"Swiss Grid\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the fact (NUM, its unit, the statement lines, the second point), the block layout in LAYOUTS, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the six-column grid, the wipe-in blocks, the digit-by-digit counter, the line-by-line mask reveals, the grid re-arrangement between LAYOUTS, the strict left alignment and the red, black and blue palette).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500, 700 and 900).\n\nTHE STYLE\n- Off-white ground (#f5f5f2) with a faint six-column grid (60 px columns plus margins). Everything snaps to the grid; nothing is centred except by the grid.\n- Colour is structural: red (#e1251b) and blue (#1f4fd8) blocks, black (#111) type and bars, nothing else.\n- One huge number in Archivo Black, counting up digit by digit; statements in Inter 900, flush left, tight leading; labels in Inter 700 small caps with tracking.\n- Motion is precise: rectangular wipes, mask reveals that rise exactly one line, and layout changes where every block slides to a new grid position with the same easing.\n- Always show the source in small type at the bottom.\n- Pace: the composition builds in about 2 seconds, the number counts for about 1.5 seconds, one re-arrangement, then the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the big number at 180 px or more, statements at 46 px or more and labels at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"73% of your brain is water\") unless my content asks for it.\n\nSOUND\n- Bed: a minimal pulse: a soft sine bass note on each beat and a quiet click track.\n- Map events to the kit: each block wipe gets a crisp \"click\"; number digits get a \"tick\" each; the lock gets a low sine hit; the re-arrangement gets a short \"whoosh\"; the takeaway gets a single clean chord.\n- Full mix (no voiceover): a minimal pulse (a soft sine bass and clicks), a crisp click per block, a low hit when the number locks.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Swiss Grid\nFamily: Kinetic Type\nLook: International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.\nHow it explains: Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.\n",
+    "promptVo": "I want an animated video in the \"Swiss Grid\" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Blocks wipe in on the beat of the first sentence, the number locks on its last spoken syllable, each statement line snaps on its first word, and the re-arrangement lands on the turn (\"but\", \"and\").\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the fact (NUM, its unit, the statement lines, the second point), the block layout in LAYOUTS, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the six-column grid, the wipe-in blocks, the digit-by-digit counter, the line-by-line mask reveals, the grid re-arrangement between LAYOUTS, the strict left alignment and the red, black and blue palette).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500, 700 and 900).\n\nTHE STYLE\n- Off-white ground (#f5f5f2) with a faint six-column grid (60 px columns plus margins). Everything snaps to the grid; nothing is centred except by the grid.\n- Colour is structural: red (#e1251b) and blue (#1f4fd8) blocks, black (#111) type and bars, nothing else.\n- One huge number in Archivo Black, counting up digit by digit; statements in Inter 900, flush left, tight leading; labels in Inter 700 small caps with tracking.\n- Motion is precise: rectangular wipes, mask reveals that rise exactly one line, and layout changes where every block slides to a new grid position with the same easing.\n- Always show the source in small type at the bottom.\n- Pace: the composition builds in about 2 seconds, the number counts for about 1.5 seconds, one re-arrangement, then the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the big number at 180 px or more, statements at 46 px or more and labels at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"73% of your brain is water\") unless my content asks for it.\n\nSOUND\n- Bed: a minimal pulse: a soft sine bass note on each beat and a quiet click track.\n- Map events to the kit: each block wipe gets a crisp \"click\"; number digits get a \"tick\" each; the lock gets a low sine hit; the re-arrangement gets a short \"whoosh\"; the takeaway gets a single clean chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark clicks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Swiss Grid\nFamily: Kinetic Type\nLook: International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.\nHow it explains: Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.\n"
+  },
+  {
+    "id": "math-canvas",
+    "num": "35",
+    "name": "Math Canvas",
+    "family": "Data",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.",
+    "how": "The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.",
+    "fonts": "Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700)",
+    "demo": "Compound interest: slow, then suddenly fast",
+    "replace": "TL, the equation pieces (EQ), the function f(x) and the comparison g(x), the axis ranges and ticks, the labels, the gap note, the takeaway and scoreSound()",
+    "keep": "the slate grid, the term-by-term equation write-on, the yellow key box with the Caveat note, the axes with one scale, the self-plotting curve with area fill, glowing tip and live value, the dashed comparison, the gap bracket, and the mono axis labels",
+    "sizes": "keep the equation at 60 px or more, the takeaway at 46 px or more, live values at 30 px or more and axis labels at 18 px or more",
+    "voLine": "Each term writes as it is said, the box lands on the term that matters, the curve plots while the change over time is described, and the gap bracket lands on the comparison word.",
+    "full": "- Full mix (no voiceover): a calm pad, a soft pluck for every unit the curve passes (rising in pitch with the value), and a low hit when the gap bracket lands.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks soft: true.",
+    "sheet": [
+      "Background: dark slate (#12141b) with a faint 20 px grid. Maths is written in Instrument Serif italic (white), never in a sans.",
+      "Plot real functions with one scale per axis, zero-based unless the scene says otherwise, and compute every point from the function. Tick labels must name values the axes actually reach.",
+      "Colour has meaning: teal (#4fd1c5) for the main curve and its glowing tip, grey dashed (#6b7080) for the comparison, yellow (#ffd166) only for the key term box, the handwritten note and the gap bracket.",
+      "The curve plots left to right over a few seconds with a soft area fill under it and the live value riding at its tip.",
+      "Type: Space Grotesk 700 for the takeaway, JetBrains Mono for axis labels and captions, Caveat 700 for handwritten notes.",
+      "Pace: equation about 2 seconds, axes 0.5 seconds, the plot 4 to 5 seconds, then the gap and the takeaway."
+    ],
+    "sound": [
+      "Bed: a calm, slow pad.",
+      "Map events to the kit: each equation term gets a soft chalky tick; the key box gets \"marker\"; the plot gets a soft pluck at each tick on the x axis whose pitch climbs with the value; the gap bracket gets a low sine hit; the takeaway gets an open chord."
+    ],
+    "sourceFile": "sources/math-canvas.html",
+    "promptFile": "prompts/math-canvas.md",
+    "sourceBytes": 59442,
+    "prompt": "I want an animated video in the \"Math Canvas\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the equation pieces (EQ), the function f(x) and the comparison g(x), the axis ranges and ticks, the labels, the gap note, the takeaway and scoreSound(). Keep and reuse the style's helpers (the slate grid, the term-by-term equation write-on, the yellow key box with the Caveat note, the axes with one scale, the self-plotting curve with area fill, glowing tip and live value, the dashed comparison, the gap bracket, and the mono axis labels).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700).\n\nTHE STYLE\n- Background: dark slate (#12141b) with a faint 20 px grid. Maths is written in Instrument Serif italic (white), never in a sans.\n- Plot real functions with one scale per axis, zero-based unless the scene says otherwise, and compute every point from the function. Tick labels must name values the axes actually reach.\n- Colour has meaning: teal (#4fd1c5) for the main curve and its glowing tip, grey dashed (#6b7080) for the comparison, yellow (#ffd166) only for the key term box, the handwritten note and the gap bracket.\n- The curve plots left to right over a few seconds with a soft area fill under it and the live value riding at its tip.\n- Type: Space Grotesk 700 for the takeaway, JetBrains Mono for axis labels and captions, Caveat 700 for handwritten notes.\n- Pace: equation about 2 seconds, axes 0.5 seconds, the plot 4 to 5 seconds, then the gap and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the equation at 60 px or more, the takeaway at 46 px or more, live values at 30 px or more and axis labels at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Compound interest: slow, then suddenly fast\") unless my content asks for it.\n\nSOUND\n- Bed: a calm, slow pad.\n- Map events to the kit: each equation term gets a soft chalky tick; the key box gets \"marker\"; the plot gets a soft pluck at each tick on the x axis whose pitch climbs with the value; the gap bracket gets a low sine hit; the takeaway gets an open chord.\n- Full mix (no voiceover): a calm pad, a soft pluck for every unit the curve passes (rising in pitch with the value), and a low hit when the gap bracket lands.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Math Canvas\nFamily: Data\nLook: A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.\nHow it explains: The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.\n",
+    "promptVo": "I want an animated video in the \"Math Canvas\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each term writes as it is said, the box lands on the term that matters, the curve plots while the change over time is described, and the gap bracket lands on the comparison word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the equation pieces (EQ), the function f(x) and the comparison g(x), the axis ranges and ticks, the labels, the gap note, the takeaway and scoreSound(). Keep and reuse the style's helpers (the slate grid, the term-by-term equation write-on, the yellow key box with the Caveat note, the axes with one scale, the self-plotting curve with area fill, glowing tip and live value, the dashed comparison, the gap bracket, and the mono axis labels).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700).\n\nTHE STYLE\n- Background: dark slate (#12141b) with a faint 20 px grid. Maths is written in Instrument Serif italic (white), never in a sans.\n- Plot real functions with one scale per axis, zero-based unless the scene says otherwise, and compute every point from the function. Tick labels must name values the axes actually reach.\n- Colour has meaning: teal (#4fd1c5) for the main curve and its glowing tip, grey dashed (#6b7080) for the comparison, yellow (#ffd166) only for the key term box, the handwritten note and the gap bracket.\n- The curve plots left to right over a few seconds with a soft area fill under it and the live value riding at its tip.\n- Type: Space Grotesk 700 for the takeaway, JetBrains Mono for axis labels and captions, Caveat 700 for handwritten notes.\n- Pace: equation about 2 seconds, axes 0.5 seconds, the plot 4 to 5 seconds, then the gap and the takeaway.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the equation at 60 px or more, the takeaway at 46 px or more, live values at 30 px or more and axis labels at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Compound interest: slow, then suddenly fast\") unless my content asks for it.\n\nSOUND\n- Bed: a calm, slow pad.\n- Map events to the kit: each equation term gets a soft chalky tick; the key box gets \"marker\"; the plot gets a soft pluck at each tick on the x axis whose pitch climbs with the value; the gap bracket gets a low sine hit; the takeaway gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Math Canvas\nFamily: Data\nLook: A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.\nHow it explains: The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.\n"
+  },
+  {
+    "id": "tactics-board",
+    "num": "36",
+    "name": "Tactics Board",
+    "family": "Data",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.",
+    "how": "Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.",
+    "fonts": "Anton, Inter (700 to 900)",
+    "demo": "How a counter-attack works",
+    "replace": "TL, the sport (pitch markings in pitch()), PLAYERS (keyframed positions), PASSES (from, to, times), RUNS (arrows), the clock range, the finish word, the takeaway and scoreSound()",
+    "keep": "the striped pitch and line markings, token() players with numbers and shadows, keyframed movement (track), drawing run arrows, the ball travelling pass to pass with numbered markers, the clock chip, the dark title band and the finish flash",
+    "sizes": "keep the headline at 60 px or more, player numbers at 18 px or more and the clock at 26 px or more",
+    "voLine": "Each run arrow draws as the run is described, each pass starts on the word that names it, and the finish lands on the stressed word.",
+    "full": "- Full mix (no voiceover): keep a low crowd bed that swells as the attack builds, a whistle at the start, a kick for every pass and a roar on the finish.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crowd very low and mark kicks soft: true.",
+    "sheet": [
+      "The pitch is drawn to the sport's real proportions (stripes in two greens, white lines at 2 px), seen straight from above and filling the frame below the title band.",
+      "Players are round tokens (red and blue, white outline, white number, soft shadow). Their positions come from keyframes (track) so movement is smooth and believable.",
+      "Runs are white dashed curves with arrowheads that draw just before the player moves; the ball is a white dot that travels along each pass, leaving a solid yellow (#ffd23f) line with a numbered marker.",
+      "A clock chip counts the real time of the move; the finish gets a white flash and one big Anton word.",
+      "Use a real, typical pattern of play; label anything specific to one real match with its real details.",
+      "Pace: the setup holds about 1.5 seconds, then one pass every 1 to 1.5 seconds."
+    ],
+    "sound": [
+      "Bed: a low crowd murmur (pink noise, band-passed) that swells as the attack builds.",
+      "Map events to the kit: a whistle (two high sine tones with vibrato) starts the move; each pass gets a ball kick (a short low thump with a noise click); run arrows get a soft \"whoosh\"; the finish gets a roar (wide noise swell) and \"boom\"."
+    ],
+    "sourceFile": "sources/tactics-board.html",
+    "promptFile": "prompts/tactics-board.md",
+    "sourceBytes": 60046,
+    "prompt": "I want an animated video in the \"Tactics Board\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the sport (pitch markings in pitch()), PLAYERS (keyframed positions), PASSES (from, to, times), RUNS (arrows), the clock range, the finish word, the takeaway and scoreSound(). Keep and reuse the style's helpers (the striped pitch and line markings, token() players with numbers and shadows, keyframed movement (track), drawing run arrows, the ball travelling pass to pass with numbered markers, the clock chip, the dark title band and the finish flash).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (700 to 900).\n\nTHE STYLE\n- The pitch is drawn to the sport's real proportions (stripes in two greens, white lines at 2 px), seen straight from above and filling the frame below the title band.\n- Players are round tokens (red and blue, white outline, white number, soft shadow). Their positions come from keyframes (track) so movement is smooth and believable.\n- Runs are white dashed curves with arrowheads that draw just before the player moves; the ball is a white dot that travels along each pass, leaving a solid yellow (#ffd23f) line with a numbered marker.\n- A clock chip counts the real time of the move; the finish gets a white flash and one big Anton word.\n- Use a real, typical pattern of play; label anything specific to one real match with its real details.\n- Pace: the setup holds about 1.5 seconds, then one pass every 1 to 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, player numbers at 18 px or more and the clock at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a counter-attack works\") unless my content asks for it.\n\nSOUND\n- Bed: a low crowd murmur (pink noise, band-passed) that swells as the attack builds.\n- Map events to the kit: a whistle (two high sine tones with vibrato) starts the move; each pass gets a ball kick (a short low thump with a noise click); run arrows get a soft \"whoosh\"; the finish gets a roar (wide noise swell) and \"boom\".\n- Full mix (no voiceover): keep a low crowd bed that swells as the attack builds, a whistle at the start, a kick for every pass and a roar on the finish.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Tactics Board\nFamily: Data\nLook: A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.\nHow it explains: Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.\n",
+    "promptVo": "I want an animated video in the \"Tactics Board\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each run arrow draws as the run is described, each pass starts on the word that names it, and the finish lands on the stressed word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the sport (pitch markings in pitch()), PLAYERS (keyframed positions), PASSES (from, to, times), RUNS (arrows), the clock range, the finish word, the takeaway and scoreSound(). Keep and reuse the style's helpers (the striped pitch and line markings, token() players with numbers and shadows, keyframed movement (track), drawing run arrows, the ball travelling pass to pass with numbered markers, the clock chip, the dark title band and the finish flash).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (700 to 900).\n\nTHE STYLE\n- The pitch is drawn to the sport's real proportions (stripes in two greens, white lines at 2 px), seen straight from above and filling the frame below the title band.\n- Players are round tokens (red and blue, white outline, white number, soft shadow). Their positions come from keyframes (track) so movement is smooth and believable.\n- Runs are white dashed curves with arrowheads that draw just before the player moves; the ball is a white dot that travels along each pass, leaving a solid yellow (#ffd23f) line with a numbered marker.\n- A clock chip counts the real time of the move; the finish gets a white flash and one big Anton word.\n- Use a real, typical pattern of play; label anything specific to one real match with its real details.\n- Pace: the setup holds about 1.5 seconds, then one pass every 1 to 1.5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, player numbers at 18 px or more and the clock at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"How a counter-attack works\") unless my content asks for it.\n\nSOUND\n- Bed: a low crowd murmur (pink noise, band-passed) that swells as the attack builds.\n- Map events to the kit: a whistle (two high sine tones with vibrato) starts the move; each pass gets a ball kick (a short low thump with a noise click); run arrows get a soft \"whoosh\"; the finish gets a roar (wide noise swell) and \"boom\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crowd very low and mark kicks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Tactics Board\nFamily: Data\nLook: A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.\nHow it explains: Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.\n"
+  },
+  {
+    "id": "market-tape",
+    "num": "37",
+    "name": "Market Tape",
+    "family": "Data",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A trading-screen explainer on near-black: a scrolling ticker strip of invented symbols, candlesticks that print one by one with a price tag riding the last close, green and red numbers, and a red flash when it breaks.",
+    "how": "Candles print one by one in an uptrend while the price tag climbs, then the trend breaks: red candles drop, the screen flashes and shakes, and a percentage chip counts the fall. A simple loop diagram explains why, and the takeaway closes with an education-only note.",
+    "fonts": "Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700)",
+    "demo": "Why prices crash (example data, not advice)",
+    "replace": "TL, PRICES (or your own example series), the ticker symbols (invented), the event label, the LOOP diagram text, the takeaway and scoreSound()",
+    "keep": "the dark trading grid, the scrolling ticker strip, candles that print one by one with wicks, the price tag riding the last close, the red flash and shake on the break, the counting percentage chip, the four-step loop diagram, and the EXAMPLE DATA · NOT ADVICE line",
+    "sizes": "keep the headline at 60 px or more, prices and percentages at 26 px or more and the loop labels at 26 px or more",
+    "voLine": "Candles print while the rise is described, the break lands on the stressed word (\"crash\", \"dropped\"), the percentage locks on the spoken number, and each loop step lights up as it is named.",
+    "full": "- Full mix (no voiceover): a tense synth pulse, a soft tick for every candle, an alarm and a bass drop on the break, and a heartbeat-like pulse under the loop.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true and keep the alarm short.",
+    "sheet": [
+      "Never give financial advice: keep \"EXAMPLE DATA · EDUCATION, NOT ADVICE\" on screen, use invented tickers, and label any real figures with their source and date.",
+      "Background: near-black (#0b0f14) with faint horizontal grid lines; a ticker strip at the top scrolling invented symbols with green (#2ee59d) ups and red (#ff5a5f) downs.",
+      "Candles are drawn to one price scale: body from open to close, thin wick from low to high, green up and red down, printing one by one left to right. A pill tag rides the latest close.",
+      "The break: a short red flash over the frame, a small shake, and a red percentage chip that counts down.",
+      "Explain with a simple four-node loop (rounded boxes, curved arrows) whose steps light up in turn.",
+      "Type: Archivo Black headline (white, then red for the key word), Inter for explanation, JetBrains Mono for prices and the ticker."
+    ],
+    "sound": [
+      "Bed: a tense, low synth pulse (padBed with kick) that drops out at the break.",
+      "Map events to the kit: each candle gets a soft \"tick\" (higher for green, lower for red); the break gets a two-tone alarm, \"boom\" and a falling tone; the counter \"tick\"s as it changes; each loop step gets a soft pluck; the takeaway gets a low swell."
+    ],
+    "sourceFile": "sources/market-tape.html",
+    "promptFile": "prompts/market-tape.md",
+    "sourceBytes": 59501,
+    "prompt": "I want an animated video in the \"Market Tape\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, PRICES (or your own example series), the ticker symbols (invented), the event label, the LOOP diagram text, the takeaway and scoreSound(). Keep and reuse the style's helpers (the dark trading grid, the scrolling ticker strip, candles that print one by one with wicks, the price tag riding the last close, the red flash and shake on the break, the counting percentage chip, the four-step loop diagram, and the EXAMPLE DATA · NOT ADVICE line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Never give financial advice: keep \"EXAMPLE DATA · EDUCATION, NOT ADVICE\" on screen, use invented tickers, and label any real figures with their source and date.\n- Background: near-black (#0b0f14) with faint horizontal grid lines; a ticker strip at the top scrolling invented symbols with green (#2ee59d) ups and red (#ff5a5f) downs.\n- Candles are drawn to one price scale: body from open to close, thin wick from low to high, green up and red down, printing one by one left to right. A pill tag rides the latest close.\n- The break: a short red flash over the frame, a small shake, and a red percentage chip that counts down.\n- Explain with a simple four-node loop (rounded boxes, curved arrows) whose steps light up in turn.\n- Type: Archivo Black headline (white, then red for the key word), Inter for explanation, JetBrains Mono for prices and the ticker.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, prices and percentages at 26 px or more and the loop labels at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why prices crash (example data, not advice)\") unless my content asks for it.\n\nSOUND\n- Bed: a tense, low synth pulse (padBed with kick) that drops out at the break.\n- Map events to the kit: each candle gets a soft \"tick\" (higher for green, lower for red); the break gets a two-tone alarm, \"boom\" and a falling tone; the counter \"tick\"s as it changes; each loop step gets a soft pluck; the takeaway gets a low swell.\n- Full mix (no voiceover): a tense synth pulse, a soft tick for every candle, an alarm and a bass drop on the break, and a heartbeat-like pulse under the loop.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Market Tape\nFamily: Data\nLook: A trading-screen explainer on near-black: a scrolling ticker strip of invented symbols, candlesticks that print one by one with a price tag riding the last close, green and red numbers, and a red flash when it breaks.\nHow it explains: Candles print one by one in an uptrend while the price tag climbs, then the trend breaks: red candles drop, the screen flashes and shakes, and a percentage chip counts the fall. A simple loop diagram explains why, and the takeaway closes with an education-only note.\n",
+    "promptVo": "I want an animated video in the \"Market Tape\" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Candles print while the rise is described, the break lands on the stressed word (\"crash\", \"dropped\"), the percentage locks on the spoken number, and each loop step lights up as it is named.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, PRICES (or your own example series), the ticker symbols (invented), the event label, the LOOP diagram text, the takeaway and scoreSound(). Keep and reuse the style's helpers (the dark trading grid, the scrolling ticker strip, candles that print one by one with wicks, the price tag riding the last close, the red flash and shake on the break, the counting percentage chip, the four-step loop diagram, and the EXAMPLE DATA · NOT ADVICE line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700).\n\nTHE STYLE\n- Never give financial advice: keep \"EXAMPLE DATA · EDUCATION, NOT ADVICE\" on screen, use invented tickers, and label any real figures with their source and date.\n- Background: near-black (#0b0f14) with faint horizontal grid lines; a ticker strip at the top scrolling invented symbols with green (#2ee59d) ups and red (#ff5a5f) downs.\n- Candles are drawn to one price scale: body from open to close, thin wick from low to high, green up and red down, printing one by one left to right. A pill tag rides the latest close.\n- The break: a short red flash over the frame, a small shake, and a red percentage chip that counts down.\n- Explain with a simple four-node loop (rounded boxes, curved arrows) whose steps light up in turn.\n- Type: Archivo Black headline (white, then red for the key word), Inter for explanation, JetBrains Mono for prices and the ticker.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, prices and percentages at 26 px or more and the loop labels at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Why prices crash (example data, not advice)\") unless my content asks for it.\n\nSOUND\n- Bed: a tense, low synth pulse (padBed with kick) that drops out at the break.\n- Map events to the kit: each candle gets a soft \"tick\" (higher for green, lower for red); the break gets a two-tone alarm, \"boom\" and a falling tone; the counter \"tick\"s as it changes; each loop step gets a soft pluck; the takeaway gets a low swell.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true and keep the alarm short.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Market Tape\nFamily: Data\nLook: A trading-screen explainer on near-black: a scrolling ticker strip of invented symbols, candlesticks that print one by one with a price tag riding the last close, green and red numbers, and a red flash when it breaks.\nHow it explains: Candles print one by one in an uptrend while the price tag climbs, then the trend breaks: red candles drop, the screen flashes and shakes, and a percentage chip counts the fall. A simple loop diagram explains why, and the takeaway closes with an education-only note.\n"
+  },
+  {
+    "id": "quiz-countdown",
+    "num": "38",
+    "name": "Quiz Countdown",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.",
+    "how": "The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.",
+    "fonts": "Archivo Black, Inter (700 to 900), JetBrains Mono (700)",
+    "demo": "Which planet has the most moons?",
+    "replace": "TL, Q (the question, four answers, the correct index, the fact line), the question number, the next-question tease and scoreSound()",
+    "keep": "the striped background, the timer ring and countdown number, the question card, the answer pills with letter badges, the staggered slide-in, the reveal (green pill, check, dimmed wrong answers), the confetti burst and the comment prompt",
+    "sizes": "keep the question at 46 px or more, answers at 38 px or more and the countdown at 80 px or more",
+    "voLine": "The question card lands on the first word of the question, each answer slides in as it is read, the countdown starts after the last answer, and the reveal lands on the answer word.",
+    "full": "- Full mix (no voiceover): an upbeat game-show pad, a tick per second that gets louder near zero, a buzzer at zero and a fanfare on the reveal.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep ticks soft: true but audible.",
+    "sheet": [
+      "Background: saturated orange (#ff7a1a) with wide diagonal lighter stripes that drift slowly.",
+      "Question card: white, 24 px corners, a soft orange shadow, a mono \"QUESTION n / 10\" label in orange above the question in Inter 800.",
+      "Answers: four white pills with an orange letter badge (A to D), sliding in from the right one after another.",
+      "Timer: a thick white ring that drains clockwise around a big Archivo Black number counting down; the last 3 seconds pulse.",
+      "Reveal: the right pill turns green (#2fb36b) with a check, the others drop to 40% opacity, confetti bursts from the right pill, and a one-line fact appears below.",
+      "Use real, current facts and say \"as of\" with the year when numbers change."
+    ],
+    "sound": [
+      "Bed: an upbeat game-show pad with hats and a light kick.",
+      "Map events to the kit: the card gets \"pop\" and SND.paper; answers get \"whoosh\" plus a tick; each countdown second gets a \"tick\" (louder at 3, 2, 1); zero gets a buzzer (a low square tone); the reveal gets a bright arpeggio and \"sparkle\"; the fact gets a soft \"pop\"."
+    ],
+    "sourceFile": "sources/quiz-countdown.html",
+    "promptFile": "prompts/quiz-countdown.md",
+    "sourceBytes": 58682,
+    "prompt": "I want an animated video in the \"Quiz Countdown\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, Q (the question, four answers, the correct index, the fact line), the question number, the next-question tease and scoreSound(). Keep and reuse the style's helpers (the striped background, the timer ring and countdown number, the question card, the answer pills with letter badges, the staggered slide-in, the reveal (green pill, check, dimmed wrong answers), the confetti burst and the comment prompt).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Background: saturated orange (#ff7a1a) with wide diagonal lighter stripes that drift slowly.\n- Question card: white, 24 px corners, a soft orange shadow, a mono \"QUESTION n / 10\" label in orange above the question in Inter 800.\n- Answers: four white pills with an orange letter badge (A to D), sliding in from the right one after another.\n- Timer: a thick white ring that drains clockwise around a big Archivo Black number counting down; the last 3 seconds pulse.\n- Reveal: the right pill turns green (#2fb36b) with a check, the others drop to 40% opacity, confetti bursts from the right pill, and a one-line fact appears below.\n- Use real, current facts and say \"as of\" with the year when numbers change.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the question at 46 px or more, answers at 38 px or more and the countdown at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Which planet has the most moons?\") unless my content asks for it.\n\nSOUND\n- Bed: an upbeat game-show pad with hats and a light kick.\n- Map events to the kit: the card gets \"pop\" and SND.paper; answers get \"whoosh\" plus a tick; each countdown second gets a \"tick\" (louder at 3, 2, 1); zero gets a buzzer (a low square tone); the reveal gets a bright arpeggio and \"sparkle\"; the fact gets a soft \"pop\".\n- Full mix (no voiceover): an upbeat game-show pad, a tick per second that gets louder near zero, a buzzer at zero and a fanfare on the reveal.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Quiz Countdown\nFamily: Shorts Format\nLook: A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.\nHow it explains: The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.\n",
+    "promptVo": "I want an animated video in the \"Quiz Countdown\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The question card lands on the first word of the question, each answer slides in as it is read, the countdown starts after the last answer, and the reveal lands on the answer word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, Q (the question, four answers, the correct index, the fact line), the question number, the next-question tease and scoreSound(). Keep and reuse the style's helpers (the striped background, the timer ring and countdown number, the question card, the answer pills with letter badges, the staggered slide-in, the reveal (green pill, check, dimmed wrong answers), the confetti burst and the comment prompt).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Background: saturated orange (#ff7a1a) with wide diagonal lighter stripes that drift slowly.\n- Question card: white, 24 px corners, a soft orange shadow, a mono \"QUESTION n / 10\" label in orange above the question in Inter 800.\n- Answers: four white pills with an orange letter badge (A to D), sliding in from the right one after another.\n- Timer: a thick white ring that drains clockwise around a big Archivo Black number counting down; the last 3 seconds pulse.\n- Reveal: the right pill turns green (#2fb36b) with a check, the others drop to 40% opacity, confetti bursts from the right pill, and a one-line fact appears below.\n- Use real, current facts and say \"as of\" with the year when numbers change.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the question at 46 px or more, answers at 38 px or more and the countdown at 80 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Which planet has the most moons?\") unless my content asks for it.\n\nSOUND\n- Bed: an upbeat game-show pad with hats and a light kick.\n- Map events to the kit: the card gets \"pop\" and SND.paper; answers get \"whoosh\" plus a tick; each countdown second gets a \"tick\" (louder at 3, 2, 1); zero gets a buzzer (a low square tone); the reveal gets a bright arpeggio and \"sparkle\"; the fact gets a soft \"pop\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep ticks soft: true but audible.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Quiz Countdown\nFamily: Shorts Format\nLook: A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.\nHow it explains: The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.\n"
+  },
+  {
+    "id": "top-5-countdown",
+    "num": "39",
+    "name": "Top 5 Countdown",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A countdown Short on deep navy: a huge outlined rank number slams in beside an illustrated card drawn in code, with the name in tall Anton caps, a mono detail line, and a ladder of rank dots on the side that tracks where you are.",
+    "how": "Each rank gets its own beat: a whip cut, the big number slams with a punch zoom, the card slides up with its illustration and the name, the detail line counts up, and the ladder dot moves. Number one gets a bigger hit and a glow.",
+    "fonts": "Anton, Inter (800), JetBrains Mono (700)",
+    "demo": "The 3 highest mountains on Earth",
+    "replace": "TL, RANKS (number, name, detail, value and the illustration painter), the headline, the takeaway and scoreSound()",
+    "keep": "the navy background with a warm glow, the outlined rank number with its echo fill, the rank ladder, the card with a code-drawn illustration, the value counter, the whip cuts between ranks and the bigger hit for number one",
+    "sizes": "keep the rank number at 200 px or more, the name at 60 px or more and the detail line at 24 px or more",
+    "voLine": "Each rank number slams on its spoken number, the name lands on the name, and the value locks on the last syllable of the figure.",
+    "full": "- Full mix (no voiceover): a driving pulse, a riser into each rank, \"slam\" on each number and a \"boom\" for number one.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true and keep the boom for number one only.",
+    "sheet": [
+      "Background: deep navy (#0e1630) with a soft warm glow behind the number; orange accent (#ff8a3d) for the ladder and labels.",
+      "The rank number is huge Anton with a 3 px white outline and a faint orange echo offset behind it; it slams in with a punch zoom.",
+      "The card is a rounded picture drawn in code for the item (here: mountain ridges with snow caps on a sky gradient), sliding up under the number.",
+      "Names in tall Anton caps; one mono detail line with the real figure and place; the figure counts up.",
+      "A vertical ladder of dots (5 to 1) on the right shows the current rank in orange.",
+      "Use real, sourced rankings; one rank every 3 to 4 seconds, number one held longest."
+    ],
+    "sound": [
+      "Bed: a driving, low pulse (padBed with kick) with hats.",
+      "Map events to the kit: each new rank gets a \"riser\" and a \"whoosh\" into a \"slam\"; the card gets \"pop\"; the value counter \"tick\"s; the ladder move gets a soft tick; number one gets \"boom\" and \"shimmer\"."
+    ],
+    "sourceFile": "sources/top-5-countdown.html",
+    "promptFile": "prompts/top-5-countdown.md",
+    "sourceBytes": 57667,
+    "prompt": "I want an animated video in the \"Top 5 Countdown\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, RANKS (number, name, detail, value and the illustration painter), the headline, the takeaway and scoreSound(). Keep and reuse the style's helpers (the navy background with a warm glow, the outlined rank number with its echo fill, the rank ladder, the card with a code-drawn illustration, the value counter, the whip cuts between ranks and the bigger hit for number one).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800), JetBrains Mono (700).\n\nTHE STYLE\n- Background: deep navy (#0e1630) with a soft warm glow behind the number; orange accent (#ff8a3d) for the ladder and labels.\n- The rank number is huge Anton with a 3 px white outline and a faint orange echo offset behind it; it slams in with a punch zoom.\n- The card is a rounded picture drawn in code for the item (here: mountain ridges with snow caps on a sky gradient), sliding up under the number.\n- Names in tall Anton caps; one mono detail line with the real figure and place; the figure counts up.\n- A vertical ladder of dots (5 to 1) on the right shows the current rank in orange.\n- Use real, sourced rankings; one rank every 3 to 4 seconds, number one held longest.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the rank number at 200 px or more, the name at 60 px or more and the detail line at 24 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The 3 highest mountains on Earth\") unless my content asks for it.\n\nSOUND\n- Bed: a driving, low pulse (padBed with kick) with hats.\n- Map events to the kit: each new rank gets a \"riser\" and a \"whoosh\" into a \"slam\"; the card gets \"pop\"; the value counter \"tick\"s; the ladder move gets a soft tick; number one gets \"boom\" and \"shimmer\".\n- Full mix (no voiceover): a driving pulse, a riser into each rank, \"slam\" on each number and a \"boom\" for number one.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Top 5 Countdown\nFamily: Shorts Format\nLook: A countdown Short on deep navy: a huge outlined rank number slams in beside an illustrated card drawn in code, with the name in tall Anton caps, a mono detail line, and a ladder of rank dots on the side that tracks where you are.\nHow it explains: Each rank gets its own beat: a whip cut, the big number slams with a punch zoom, the card slides up with its illustration and the name, the detail line counts up, and the ladder dot moves. Number one gets a bigger hit and a glow.\n",
+    "promptVo": "I want an animated video in the \"Top 5 Countdown\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each rank number slams on its spoken number, the name lands on the name, and the value locks on the last syllable of the figure.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, RANKS (number, name, detail, value and the illustration painter), the headline, the takeaway and scoreSound(). Keep and reuse the style's helpers (the navy background with a warm glow, the outlined rank number with its echo fill, the rank ladder, the card with a code-drawn illustration, the value counter, the whip cuts between ranks and the bigger hit for number one).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800), JetBrains Mono (700).\n\nTHE STYLE\n- Background: deep navy (#0e1630) with a soft warm glow behind the number; orange accent (#ff8a3d) for the ladder and labels.\n- The rank number is huge Anton with a 3 px white outline and a faint orange echo offset behind it; it slams in with a punch zoom.\n- The card is a rounded picture drawn in code for the item (here: mountain ridges with snow caps on a sky gradient), sliding up under the number.\n- Names in tall Anton caps; one mono detail line with the real figure and place; the figure counts up.\n- A vertical ladder of dots (5 to 1) on the right shows the current rank in orange.\n- Use real, sourced rankings; one rank every 3 to 4 seconds, number one held longest.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the rank number at 200 px or more, the name at 60 px or more and the detail line at 24 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The 3 highest mountains on Earth\") unless my content asks for it.\n\nSOUND\n- Bed: a driving, low pulse (padBed with kick) with hats.\n- Map events to the kit: each new rank gets a \"riser\" and a \"whoosh\" into a \"slam\"; the card gets \"pop\"; the value counter \"tick\"s; the ladder move gets a soft tick; number one gets \"boom\" and \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true and keep the boom for number one only.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Top 5 Countdown\nFamily: Shorts Format\nLook: A countdown Short on deep navy: a huge outlined rank number slams in beside an illustrated card drawn in code, with the name in tall Anton caps, a mono detail line, and a ladder of rank dots on the side that tracks where you are.\nHow it explains: Each rank gets its own beat: a whip cut, the big number slams with a punch zoom, the card slides up with its illustration and the name, the detail line counts up, and the ladder dot moves. Number one gets a bigger hit and a glow.\n"
+  },
+  {
+    "id": "tier-list",
+    "num": "40",
+    "name": "Tier List",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A classic tier-list board on dark charcoal: S to D rows with bright rainbow labels, rounded item tiles with simple icons drawn in code, and a stash of unranked tiles at the bottom that fly up one by one.",
+    "how": "Each item leaves the stash, hangs for a moment in the middle with its name so you can react, then arcs into its tier and snaps into place with a squash and a row flash. The last item gets a dramatic pause before it lands, and the outro asks for comments.",
+    "fonts": "Archivo Black, Inter (700 and 800)",
+    "demo": "My fruit tier list",
+    "replace": "TL, TIERS (labels and colours), ITEMS (name, icon painter, chosen tier, time), the headline, the outro text and scoreSound()",
+    "keep": "the tier rows and rainbow labels, tile() with a code-drawn icon, the stash row, the fly-in arc with a mid-air hold and name chip, the snap with squash and row flash, and the dramatic last pick",
+    "sizes": "keep tier letters at 56 px or more, item names at 34 px or more and the headline at 56 px or more",
+    "voLine": "Each tile lifts on its name, hangs while the opinion is given, and snaps into its row on the verdict word.",
+    "full": "- Full mix (no voiceover): a bouncy beat, a \"whoosh\" for each lift, a \"pop\" for each snap (pitch by tier), and a drum roll before the last pick.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pops soft: true and keep the drum roll short.",
+    "sheet": [
+      "Board: dark charcoal (#16161c) with five rows (#23232b), each with a coloured label square: S #ff6b6b, A #ffb36b, B #ffe066, C #8ce99a, D #74c0fc, letters in Archivo Black.",
+      "Items are rounded tiles (#2f2f3a) with a simple flat icon drawn in code; never use real logos or product photos.",
+      "Motion: a tile lifts from the stash, scales up in the centre with its name in a chip, holds, then arcs into the next free slot of its row with a squash and a short flash of the row.",
+      "Type: Archivo Black for the headline and tier letters; Inter 800 for names and the outro.",
+      "Pace: about 1.5 to 2 seconds per item; the last item gets a 1 second pause."
+    ],
+    "sound": [
+      "Bed: a bouncy, simple beat (padBed with kick and hats).",
+      "Map events to the kit: lifts get \"whoosh\"; the mid-air hold gets a soft rising tone; snaps get \"pop\" whose pitch is higher for better tiers; the last pick gets a drum roll (fast soft noise hits) and \"slam\"; the outro gets an open chord."
+    ],
+    "sourceFile": "sources/tier-list.html",
+    "promptFile": "prompts/tier-list.md",
+    "sourceBytes": 58954,
+    "prompt": "I want an animated video in the \"Tier List\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, TIERS (labels and colours), ITEMS (name, icon painter, chosen tier, time), the headline, the outro text and scoreSound(). Keep and reuse the style's helpers (the tier rows and rainbow labels, tile() with a code-drawn icon, the stash row, the fly-in arc with a mid-air hold and name chip, the snap with squash and row flash, and the dramatic last pick).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800).\n\nTHE STYLE\n- Board: dark charcoal (#16161c) with five rows (#23232b), each with a coloured label square: S #ff6b6b, A #ffb36b, B #ffe066, C #8ce99a, D #74c0fc, letters in Archivo Black.\n- Items are rounded tiles (#2f2f3a) with a simple flat icon drawn in code; never use real logos or product photos.\n- Motion: a tile lifts from the stash, scales up in the centre with its name in a chip, holds, then arcs into the next free slot of its row with a squash and a short flash of the row.\n- Type: Archivo Black for the headline and tier letters; Inter 800 for names and the outro.\n- Pace: about 1.5 to 2 seconds per item; the last item gets a 1 second pause.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep tier letters at 56 px or more, item names at 34 px or more and the headline at 56 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"My fruit tier list\") unless my content asks for it.\n\nSOUND\n- Bed: a bouncy, simple beat (padBed with kick and hats).\n- Map events to the kit: lifts get \"whoosh\"; the mid-air hold gets a soft rising tone; snaps get \"pop\" whose pitch is higher for better tiers; the last pick gets a drum roll (fast soft noise hits) and \"slam\"; the outro gets an open chord.\n- Full mix (no voiceover): a bouncy beat, a \"whoosh\" for each lift, a \"pop\" for each snap (pitch by tier), and a drum roll before the last pick.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Tier List\nFamily: Shorts Format\nLook: A classic tier-list board on dark charcoal: S to D rows with bright rainbow labels, rounded item tiles with simple icons drawn in code, and a stash of unranked tiles at the bottom that fly up one by one.\nHow it explains: Each item leaves the stash, hangs for a moment in the middle with its name so you can react, then arcs into its tier and snaps into place with a squash and a row flash. The last item gets a dramatic pause before it lands, and the outro asks for comments.\n",
+    "promptVo": "I want an animated video in the \"Tier List\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each tile lifts on its name, hangs while the opinion is given, and snaps into its row on the verdict word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, TIERS (labels and colours), ITEMS (name, icon painter, chosen tier, time), the headline, the outro text and scoreSound(). Keep and reuse the style's helpers (the tier rows and rainbow labels, tile() with a code-drawn icon, the stash row, the fly-in arc with a mid-air hold and name chip, the snap with squash and row flash, and the dramatic last pick).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800).\n\nTHE STYLE\n- Board: dark charcoal (#16161c) with five rows (#23232b), each with a coloured label square: S #ff6b6b, A #ffb36b, B #ffe066, C #8ce99a, D #74c0fc, letters in Archivo Black.\n- Items are rounded tiles (#2f2f3a) with a simple flat icon drawn in code; never use real logos or product photos.\n- Motion: a tile lifts from the stash, scales up in the centre with its name in a chip, holds, then arcs into the next free slot of its row with a squash and a short flash of the row.\n- Type: Archivo Black for the headline and tier letters; Inter 800 for names and the outro.\n- Pace: about 1.5 to 2 seconds per item; the last item gets a 1 second pause.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep tier letters at 56 px or more, item names at 34 px or more and the headline at 56 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"My fruit tier list\") unless my content asks for it.\n\nSOUND\n- Bed: a bouncy, simple beat (padBed with kick and hats).\n- Map events to the kit: lifts get \"whoosh\"; the mid-air hold gets a soft rising tone; snaps get \"pop\" whose pitch is higher for better tiers; the last pick gets a drum roll (fast soft noise hits) and \"slam\"; the outro gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pops soft: true and keep the drum roll short.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Tier List\nFamily: Shorts Format\nLook: A classic tier-list board on dark charcoal: S to D rows with bright rainbow labels, rounded item tiles with simple icons drawn in code, and a stash of unranked tiles at the bottom that fly up one by one.\nHow it explains: Each item leaves the stash, hangs for a moment in the middle with its name so you can react, then arcs into its tier and snaps into place with a squash and a row flash. The last item gets a dramatic pause before it lands, and the outro asks for comments.\n"
+  },
+  {
+    "id": "chat-story",
+    "num": "41",
+    "name": "Chat Story",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for \"me\" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.",
+    "how": "Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.",
+    "fonts": "Inter (500 to 800), JetBrains Mono (700)",
+    "demo": "Who ate my leftover pizza? (a fictional chat)",
+    "replace": "TL, MSGS (who, text, time), the contact name and initial, the reaction, the tag text and scoreSound()",
+    "keep": "the invented app chrome (header, avatar, input bar), bubble layout with tails and wrapping, the typing indicator before each incoming message, the auto-scroll, timestamps, read receipt, the pop-in motion and the reaction",
+    "sizes": "keep message text at 30 px or more, the contact name at 32 px or more and timestamps at 18 px or more",
+    "voLine": "Each bubble pops on the first word of its line, typing dots run during the pause before a reply, and the reaction lands on the laugh or the punchline.",
+    "full": "- Full mix (no voiceover): a soft send swoosh for \"me\", a receive ping for them, quiet typing clicks during the dots, and a comic sting on the punchline.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and typing soft: true.",
+    "sheet": [
+      "This is an invented chat app, not a copy of a real one: our own header layout, teal (#1fb5a5) outgoing bubbles, white incoming bubbles with a soft shadow, a light grey-blue background (#e9edf2).",
+      "Always keep a small \"FICTIONAL STORY\" tag on screen, and never show real names, numbers or screenshots of real conversations.",
+      "Bubbles wrap at about 70% of the width, with a small tail corner, Inter 500 text and a pop-in (scale from 0.6 with a back ease).",
+      "Before every incoming message, the typing dots animate for 0.6 to 1.2 seconds. The thread scrolls up smoothly when it fills.",
+      "Pace: one message every 0.8 to 1.5 seconds; the punchline gets the longest pause."
+    ],
+    "sound": [
+      "Bed: none, or a very quiet pad; the message sounds are the music.",
+      "Map events to the kit: outgoing messages get \"send\"; incoming get \"ping\"; typing dots get soft keyboard clicks (\"keys\", soft); the reaction gets \"pop\" and a short comic sting (two falling notes)."
+    ],
+    "sourceFile": "sources/chat-story.html",
+    "promptFile": "prompts/chat-story.md",
+    "sourceBytes": 58677,
+    "prompt": "I want an animated video in the \"Chat Story\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, MSGS (who, text, time), the contact name and initial, the reaction, the tag text and scoreSound(). Keep and reuse the style's helpers (the invented app chrome (header, avatar, input bar), bubble layout with tails and wrapping, the typing indicator before each incoming message, the auto-scroll, timestamps, read receipt, the pop-in motion and the reaction).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (500 to 800), JetBrains Mono (700).\n\nTHE STYLE\n- This is an invented chat app, not a copy of a real one: our own header layout, teal (#1fb5a5) outgoing bubbles, white incoming bubbles with a soft shadow, a light grey-blue background (#e9edf2).\n- Always keep a small \"FICTIONAL STORY\" tag on screen, and never show real names, numbers or screenshots of real conversations.\n- Bubbles wrap at about 70% of the width, with a small tail corner, Inter 500 text and a pop-in (scale from 0.6 with a back ease).\n- Before every incoming message, the typing dots animate for 0.6 to 1.2 seconds. The thread scrolls up smoothly when it fills.\n- Pace: one message every 0.8 to 1.5 seconds; the punchline gets the longest pause.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep message text at 30 px or more, the contact name at 32 px or more and timestamps at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Who ate my leftover pizza? (a fictional chat)\") unless my content asks for it.\n\nSOUND\n- Bed: none, or a very quiet pad; the message sounds are the music.\n- Map events to the kit: outgoing messages get \"send\"; incoming get \"ping\"; typing dots get soft keyboard clicks (\"keys\", soft); the reaction gets \"pop\" and a short comic sting (two falling notes).\n- Full mix (no voiceover): a soft send swoosh for \"me\", a receive ping for them, quiet typing clicks during the dots, and a comic sting on the punchline.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Chat Story\nFamily: Shorts Format\nLook: A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for \"me\" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.\nHow it explains: Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.\n",
+    "promptVo": "I want an animated video in the \"Chat Story\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each bubble pops on the first word of its line, typing dots run during the pause before a reply, and the reaction lands on the laugh or the punchline.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, MSGS (who, text, time), the contact name and initial, the reaction, the tag text and scoreSound(). Keep and reuse the style's helpers (the invented app chrome (header, avatar, input bar), bubble layout with tails and wrapping, the typing indicator before each incoming message, the auto-scroll, timestamps, read receipt, the pop-in motion and the reaction).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (500 to 800), JetBrains Mono (700).\n\nTHE STYLE\n- This is an invented chat app, not a copy of a real one: our own header layout, teal (#1fb5a5) outgoing bubbles, white incoming bubbles with a soft shadow, a light grey-blue background (#e9edf2).\n- Always keep a small \"FICTIONAL STORY\" tag on screen, and never show real names, numbers or screenshots of real conversations.\n- Bubbles wrap at about 70% of the width, with a small tail corner, Inter 500 text and a pop-in (scale from 0.6 with a back ease).\n- Before every incoming message, the typing dots animate for 0.6 to 1.2 seconds. The thread scrolls up smoothly when it fills.\n- Pace: one message every 0.8 to 1.5 seconds; the punchline gets the longest pause.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep message text at 30 px or more, the contact name at 32 px or more and timestamps at 18 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Who ate my leftover pizza? (a fictional chat)\") unless my content asks for it.\n\nSOUND\n- Bed: none, or a very quiet pad; the message sounds are the music.\n- Map events to the kit: outgoing messages get \"send\"; incoming get \"ping\"; typing dots get soft keyboard clicks (\"keys\", soft); the reaction gets \"pop\" and a short comic sting (two falling notes).\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and typing soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Chat Story\nFamily: Shorts Format\nLook: A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for \"me\" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.\nHow it explains: Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.\n"
+  },
+  {
+    "id": "versus-split",
+    "num": "42",
+    "name": "Versus Split",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.",
+    "how": "Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.",
+    "fonts": "Anton, Inter (700 to 900)",
+    "demo": "Cat vs dog",
+    "replace": "TL, the two SIDES (names, colours, the character painters), STATS (label, values, units, who wins), the verdict and scoreSound()",
+    "keep": "the diagonal split with slam-in, the VS badge, the character painters, the racing stat bars with counters, the winner crown, the running score and the verdict slam",
+    "sizes": "keep the names at 64 px or more, stat labels at 24 px or more and values at 28 px or more",
+    "voLine": "The halves slam in on the two names, each stat row starts as its label is read, the crown lands on the winner, and the verdict slams on the last word.",
+    "full": "- Full mix (no voiceover): a fight-night beat, a \"slam\" for the halves, a whoosh per row, a ding for each crown and a crowd cheer for the verdict.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark whooshes soft: true and keep the cheer short.",
+    "sheet": [
+      "Two halves split by a diagonal: coral (#ff6b4a) on the left, blue (#2b6cff) on the right. They slam in from the sides and hold.",
+      "Each side gets a simple character drawn in code (shapes only, a clear silhouette and face) and its name in big white Anton.",
+      "A black VS badge with a yellow (#ffd23f) ring sits on the seam and slams in after the halves.",
+      "Stats sit in a dark translucent panel: the label in Inter 900 caps, two bars growing outward from the centre in each side's colour, values counting at the ends, and a yellow crown over the winner.",
+      "Use real, typical values and footnote anything that only applies to one breed, model or case.",
+      "Pace: halves in about 1 second, one stat row every 1.5 to 2 seconds, verdict held about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a punchy fight-night beat (kick and snare on padBed).",
+      "Map events to the kit: halves get \"slam\" and \"whoosh\"; the badge gets \"boom\"; each row gets a soft \"whoosh\" and counter ticks; each crown gets a bright ding (SND.chime); the verdict gets \"slam\" and a crowd cheer (a wide noise swell)."
+    ],
+    "sourceFile": "sources/versus-split.html",
+    "promptFile": "prompts/versus-split.md",
+    "sourceBytes": 58882,
+    "prompt": "I want an animated video in the \"Versus Split\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the two SIDES (names, colours, the character painters), STATS (label, values, units, who wins), the verdict and scoreSound(). Keep and reuse the style's helpers (the diagonal split with slam-in, the VS badge, the character painters, the racing stat bars with counters, the winner crown, the running score and the verdict slam).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (700 to 900).\n\nTHE STYLE\n- Two halves split by a diagonal: coral (#ff6b4a) on the left, blue (#2b6cff) on the right. They slam in from the sides and hold.\n- Each side gets a simple character drawn in code (shapes only, a clear silhouette and face) and its name in big white Anton.\n- A black VS badge with a yellow (#ffd23f) ring sits on the seam and slams in after the halves.\n- Stats sit in a dark translucent panel: the label in Inter 900 caps, two bars growing outward from the centre in each side's colour, values counting at the ends, and a yellow crown over the winner.\n- Use real, typical values and footnote anything that only applies to one breed, model or case.\n- Pace: halves in about 1 second, one stat row every 1.5 to 2 seconds, verdict held about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the names at 64 px or more, stat labels at 24 px or more and values at 28 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Cat vs dog\") unless my content asks for it.\n\nSOUND\n- Bed: a punchy fight-night beat (kick and snare on padBed).\n- Map events to the kit: halves get \"slam\" and \"whoosh\"; the badge gets \"boom\"; each row gets a soft \"whoosh\" and counter ticks; each crown gets a bright ding (SND.chime); the verdict gets \"slam\" and a crowd cheer (a wide noise swell).\n- Full mix (no voiceover): a fight-night beat, a \"slam\" for the halves, a whoosh per row, a ding for each crown and a crowd cheer for the verdict.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Versus Split\nFamily: Shorts Format\nLook: A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.\nHow it explains: Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.\n",
+    "promptVo": "I want an animated video in the \"Versus Split\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The halves slam in on the two names, each stat row starts as its label is read, the crown lands on the winner, and the verdict slams on the last word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the two SIDES (names, colours, the character painters), STATS (label, values, units, who wins), the verdict and scoreSound(). Keep and reuse the style's helpers (the diagonal split with slam-in, the VS badge, the character painters, the racing stat bars with counters, the winner crown, the running score and the verdict slam).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (700 to 900).\n\nTHE STYLE\n- Two halves split by a diagonal: coral (#ff6b4a) on the left, blue (#2b6cff) on the right. They slam in from the sides and hold.\n- Each side gets a simple character drawn in code (shapes only, a clear silhouette and face) and its name in big white Anton.\n- A black VS badge with a yellow (#ffd23f) ring sits on the seam and slams in after the halves.\n- Stats sit in a dark translucent panel: the label in Inter 900 caps, two bars growing outward from the centre in each side's colour, values counting at the ends, and a yellow crown over the winner.\n- Use real, typical values and footnote anything that only applies to one breed, model or case.\n- Pace: halves in about 1 second, one stat row every 1.5 to 2 seconds, verdict held about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the names at 64 px or more, stat labels at 24 px or more and values at 28 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Cat vs dog\") unless my content asks for it.\n\nSOUND\n- Bed: a punchy fight-night beat (kick and snare on padBed).\n- Map events to the kit: halves get \"slam\" and \"whoosh\"; the badge gets \"boom\"; each row gets a soft \"whoosh\" and counter ticks; each crown gets a bright ding (SND.chime); the verdict gets \"slam\" and a crowd cheer (a wide noise swell).\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark whooshes soft: true and keep the cheer short.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Versus Split\nFamily: Shorts Format\nLook: A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.\nHow it explains: Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.\n"
+  },
+  {
+    "id": "myth-or-fact",
+    "num": "43",
+    "name": "Myth or Fact",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.",
+    "how": "Each round reads like a game: the statement card pops in, a short \"thinking\" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.",
+    "fonts": "Archivo Black, Inter (600 to 800), Anton (stamps)",
+    "demo": "Two body myths and facts",
+    "replace": "TL, ROUNDS (statement lines, verdict, proof lines), the round counter and scoreSound()",
+    "keep": "the pale background and title band, the statement card with quote mark, the guess bar, the distressed stamp (red MYTH / green FACT) with slam and shake, the proof line with icon, and the round transitions",
+    "sizes": "keep statements at 46 px or more, the stamp at 100 px or more and proof lines at 30 px or more",
+    "voLine": "The card lands on the first word of the statement, the guess bar runs during the pause, the stamp slams on \"myth\" or \"fact\", and the proof reads in as it is said.",
+    "full": "- Full mix (no voiceover): a light, curious pad, ticks for the guess bar, a heavy \"stamp\" with a buzzer (myth) or a ding (fact), and a soft pop for the proof.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true.",
+    "sheet": [
+      "Background: pale cool grey (#eef1f4); the title \"MYTH OR FACT?\" in Archivo Black with a yellow question mark at the top.",
+      "Statement cards: white, 26 px corners, soft shadow, a large faint quote mark, the claim in Inter 800, and a small round number.",
+      "Stamps: a rotated rounded rectangle with a double border and Anton letters, red (#e03131) for MYTH, green (#2f9e44) for FACT, distressed with knocked-out specks; they slam from 2× size with a shake.",
+      "Proof: one or two short lines in Inter 700 with a round icon (green check for fact, red cross for myth).",
+      "Only real, checkable claims, and proof lines that state what the evidence actually shows.",
+      "Pace: about 5 to 6 seconds per round."
+    ],
+    "sound": [
+      "Bed: a light, curious pad.",
+      "Map events to the kit: cards get \"pop\" and SND.paper; the guess bar gets steady soft \"tick\"s; MYTH gets \"stamp\" and a low buzzer; FACT gets \"stamp\" and a bright two-note ding; proof lines get a soft \"pop\"; the final score gets an open chord."
+    ],
+    "sourceFile": "sources/myth-or-fact.html",
+    "promptFile": "prompts/myth-or-fact.md",
+    "sourceBytes": 57818,
+    "prompt": "I want an animated video in the \"Myth or Fact\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, ROUNDS (statement lines, verdict, proof lines), the round counter and scoreSound(). Keep and reuse the style's helpers (the pale background and title band, the statement card with quote mark, the guess bar, the distressed stamp (red MYTH / green FACT) with slam and shake, the proof line with icon, and the round transitions).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (600 to 800), Anton (stamps).\n\nTHE STYLE\n- Background: pale cool grey (#eef1f4); the title \"MYTH OR FACT?\" in Archivo Black with a yellow question mark at the top.\n- Statement cards: white, 26 px corners, soft shadow, a large faint quote mark, the claim in Inter 800, and a small round number.\n- Stamps: a rotated rounded rectangle with a double border and Anton letters, red (#e03131) for MYTH, green (#2f9e44) for FACT, distressed with knocked-out specks; they slam from 2× size with a shake.\n- Proof: one or two short lines in Inter 700 with a round icon (green check for fact, red cross for myth).\n- Only real, checkable claims, and proof lines that state what the evidence actually shows.\n- Pace: about 5 to 6 seconds per round.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep statements at 46 px or more, the stamp at 100 px or more and proof lines at 30 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Two body myths and facts\") unless my content asks for it.\n\nSOUND\n- Bed: a light, curious pad.\n- Map events to the kit: cards get \"pop\" and SND.paper; the guess bar gets steady soft \"tick\"s; MYTH gets \"stamp\" and a low buzzer; FACT gets \"stamp\" and a bright two-note ding; proof lines get a soft \"pop\"; the final score gets an open chord.\n- Full mix (no voiceover): a light, curious pad, ticks for the guess bar, a heavy \"stamp\" with a buzzer (myth) or a ding (fact), and a soft pop for the proof.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Myth or Fact\nFamily: Shorts Format\nLook: A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.\nHow it explains: Each round reads like a game: the statement card pops in, a short \"thinking\" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.\n",
+    "promptVo": "I want an animated video in the \"Myth or Fact\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The card lands on the first word of the statement, the guess bar runs during the pause, the stamp slams on \"myth\" or \"fact\", and the proof reads in as it is said.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, ROUNDS (statement lines, verdict, proof lines), the round counter and scoreSound(). Keep and reuse the style's helpers (the pale background and title band, the statement card with quote mark, the guess bar, the distressed stamp (red MYTH / green FACT) with slam and shake, the proof line with icon, and the round transitions).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (600 to 800), Anton (stamps).\n\nTHE STYLE\n- Background: pale cool grey (#eef1f4); the title \"MYTH OR FACT?\" in Archivo Black with a yellow question mark at the top.\n- Statement cards: white, 26 px corners, soft shadow, a large faint quote mark, the claim in Inter 800, and a small round number.\n- Stamps: a rotated rounded rectangle with a double border and Anton letters, red (#e03131) for MYTH, green (#2f9e44) for FACT, distressed with knocked-out specks; they slam from 2× size with a shake.\n- Proof: one or two short lines in Inter 700 with a round icon (green check for fact, red cross for myth).\n- Only real, checkable claims, and proof lines that state what the evidence actually shows.\n- Pace: about 5 to 6 seconds per round.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep statements at 46 px or more, the stamp at 100 px or more and proof lines at 30 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Two body myths and facts\") unless my content asks for it.\n\nSOUND\n- Bed: a light, curious pad.\n- Map events to the kit: cards get \"pop\" and SND.paper; the guess bar gets steady soft \"tick\"s; MYTH gets \"stamp\" and a low buzzer; FACT gets \"stamp\" and a bright two-note ding; proof lines get a soft \"pop\"; the final score gets an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Myth or Fact\nFamily: Shorts Format\nLook: A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.\nHow it explains: Each round reads like a game: the statement card pops in, a short \"thinking\" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.\n"
+  },
+  {
+    "id": "recipe-steps",
+    "num": "44",
+    "name": "Recipe Steps",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.",
+    "how": "The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.",
+    "fonts": "Inter (700 to 900), JetBrains Mono (700)",
+    "demo": "A 3-minute omelette",
+    "replace": "TL, INGREDIENTS (chips and their icons), STEPS (title, seconds, and the scene painter for each), the dish name and scoreSound()",
+    "keep": "the wood table, ingredient chips with drop-in, the top-down scene painters (bowl, pan, plate), the per-step scene swap, the dark step card with step count and a draining timer ring, steam curls and the serve line",
+    "sizes": "keep step titles at 46 px or more, ingredient chips at 26 px or more and the timer at 26 px or more",
+    "voLine": "Each ingredient drops as it is named, each step card and scene arrive on the first word of the step, the timer runs while the step is described, and the finished dish lands on \"serve\".",
+    "full": "- Full mix (no voiceover): a cosy kitchen pad, soft taps for chips, a whisk scratch, a sizzle under the pan step, a timer ding per step and a final bell.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sizzle very low and mark taps soft: true.",
+    "sheet": [
+      "Everything is seen from directly above on a warm wood table (#b97a46 with plank lines and grain). Bowls, pans, plates and food are simple flat shapes with soft shadows, drawn in code.",
+      "Ingredient chips are white pills with a small icon, dropping in from above with a bounce, along the top.",
+      "Each step swaps the centre prop with a quick slide, and the food changes state inside it (whisking, spreading, folding).",
+      "The step card is dark (#1d1a17 at 92%) at the bottom: an orange (#ffb347) \"STEP n / N\" label, the step in Inter 900, and a timer ring that drains with the real time left.",
+      "Real quantities and times; say \"about\" when it depends on the stove.",
+      "Pace: ingredients in 1.5 seconds, then 3 to 4 seconds per step, the finished dish held about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a cosy, warm pad with light hats.",
+      "Map events to the kit: ingredient chips get SND.tap; steps get a soft \"whoosh\"; whisking gets SND.scratch loops; the pan gets a sizzle (high-passed noise); each step end gets a timer ding (SND.chime); the dish gets a bell and an open chord."
+    ],
+    "sourceFile": "sources/recipe-steps.html",
+    "promptFile": "prompts/recipe-steps.md",
+    "sourceBytes": 61583,
+    "prompt": "I want an animated video in the \"Recipe Steps\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, INGREDIENTS (chips and their icons), STEPS (title, seconds, and the scene painter for each), the dish name and scoreSound(). Keep and reuse the style's helpers (the wood table, ingredient chips with drop-in, the top-down scene painters (bowl, pan, plate), the per-step scene swap, the dark step card with step count and a draining timer ring, steam curls and the serve line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (700 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Everything is seen from directly above on a warm wood table (#b97a46 with plank lines and grain). Bowls, pans, plates and food are simple flat shapes with soft shadows, drawn in code.\n- Ingredient chips are white pills with a small icon, dropping in from above with a bounce, along the top.\n- Each step swaps the centre prop with a quick slide, and the food changes state inside it (whisking, spreading, folding).\n- The step card is dark (#1d1a17 at 92%) at the bottom: an orange (#ffb347) \"STEP n / N\" label, the step in Inter 900, and a timer ring that drains with the real time left.\n- Real quantities and times; say \"about\" when it depends on the stove.\n- Pace: ingredients in 1.5 seconds, then 3 to 4 seconds per step, the finished dish held about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep step titles at 46 px or more, ingredient chips at 26 px or more and the timer at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A 3-minute omelette\") unless my content asks for it.\n\nSOUND\n- Bed: a cosy, warm pad with light hats.\n- Map events to the kit: ingredient chips get SND.tap; steps get a soft \"whoosh\"; whisking gets SND.scratch loops; the pan gets a sizzle (high-passed noise); each step end gets a timer ding (SND.chime); the dish gets a bell and an open chord.\n- Full mix (no voiceover): a cosy kitchen pad, soft taps for chips, a whisk scratch, a sizzle under the pan step, a timer ding per step and a final bell.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Recipe Steps\nFamily: Shorts Format\nLook: A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.\nHow it explains: The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.\n",
+    "promptVo": "I want an animated video in the \"Recipe Steps\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each ingredient drops as it is named, each step card and scene arrive on the first word of the step, the timer runs while the step is described, and the finished dish lands on \"serve\".\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, INGREDIENTS (chips and their icons), STEPS (title, seconds, and the scene painter for each), the dish name and scoreSound(). Keep and reuse the style's helpers (the wood table, ingredient chips with drop-in, the top-down scene painters (bowl, pan, plate), the per-step scene swap, the dark step card with step count and a draining timer ring, steam curls and the serve line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (700 to 900), JetBrains Mono (700).\n\nTHE STYLE\n- Everything is seen from directly above on a warm wood table (#b97a46 with plank lines and grain). Bowls, pans, plates and food are simple flat shapes with soft shadows, drawn in code.\n- Ingredient chips are white pills with a small icon, dropping in from above with a bounce, along the top.\n- Each step swaps the centre prop with a quick slide, and the food changes state inside it (whisking, spreading, folding).\n- The step card is dark (#1d1a17 at 92%) at the bottom: an orange (#ffb347) \"STEP n / N\" label, the step in Inter 900, and a timer ring that drains with the real time left.\n- Real quantities and times; say \"about\" when it depends on the stove.\n- Pace: ingredients in 1.5 seconds, then 3 to 4 seconds per step, the finished dish held about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep step titles at 46 px or more, ingredient chips at 26 px or more and the timer at 26 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A 3-minute omelette\") unless my content asks for it.\n\nSOUND\n- Bed: a cosy, warm pad with light hats.\n- Map events to the kit: ingredient chips get SND.tap; steps get a soft \"whoosh\"; whisking gets SND.scratch loops; the pan gets a sizzle (high-passed noise); each step end gets a timer ding (SND.chime); the dish gets a bell and an open chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sizzle very low and mark taps soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Recipe Steps\nFamily: Shorts Format\nLook: A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.\nHow it explains: The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.\n"
+  },
+  {
+    "id": "quote-cinema",
+    "num": "45",
+    "name": "Quote Cinema",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.",
+    "how": "The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft \"save this\" note closes it.",
+    "fonts": "Instrument Serif (regular and italic), Inter (600)",
+    "demo": "\"The best time to plant a tree was 20 years ago.\"",
+    "replace": "QUOTE (the words, which word is the key word, the line breaks), the author line, the closing note, TL timing and scoreSound()",
+    "keep": "the warm black gradient, the drifting light leak, grain and vignette, the slow push-in, the word-by-word fade with a soft rise, the warm italic key word, the faint big quote mark and the tracked author line",
+    "sizes": "keep the quote at 64 px or more and the author line at 22 px or more",
+    "voLine": "Each word fades up as it is spoken, the key word turns warm on its stress, and the author line lands after the quote ends.",
+    "full": "- Full mix (no voiceover): a slow, warm piano-like pad with long reverb, a soft swell on the key word, and a low note under the author line.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the pad very low.",
+    "sheet": [
+      "Background: warm near-black (#0d0b0a to #1f1410) with one soft orange light leak (#ff9a3c, screen-blended) that drifts slowly, plus heavy grain and a vignette.",
+      "The whole frame pushes in about 6% over the clip; nothing else moves fast.",
+      "The quote is set in Instrument Serif at a large size, left aligned, one phrase per line; each word fades up with a 14 px rise in reading rhythm.",
+      "One key word in warm italic (#ffb36b). A short warm rule and the author in Inter 600 caps with wide tracking.",
+      "Only quote people accurately with the real author; use \"proverb\" or \"attributed to\" when the source is uncertain.",
+      "Pace: about 0.3 seconds per word, hold the full quote at least 2 seconds."
+    ],
+    "sound": [
+      "Music: a slow, warm pad of soft sine and triangle chords with long reverb, like a felt piano (SND.chord and k.voice).",
+      "Map events to the kit: each new line gets a very soft pluck; the key word gets a gentle swell; the author line gets one low note; the closing note gets \"shimmer\" at low gain."
+    ],
+    "sourceFile": "sources/quote-cinema.html",
+    "promptFile": "prompts/quote-cinema.md",
+    "sourceBytes": 55494,
+    "prompt": "I want an animated video in the \"Quote Cinema\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: QUOTE (the words, which word is the key word, the line breaks), the author line, the closing note, TL timing and scoreSound(). Keep and reuse the style's helpers (the warm black gradient, the drifting light leak, grain and vignette, the slow push-in, the word-by-word fade with a soft rise, the warm italic key word, the faint big quote mark and the tracked author line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (regular and italic), Inter (600).\n\nTHE STYLE\n- Background: warm near-black (#0d0b0a to #1f1410) with one soft orange light leak (#ff9a3c, screen-blended) that drifts slowly, plus heavy grain and a vignette.\n- The whole frame pushes in about 6% over the clip; nothing else moves fast.\n- The quote is set in Instrument Serif at a large size, left aligned, one phrase per line; each word fades up with a 14 px rise in reading rhythm.\n- One key word in warm italic (#ffb36b). A short warm rule and the author in Inter 600 caps with wide tracking.\n- Only quote people accurately with the real author; use \"proverb\" or \"attributed to\" when the source is uncertain.\n- Pace: about 0.3 seconds per word, hold the full quote at least 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the quote at 64 px or more and the author line at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"\"The best time to plant a tree was 20 years ago.\"\") unless my content asks for it.\n\nSOUND\n- Music: a slow, warm pad of soft sine and triangle chords with long reverb, like a felt piano (SND.chord and k.voice).\n- Map events to the kit: each new line gets a very soft pluck; the key word gets a gentle swell; the author line gets one low note; the closing note gets \"shimmer\" at low gain.\n- Full mix (no voiceover): a slow, warm piano-like pad with long reverb, a soft swell on the key word, and a low note under the author line.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Quote Cinema\nFamily: Shorts Format\nLook: A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.\nHow it explains: The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft \"save this\" note closes it.\n",
+    "promptVo": "I want an animated video in the \"Quote Cinema\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each word fades up as it is spoken, the key word turns warm on its stress, and the author line lands after the quote ends.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: QUOTE (the words, which word is the key word, the line breaks), the author line, the closing note, TL timing and scoreSound(). Keep and reuse the style's helpers (the warm black gradient, the drifting light leak, grain and vignette, the slow push-in, the word-by-word fade with a soft rise, the warm italic key word, the faint big quote mark and the tracked author line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (regular and italic), Inter (600).\n\nTHE STYLE\n- Background: warm near-black (#0d0b0a to #1f1410) with one soft orange light leak (#ff9a3c, screen-blended) that drifts slowly, plus heavy grain and a vignette.\n- The whole frame pushes in about 6% over the clip; nothing else moves fast.\n- The quote is set in Instrument Serif at a large size, left aligned, one phrase per line; each word fades up with a 14 px rise in reading rhythm.\n- One key word in warm italic (#ffb36b). A short warm rule and the author in Inter 600 caps with wide tracking.\n- Only quote people accurately with the real author; use \"proverb\" or \"attributed to\" when the source is uncertain.\n- Pace: about 0.3 seconds per word, hold the full quote at least 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the quote at 64 px or more and the author line at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"\"The best time to plant a tree was 20 years ago.\"\") unless my content asks for it.\n\nSOUND\n- Music: a slow, warm pad of soft sine and triangle chords with long reverb, like a felt piano (SND.chord and k.voice).\n- Map events to the kit: each new line gets a very soft pluck; the key word gets a gentle swell; the author line gets one low note; the closing note gets \"shimmer\" at low gain.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the pad very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Quote Cinema\nFamily: Shorts Format\nLook: A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.\nHow it explains: The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft \"save this\" note closes it.\n"
+  },
+  {
+    "id": "breaking-desk",
+    "num": "46",
+    "name": "Breaking Desk",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.",
+    "how": "The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a \"MORE AT 6\" style card closes.",
+    "fonts": "Archivo Black, Inter (700 to 900), JetBrains Mono (600)",
+    "demo": "Weekly AI news recap",
+    "replace": "TL, the channel name (invented), HEADLINES, TICKER items, the map inset dot position, the closing card and scoreSound(); load your own footage with Load footage",
+    "keep": "footage() under everything, the LIVE bug and clock, the BREAKING tab, the typing headline bar with a flash, the ticker, the map inset with a pulsing dot, the headline swap wipe and the colour rules",
+    "sizes": "keep headlines at 40 px or more, the ticker at 22 px or more and the bug at 24 px or more",
+    "voLine": "The BREAKING tab lands on the first word, the headline types while it is read, the map dot pulses on the place name, and the second headline swaps on \"and\" or \"also\".",
+    "full": "- Full mix (no voiceover): a news sting (a brass-like chord with a timpani hit) at the start, a tension bed, a whoosh for each swap and soft ticks for typing.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the bed very low and mark ticks soft: true.",
+    "sheet": [
+      "Built for your footage: everything sits on top of footage(), which shows your clip when it is loaded and a stand-in presenter until then. Keep the presenter's face clear of graphics.",
+      "Always an invented channel name and look; never imitate a real network's logo, colours or layout, and never present opinions as reported fact.",
+      "Red (#e11d2e) for LIVE and BREAKING only; white bars with near-black text (#0b1220) for headlines; a dark ticker bar with white mono text.",
+      "Headline bars type themselves at about 30 characters a second and flash white once complete.",
+      "The map inset is a dark rounded card with simple continent blobs and a pulsing red dot.",
+      "Pace: bug and tab in the first second, one headline every 4 to 5 seconds."
+    ],
+    "sound": [
+      "Bed: a tense news bed (a low pulsing synth with soft hats).",
+      "Map events to the kit: open with a sting (a short brass-like sawtooth chord plus a timpani boom); the tab gets \"whoosh\"; typing gets soft ticks; the headline flash gets \"click\"; swaps get \"whoosh\" and \"glitch\" at low gain; the close gets a short sting."
+    ],
+    "sourceFile": "sources/breaking-desk.html",
+    "promptFile": "prompts/breaking-desk.md",
+    "sourceBytes": 58545,
+    "prompt": "I want an animated video in the \"Breaking Desk\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the channel name (invented), HEADLINES, TICKER items, the map inset dot position, the closing card and scoreSound(); load your own footage with Load footage. Keep and reuse the style's helpers (footage() under everything, the LIVE bug and clock, the BREAKING tab, the typing headline bar with a flash, the ticker, the map inset with a pulsing dot, the headline swap wipe and the colour rules).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 to 900), JetBrains Mono (600).\n\nTHE STYLE\n- Built for your footage: everything sits on top of footage(), which shows your clip when it is loaded and a stand-in presenter until then. Keep the presenter's face clear of graphics.\n- Always an invented channel name and look; never imitate a real network's logo, colours or layout, and never present opinions as reported fact.\n- Red (#e11d2e) for LIVE and BREAKING only; white bars with near-black text (#0b1220) for headlines; a dark ticker bar with white mono text.\n- Headline bars type themselves at about 30 characters a second and flash white once complete.\n- The map inset is a dark rounded card with simple continent blobs and a pulsing red dot.\n- Pace: bug and tab in the first second, one headline every 4 to 5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the ticker at 22 px or more and the bug at 24 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Weekly AI news recap\") unless my content asks for it.\n\nSOUND\n- Bed: a tense news bed (a low pulsing synth with soft hats).\n- Map events to the kit: open with a sting (a short brass-like sawtooth chord plus a timpani boom); the tab gets \"whoosh\"; typing gets soft ticks; the headline flash gets \"click\"; swaps get \"whoosh\" and \"glitch\" at low gain; the close gets a short sting.\n- Full mix (no voiceover): a news sting (a brass-like chord with a timpani hit) at the start, a tension bed, a whoosh for each swap and soft ticks for typing.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Breaking Desk\nFamily: Shorts Format\nLook: An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.\nHow it explains: The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a \"MORE AT 6\" style card closes.\n",
+    "promptVo": "I want an animated video in the \"Breaking Desk\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The BREAKING tab lands on the first word, the headline types while it is read, the map dot pulses on the place name, and the second headline swaps on \"and\" or \"also\".\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the channel name (invented), HEADLINES, TICKER items, the map inset dot position, the closing card and scoreSound(); load your own footage with Load footage. Keep and reuse the style's helpers (footage() under everything, the LIVE bug and clock, the BREAKING tab, the typing headline bar with a flash, the ticker, the map inset with a pulsing dot, the headline swap wipe and the colour rules).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 to 900), JetBrains Mono (600).\n\nTHE STYLE\n- Built for your footage: everything sits on top of footage(), which shows your clip when it is loaded and a stand-in presenter until then. Keep the presenter's face clear of graphics.\n- Always an invented channel name and look; never imitate a real network's logo, colours or layout, and never present opinions as reported fact.\n- Red (#e11d2e) for LIVE and BREAKING only; white bars with near-black text (#0b1220) for headlines; a dark ticker bar with white mono text.\n- Headline bars type themselves at about 30 characters a second and flash white once complete.\n- The map inset is a dark rounded card with simple continent blobs and a pulsing red dot.\n- Pace: bug and tab in the first second, one headline every 4 to 5 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the ticker at 22 px or more and the bug at 24 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Weekly AI news recap\") unless my content asks for it.\n\nSOUND\n- Bed: a tense news bed (a low pulsing synth with soft hats).\n- Map events to the kit: open with a sting (a short brass-like sawtooth chord plus a timpani boom); the tab gets \"whoosh\"; typing gets soft ticks; the headline flash gets \"click\"; swaps get \"whoosh\" and \"glitch\" at low gain; the close gets a short sting.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the bed very low and mark ticks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Breaking Desk\nFamily: Shorts Format\nLook: An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.\nHow it explains: The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a \"MORE AT 6\" style card closes.\n"
+  },
+  {
+    "id": "podcast-clip",
+    "num": "47",
+    "name": "Podcast Clip",
+    "family": "Shorts Format",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.",
+    "how": "Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.",
+    "fonts": "Inter (800 and 900), JetBrains Mono (800)",
+    "demo": "A clip from an invented show, \"The Side Project Show\"",
+    "replace": "TL, LINES (speaker, words with times, which words are yellow), the show name and episode, and scoreSound(); load your recording with Load footage (it fills both panels, cropped)",
+    "keep": "footage() in two rounded panels with a slight zoom on the active speaker, the green active ring, the seam captions with yellow key words and a thick black outline, the episode tag, the reactive waveform and the progress line",
+    "sizes": "keep captions at 44 px or more, name tags at 20 px or more and the episode tag at 22 px or more",
+    "voLine": "Each caption group appears on its first spoken word, yellow words land on their stress, and the active ring switches on the first word of each speaker.",
+    "full": "- Full mix (no voiceover): a low lo-fi bed, a soft pop for each caption group and a tiny tick when the speaker changes; the real audio is your recording.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything soft: the voices carry the clip.",
+    "sheet": [
+      "Built for your footage: both panels use footage() (your recording when loaded, cropped and zoomed differently per speaker; a stand-in until then). Keep faces clear of captions.",
+      "Black background (#0b0b0d); panels have 26 px corners; the active panel gets a 5 px green ring (#36d67b) and a 4% zoom.",
+      "Captions: Inter 900 white with a thick black stroke, 2 to 4 words at a time, key words in yellow (#ffd43b) and slightly bigger, popping in on their word.",
+      "Small black-glass name tags in the panel corners, an episode tag in green top left, the show name in white caps.",
+      "A waveform of rounded bars at the bottom reacts to who is talking, and a thin progress line runs across the bottom.",
+      "Pace: caption groups change every 0.6 to 1.2 seconds, following the speech exactly."
+    ],
+    "sound": [
+      "Bed: a very low lo-fi pad so the voices sit on top.",
+      "Map events to the kit: caption groups get a very soft \"pop\"; speaker changes get a soft tick; the end card gets a short chime."
+    ],
+    "sourceFile": "sources/podcast-clip.html",
+    "promptFile": "prompts/podcast-clip.md",
+    "sourceBytes": 56863,
+    "prompt": "I want an animated video in the \"Podcast Clip\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, LINES (speaker, words with times, which words are yellow), the show name and episode, and scoreSound(); load your recording with Load footage (it fills both panels, cropped). Keep and reuse the style's helpers (footage() in two rounded panels with a slight zoom on the active speaker, the green active ring, the seam captions with yellow key words and a thick black outline, the episode tag, the reactive waveform and the progress line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800 and 900), JetBrains Mono (800).\n\nTHE STYLE\n- Built for your footage: both panels use footage() (your recording when loaded, cropped and zoomed differently per speaker; a stand-in until then). Keep faces clear of captions.\n- Black background (#0b0b0d); panels have 26 px corners; the active panel gets a 5 px green ring (#36d67b) and a 4% zoom.\n- Captions: Inter 900 white with a thick black stroke, 2 to 4 words at a time, key words in yellow (#ffd43b) and slightly bigger, popping in on their word.\n- Small black-glass name tags in the panel corners, an episode tag in green top left, the show name in white caps.\n- A waveform of rounded bars at the bottom reacts to who is talking, and a thin progress line runs across the bottom.\n- Pace: caption groups change every 0.6 to 1.2 seconds, following the speech exactly.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 44 px or more, name tags at 20 px or more and the episode tag at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A clip from an invented show, \"The Side Project Show\"\") unless my content asks for it.\n\nSOUND\n- Bed: a very low lo-fi pad so the voices sit on top.\n- Map events to the kit: caption groups get a very soft \"pop\"; speaker changes get a soft tick; the end card gets a short chime.\n- Full mix (no voiceover): a low lo-fi bed, a soft pop for each caption group and a tiny tick when the speaker changes; the real audio is your recording.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Podcast Clip\nFamily: Shorts Format\nLook: A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.\nHow it explains: Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.\n",
+    "promptVo": "I want an animated video in the \"Podcast Clip\" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each caption group appears on its first spoken word, yellow words land on their stress, and the active ring switches on the first word of each speaker.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, LINES (speaker, words with times, which words are yellow), the show name and episode, and scoreSound(); load your recording with Load footage (it fills both panels, cropped). Keep and reuse the style's helpers (footage() in two rounded panels with a slight zoom on the active speaker, the green active ring, the seam captions with yellow key words and a thick black outline, the episode tag, the reactive waveform and the progress line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800 and 900), JetBrains Mono (800).\n\nTHE STYLE\n- Built for your footage: both panels use footage() (your recording when loaded, cropped and zoomed differently per speaker; a stand-in until then). Keep faces clear of captions.\n- Black background (#0b0b0d); panels have 26 px corners; the active panel gets a 5 px green ring (#36d67b) and a 4% zoom.\n- Captions: Inter 900 white with a thick black stroke, 2 to 4 words at a time, key words in yellow (#ffd43b) and slightly bigger, popping in on their word.\n- Small black-glass name tags in the panel corners, an episode tag in green top left, the show name in white caps.\n- A waveform of rounded bars at the bottom reacts to who is talking, and a thin progress line runs across the bottom.\n- Pace: caption groups change every 0.6 to 1.2 seconds, following the speech exactly.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 44 px or more, name tags at 20 px or more and the episode tag at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A clip from an invented show, \"The Side Project Show\"\") unless my content asks for it.\n\nSOUND\n- Bed: a very low lo-fi pad so the voices sit on top.\n- Map events to the kit: caption groups get a very soft \"pop\"; speaker changes get a soft tick; the end card gets a short chime.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything soft: the voices carry the clip.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Podcast Clip\nFamily: Shorts Format\nLook: A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.\nHow it explains: Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.\n"
+  },
+  {
+    "id": "punch-captions",
+    "num": "48",
+    "name": "Punch Captions",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.",
+    "how": "Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.",
+    "fonts": "Anton, Inter (800)",
+    "demo": "A talking-head hook: \"This one habit changed everything\"",
+    "replace": "TL and CAPS (chunks of words with their times, which word is the key word, which sticker pops), PUNCHES (zoom hits), the handle and scoreSound(); load your clip with Load footage and paste word timings for the captions",
+    "keep": "footage() with punch zooms, the chunked Anton captions with thick outline and slam-in, the yellow tilted key word, the sticker painters (bolt, spark, arrow, star), the safe-zone layout and the handle chip",
+    "sizes": "keep caption words at 76 px or more, key words at 96 px or more and keep captions inside the middle 60% of the height",
+    "voLine": "Every caption word slams in at the start of its spoken word, within 0.03 s; the key word lands on its stressed syllable with the punch zoom; stickers pop 0.1 s after the key word.",
+    "full": "- Full mix (no voiceover): soft whooshes and pops so the clip still feels edited; with your own audio, keep only small pops and the punch \"slam\" at low gain.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every caption sound soft: true and keep the slams at half gain.",
+    "sheet": [
+      "Built for your footage: footage() fills the frame (your clip when loaded, a stand-in until then). Captions sit in the middle band, never over the eyes, and stay inside phone safe zones.",
+      "Captions: Anton, white, all caps, a black outline about 12% of the size, 1 to 3 words per chunk, centred; each word slams in (scale 1.6 to 1, quick blur).",
+      "The key word of each chunk: yellow (#ffe14d), 25% bigger and tilted a few degrees, with a punch zoom (4 to 8%) on the footage at the same moment.",
+      "Stickers are drawn in code (bolt, spark burst, arrow, star) in yellow or white with a black outline; never emoji images or brand stickers.",
+      "Never caption the whole transcript at once: chunks of 1 to 3 words only."
+    ],
+    "sound": [
+      "Bed: none (your audio leads). Effects only.",
+      "Map events to the kit: each chunk gets a soft \"pop\"; key words get \"slam\" at low gain with the punch zoom; stickers get \"sparkle\" or SND.bloop; chunk changes with a cut get a short \"whoosh\"."
+    ],
+    "sourceFile": "sources/punch-captions.html",
+    "promptFile": "prompts/punch-captions.md",
+    "sourceBytes": 56708,
+    "prompt": "I want an animated video in the \"Punch Captions\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL and CAPS (chunks of words with their times, which word is the key word, which sticker pops), PUNCHES (zoom hits), the handle and scoreSound(); load your clip with Load footage and paste word timings for the captions. Keep and reuse the style's helpers (footage() with punch zooms, the chunked Anton captions with thick outline and slam-in, the yellow tilted key word, the sticker painters (bolt, spark, arrow, star), the safe-zone layout and the handle chip).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800).\n\nTHE STYLE\n- Built for your footage: footage() fills the frame (your clip when loaded, a stand-in until then). Captions sit in the middle band, never over the eyes, and stay inside phone safe zones.\n- Captions: Anton, white, all caps, a black outline about 12% of the size, 1 to 3 words per chunk, centred; each word slams in (scale 1.6 to 1, quick blur).\n- The key word of each chunk: yellow (#ffe14d), 25% bigger and tilted a few degrees, with a punch zoom (4 to 8%) on the footage at the same moment.\n- Stickers are drawn in code (bolt, spark burst, arrow, star) in yellow or white with a black outline; never emoji images or brand stickers.\n- Never caption the whole transcript at once: chunks of 1 to 3 words only.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep caption words at 76 px or more, key words at 96 px or more and keep captions inside the middle 60% of the height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A talking-head hook: \"This one habit changed everything\"\") unless my content asks for it.\n\nSOUND\n- Bed: none (your audio leads). Effects only.\n- Map events to the kit: each chunk gets a soft \"pop\"; key words get \"slam\" at low gain with the punch zoom; stickers get \"sparkle\" or SND.bloop; chunk changes with a cut get a short \"whoosh\".\n- Full mix (no voiceover): soft whooshes and pops so the clip still feels edited; with your own audio, keep only small pops and the punch \"slam\" at low gain.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Punch Captions\nFamily: Edit Overlay\nLook: High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.\nHow it explains: Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.\n",
+    "promptVo": "I want an animated video in the \"Punch Captions\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Every caption word slams in at the start of its spoken word, within 0.03 s; the key word lands on its stressed syllable with the punch zoom; stickers pop 0.1 s after the key word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL and CAPS (chunks of words with their times, which word is the key word, which sticker pops), PUNCHES (zoom hits), the handle and scoreSound(); load your clip with Load footage and paste word timings for the captions. Keep and reuse the style's helpers (footage() with punch zooms, the chunked Anton captions with thick outline and slam-in, the yellow tilted key word, the sticker painters (bolt, spark, arrow, star), the safe-zone layout and the handle chip).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800).\n\nTHE STYLE\n- Built for your footage: footage() fills the frame (your clip when loaded, a stand-in until then). Captions sit in the middle band, never over the eyes, and stay inside phone safe zones.\n- Captions: Anton, white, all caps, a black outline about 12% of the size, 1 to 3 words per chunk, centred; each word slams in (scale 1.6 to 1, quick blur).\n- The key word of each chunk: yellow (#ffe14d), 25% bigger and tilted a few degrees, with a punch zoom (4 to 8%) on the footage at the same moment.\n- Stickers are drawn in code (bolt, spark burst, arrow, star) in yellow or white with a black outline; never emoji images or brand stickers.\n- Never caption the whole transcript at once: chunks of 1 to 3 words only.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep caption words at 76 px or more, key words at 96 px or more and keep captions inside the middle 60% of the height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A talking-head hook: \"This one habit changed everything\"\") unless my content asks for it.\n\nSOUND\n- Bed: none (your audio leads). Effects only.\n- Map events to the kit: each chunk gets a soft \"pop\"; key words get \"slam\" at low gain with the punch zoom; stickers get \"sparkle\" or SND.bloop; chunk changes with a cut get a short \"whoosh\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every caption sound soft: true and keep the slams at half gain.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Punch Captions\nFamily: Edit Overlay\nLook: High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.\nHow it explains: Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.\n"
+  },
+  {
+    "id": "karaoke-subs",
+    "num": "49",
+    "name": "Karaoke Subs",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.",
+    "how": "The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.",
+    "fonts": "Inter (800)",
+    "demo": "A morning-routine talking clip",
+    "replace": "PHRASES (each phrase as words with start times, from your word-level SRT) and the pill colour; load your clip with Load footage",
+    "keep": "footage(), the rounded glass box with blur-look fill, two-line layout with automatic wrapping, the gliding highlight pill (it slides between word boxes), spoken/upcoming opacities and the phrase swap",
+    "sizes": "keep subtitle words at 40 px or more, never more than two lines, and keep the box above the bottom 15% (phone UI)",
+    "voLine": "The pill reaches each word at its start time from the SRT, within 0.03 s; a new phrase appears 0.1 s before its first word.",
+    "full": "- Full mix (no voiceover): none needed; the clip's own audio is the soundtrack. A very faint tick per phrase is optional.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything silent or near-silent.",
+    "sheet": [
+      "Built for your footage and your word timings: paste a word-level SRT and every word gets its own start time.",
+      "The box: dark glass (#0e1014 at 74%), 22 px corners, centred in the lower third, sized to its text with 28 px padding.",
+      "Words: Inter 800 at 40 px or more. Spoken words white, upcoming words white at 45%, the current word dark (#0b1a10) on a green pill (#3ddc84) that slides and resizes between words with a quick ease.",
+      "One phrase at a time, at most two lines of about 22 characters; phrases swap with a 0.2 s fade and a 10 px lift.",
+      "Accessibility first: high contrast, no effects that hurt readability, exact timing."
+    ],
+    "sound": [
+      "No music: the clip's own audio leads.",
+      "Optional: a barely audible \"tick\" at the start of each phrase; nothing on individual words."
+    ],
+    "sourceFile": "sources/karaoke-subs.html",
+    "promptFile": "prompts/karaoke-subs.md",
+    "sourceBytes": 55300,
+    "prompt": "I want an animated video in the \"Karaoke Subs\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: PHRASES (each phrase as words with start times, from your word-level SRT) and the pill colour; load your clip with Load footage. Keep and reuse the style's helpers (footage(), the rounded glass box with blur-look fill, two-line layout with automatic wrapping, the gliding highlight pill (it slides between word boxes), spoken/upcoming opacities and the phrase swap).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800).\n\nTHE STYLE\n- Built for your footage and your word timings: paste a word-level SRT and every word gets its own start time.\n- The box: dark glass (#0e1014 at 74%), 22 px corners, centred in the lower third, sized to its text with 28 px padding.\n- Words: Inter 800 at 40 px or more. Spoken words white, upcoming words white at 45%, the current word dark (#0b1a10) on a green pill (#3ddc84) that slides and resizes between words with a quick ease.\n- One phrase at a time, at most two lines of about 22 characters; phrases swap with a 0.2 s fade and a 10 px lift.\n- Accessibility first: high contrast, no effects that hurt readability, exact timing.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep subtitle words at 40 px or more, never more than two lines, and keep the box above the bottom 15% (phone UI). Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A morning-routine talking clip\") unless my content asks for it.\n\nSOUND\n- No music: the clip's own audio leads.\n- Optional: a barely audible \"tick\" at the start of each phrase; nothing on individual words.\n- Full mix (no voiceover): none needed; the clip's own audio is the soundtrack. A very faint tick per phrase is optional.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Karaoke Subs\nFamily: Edit Overlay\nLook: Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.\nHow it explains: The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.\n",
+    "promptVo": "I want an animated video in the \"Karaoke Subs\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The pill reaches each word at its start time from the SRT, within 0.03 s; a new phrase appears 0.1 s before its first word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: PHRASES (each phrase as words with start times, from your word-level SRT) and the pill colour; load your clip with Load footage. Keep and reuse the style's helpers (footage(), the rounded glass box with blur-look fill, two-line layout with automatic wrapping, the gliding highlight pill (it slides between word boxes), spoken/upcoming opacities and the phrase swap).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800).\n\nTHE STYLE\n- Built for your footage and your word timings: paste a word-level SRT and every word gets its own start time.\n- The box: dark glass (#0e1014 at 74%), 22 px corners, centred in the lower third, sized to its text with 28 px padding.\n- Words: Inter 800 at 40 px or more. Spoken words white, upcoming words white at 45%, the current word dark (#0b1a10) on a green pill (#3ddc84) that slides and resizes between words with a quick ease.\n- One phrase at a time, at most two lines of about 22 characters; phrases swap with a 0.2 s fade and a 10 px lift.\n- Accessibility first: high contrast, no effects that hurt readability, exact timing.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep subtitle words at 40 px or more, never more than two lines, and keep the box above the bottom 15% (phone UI). Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A morning-routine talking clip\") unless my content asks for it.\n\nSOUND\n- No music: the clip's own audio leads.\n- Optional: a barely audible \"tick\" at the start of each phrase; nothing on individual words.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything silent or near-silent.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Karaoke Subs\nFamily: Edit Overlay\nLook: Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.\nHow it explains: The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.\n"
+  },
+  {
+    "id": "callout-kit",
+    "num": "50",
+    "name": "Callout Kit",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.",
+    "how": "Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.",
+    "fonts": "Permanent Marker, JetBrains Mono (700), Inter (800)",
+    "demo": "Pointing out an app on your phone in a review",
+    "replace": "TL and the callout list (positions, sizes, labels, what the zoom box shows), and scoreSound(); load your clip with Load footage and set the coordinates to your shot",
+    "keep": "footage(), the hand-drawn marker circle (hdEllipse-style), marker arrows with labels, the zoom box with connector lines and border, the pixelate blur mask, the spotlight cut-out and the draw-on timing",
+    "sizes": "keep marker labels at 44 px or more, mono tags at 20 px or more, and line widths at 6 px or more so they read on a phone",
+    "voLine": "Each circle starts drawing on the word that names the thing, arrows land on \"this\" or \"here\", the zoom box opens on the detail word, and the blur appears before anything private is visible.",
+    "full": "- Full mix (no voiceover): marker squeaks while drawing, a pop for the zoom box, a soft whoosh for the arrow, a camera-shutter click for the blur.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.",
+    "sheet": [
+      "Built for your footage: callouts are placed in frame coordinates on top of footage(); set them to where things sit in your shot.",
+      "Marker red (#ff3b3b) for circles, arrows and labels (Permanent Marker), with a subtle dark shadow so they read on any footage.",
+      "The zoom box: a white-bordered rounded rectangle showing the detail at 2× (or a drawn stand-in), a small \"2× ZOOM\" tag, and two thin connector lines back to the source area.",
+      "Blur masks pixelate (blocky mosaic) anything private: faces of strangers, emails, plates. Always cover before it appears.",
+      "Spotlight: everything darkens to 60% except a soft circle on the point.",
+      "One callout at a time; each draws on in 0.4 to 0.8 seconds and clears before the next."
+    ],
+    "sound": [
+      "No music by default (your clip leads); effects only.",
+      "Map events to the kit: circles and underlines get \"marker\"; arrows get a soft \"whoosh\"; the zoom box gets \"pop\"; the blur gets a \"click\" (shutter); the spotlight gets a soft low swell."
+    ],
+    "sourceFile": "sources/callout-kit.html",
+    "promptFile": "prompts/callout-kit.md",
+    "sourceBytes": 58189,
+    "prompt": "I want an animated video in the \"Callout Kit\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL and the callout list (positions, sizes, labels, what the zoom box shows), and scoreSound(); load your clip with Load footage and set the coordinates to your shot. Keep and reuse the style's helpers (footage(), the hand-drawn marker circle (hdEllipse-style), marker arrows with labels, the zoom box with connector lines and border, the pixelate blur mask, the spotlight cut-out and the draw-on timing).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Permanent Marker, JetBrains Mono (700), Inter (800).\n\nTHE STYLE\n- Built for your footage: callouts are placed in frame coordinates on top of footage(); set them to where things sit in your shot.\n- Marker red (#ff3b3b) for circles, arrows and labels (Permanent Marker), with a subtle dark shadow so they read on any footage.\n- The zoom box: a white-bordered rounded rectangle showing the detail at 2× (or a drawn stand-in), a small \"2× ZOOM\" tag, and two thin connector lines back to the source area.\n- Blur masks pixelate (blocky mosaic) anything private: faces of strangers, emails, plates. Always cover before it appears.\n- Spotlight: everything darkens to 60% except a soft circle on the point.\n- One callout at a time; each draws on in 0.4 to 0.8 seconds and clears before the next.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep marker labels at 44 px or more, mono tags at 20 px or more, and line widths at 6 px or more so they read on a phone. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Pointing out an app on your phone in a review\") unless my content asks for it.\n\nSOUND\n- No music by default (your clip leads); effects only.\n- Map events to the kit: circles and underlines get \"marker\"; arrows get a soft \"whoosh\"; the zoom box gets \"pop\"; the blur gets a \"click\" (shutter); the spotlight gets a soft low swell.\n- Full mix (no voiceover): marker squeaks while drawing, a pop for the zoom box, a soft whoosh for the arrow, a camera-shutter click for the blur.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Callout Kit\nFamily: Edit Overlay\nLook: Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.\nHow it explains: Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.\n",
+    "promptVo": "I want an animated video in the \"Callout Kit\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each circle starts drawing on the word that names the thing, arrows land on \"this\" or \"here\", the zoom box opens on the detail word, and the blur appears before anything private is visible.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL and the callout list (positions, sizes, labels, what the zoom box shows), and scoreSound(); load your clip with Load footage and set the coordinates to your shot. Keep and reuse the style's helpers (footage(), the hand-drawn marker circle (hdEllipse-style), marker arrows with labels, the zoom box with connector lines and border, the pixelate blur mask, the spotlight cut-out and the draw-on timing).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Permanent Marker, JetBrains Mono (700), Inter (800).\n\nTHE STYLE\n- Built for your footage: callouts are placed in frame coordinates on top of footage(); set them to where things sit in your shot.\n- Marker red (#ff3b3b) for circles, arrows and labels (Permanent Marker), with a subtle dark shadow so they read on any footage.\n- The zoom box: a white-bordered rounded rectangle showing the detail at 2× (or a drawn stand-in), a small \"2× ZOOM\" tag, and two thin connector lines back to the source area.\n- Blur masks pixelate (blocky mosaic) anything private: faces of strangers, emails, plates. Always cover before it appears.\n- Spotlight: everything darkens to 60% except a soft circle on the point.\n- One callout at a time; each draws on in 0.4 to 0.8 seconds and clears before the next.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep marker labels at 44 px or more, mono tags at 20 px or more, and line widths at 6 px or more so they read on a phone. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Pointing out an app on your phone in a review\") unless my content asks for it.\n\nSOUND\n- No music by default (your clip leads); effects only.\n- Map events to the kit: circles and underlines get \"marker\"; arrows get a soft \"whoosh\"; the zoom box gets \"pop\"; the blur gets a \"click\" (shutter); the spotlight gets a soft low swell.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Callout Kit\nFamily: Edit Overlay\nLook: Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.\nHow it explains: Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.\n"
+  },
+  {
+    "id": "lower-thirds",
+    "num": "51",
+    "name": "Lower Thirds",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "A consistent identity kit for interviews and long videos: a name tag with an amber accent bar and dark glass panel, a serif chapter card with a progress row, a social handle bar, and a red subscribe nudge with a bell that rings.",
+    "how": "Each element has one clean entrance and exit: the name tag wipes out of its accent bar, the chapter title rises in with a tracked label and progress dots, the subscribe pill pops with a bell wiggle and a cursor click, and everything clears for the next part.",
+    "fonts": "Instrument Serif, Inter (500 to 900)",
+    "demo": "An interview intro with a guest name, a chapter and a subscribe nudge",
+    "replace": "TL, the name and role, CHAPTERS (number, title), the handle, the accent colour and scoreSound(); load your clip with Load footage",
+    "keep": "footage(), the accent-bar wipe name tag, the chapter card with label, serif title and progress dots, the handle bar, the subscribe pill with bell wiggle and cursor click, and the shared timings (in 0.5 s, hold, out 0.3 s)",
+    "sizes": "keep names at 40 px or more, roles at 24 px or more, chapter titles at 64 px or more, and keep everything inside the title-safe area",
+    "voLine": "The name tag lands as the person starts speaking, the chapter card lands on the first word of the new section, and the subscribe nudge appears in a natural pause.",
+    "full": "- Full mix (no voiceover): soft swooshes for each entrance, a bell for the subscribe nudge, a click for the cursor.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.",
+    "sheet": [
+      "Built for your footage: graphics live in the bottom-left and the top, away from faces, inside title-safe margins (40 px).",
+      "One accent colour (amber #ffb347 here) used only for the bar, labels and progress; everything else white on dark glass (rgba 12,14,18,0.78).",
+      "Name tag: a 8 px accent bar wipes up first, then the panel wipes out to the right; name in Inter 900, role in Inter 500.",
+      "Chapter card: a small tracked label (\"CHAPTER 2\") in the accent, the title in Instrument Serif rising in, and a row of progress dashes with the current one filled.",
+      "Subscribe nudge: a red pill (#e5322d) with a bell icon that wiggles, a cursor that taps it, and the pill flips to \"SUBSCRIBED\".",
+      "Every element: 0.5 s in, holds while relevant, 0.3 s out."
+    ],
+    "sound": [
+      "No music (your audio leads); effects only.",
+      "Map events to the kit: each entrance gets a soft \"whoosh\"; the chapter card gets a soft \"pop\" and a tick per progress dash; the bell gets two quick high pings (\"ping\"); the cursor tap gets \"click\"."
+    ],
+    "sourceFile": "sources/lower-thirds.html",
+    "promptFile": "prompts/lower-thirds.md",
+    "sourceBytes": 57315,
+    "prompt": "I want an animated video in the \"Lower Thirds\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the name and role, CHAPTERS (number, title), the handle, the accent colour and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the accent-bar wipe name tag, the chapter card with label, serif title and progress dots, the handle bar, the subscribe pill with bell wiggle and cursor click, and the shared timings (in 0.5 s, hold, out 0.3 s)).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif, Inter (500 to 900).\n\nTHE STYLE\n- Built for your footage: graphics live in the bottom-left and the top, away from faces, inside title-safe margins (40 px).\n- One accent colour (amber #ffb347 here) used only for the bar, labels and progress; everything else white on dark glass (rgba 12,14,18,0.78).\n- Name tag: a 8 px accent bar wipes up first, then the panel wipes out to the right; name in Inter 900, role in Inter 500.\n- Chapter card: a small tracked label (\"CHAPTER 2\") in the accent, the title in Instrument Serif rising in, and a row of progress dashes with the current one filled.\n- Subscribe nudge: a red pill (#e5322d) with a bell icon that wiggles, a cursor that taps it, and the pill flips to \"SUBSCRIBED\".\n- Every element: 0.5 s in, holds while relevant, 0.3 s out.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep names at 40 px or more, roles at 24 px or more, chapter titles at 64 px or more, and keep everything inside the title-safe area. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"An interview intro with a guest name, a chapter and a subscribe nudge\") unless my content asks for it.\n\nSOUND\n- No music (your audio leads); effects only.\n- Map events to the kit: each entrance gets a soft \"whoosh\"; the chapter card gets a soft \"pop\" and a tick per progress dash; the bell gets two quick high pings (\"ping\"); the cursor tap gets \"click\".\n- Full mix (no voiceover): soft swooshes for each entrance, a bell for the subscribe nudge, a click for the cursor.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Lower Thirds\nFamily: Edit Overlay\nLook: A consistent identity kit for interviews and long videos: a name tag with an amber accent bar and dark glass panel, a serif chapter card with a progress row, a social handle bar, and a red subscribe nudge with a bell that rings.\nHow it explains: Each element has one clean entrance and exit: the name tag wipes out of its accent bar, the chapter title rises in with a tracked label and progress dots, the subscribe pill pops with a bell wiggle and a cursor click, and everything clears for the next part.\n",
+    "promptVo": "I want an animated video in the \"Lower Thirds\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The name tag lands as the person starts speaking, the chapter card lands on the first word of the new section, and the subscribe nudge appears in a natural pause.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the name and role, CHAPTERS (number, title), the handle, the accent colour and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the accent-bar wipe name tag, the chapter card with label, serif title and progress dots, the handle bar, the subscribe pill with bell wiggle and cursor click, and the shared timings (in 0.5 s, hold, out 0.3 s)).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif, Inter (500 to 900).\n\nTHE STYLE\n- Built for your footage: graphics live in the bottom-left and the top, away from faces, inside title-safe margins (40 px).\n- One accent colour (amber #ffb347 here) used only for the bar, labels and progress; everything else white on dark glass (rgba 12,14,18,0.78).\n- Name tag: a 8 px accent bar wipes up first, then the panel wipes out to the right; name in Inter 900, role in Inter 500.\n- Chapter card: a small tracked label (\"CHAPTER 2\") in the accent, the title in Instrument Serif rising in, and a row of progress dashes with the current one filled.\n- Subscribe nudge: a red pill (#e5322d) with a bell icon that wiggles, a cursor that taps it, and the pill flips to \"SUBSCRIBED\".\n- Every element: 0.5 s in, holds while relevant, 0.3 s out.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep names at 40 px or more, roles at 24 px or more, chapter titles at 64 px or more, and keep everything inside the title-safe area. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"An interview intro with a guest name, a chapter and a subscribe nudge\") unless my content asks for it.\n\nSOUND\n- No music (your audio leads); effects only.\n- Map events to the kit: each entrance gets a soft \"whoosh\"; the chapter card gets a soft \"pop\" and a tick per progress dash; the bell gets two quick high pings (\"ping\"); the cursor tap gets \"click\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Lower Thirds\nFamily: Edit Overlay\nLook: A consistent identity kit for interviews and long videos: a name tag with an amber accent bar and dark glass panel, a serif chapter card with a progress row, a social handle bar, and a red subscribe nudge with a bell that rings.\nHow it explains: Each element has one clean entrance and exit: the name tag wipes out of its accent bar, the chapter title rises in with a tracked label and progress dots, the subscribe pill pops with a bell wiggle and a cursor click, and everything clears for the next part.\n"
+  },
+  {
+    "id": "headline-backdrop",
+    "num": "52",
+    "name": "Headline Backdrop",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.",
+    "how": "Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.",
+    "fonts": "Playfair Display (700 and 900), Inter (800 and 900)",
+    "demo": "Reacting to a (made-up) headline about laundry-folding robots",
+    "replace": "TL, ARTICLES (invented site name, headline lines, which line is highlighted), the reaction text and scoreSound(); load your clip with Load footage (shot against a plain background for the cut-out look)",
+    "keep": "the pale background, invented article cards with grey body lines, the stack-and-scroll motion, the yellow marker swipe, the sticker-edge cut-out treatment of the footage, the drop shadow and the reaction chip",
+    "sizes": "keep headlines at 40 px or more, the reaction chip at 30 px or more, and keep your face clear of the cards",
+    "voLine": "A card slides in as you mention it, the highlighter swipes along the line while you read it, and the reaction chip pops on the punchline.",
+    "full": "- Full mix (no voiceover): paper slides for cards, a marker for the highlight, a pop for the reaction.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark everything soft: true.",
+    "sheet": [
+      "Built for your footage: the presenter is cut out (with your clip: a centred crop in a rounded mask; with the stand-in: a real silhouette) and gets a thick white sticker outline and a soft shadow so it sits in front of the cards.",
+      "Articles are always invented: an invented site name in Playfair Display 900, a serif headline, grey placeholder body lines. Never mock up a real outlet, a real person's quote or a real post.",
+      "The key line gets a yellow (#ffd60a) marker swipe that grows left to right behind the text.",
+      "Cards tilt slightly (±4°) and stack with soft shadows on a pale grey-blue background (#e6eaef).",
+      "Reaction chips: black with yellow Inter 900 text, popping next to the head."
+    ],
+    "sound": [
+      "No music by default (your clip leads).",
+      "Map events to the kit: cards get SND.paper; the highlight gets \"marker\"; the reaction gets \"pop\" and a short comic sting; the card swap gets a soft \"whoosh\"."
+    ],
+    "sourceFile": "sources/headline-backdrop.html",
+    "promptFile": "prompts/headline-backdrop.md",
+    "sourceBytes": 56845,
+    "prompt": "I want an animated video in the \"Headline Backdrop\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, ARTICLES (invented site name, headline lines, which line is highlighted), the reaction text and scoreSound(); load your clip with Load footage (shot against a plain background for the cut-out look). Keep and reuse the style's helpers (the pale background, invented article cards with grey body lines, the stack-and-scroll motion, the yellow marker swipe, the sticker-edge cut-out treatment of the footage, the drop shadow and the reaction chip).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900), Inter (800 and 900).\n\nTHE STYLE\n- Built for your footage: the presenter is cut out (with your clip: a centred crop in a rounded mask; with the stand-in: a real silhouette) and gets a thick white sticker outline and a soft shadow so it sits in front of the cards.\n- Articles are always invented: an invented site name in Playfair Display 900, a serif headline, grey placeholder body lines. Never mock up a real outlet, a real person's quote or a real post.\n- The key line gets a yellow (#ffd60a) marker swipe that grows left to right behind the text.\n- Cards tilt slightly (±4°) and stack with soft shadows on a pale grey-blue background (#e6eaef).\n- Reaction chips: black with yellow Inter 900 text, popping next to the head.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the reaction chip at 30 px or more, and keep your face clear of the cards. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Reacting to a (made-up) headline about laundry-folding robots\") unless my content asks for it.\n\nSOUND\n- No music by default (your clip leads).\n- Map events to the kit: cards get SND.paper; the highlight gets \"marker\"; the reaction gets \"pop\" and a short comic sting; the card swap gets a soft \"whoosh\".\n- Full mix (no voiceover): paper slides for cards, a marker for the highlight, a pop for the reaction.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Headline Backdrop\nFamily: Edit Overlay\nLook: Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.\nHow it explains: Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.\n",
+    "promptVo": "I want an animated video in the \"Headline Backdrop\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. A card slides in as you mention it, the highlighter swipes along the line while you read it, and the reaction chip pops on the punchline.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, ARTICLES (invented site name, headline lines, which line is highlighted), the reaction text and scoreSound(); load your clip with Load footage (shot against a plain background for the cut-out look). Keep and reuse the style's helpers (the pale background, invented article cards with grey body lines, the stack-and-scroll motion, the yellow marker swipe, the sticker-edge cut-out treatment of the footage, the drop shadow and the reaction chip).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900), Inter (800 and 900).\n\nTHE STYLE\n- Built for your footage: the presenter is cut out (with your clip: a centred crop in a rounded mask; with the stand-in: a real silhouette) and gets a thick white sticker outline and a soft shadow so it sits in front of the cards.\n- Articles are always invented: an invented site name in Playfair Display 900, a serif headline, grey placeholder body lines. Never mock up a real outlet, a real person's quote or a real post.\n- The key line gets a yellow (#ffd60a) marker swipe that grows left to right behind the text.\n- Cards tilt slightly (±4°) and stack with soft shadows on a pale grey-blue background (#e6eaef).\n- Reaction chips: black with yellow Inter 900 text, popping next to the head.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the reaction chip at 30 px or more, and keep your face clear of the cards. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Reacting to a (made-up) headline about laundry-folding robots\") unless my content asks for it.\n\nSOUND\n- No music by default (your clip leads).\n- Map events to the kit: cards get SND.paper; the highlight gets \"marker\"; the reaction gets \"pop\" and a short comic sting; the card swap gets a soft \"whoosh\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark everything soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Headline Backdrop\nFamily: Edit Overlay\nLook: Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.\nHow it explains: Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.\n"
+  },
+  {
+    "id": "stack-split",
+    "num": "53",
+    "name": "Stack Split",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.",
+    "how": "The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.",
+    "fonts": "Inter (800)",
+    "demo": "A storytime: \"my landlord texted me at 3am\"",
+    "replace": "TL, LINES (the caption sentences with times), the bottom loop painter (here the sand cutter) and scoreSound(); load your clip with Load footage",
+    "keep": "the two-half layout, footage() in the top half, the seamless code-drawn loop in the bottom half (period-based so it never jumps), the white seam caption bar with soft shadow, the swap animation and the story progress line",
+    "sizes": "keep captions at 34 px or more, at most two lines, and keep the seam bar between 46% and 54% of the height",
+    "voLine": "Each caption line swaps in on the first word of its sentence; the loop below never syncs to speech.",
+    "full": "- Full mix (no voiceover): a soft ASMR crunch for each slice and a quiet lo-fi bed; your clip's audio leads.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crunches very soft.",
+    "sheet": [
+      "Top half: footage() (your clip; the stand-in until loaded), cropped to fill. Bottom half: a calm, satisfying loop drawn in code that repeats on a fixed period so it never jumps (here: kinetic sand sliced by a knife).",
+      "The loop uses soft pastel layers (#ff9eb5, #ffd27a, #9be3c4, #a8c5ff, #d4a8ff, #ffb38a) on a light base, with fine grain for texture.",
+      "Caption bar: white with 14 px corners and a soft shadow, sitting over the seam, Inter 800 dark text, one sentence at a time with a quick lift-and-fade swap.",
+      "A thin progress line under the caption bar fills across the story.",
+      "Never use someone else's gameplay or footage in the bottom half; draw the loop."
+    ],
+    "sound": [
+      "Bed: a quiet lo-fi pad (your audio leads).",
+      "Map events to the kit: every knife slice gets a soft crunch (a short band-passed noise burst); falling layers get a soft thud (SND.tap low); caption swaps get a barely audible tick."
+    ],
+    "sourceFile": "sources/stack-split.html",
+    "promptFile": "prompts/stack-split.md",
+    "sourceBytes": 56306,
+    "prompt": "I want an animated video in the \"Stack Split\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, LINES (the caption sentences with times), the bottom loop painter (here the sand cutter) and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (the two-half layout, footage() in the top half, the seamless code-drawn loop in the bottom half (period-based so it never jumps), the white seam caption bar with soft shadow, the swap animation and the story progress line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800).\n\nTHE STYLE\n- Top half: footage() (your clip; the stand-in until loaded), cropped to fill. Bottom half: a calm, satisfying loop drawn in code that repeats on a fixed period so it never jumps (here: kinetic sand sliced by a knife).\n- The loop uses soft pastel layers (#ff9eb5, #ffd27a, #9be3c4, #a8c5ff, #d4a8ff, #ffb38a) on a light base, with fine grain for texture.\n- Caption bar: white with 14 px corners and a soft shadow, sitting over the seam, Inter 800 dark text, one sentence at a time with a quick lift-and-fade swap.\n- A thin progress line under the caption bar fills across the story.\n- Never use someone else's gameplay or footage in the bottom half; draw the loop.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 34 px or more, at most two lines, and keep the seam bar between 46% and 54% of the height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A storytime: \"my landlord texted me at 3am\"\") unless my content asks for it.\n\nSOUND\n- Bed: a quiet lo-fi pad (your audio leads).\n- Map events to the kit: every knife slice gets a soft crunch (a short band-passed noise burst); falling layers get a soft thud (SND.tap low); caption swaps get a barely audible tick.\n- Full mix (no voiceover): a soft ASMR crunch for each slice and a quiet lo-fi bed; your clip's audio leads.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Stack Split\nFamily: Edit Overlay\nLook: The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.\nHow it explains: The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.\n",
+    "promptVo": "I want an animated video in the \"Stack Split\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each caption line swaps in on the first word of its sentence; the loop below never syncs to speech.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, LINES (the caption sentences with times), the bottom loop painter (here the sand cutter) and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (the two-half layout, footage() in the top half, the seamless code-drawn loop in the bottom half (period-based so it never jumps), the white seam caption bar with soft shadow, the swap animation and the story progress line).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Inter (800).\n\nTHE STYLE\n- Top half: footage() (your clip; the stand-in until loaded), cropped to fill. Bottom half: a calm, satisfying loop drawn in code that repeats on a fixed period so it never jumps (here: kinetic sand sliced by a knife).\n- The loop uses soft pastel layers (#ff9eb5, #ffd27a, #9be3c4, #a8c5ff, #d4a8ff, #ffb38a) on a light base, with fine grain for texture.\n- Caption bar: white with 14 px corners and a soft shadow, sitting over the seam, Inter 800 dark text, one sentence at a time with a quick lift-and-fade swap.\n- A thin progress line under the caption bar fills across the story.\n- Never use someone else's gameplay or footage in the bottom half; draw the loop.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 34 px or more, at most two lines, and keep the seam bar between 46% and 54% of the height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A storytime: \"my landlord texted me at 3am\"\") unless my content asks for it.\n\nSOUND\n- Bed: a quiet lo-fi pad (your audio leads).\n- Map events to the kit: every knife slice gets a soft crunch (a short band-passed noise burst); falling layers get a soft thud (SND.tap low); caption swaps get a barely audible tick.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crunches very soft.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Stack Split\nFamily: Edit Overlay\nLook: The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.\nHow it explains: The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.\n"
+  },
+  {
+    "id": "sticker-pop",
+    "num": "54",
+    "name": "Sticker Pop",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.",
+    "how": "Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.",
+    "fonts": "Fredoka (600 and 700), Caveat (700)",
+    "demo": "A study-with-me vlog intro",
+    "replace": "TL, STICKERS (shape, colour, position, time), the title pill text, the note lines and the tick-list, and scoreSound(); load your clip with Load footage",
+    "keep": "footage(), the die-cut sticker painter (white border, drop shadow, pop and wobble), washi tape, the lined note with the Caveat write-on, the tick-list and the peel-off exit",
+    "sizes": "keep the title pill at 40 px or more, note handwriting at 40 px or more, and stickers at least 90 px across",
+    "voLine": "The title pill pops on the first word, each mood sticker on the word it matches, the note writes while you say it, and each tick lands on its item.",
+    "full": "- Full mix (no voiceover): a soft lo-fi bed, a squishy pop for each sticker, a tape rip for washi, pencil scratches for the note.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.",
+    "sheet": [
+      "Built for your footage: stickers sit around you, never over your face; footage() shows your clip or the stand-in.",
+      "Stickers are drawn in code with a thick white die-cut border and a soft drop shadow, in soft candy colours (pink #ff7eb6, yellow #ffd23f, mint #8de0c4, coffee #a0704a). No emoji images or brand stickers.",
+      "Motion: pop in with overshoot (back ease), then a decaying wobble; peel off by scaling down with a tilt.",
+      "Washi tape: translucent pastel strips with paler stripes at the frame corners.",
+      "Notes: off-white lined paper with Caveat handwriting that writes left to right; tick boxes fill with a hand-drawn check."
+    ],
+    "sound": [
+      "Bed: a soft lo-fi pad with a gentle beat.",
+      "Map events to the kit: stickers get a squishy pop (SND.bloop plus \"pop\"); tape gets a short rip (a rising band-passed noise); the note gets SND.scratch; ticks get \"marker\" short; peel-offs get a soft \"whoosh\"."
+    ],
+    "sourceFile": "sources/sticker-pop.html",
+    "promptFile": "prompts/sticker-pop.md",
+    "sourceBytes": 57909,
+    "prompt": "I want an animated video in the \"Sticker Pop\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, STICKERS (shape, colour, position, time), the title pill text, the note lines and the tick-list, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the die-cut sticker painter (white border, drop shadow, pop and wobble), washi tape, the lined note with the Caveat write-on, the tick-list and the peel-off exit).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (600 and 700), Caveat (700).\n\nTHE STYLE\n- Built for your footage: stickers sit around you, never over your face; footage() shows your clip or the stand-in.\n- Stickers are drawn in code with a thick white die-cut border and a soft drop shadow, in soft candy colours (pink #ff7eb6, yellow #ffd23f, mint #8de0c4, coffee #a0704a). No emoji images or brand stickers.\n- Motion: pop in with overshoot (back ease), then a decaying wobble; peel off by scaling down with a tilt.\n- Washi tape: translucent pastel strips with paler stripes at the frame corners.\n- Notes: off-white lined paper with Caveat handwriting that writes left to right; tick boxes fill with a hand-drawn check.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title pill at 40 px or more, note handwriting at 40 px or more, and stickers at least 90 px across. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A study-with-me vlog intro\") unless my content asks for it.\n\nSOUND\n- Bed: a soft lo-fi pad with a gentle beat.\n- Map events to the kit: stickers get a squishy pop (SND.bloop plus \"pop\"); tape gets a short rip (a rising band-passed noise); the note gets SND.scratch; ticks get \"marker\" short; peel-offs get a soft \"whoosh\".\n- Full mix (no voiceover): a soft lo-fi bed, a squishy pop for each sticker, a tape rip for washi, pencil scratches for the note.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Sticker Pop\nFamily: Edit Overlay\nLook: A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.\nHow it explains: Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.\n",
+    "promptVo": "I want an animated video in the \"Sticker Pop\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The title pill pops on the first word, each mood sticker on the word it matches, the note writes while you say it, and each tick lands on its item.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, STICKERS (shape, colour, position, time), the title pill text, the note lines and the tick-list, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the die-cut sticker painter (white border, drop shadow, pop and wobble), washi tape, the lined note with the Caveat write-on, the tick-list and the peel-off exit).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Fredoka (600 and 700), Caveat (700).\n\nTHE STYLE\n- Built for your footage: stickers sit around you, never over your face; footage() shows your clip or the stand-in.\n- Stickers are drawn in code with a thick white die-cut border and a soft drop shadow, in soft candy colours (pink #ff7eb6, yellow #ffd23f, mint #8de0c4, coffee #a0704a). No emoji images or brand stickers.\n- Motion: pop in with overshoot (back ease), then a decaying wobble; peel off by scaling down with a tilt.\n- Washi tape: translucent pastel strips with paler stripes at the frame corners.\n- Notes: off-white lined paper with Caveat handwriting that writes left to right; tick boxes fill with a hand-drawn check.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title pill at 40 px or more, note handwriting at 40 px or more, and stickers at least 90 px across. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A study-with-me vlog intro\") unless my content asks for it.\n\nSOUND\n- Bed: a soft lo-fi pad with a gentle beat.\n- Map events to the kit: stickers get a squishy pop (SND.bloop plus \"pop\"); tape gets a short rip (a rising band-passed noise); the note gets SND.scratch; ticks get \"marker\" short; peel-offs get a soft \"whoosh\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Sticker Pop\nFamily: Edit Overlay\nLook: A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.\nHow it explains: Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.\n"
+  },
+  {
+    "id": "glitch-pack",
+    "num": "55",
+    "name": "Glitch Pack",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a \"SYSTEM REBOOT\" terminal tag and glitch transitions that tear your footage apart and put it back together.",
+    "how": "The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.",
+    "fonts": "Anton, JetBrains Mono (700)",
+    "demo": "A tech-channel intro and transitions (\"NEW UPDATE\")",
+    "replace": "TL, the title words, HITS (glitch accents over the footage), the tags and scoreSound(); load your clip with Load footage",
+    "keep": "footage(), the RGB split title, slice displacement from the canvas itself, block noise, scanlines and vignette, the glitch transition (tear in, tear out), the intensity curve glitchAt(t) and the mono tags",
+    "sizes": "keep the title at 140 px or more, accent words at 90 px or more and tags at 22 px or more",
+    "voLine": "The title resolves on the first word, transitions hit on cuts, and each accent glitch lands on its stressed word for 0.2 to 0.4 seconds.",
+    "full": "- Full mix (no voiceover): digital stutters, bit-crushed zaps and a low sub drop on the title and transitions.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep glitch sounds short and soft: true.",
+    "sheet": [
+      "Glitch is a seasoning: intense for the intro, transitions and 2 to 4 accent words, otherwise your footage plays clean.",
+      "RGB split: draw the title three times (red #ff0040, cyan #00ffd5 with lighter blending, then white) with offsets that follow glitchAt(t).",
+      "Slices: copy horizontal bands of the canvas onto itself shifted left or right; block noise: small red, cyan and white rectangles.",
+      "Scanlines every 3 px and a dark vignette on top; a small mono tag (\"> SYSTEM REBOOT\", \"v2.0\") in a corner.",
+      "Respect photosensitivity: no full-frame white flashes faster than 3 a second."
+    ],
+    "sound": [
+      "No music bed needed; the glitches are the sound.",
+      "Map events to the kit: glitch moments get \"glitch\" plus bit-crushed square zaps; the title resolve gets \"slam\" and a low sub drop (a falling sine); transitions get \"whoosh\" with a \"glitch\"; tags get small beeps."
+    ],
+    "sourceFile": "sources/glitch-pack.html",
+    "promptFile": "prompts/glitch-pack.md",
+    "sourceBytes": 56819,
+    "prompt": "I want an animated video in the \"Glitch Pack\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the title words, HITS (glitch accents over the footage), the tags and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the RGB split title, slice displacement from the canvas itself, block noise, scanlines and vignette, the glitch transition (tear in, tear out), the intensity curve glitchAt(t) and the mono tags).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (700).\n\nTHE STYLE\n- Glitch is a seasoning: intense for the intro, transitions and 2 to 4 accent words, otherwise your footage plays clean.\n- RGB split: draw the title three times (red #ff0040, cyan #00ffd5 with lighter blending, then white) with offsets that follow glitchAt(t).\n- Slices: copy horizontal bands of the canvas onto itself shifted left or right; block noise: small red, cyan and white rectangles.\n- Scanlines every 3 px and a dark vignette on top; a small mono tag (\"> SYSTEM REBOOT\", \"v2.0\") in a corner.\n- Respect photosensitivity: no full-frame white flashes faster than 3 a second.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title at 140 px or more, accent words at 90 px or more and tags at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A tech-channel intro and transitions (\"NEW UPDATE\")\") unless my content asks for it.\n\nSOUND\n- No music bed needed; the glitches are the sound.\n- Map events to the kit: glitch moments get \"glitch\" plus bit-crushed square zaps; the title resolve gets \"slam\" and a low sub drop (a falling sine); transitions get \"whoosh\" with a \"glitch\"; tags get small beeps.\n- Full mix (no voiceover): digital stutters, bit-crushed zaps and a low sub drop on the title and transitions.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Glitch Pack\nFamily: Edit Overlay\nLook: A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a \"SYSTEM REBOOT\" terminal tag and glitch transitions that tear your footage apart and put it back together.\nHow it explains: The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.\n",
+    "promptVo": "I want an animated video in the \"Glitch Pack\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. The title resolves on the first word, transitions hit on cuts, and each accent glitch lands on its stressed word for 0.2 to 0.4 seconds.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the title words, HITS (glitch accents over the footage), the tags and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the RGB split title, slice displacement from the canvas itself, block noise, scanlines and vignette, the glitch transition (tear in, tear out), the intensity curve glitchAt(t) and the mono tags).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (700).\n\nTHE STYLE\n- Glitch is a seasoning: intense for the intro, transitions and 2 to 4 accent words, otherwise your footage plays clean.\n- RGB split: draw the title three times (red #ff0040, cyan #00ffd5 with lighter blending, then white) with offsets that follow glitchAt(t).\n- Slices: copy horizontal bands of the canvas onto itself shifted left or right; block noise: small red, cyan and white rectangles.\n- Scanlines every 3 px and a dark vignette on top; a small mono tag (\"> SYSTEM REBOOT\", \"v2.0\") in a corner.\n- Respect photosensitivity: no full-frame white flashes faster than 3 a second.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the title at 140 px or more, accent words at 90 px or more and tags at 22 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A tech-channel intro and transitions (\"NEW UPDATE\")\") unless my content asks for it.\n\nSOUND\n- No music bed needed; the glitches are the sound.\n- Map events to the kit: glitch moments get \"glitch\" plus bit-crushed square zaps; the title resolve gets \"slam\" and a low sub drop (a falling sine); transitions get \"whoosh\" with a \"glitch\"; tags get small beeps.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep glitch sounds short and soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Glitch Pack\nFamily: Edit Overlay\nLook: A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a \"SYSTEM REBOOT\" terminal tag and glitch transitions that tear your footage apart and put it back together.\nHow it explains: The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.\n"
+  },
+  {
+    "id": "doc-cinema",
+    "num": "56",
+    "name": "Doc Cinema",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.",
+    "how": "Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.",
+    "fonts": "Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500)",
+    "demo": "The last lighthouse keeper (an invented short doc)",
+    "replace": "TL, CHAPTERS (label, title lines, location and date, the still or shot used), the end card and scoreSound(); load your clip or stills with Load footage",
+    "keep": "the letterbox bars, grain and vignette, the grade pass, the Ken Burns push on every shot, the centred chapter title fade with a tracked label, the typed location stamp and the cross-dissolve between chapters",
+    "sizes": "keep chapter titles at 64 px or more, the chapter label at 20 px or more and the stamp at 20 px or more",
+    "voLine": "Each chapter title fades in during the pause before the narration starts that chapter, and the location stamp types on the first mention of the place.",
+    "full": "- Full mix (no voiceover): a slow, low drone and a soft piano note for each chapter title, plus room tone; leave plenty of silence.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone very low.",
+    "sheet": [
+      "Built for your footage or stills: footage() fills the frame behind the bars (your clip when loaded; an illustrated stand-in scene until then). Every shot gets a slow push-in of 4 to 8%.",
+      "Letterbox bars top and bottom (about 6% of the height each), heavy grain (stepped at 24 fps), a vignette and a slight warm highlight / cool shadow grade.",
+      "Chapter cards: a tracked Inter 600 label (\"CHAPTER ONE\") and a centred Instrument Serif title, the second line in italic, fading up with a slow rise; they clear before the story continues.",
+      "Location stamps: JetBrains Mono, small, bottom left, typed on.",
+      "For real stories use real places and dates; invented stories must not look like real archive footage."
+    ],
+    "sound": [
+      "Bed: a slow, low drone with room tone; long silences are part of the style.",
+      "Map events to the kit: each chapter title gets one soft piano-like note with long reverb; stamps get very soft typewriter \"keys\"; dissolves get a slow airy swell; the end card gets a low final note."
+    ],
+    "sourceFile": "sources/doc-cinema.html",
+    "promptFile": "prompts/doc-cinema.md",
+    "sourceBytes": 58066,
+    "prompt": "I want an animated video in the \"Doc Cinema\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, CHAPTERS (label, title lines, location and date, the still or shot used), the end card and scoreSound(); load your clip or stills with Load footage. Keep and reuse the style's helpers (the letterbox bars, grain and vignette, the grade pass, the Ken Burns push on every shot, the centred chapter title fade with a tracked label, the typed location stamp and the cross-dissolve between chapters).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500).\n\nTHE STYLE\n- Built for your footage or stills: footage() fills the frame behind the bars (your clip when loaded; an illustrated stand-in scene until then). Every shot gets a slow push-in of 4 to 8%.\n- Letterbox bars top and bottom (about 6% of the height each), heavy grain (stepped at 24 fps), a vignette and a slight warm highlight / cool shadow grade.\n- Chapter cards: a tracked Inter 600 label (\"CHAPTER ONE\") and a centred Instrument Serif title, the second line in italic, fading up with a slow rise; they clear before the story continues.\n- Location stamps: JetBrains Mono, small, bottom left, typed on.\n- For real stories use real places and dates; invented stories must not look like real archive footage.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep chapter titles at 64 px or more, the chapter label at 20 px or more and the stamp at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The last lighthouse keeper (an invented short doc)\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, low drone with room tone; long silences are part of the style.\n- Map events to the kit: each chapter title gets one soft piano-like note with long reverb; stamps get very soft typewriter \"keys\"; dissolves get a slow airy swell; the end card gets a low final note.\n- Full mix (no voiceover): a slow, low drone and a soft piano note for each chapter title, plus room tone; leave plenty of silence.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Doc Cinema\nFamily: Edit Overlay\nLook: Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.\nHow it explains: Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.\n",
+    "promptVo": "I want an animated video in the \"Doc Cinema\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each chapter title fades in during the pause before the narration starts that chapter, and the location stamp types on the first mention of the place.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, CHAPTERS (label, title lines, location and date, the still or shot used), the end card and scoreSound(); load your clip or stills with Load footage. Keep and reuse the style's helpers (the letterbox bars, grain and vignette, the grade pass, the Ken Burns push on every shot, the centred chapter title fade with a tracked label, the typed location stamp and the cross-dissolve between chapters).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500).\n\nTHE STYLE\n- Built for your footage or stills: footage() fills the frame behind the bars (your clip when loaded; an illustrated stand-in scene until then). Every shot gets a slow push-in of 4 to 8%.\n- Letterbox bars top and bottom (about 6% of the height each), heavy grain (stepped at 24 fps), a vignette and a slight warm highlight / cool shadow grade.\n- Chapter cards: a tracked Inter 600 label (\"CHAPTER ONE\") and a centred Instrument Serif title, the second line in italic, fading up with a slow rise; they clear before the story continues.\n- Location stamps: JetBrains Mono, small, bottom left, typed on.\n- For real stories use real places and dates; invented stories must not look like real archive footage.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep chapter titles at 64 px or more, the chapter label at 20 px or more and the stamp at 20 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The last lighthouse keeper (an invented short doc)\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, low drone with room tone; long silences are part of the style.\n- Map events to the kit: each chapter title gets one soft piano-like note with long reverb; stamps get very soft typewriter \"keys\"; dissolves get a slow airy swell; the end card gets a low final note.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Doc Cinema\nFamily: Edit Overlay\nLook: Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.\nHow it explains: Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.\n"
+  },
+  {
+    "id": "vhs-camcorder",
+    "num": "57",
+    "name": "VHS Camcorder",
+    "family": "Edit Overlay",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "footage": true,
+    "look": "A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.",
+    "how": "Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.",
+    "fonts": "VT323",
+    "demo": "A summer nostalgia edit",
+    "replace": "TL, the date, the start time, the rewind moments, and scoreSound(); load your clip with Load footage",
+    "keep": "footage() under a warm, faded grade, red and cyan chroma offsets, the rolling tracking band with tear, scanlines, the VT323 on-screen display (PLAY / REC / REW, battery, date, running time), and the rewind transition",
+    "sizes": "keep the display text at 36 px or more and inside a 40 px margin",
+    "voLine": "Rewinds happen between thoughts; the tracking band rolls in pauses, never across a key word.",
+    "full": "- Full mix (no voiceover): tape hiss, a soft motor hum, a mechanical click when REC or REW starts, and a fast warble for the rewind.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the hiss very low.",
+    "sheet": [
+      "Built for your footage: footage() under everything, then a warm faded grade (multiply warm, lift blacks), red and cyan offset copies for chroma bleed, and scanlines.",
+      "The on-screen display uses VT323 in white with a soft dark shadow: PLAY ▶ or REC ● top left, SP below, a battery icon top right, the date and a running clock bottom left.",
+      "A tracking band (white noise lines and a horizontal tear) rolls from top to bottom every few seconds; keep it out of faces for long.",
+      "Rewind: REW ◀◀ replaces PLAY, horizontal streaks and a stronger tear, the clock runs backwards, then PLAY returns.",
+      "Use a believable but clearly nostalgic date; never fake a real event's footage."
+    ],
+    "sound": [
+      "Bed: constant tape hiss (high-passed noise) and a quiet motor hum.",
+      "Map events to the kit: REC, PLAY and REW get a mechanical \"click\"; the rewind gets a fast warbling, pitch-rising noise; the tracking band gets a short crackle burst."
+    ],
+    "sourceFile": "sources/vhs-camcorder.html",
+    "promptFile": "prompts/vhs-camcorder.md",
+    "sourceBytes": 56580,
+    "prompt": "I want an animated video in the \"VHS Camcorder\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the date, the start time, the rewind moments, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage() under a warm, faded grade, red and cyan chroma offsets, the rolling tracking band with tear, scanlines, the VT323 on-screen display (PLAY / REC / REW, battery, date, running time), and the rewind transition).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: VT323.\n\nTHE STYLE\n- Built for your footage: footage() under everything, then a warm faded grade (multiply warm, lift blacks), red and cyan offset copies for chroma bleed, and scanlines.\n- The on-screen display uses VT323 in white with a soft dark shadow: PLAY ▶ or REC ● top left, SP below, a battery icon top right, the date and a running clock bottom left.\n- A tracking band (white noise lines and a horizontal tear) rolls from top to bottom every few seconds; keep it out of faces for long.\n- Rewind: REW ◀◀ replaces PLAY, horizontal streaks and a stronger tear, the clock runs backwards, then PLAY returns.\n- Use a believable but clearly nostalgic date; never fake a real event's footage.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the display text at 36 px or more and inside a 40 px margin. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A summer nostalgia edit\") unless my content asks for it.\n\nSOUND\n- Bed: constant tape hiss (high-passed noise) and a quiet motor hum.\n- Map events to the kit: REC, PLAY and REW get a mechanical \"click\"; the rewind gets a fast warbling, pitch-rising noise; the tracking band gets a short crackle burst.\n- Full mix (no voiceover): tape hiss, a soft motor hum, a mechanical click when REC or REW starts, and a fast warble for the rewind.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: VHS Camcorder\nFamily: Edit Overlay\nLook: A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.\nHow it explains: Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.\n",
+    "promptVo": "I want an animated video in the \"VHS Camcorder\" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Rewinds happen between thoughts; the tracking band rolls in pauses, never across a key word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.\n- Replace the demo's story: TL, the date, the start time, the rewind moments, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage() under a warm, faded grade, red and cyan chroma offsets, the rolling tracking band with tear, scanlines, the VT323 on-screen display (PLAY / REC / REW, battery, date, running time), and the rewind transition).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: VT323.\n\nTHE STYLE\n- Built for your footage: footage() under everything, then a warm faded grade (multiply warm, lift blacks), red and cyan offset copies for chroma bleed, and scanlines.\n- The on-screen display uses VT323 in white with a soft dark shadow: PLAY ▶ or REC ● top left, SP below, a battery icon top right, the date and a running clock bottom left.\n- A tracking band (white noise lines and a horizontal tear) rolls from top to bottom every few seconds; keep it out of faces for long.\n- Rewind: REW ◀◀ replaces PLAY, horizontal streaks and a stronger tear, the clock runs backwards, then PLAY returns.\n- Use a believable but clearly nostalgic date; never fake a real event's footage.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep the display text at 36 px or more and inside a 40 px margin. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A summer nostalgia edit\") unless my content asks for it.\n\nSOUND\n- Bed: constant tape hiss (high-passed noise) and a quiet motor hum.\n- Map events to the kit: REC, PLAY and REW get a mechanical \"click\"; the rewind gets a fast warbling, pitch-rising noise; the tracking band gets a short crackle burst.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the hiss very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: VHS Camcorder\nFamily: Edit Overlay\nLook: A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.\nHow it explains: Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.\n"
+  },
+  {
+    "id": "shadow-puppets",
+    "num": "58",
+    "name": "Shadow Puppets",
+    "family": "Character Story",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.",
+    "how": "Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.",
+    "fonts": "Cormorant Garamond (600, italic), Inter (600)",
+    "demo": "The Fox and the Crow (an Aesop fable)",
+    "replace": "TL, the puppets (crowPuppet and foxPuppet: their shapes, joints and rod points), the scenery pieces, the story LINES and the moral, and scoreSound()",
+    "keep": "the backlit screen with flame flicker and paper grain, the wooden frame and curtains, solid black silhouettes with thin rods to the bottom edge, jointed parts that rotate around pivots, the slide-in of puppets and scenery, the serif narration lines and the curtain close",
+    "sizes": "keep narration at 44 px or more, the moral at 56 px or more, and puppets at least a third of the frame height",
+    "voLine": "Each puppet slides in as it is introduced, a jaw or beak moves while that character speaks, actions (drop, catch, bow) land on their verbs, and each narration line fades in on its first word.",
+    "full": "- Full mix (no voiceover): a gentle folk melody (plucked strings), a soft crackle of flame, wooden creaks when puppets enter, and a little drum for the key action.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the melody very low and mark creaks soft: true.",
+    "sheet": [
+      "Every character and prop is a solid black silhouette (#120c08) drawn in code with clean, readable outlines and a few cut-out holes (an eye, a pattern), held by thin rods running to the bottom of the screen.",
+      "Puppets are jointed: each moving part rotates around a pivot (jaw, beak, head, wing, legs). Animate with simple, slightly stiff motion, like hands working the rods.",
+      "The screen is warm backlit paper (radial glow #ffcf8a to #c4743a) that flickers gently (a noise-driven brightness change) with a faint paper grain; a dark wooden frame and red curtains surround it.",
+      "Scenery (trees, hills, houses) is also silhouette, sliding in from the sides behind the puppets.",
+      "Type: Cormorant Garamond 600 for narration in a dark band at the bottom, italic for the moral.",
+      "Use public-domain fables and folk tales, or original stories."
+    ],
+    "sound": [
+      "Music: a gentle folk melody on plucked strings (triangle plucks) with a soft drone.",
+      "Map events to the kit: puppets entering get a wooden creak (a low filtered noise sweep) and SND.tap; talking gets soft clicks; the key action gets a small drum hit (SND.thud); the curtain gets a long soft \"whoosh\"; the moral gets an open chord. A low flame crackle runs under everything."
+    ],
+    "sourceFile": "sources/shadow-puppets.html",
+    "promptFile": "prompts/shadow-puppets.md",
+    "sourceBytes": 61912,
+    "prompt": "I want an animated video in the \"Shadow Puppets\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the puppets (crowPuppet and foxPuppet: their shapes, joints and rod points), the scenery pieces, the story LINES and the moral, and scoreSound(). Keep and reuse the style's helpers (the backlit screen with flame flicker and paper grain, the wooden frame and curtains, solid black silhouettes with thin rods to the bottom edge, jointed parts that rotate around pivots, the slide-in of puppets and scenery, the serif narration lines and the curtain close).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Cormorant Garamond (600, italic), Inter (600).\n\nTHE STYLE\n- Every character and prop is a solid black silhouette (#120c08) drawn in code with clean, readable outlines and a few cut-out holes (an eye, a pattern), held by thin rods running to the bottom of the screen.\n- Puppets are jointed: each moving part rotates around a pivot (jaw, beak, head, wing, legs). Animate with simple, slightly stiff motion, like hands working the rods.\n- The screen is warm backlit paper (radial glow #ffcf8a to #c4743a) that flickers gently (a noise-driven brightness change) with a faint paper grain; a dark wooden frame and red curtains surround it.\n- Scenery (trees, hills, houses) is also silhouette, sliding in from the sides behind the puppets.\n- Type: Cormorant Garamond 600 for narration in a dark band at the bottom, italic for the moral.\n- Use public-domain fables and folk tales, or original stories.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep narration at 44 px or more, the moral at 56 px or more, and puppets at least a third of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The Fox and the Crow (an Aesop fable)\") unless my content asks for it.\n\nSOUND\n- Music: a gentle folk melody on plucked strings (triangle plucks) with a soft drone.\n- Map events to the kit: puppets entering get a wooden creak (a low filtered noise sweep) and SND.tap; talking gets soft clicks; the key action gets a small drum hit (SND.thud); the curtain gets a long soft \"whoosh\"; the moral gets an open chord. A low flame crackle runs under everything.\n- Full mix (no voiceover): a gentle folk melody (plucked strings), a soft crackle of flame, wooden creaks when puppets enter, and a little drum for the key action.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Shadow Puppets\nFamily: Character Story\nLook: A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.\nHow it explains: Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.\n",
+    "promptVo": "I want an animated video in the \"Shadow Puppets\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each puppet slides in as it is introduced, a jaw or beak moves while that character speaks, actions (drop, catch, bow) land on their verbs, and each narration line fades in on its first word.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the puppets (crowPuppet and foxPuppet: their shapes, joints and rod points), the scenery pieces, the story LINES and the moral, and scoreSound(). Keep and reuse the style's helpers (the backlit screen with flame flicker and paper grain, the wooden frame and curtains, solid black silhouettes with thin rods to the bottom edge, jointed parts that rotate around pivots, the slide-in of puppets and scenery, the serif narration lines and the curtain close).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Cormorant Garamond (600, italic), Inter (600).\n\nTHE STYLE\n- Every character and prop is a solid black silhouette (#120c08) drawn in code with clean, readable outlines and a few cut-out holes (an eye, a pattern), held by thin rods running to the bottom of the screen.\n- Puppets are jointed: each moving part rotates around a pivot (jaw, beak, head, wing, legs). Animate with simple, slightly stiff motion, like hands working the rods.\n- The screen is warm backlit paper (radial glow #ffcf8a to #c4743a) that flickers gently (a noise-driven brightness change) with a faint paper grain; a dark wooden frame and red curtains surround it.\n- Scenery (trees, hills, houses) is also silhouette, sliding in from the sides behind the puppets.\n- Type: Cormorant Garamond 600 for narration in a dark band at the bottom, italic for the moral.\n- Use public-domain fables and folk tales, or original stories.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep narration at 44 px or more, the moral at 56 px or more, and puppets at least a third of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The Fox and the Crow (an Aesop fable)\") unless my content asks for it.\n\nSOUND\n- Music: a gentle folk melody on plucked strings (triangle plucks) with a soft drone.\n- Map events to the kit: puppets entering get a wooden creak (a low filtered noise sweep) and SND.tap; talking gets soft clicks; the key action gets a small drum hit (SND.thud); the curtain gets a long soft \"whoosh\"; the moral gets an open chord. A low flame crackle runs under everything.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the melody very low and mark creaks soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Shadow Puppets\nFamily: Character Story\nLook: A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.\nHow it explains: Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.\n"
+  },
+  {
+    "id": "visual-novel",
+    "num": "59",
+    "name": "Visual Novel",
+    "family": "Character Story",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.",
+    "how": "The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.",
+    "fonts": "M PLUS Rounded 1c (500 and 800)",
+    "demo": "Mika's first day at a new job (original character)",
+    "replace": "TL, the character design in drawMika() (hair, colours, outfit), the background painter, DIALOGUE (speaker, line, expression, effect, time), the CHOICES and scoreSound()",
+    "keep": "the blurred background layer, the bust rig (head, hair, eyes with highlights, brows, mouth shapes, blush) with expression presets, the slide-in and bounce, the effects (sweat, sparkle, shock lines), the dialogue box with name tag, typewriter and blinking arrow, and the choice menu with cursor",
+    "sizes": "keep dialogue at 34 px or more, the name tag at 30 px or more, choices at 32 px or more, and the character filling at least half the frame height",
+    "voLine": "Each line starts typing on its first spoken word and finishes as the line ends; the expression changes on the word that carries the feeling.",
+    "full": "- Full mix (no voiceover): a light, slice-of-life piano loop, soft blips while text types, a \"boing\" for shock, a sparkle for happy moments and a select chime on the choice.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the loop low and mark blips soft: true.",
+    "sheet": [
+      "One original character drawn entirely in code: a big rounded head, layered hair with a shine streak, large eyes with two white highlights, simple nose and mouth shapes, a collar and shoulders. Never draw an existing anime character.",
+      "Expressions are presets (smile, nervous, shocked, laugh, thinking) built from eyebrow angle, eye shape, mouth shape and blush; effects (sweat drop, sparkles, shock lines, a question mark) pop around the head.",
+      "The background is a soft painted scene (an office, a classroom, a street) drawn in code and blurred, with a gentle bloom.",
+      "Dialogue box: rounded, dark translucent (#1b1530 at 82%) with a soft pink border, a name tag pill (#ff8fb8), text typed at about 28 characters a second and a bouncing ▼ when done.",
+      "Choices: two stacked pill buttons in the centre; a cursor moves to one and it lights up.",
+      "Type: M PLUS Rounded 1c everywhere."
+    ],
+    "sound": [
+      "Music: a light slice-of-life loop (soft triangle piano chords and a simple melody).",
+      "Map events to the kit: typing gets soft short blips per character pair; the character entering gets a soft \"whoosh\"; shock gets a boing (bending sine); happy lines get \"sparkle\"; sweat gets a small falling tone; the choice menu gets \"pop\" and the pick gets a chime."
+    ],
+    "sourceFile": "sources/visual-novel.html",
+    "promptFile": "prompts/visual-novel.md",
+    "sourceBytes": 63200,
+    "prompt": "I want an animated video in the \"Visual Novel\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character design in drawMika() (hair, colours, outfit), the background painter, DIALOGUE (speaker, line, expression, effect, time), the CHOICES and scoreSound(). Keep and reuse the style's helpers (the blurred background layer, the bust rig (head, hair, eyes with highlights, brows, mouth shapes, blush) with expression presets, the slide-in and bounce, the effects (sweat, sparkle, shock lines), the dialogue box with name tag, typewriter and blinking arrow, and the choice menu with cursor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: M PLUS Rounded 1c (500 and 800).\n\nTHE STYLE\n- One original character drawn entirely in code: a big rounded head, layered hair with a shine streak, large eyes with two white highlights, simple nose and mouth shapes, a collar and shoulders. Never draw an existing anime character.\n- Expressions are presets (smile, nervous, shocked, laugh, thinking) built from eyebrow angle, eye shape, mouth shape and blush; effects (sweat drop, sparkles, shock lines, a question mark) pop around the head.\n- The background is a soft painted scene (an office, a classroom, a street) drawn in code and blurred, with a gentle bloom.\n- Dialogue box: rounded, dark translucent (#1b1530 at 82%) with a soft pink border, a name tag pill (#ff8fb8), text typed at about 28 characters a second and a bouncing ▼ when done.\n- Choices: two stacked pill buttons in the centre; a cursor moves to one and it lights up.\n- Type: M PLUS Rounded 1c everywhere.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep dialogue at 34 px or more, the name tag at 30 px or more, choices at 32 px or more, and the character filling at least half the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Mika's first day at a new job (original character)\") unless my content asks for it.\n\nSOUND\n- Music: a light slice-of-life loop (soft triangle piano chords and a simple melody).\n- Map events to the kit: typing gets soft short blips per character pair; the character entering gets a soft \"whoosh\"; shock gets a boing (bending sine); happy lines get \"sparkle\"; sweat gets a small falling tone; the choice menu gets \"pop\" and the pick gets a chime.\n- Full mix (no voiceover): a light, slice-of-life piano loop, soft blips while text types, a \"boing\" for shock, a sparkle for happy moments and a select chime on the choice.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Visual Novel\nFamily: Character Story\nLook: A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.\nHow it explains: The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.\n",
+    "promptVo": "I want an animated video in the \"Visual Novel\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each line starts typing on its first spoken word and finishes as the line ends; the expression changes on the word that carries the feeling.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character design in drawMika() (hair, colours, outfit), the background painter, DIALOGUE (speaker, line, expression, effect, time), the CHOICES and scoreSound(). Keep and reuse the style's helpers (the blurred background layer, the bust rig (head, hair, eyes with highlights, brows, mouth shapes, blush) with expression presets, the slide-in and bounce, the effects (sweat, sparkle, shock lines), the dialogue box with name tag, typewriter and blinking arrow, and the choice menu with cursor).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: M PLUS Rounded 1c (500 and 800).\n\nTHE STYLE\n- One original character drawn entirely in code: a big rounded head, layered hair with a shine streak, large eyes with two white highlights, simple nose and mouth shapes, a collar and shoulders. Never draw an existing anime character.\n- Expressions are presets (smile, nervous, shocked, laugh, thinking) built from eyebrow angle, eye shape, mouth shape and blush; effects (sweat drop, sparkles, shock lines, a question mark) pop around the head.\n- The background is a soft painted scene (an office, a classroom, a street) drawn in code and blurred, with a gentle bloom.\n- Dialogue box: rounded, dark translucent (#1b1530 at 82%) with a soft pink border, a name tag pill (#ff8fb8), text typed at about 28 characters a second and a bouncing ▼ when done.\n- Choices: two stacked pill buttons in the centre; a cursor moves to one and it lights up.\n- Type: M PLUS Rounded 1c everywhere.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep dialogue at 34 px or more, the name tag at 30 px or more, choices at 32 px or more, and the character filling at least half the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"Mika's first day at a new job (original character)\") unless my content asks for it.\n\nSOUND\n- Music: a light slice-of-life loop (soft triangle piano chords and a simple melody).\n- Map events to the kit: typing gets soft short blips per character pair; the character entering gets a soft \"whoosh\"; shock gets a boing (bending sine); happy lines get \"sparkle\"; sweat gets a small falling tone; the choice menu gets \"pop\" and the pick gets a chime.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the loop low and mark blips soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Visual Novel\nFamily: Character Story\nLook: A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.\nHow it explains: The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.\n"
+  },
+  {
+    "id": "rubber-hose-reel",
+    "num": "60",
+    "name": "Rubber Hose Reel",
+    "family": "Character Story",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.",
+    "how": "The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.",
+    "fonts": "Limelight, Special Elite",
+    "demo": "The cat who hated Mondays (original character)",
+    "replace": "TL, the character (drawCat: body, head shape, face), the props and set, the gag beats (ACTS and their poses), the title card text and scoreSound()",
+    "keep": "the rubber-hose limb renderer (bezier noodle limbs with white gloves and big shoes), the pie-cut eyes, the on-beat bounce (BEAT), squash and stretch, the grey painted set, film flicker, dust, scratches and gate weave, the art-deco title card and the THE END iris",
+    "sizes": "keep title cards at 70 px or more and caption cards at 36 px or more; keep the character at least 40% of the frame height",
+    "voLine": "Every bounce sits on the music beat; the takes (eyes popping, jaw drop) land on the punch words, and title cards appear in pauses.",
+    "full": "- Full mix (no voiceover): a ragtime loop (oom-pah bass, stride chords, a honky melody), slide whistle, boings, a cymbal crash for the big gag, and projector clatter underneath.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the ragtime low; keep the slide whistle and boings.",
+    "sheet": [
+      "An original character only (never Mickey, Felix, Bimbo, Cuphead or any studio character): a round body, noodle limbs drawn as thick bezier hoses with white four-finger gloves and big round shoes, and pie-cut eyes.",
+      "Everything bounces on the beat (BEAT seconds): characters, props, even the furniture squash and stretch in time.",
+      "Black, white and greys only, painted with soft gradients; on top: flicker (frame-to-frame brightness), dust specks, vertical scratches, a gentle gate weave and a strong vignette.",
+      "Title cards: an art-deco double frame with corner fans, Limelight lettering, on black.",
+      "Takes are big: eyes pop out on stalks, jaw drops, hat flies off, motion lines and impact stars.",
+      "End with a black iris closing on the character and a THE END card."
+    ],
+    "sound": [
+      "Music: a ragtime loop: oom-pah bass on 1 and 3, stride chords on 2 and 4 (square or triangle), and a simple honky melody.",
+      "Map events to the kit: jumps get a slide whistle (a rising then falling sine); bonks get a boing; the big gag gets a cymbal crash (bright noise) and \"boom\"; title cards get a projector clatter; the iris gets a short descending run."
+    ],
+    "sourceFile": "sources/rubber-hose-reel.html",
+    "promptFile": "prompts/rubber-hose-reel.md",
+    "sourceBytes": 65285,
+    "prompt": "I want an animated video in the \"Rubber Hose Reel\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character (drawCat: body, head shape, face), the props and set, the gag beats (ACTS and their poses), the title card text and scoreSound(). Keep and reuse the style's helpers (the rubber-hose limb renderer (bezier noodle limbs with white gloves and big shoes), the pie-cut eyes, the on-beat bounce (BEAT), squash and stretch, the grey painted set, film flicker, dust, scratches and gate weave, the art-deco title card and the THE END iris).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Limelight, Special Elite.\n\nTHE STYLE\n- An original character only (never Mickey, Felix, Bimbo, Cuphead or any studio character): a round body, noodle limbs drawn as thick bezier hoses with white four-finger gloves and big round shoes, and pie-cut eyes.\n- Everything bounces on the beat (BEAT seconds): characters, props, even the furniture squash and stretch in time.\n- Black, white and greys only, painted with soft gradients; on top: flicker (frame-to-frame brightness), dust specks, vertical scratches, a gentle gate weave and a strong vignette.\n- Title cards: an art-deco double frame with corner fans, Limelight lettering, on black.\n- Takes are big: eyes pop out on stalks, jaw drops, hat flies off, motion lines and impact stars.\n- End with a black iris closing on the character and a THE END card.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep title cards at 70 px or more and caption cards at 36 px or more; keep the character at least 40% of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The cat who hated Mondays (original character)\") unless my content asks for it.\n\nSOUND\n- Music: a ragtime loop: oom-pah bass on 1 and 3, stride chords on 2 and 4 (square or triangle), and a simple honky melody.\n- Map events to the kit: jumps get a slide whistle (a rising then falling sine); bonks get a boing; the big gag gets a cymbal crash (bright noise) and \"boom\"; title cards get a projector clatter; the iris gets a short descending run.\n- Full mix (no voiceover): a ragtime loop (oom-pah bass, stride chords, a honky melody), slide whistle, boings, a cymbal crash for the big gag, and projector clatter underneath.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Rubber Hose Reel\nFamily: Character Story\nLook: A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.\nHow it explains: The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.\n",
+    "promptVo": "I want an animated video in the \"Rubber Hose Reel\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Every bounce sits on the music beat; the takes (eyes popping, jaw drop) land on the punch words, and title cards appear in pauses.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character (drawCat: body, head shape, face), the props and set, the gag beats (ACTS and their poses), the title card text and scoreSound(). Keep and reuse the style's helpers (the rubber-hose limb renderer (bezier noodle limbs with white gloves and big shoes), the pie-cut eyes, the on-beat bounce (BEAT), squash and stretch, the grey painted set, film flicker, dust, scratches and gate weave, the art-deco title card and the THE END iris).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Limelight, Special Elite.\n\nTHE STYLE\n- An original character only (never Mickey, Felix, Bimbo, Cuphead or any studio character): a round body, noodle limbs drawn as thick bezier hoses with white four-finger gloves and big round shoes, and pie-cut eyes.\n- Everything bounces on the beat (BEAT seconds): characters, props, even the furniture squash and stretch in time.\n- Black, white and greys only, painted with soft gradients; on top: flicker (frame-to-frame brightness), dust specks, vertical scratches, a gentle gate weave and a strong vignette.\n- Title cards: an art-deco double frame with corner fans, Limelight lettering, on black.\n- Takes are big: eyes pop out on stalks, jaw drops, hat flies off, motion lines and impact stars.\n- End with a black iris closing on the character and a THE END card.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep title cards at 70 px or more and caption cards at 36 px or more; keep the character at least 40% of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The cat who hated Mondays (original character)\") unless my content asks for it.\n\nSOUND\n- Music: a ragtime loop: oom-pah bass on 1 and 3, stride chords on 2 and 4 (square or triangle), and a simple honky melody.\n- Map events to the kit: jumps get a slide whistle (a rising then falling sine); bonks get a boing; the big gag gets a cymbal crash (bright noise) and \"boom\"; title cards get a projector clatter; the iris gets a short descending run.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the ragtime low; keep the slide whistle and boings.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Rubber Hose Reel\nFamily: Character Story\nLook: A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.\nHow it explains: The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.\n"
+  },
+  {
+    "id": "woodcut-tale",
+    "num": "61",
+    "name": "Woodcut Tale",
+    "family": "Character Story",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "A two-colour woodcut print come to life: cream paper, bold black ink shapes with white carved hatching inside them, a red second colour slightly out of register, ink speckle and paper grain, with old-style serif captions in a carved border.",
+    "how": "Each scene is a print: the hills, sun and characters are inked shapes with carved lines, moving at a stiff 8 frames a second like a printed flipbook. Scenes change with a quick paper wipe, captions sit in a carved panel, and the moral is printed in red at the end.",
+    "fonts": "IM Fell English (regular and italic), IM Fell English SC",
+    "demo": "The Tortoise and the Hare (an Aesop fable)",
+    "replace": "TL, the characters (hare() and tortoise(): silhouettes, carve lines and walk cycles), the SCENES (landscape and staging), the captions and moral, and scoreSound()",
+    "keep": "the cream paper with speckle, black ink shapes with carve() hatching, the red layer with a small registration offset, the 8 fps stepped motion, the carved border panel for captions, the paper wipe between scenes and the IM Fell type",
+    "sizes": "keep captions at 46 px or more, the moral at 60 px or more and characters at least 20% of the frame height",
+    "voLine": "Each scene starts on the first word of its sentence, character actions (dash, sleep, wake, cross the line) land on their verbs, and the moral prints on the last line.",
+    "full": "- Full mix (no voiceover): a simple folk tune on a plucked instrument, wooden taps for steps, a fast scurry for the hare, a snore, and a fanfare at the finish.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the tune low and mark taps soft: true.",
+    "sheet": [
+      "Two inks only: black (#1a1410) and red (#b8322a) on cream paper (#efe6d2). The red layer is printed 3 px off register.",
+      "Every inked shape is solid with white carved lines inside it (carve(): parallel or contour hatching clipped to the shape), and hills and skies use bands of carved lines, like a block print.",
+      "Characters are strong silhouettes with a few carved details (fur lines, shell plates) and simple 2-pose walk or run cycles.",
+      "Motion runs on an 8 fps clock with a tiny jitter, never smooth; scenes change with a paper wipe.",
+      "Captions sit in a carved double-line border panel at the bottom in IM Fell English; the moral is printed in red small caps.",
+      "Use public-domain fables and folk tales, or original stories."
+    ],
+    "sound": [
+      "Music: a simple folk tune on a plucked string (triangle plucks) with a drone.",
+      "Map events to the kit: the tortoise's steps get soft wooden taps (SND.tap); the hare's run gets a fast scurry (quick soft ticks) and a \"whoosh\"; sleep gets a snore (a slow filtered noise swell); scene wipes get SND.paper; the finish gets a small fanfare (triangle arpeggio) and \"shimmer\"."
+    ],
+    "sourceFile": "sources/woodcut-tale.html",
+    "promptFile": "prompts/woodcut-tale.md",
+    "sourceBytes": 62005,
+    "prompt": "I want an animated video in the \"Woodcut Tale\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the characters (hare() and tortoise(): silhouettes, carve lines and walk cycles), the SCENES (landscape and staging), the captions and moral, and scoreSound(). Keep and reuse the style's helpers (the cream paper with speckle, black ink shapes with carve() hatching, the red layer with a small registration offset, the 8 fps stepped motion, the carved border panel for captions, the paper wipe between scenes and the IM Fell type).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: IM Fell English (regular and italic), IM Fell English SC.\n\nTHE STYLE\n- Two inks only: black (#1a1410) and red (#b8322a) on cream paper (#efe6d2). The red layer is printed 3 px off register.\n- Every inked shape is solid with white carved lines inside it (carve(): parallel or contour hatching clipped to the shape), and hills and skies use bands of carved lines, like a block print.\n- Characters are strong silhouettes with a few carved details (fur lines, shell plates) and simple 2-pose walk or run cycles.\n- Motion runs on an 8 fps clock with a tiny jitter, never smooth; scenes change with a paper wipe.\n- Captions sit in a carved double-line border panel at the bottom in IM Fell English; the moral is printed in red small caps.\n- Use public-domain fables and folk tales, or original stories.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 46 px or more, the moral at 60 px or more and characters at least 20% of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The Tortoise and the Hare (an Aesop fable)\") unless my content asks for it.\n\nSOUND\n- Music: a simple folk tune on a plucked string (triangle plucks) with a drone.\n- Map events to the kit: the tortoise's steps get soft wooden taps (SND.tap); the hare's run gets a fast scurry (quick soft ticks) and a \"whoosh\"; sleep gets a snore (a slow filtered noise swell); scene wipes get SND.paper; the finish gets a small fanfare (triangle arpeggio) and \"shimmer\".\n- Full mix (no voiceover): a simple folk tune on a plucked instrument, wooden taps for steps, a fast scurry for the hare, a snore, and a fanfare at the finish.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Woodcut Tale\nFamily: Character Story\nLook: A two-colour woodcut print come to life: cream paper, bold black ink shapes with white carved hatching inside them, a red second colour slightly out of register, ink speckle and paper grain, with old-style serif captions in a carved border.\nHow it explains: Each scene is a print: the hills, sun and characters are inked shapes with carved lines, moving at a stiff 8 frames a second like a printed flipbook. Scenes change with a quick paper wipe, captions sit in a carved panel, and the moral is printed in red at the end.\n",
+    "promptVo": "I want an animated video in the \"Woodcut Tale\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each scene starts on the first word of its sentence, character actions (dash, sleep, wake, cross the line) land on their verbs, and the moral prints on the last line.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the characters (hare() and tortoise(): silhouettes, carve lines and walk cycles), the SCENES (landscape and staging), the captions and moral, and scoreSound(). Keep and reuse the style's helpers (the cream paper with speckle, black ink shapes with carve() hatching, the red layer with a small registration offset, the 8 fps stepped motion, the carved border panel for captions, the paper wipe between scenes and the IM Fell type).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: IM Fell English (regular and italic), IM Fell English SC.\n\nTHE STYLE\n- Two inks only: black (#1a1410) and red (#b8322a) on cream paper (#efe6d2). The red layer is printed 3 px off register.\n- Every inked shape is solid with white carved lines inside it (carve(): parallel or contour hatching clipped to the shape), and hills and skies use bands of carved lines, like a block print.\n- Characters are strong silhouettes with a few carved details (fur lines, shell plates) and simple 2-pose walk or run cycles.\n- Motion runs on an 8 fps clock with a tiny jitter, never smooth; scenes change with a paper wipe.\n- Captions sit in a carved double-line border panel at the bottom in IM Fell English; the moral is printed in red small caps.\n- Use public-domain fables and folk tales, or original stories.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 46 px or more, the moral at 60 px or more and characters at least 20% of the frame height. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"The Tortoise and the Hare (an Aesop fable)\") unless my content asks for it.\n\nSOUND\n- Music: a simple folk tune on a plucked string (triangle plucks) with a drone.\n- Map events to the kit: the tortoise's steps get soft wooden taps (SND.tap); the hare's run gets a fast scurry (quick soft ticks) and a \"whoosh\"; sleep gets a snore (a slow filtered noise swell); scene wipes get SND.paper; the finish gets a small fanfare (triangle arpeggio) and \"shimmer\".\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the tune low and mark taps soft: true.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Woodcut Tale\nFamily: Character Story\nLook: A two-colour woodcut print come to life: cream paper, bold black ink shapes with white carved hatching inside them, a red second colour slightly out of register, ink speckle and paper grain, with old-style serif captions in a carved border.\nHow it explains: Each scene is a print: the hills, sun and characters are inked shapes with carved lines, moving at a stiff 8 frames a second like a printed flipbook. Scenes change with a quick paper wipe, captions sit in a carved panel, and the moral is printed in red at the end.\n"
+  },
+  {
+    "id": "neon-line",
+    "num": "62",
+    "name": "Neon Line",
+    "family": "Character Story",
+    "canvas": "720x1280",
+    "tall": true,
+    "lib": true,
+    "look": "Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.",
+    "how": "Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.",
+    "fonts": "Caveat (700, as neon script), JetBrains Mono (500)",
+    "demo": "A long-distance love story (original)",
+    "replace": "TL, the character paths (FIG_A and FIG_B: one continuous polyline each), their colours, the props (phones, clocks, skyline), the counter, the captions and the merge shape, and scoreSound()",
+    "keep": "the night-blue wall with faint brick lines, the neon renderer (a wide soft glow pass, a bright core and a white centre), the one-stroke draw-on, the switch-on flicker, the dashed call line, the walking motion, the line merge into a heart and the Caveat neon captions",
+    "sizes": "keep captions at 56 px or more and characters at least 30% of the frame height; line cores at 5 px or more",
+    "voLine": "Each figure draws on while it is introduced, the call line connects on \"call\" or \"talk\", the counter falls while the distance shrinks in the narration, and the merge lands on the last line.",
+    "full": "- Full mix (no voiceover): a warm, slow synth pad, a neon buzz and click when each line switches on, a soft ring for the call, and a gentle chord for the merge.",
+    "voMix": "- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz very low.",
+    "sheet": [
+      "Background: a deep night-blue wall (#070b1a) with faint brick lines and a dark vignette, like a real neon sign mounted on a wall.",
+      "Every figure is one continuous polyline (a single neon tube), drawn on by path length; render it three times: a wide blurred glow in its colour, a bright core, and a thin white centre.",
+      "Only two or three neon colours: pink (#ff4fa3), cyan (#36e1ff) and a warm yellow (#ffd36b) for small details.",
+      "Lines switch on with a short flicker (two or three off-on blinks) and buzz faintly.",
+      "Captions in Caveat as neon script in the same glow treatment; small data (distances, times) in JetBrains Mono.",
+      "Pace: each figure takes 1 to 1.5 seconds to draw; one new prop or beat every 2 seconds; hold the final merged shape about 2 seconds."
+    ],
+    "sound": [
+      "Bed: a slow, warm synth pad (padBed) with a soft pulse.",
+      "Map events to the kit: neon switch-ons get a click and a short buzz (a low square hum with a fast tremolo); the call line gets a soft ring (\"ping\"); the falling counter gets soft ticks; the merge gets \"shimmer\" and a gentle chord."
+    ],
+    "sourceFile": "sources/neon-line.html",
+    "promptFile": "prompts/neon-line.md",
+    "sourceBytes": 59275,
+    "prompt": "I want an animated video in the \"Neon Line\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nBUILD DIRECTLY\nSkip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character paths (FIG_A and FIG_B: one continuous polyline each), their colours, the props (phones, clocks, skyline), the counter, the captions and the merge shape, and scoreSound(). Keep and reuse the style's helpers (the night-blue wall with faint brick lines, the neon renderer (a wide soft glow pass, a bright core and a white centre), the one-stroke draw-on, the switch-on flicker, the dashed call line, the walking motion, the line merge into a heart and the Caveat neon captions).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Caveat (700, as neon script), JetBrains Mono (500).\n\nTHE STYLE\n- Background: a deep night-blue wall (#070b1a) with faint brick lines and a dark vignette, like a real neon sign mounted on a wall.\n- Every figure is one continuous polyline (a single neon tube), drawn on by path length; render it three times: a wide blurred glow in its colour, a bright core, and a thin white centre.\n- Only two or three neon colours: pink (#ff4fa3), cyan (#36e1ff) and a warm yellow (#ffd36b) for small details.\n- Lines switch on with a short flicker (two or three off-on blinks) and buzz faintly.\n- Captions in Caveat as neon script in the same glow treatment; small data (distances, times) in JetBrains Mono.\n- Pace: each figure takes 1 to 1.5 seconds to draw; one new prop or beat every 2 seconds; hold the final merged shape about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 56 px or more and characters at least 30% of the frame height; line cores at 5 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A long-distance love story (original)\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, warm synth pad (padBed) with a soft pulse.\n- Map events to the kit: neon switch-ons get a click and a short buzz (a low square hum with a fast tremolo); the call line gets a soft ring (\"ping\"); the falling counter gets soft ticks; the merge gets \"shimmer\" and a gentle chord.\n- Full mix (no voiceover): a warm, slow synth pad, a neon buzz and click when each line switches on, a soft ring for the call, and a gentle chord for the merge.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Neon Line\nFamily: Character Story\nLook: Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.\nHow it explains: Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.\n",
+    "promptVo": "I want an animated video in the \"Neon Line\" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.\n\nMY CONTENT\n[No topic yet. Ask me for my topic or script before building anything.]\n\nVOICEOVER TIMING\n[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]\n\nHow to use the timing:\n- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.\n- Set the duration to the last word's end plus about 1.2 seconds.\n- Build the timeline (TL) from these times. Each figure draws on while it is introduced, the call line connects on \"call\" or \"talk\", the counter falls while the distance shrinks in the narration, and the merge lands on the last line.\n- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.\n- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.\n- Keep the player's \"Load voiceover\" button working so I can drop in my audio and hear it in sync.\n\nSTORYBOARD FIRST\nBefore building, show me a storyboard and wait for my OK:\n- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.\n- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.\n- Below the grid, list any facts or numbers you had to assume.\nWhen I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.\n\nWHAT TO BUILD\nOne self-contained HTML file (an artifact if you can), built on the reference file below:\n- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.\n- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).\n- Replace the demo's story: TL, the character paths (FIG_A and FIG_B: one continuous polyline each), their colours, the props (phones, clocks, skyline), the counter, the captions and the merge shape, and scoreSound(). Keep and reuse the style's helpers (the night-blue wall with faint brick lines, the neon renderer (a wide soft glow pass, a bright core and a white centre), the one-stroke draw-on, the switch-on flicker, the dashed call line, the walking motion, the line merge into a heart and the Caveat neon captions).\n- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.\n- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.\n- Load the style's fonts before the first draw, as the reference does: Caveat (700, as neon script), JetBrains Mono (500).\n\nTHE STYLE\n- Background: a deep night-blue wall (#070b1a) with faint brick lines and a dark vignette, like a real neon sign mounted on a wall.\n- Every figure is one continuous polyline (a single neon tube), drawn on by path length; render it three times: a wide blurred glow in its colour, a bright core, and a thin white centre.\n- Only two or three neon colours: pink (#ff4fa3), cyan (#36e1ff) and a warm yellow (#ffd36b) for small details.\n- Lines switch on with a short flicker (two or three off-on blinks) and buzz faintly.\n- Captions in Caveat as neon script in the same glow treatment; small data (distances, times) in JetBrains Mono.\n- Pace: each figure takes 1 to 1.5 seconds to draw; one new prop or beat every 2 seconds; hold the final merged shape about 2 seconds.\n\nRULES THAT KEEP IT IN STYLE\n- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.\n- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.\n- It will be watched on phones: at 720x1280 keep captions at 56 px or more and characters at least 30% of the frame height; line cores at 5 px or more. Fill the frame.\n- Keep each frame fast, well under 50 ms.\n- Give my topic its own demo content; do not reuse the reference's story (\"A long-distance love story (original)\") unless my content asks for it.\n\nSOUND\n- Bed: a slow, warm synth pad (padBed) with a soft pulse.\n- Map events to the kit: neon switch-ons get a click and a short buzz (a low square hum with a fast tremolo); the call line gets a soft ring (\"ping\"); the falling counter gets soft ticks; the merge gets \"shimmer\" and a gentle chord.\n- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz very low.\n- Sync is everything: the sound score reads the same TL times as the picture.\n\nIF YOU CAN RUN CODE\nRender an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.\n\nSTYLE CARD\nName: Neon Line\nFamily: Character Story\nLook: Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.\nHow it explains: Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.\n"
+  }
+]