@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/LIBRARY.md

@@ -1,896 +0,0 @@
-# Motion Graphics Style Library (62 Styles)
-
-Complete catalog of 62 procedural motion-graphics styles in the FrameForge Motion Library.
-Each style is a full canvas animation with sound, synthesized SFX, and deterministic time-based motion.
-
-> 💡 **Visitor Pro-Tip: 100% Free Code-Based Video Generation on [Arena.ai](https://arena.ai) (Even on Mobile!)**
-> You do **not** need a paid AI IDE or expensive subscription to use these styles! Works directly in your smartphone browser:
-> 1. Pick any style below and click **Prompt** to open its prompt template.
-> 2. Open **[arena.ai](https://arena.ai)** in your mobile or desktop browser, select the free agent option (or use any other free web agent, or cheap budget agent), and paste the prompt + your topic.
-> 3. The free agent writes the standalone HTML5 animation code.
-> 4. Render into a 1080p MP4 for $0 using our single npm package:
->    ```bash
->    npx -y @amg555/frameforge-mcp frameforge-harness all --html ./animation.html --out final.mp4
->    ```
-
-## Families Summary
-
-| Family | Count | Description / Highlights |
-|---|---|---|
-| **Kinetic Type** | 3 | Creator Motion Graphics, Clean Tech, Swiss Grid... |
-| **Hand-Drawn** | 3 | Chalk Talk, Marker Board, Blueprint... |
-| **Screen and UI** | 1 | Software Walkthrough... |
-| **Data** | 6 | Data Story, Timeline Rail, Isotype... |
-| **Talking Head** | 1 | Warm Canvas... |
-| **Illustrated** | 7 | Pop Info, Paper Craft, Zine Collage... |
-| **3D** | 14 | Clay Diorama, Bio Glow, Cosmic Scale... |
-| **Retro** | 2 | Pixel Quest, Terminal... |
-| **Shorts Format** | 10 | Quiz Countdown, Top 5 Countdown, Tier List... |
-| **Edit Overlay** | 10 | Punch Captions, Karaoke Subs, Callout Kit... |
-| **Character Story** | 5 | Shadow Puppets, Visual Novel, Rubber Hose Reel... |
-
----
-
-## All 62 Styles by Family
-
-### Kinetic Type (3 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 01 | **Creator Motion Graphics** | `creator-motion` | 1280x720 | - | - | Anton, Instrument Serif (italic), Inter | [Prompt](prompts/creator-motion.md) | [HTML](sources/creator-motion.html) |
-| 03 | **Clean Tech** | `clean-tech` | 1280x720 | - | - | Inter Tight (500 to 800), JetBrains Mono (500 and 700) | [Prompt](prompts/clean-tech.md) | [HTML](sources/clean-tech.html) |
-| 34 | **Swiss Grid** | `swiss-grid` | 720x1280 | - | - | Archivo Black, Inter (500, 700 and 900) | [Prompt](prompts/swiss-grid.md) | [HTML](sources/swiss-grid.html) |
-
-<details>
-<summary><b>#01 Creator Motion Graphics</b> (`creator-motion`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Instrument Serif (italic), Inter
-- **Demo:** How to land your first client
-- **Prompt file:** `prompts/creator-motion.md`
-- **Reference code:** `sources/creator-motion.html` (63.6 KB)
-
-</details>
-
-<details>
-<summary><b>#03 Clean Tech</b> (`clean-tech`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter Tight (500 to 800), JetBrains Mono (500 and 700)
-- **Demo:** How AI agents get work done
-- **Prompt file:** `prompts/clean-tech.md`
-- **Reference code:** `sources/clean-tech.html` (46.1 KB)
-
-</details>
-
-<details>
-<summary><b>#34 Swiss Grid</b> (`swiss-grid`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (500, 700 and 900)
-- **Demo:** 73% of your brain is water
-- **Prompt file:** `prompts/swiss-grid.md`
-- **Reference code:** `sources/swiss-grid.html` (55.9 KB)
-
-</details>
-
-### Hand-Drawn (3 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 02 | **Chalk Talk** | `chalk-talk` | 1280x720 | - | - | Cabin Sketch (700), Kalam (400 and 700) | [Prompt](prompts/chalk-talk.md) | [HTML](sources/chalk-talk.html) |
-| 23 | **Marker Board** | `marker-board` | 720x1280 | - | - | Permanent Marker, Caveat (700) | [Prompt](prompts/marker-board.md) | [HTML](sources/marker-board.html) |
-| 24 | **Blueprint** | `blueprint` | 720x1280 | - | - | Space Grotesk (700), JetBrains Mono (500 and 700) | [Prompt](prompts/blueprint.md) | [HTML](sources/blueprint.html) |
-
-<details>
-<summary><b>#02 Chalk Talk</b> (`chalk-talk`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Cabin Sketch (700), Kalam (400 and 700)
-- **Demo:** Get 1% better every day
-- **Prompt file:** `prompts/chalk-talk.md`
-- **Reference code:** `sources/chalk-talk.html` (47.1 KB)
-
-</details>
-
-<details>
-<summary><b>#23 Marker Board</b> (`marker-board`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Permanent Marker, Caveat (700)
-- **Demo:** The 3-step funnel
-- **Prompt file:** `prompts/marker-board.md`
-- **Reference code:** `sources/marker-board.html` (57.2 KB)
-
-</details>
-
-<details>
-<summary><b>#24 Blueprint</b> (`blueprint`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (700), JetBrains Mono (500 and 700)
-- **Demo:** How a pin tumbler lock works
-- **Prompt file:** `prompts/blueprint.md`
-- **Reference code:** `sources/blueprint.html` (61.0 KB)
-
-</details>
-
-### Screen and UI (1 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 04 | **Software Walkthrough** | `software-walkthrough` | 1280x720 | - | - | DM Sans (400 to 700), DM Mono (400 and 500) | [Prompt](prompts/software-walkthrough.md) | [HTML](sources/software-walkthrough.html) |
-
-<details>
-<summary><b>#04 Software Walkthrough</b> (`software-walkthrough`) - Details</summary>
-
-- **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 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.
-- **Fonts:** DM Sans (400 to 700), DM Mono (400 and 500)
-- **Demo:** Your first automation in an invented app called Flowdesk
-- **Prompt file:** `prompts/software-walkthrough.md`
-- **Reference code:** `sources/software-walkthrough.html` (56.5 KB)
-
-</details>
-
-### Data (6 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 05 | **Data Story** | `data-story` | 1280x720 | - | - | Archivo (500 to 800), IBM Plex Mono (500 and 600) | [Prompt](prompts/data-story.md) | [HTML](sources/data-story.html) |
-| 28 | **Timeline Rail** | `timeline-rail` | 720x1280 | - | - | Archivo Black, Space Grotesk (700), Inter (600 and 700) | [Prompt](prompts/timeline-rail.md) | [HTML](sources/timeline-rail.html) |
-| 29 | **Isotype** | `isotype` | 720x1280 | - | - | Archivo Black, Inter (500 and 800), JetBrains Mono (700) | [Prompt](prompts/isotype.md) | [HTML](sources/isotype.html) |
-| 35 | **Math Canvas** | `math-canvas` | 720x1280 | - | - | Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700) | [Prompt](prompts/math-canvas.md) | [HTML](sources/math-canvas.html) |
-| 36 | **Tactics Board** | `tactics-board` | 720x1280 | - | - | Anton, Inter (700 to 900) | [Prompt](prompts/tactics-board.md) | [HTML](sources/tactics-board.html) |
-| 37 | **Market Tape** | `market-tape` | 720x1280 | - | - | Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700) | [Prompt](prompts/market-tape.md) | [HTML](sources/market-tape.html) |
-
-<details>
-<summary><b>#05 Data Story</b> (`data-story`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo (500 to 800), IBM Plex Mono (500 and 600)
-- **Demo:** How we got to 8 billion people (UN World Population Prospects)
-- **Prompt file:** `prompts/data-story.md`
-- **Reference code:** `sources/data-story.html` (46.9 KB)
-
-</details>
-
-<details>
-<summary><b>#28 Timeline Rail</b> (`timeline-rail`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Space Grotesk (700), Inter (600 and 700)
-- **Demo:** The phone in 150 years
-- **Prompt file:** `prompts/timeline-rail.md`
-- **Reference code:** `sources/timeline-rail.html` (57.5 KB)
-
-</details>
-
-<details>
-<summary><b>#29 Isotype</b> (`isotype`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (500 and 800), JetBrains Mono (700)
-- **Demo:** 1 in 3 US adults sleep less than 7 hours
-- **Prompt file:** `prompts/isotype.md`
-- **Reference code:** `sources/isotype.html` (55.8 KB)
-
-</details>
-
-<details>
-<summary><b>#35 Math Canvas</b> (`math-canvas`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700)
-- **Demo:** Compound interest: slow, then suddenly fast
-- **Prompt file:** `prompts/math-canvas.md`
-- **Reference code:** `sources/math-canvas.html` (58.0 KB)
-
-</details>
-
-<details>
-<summary><b>#36 Tactics Board</b> (`tactics-board`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Inter (700 to 900)
-- **Demo:** How a counter-attack works
-- **Prompt file:** `prompts/tactics-board.md`
-- **Reference code:** `sources/tactics-board.html` (58.6 KB)
-
-</details>
-
-<details>
-<summary><b>#37 Market Tape</b> (`market-tape`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700)
-- **Demo:** Why prices crash (example data, not advice)
-- **Prompt file:** `prompts/market-tape.md`
-- **Reference code:** `sources/market-tape.html` (58.1 KB)
-
-</details>
-
-### Talking Head (1 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 06 | **Warm Canvas** | `warm-canvas` | 1280x720 | - | - | Fraunces (500 to 700) and Inter (500 to 700) | [Prompt](prompts/warm-canvas.md) | [HTML](sources/warm-canvas.html) |
-
-<details>
-<summary><b>#06 Warm Canvas</b> (`warm-canvas`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Fraunces (500 to 700) and Inter (500 to 700)
-- **Demo:** Can AI really plan my week?
-- **Prompt file:** `prompts/warm-canvas.md`
-- **Reference code:** `sources/warm-canvas.html` (64.4 KB)
-
-</details>
-
-### Illustrated (7 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 07 | **Pop Info** | `pop-info` | 1280x720 | - | - | Fredoka (500 to 700) | [Prompt](prompts/pop-info.md) | [HTML](sources/pop-info.html) |
-| 22 | **Paper Craft** | `paper-craft` | 720x1280 | - | - | Fredoka (500 to 700) | [Prompt](prompts/paper-craft.md) | [HTML](sources/paper-craft.html) |
-| 25 | **Zine Collage** | `zine-collage` | 720x1280 | - | - | Anton, Archivo Black, Bangers, Playfair Display 900, Special Elite, Caveat 700 (mixed like ransom-note letters) | [Prompt](prompts/zine-collage.md) | [HTML](sources/zine-collage.html) |
-| 26 | **Comic Panels** | `comic-panels` | 720x1280 | - | - | Bangers | [Prompt](prompts/comic-panels.md) | [HTML](sources/comic-panels.html) |
-| 27 | **Parchment Map** | `parchment-map` | 720x1280 | - | - | Playfair Display (700 and 900, italic), Special Elite | [Prompt](prompts/parchment-map.md) | [HTML](sources/parchment-map.html) |
-| 30 | **Evidence Board** | `evidence-board` | 720x1280 | - | - | Special Elite, Caveat (700), Anton | [Prompt](prompts/evidence-board.md) | [HTML](sources/evidence-board.html) |
-| 31 | **Storybook** | `storybook` | 720x1280 | - | - | Playfair Display (700, italic), Inter (600) | [Prompt](prompts/storybook.md) | [HTML](sources/storybook.html) |
-
-<details>
-<summary><b>#07 Pop Info</b> (`pop-info`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Fredoka (500 to 700)
-- **Demo:** Why is the milk always at the back of the store?
-- **Prompt file:** `prompts/pop-info.md`
-- **Reference code:** `sources/pop-info.html` (47.7 KB)
-
-</details>
-
-<details>
-<summary><b>#22 Paper Craft</b> (`paper-craft`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Fredoka (500 to 700)
-- **Demo:** How bees make honey
-- **Prompt file:** `prompts/paper-craft.md`
-- **Reference code:** `sources/paper-craft.html` (60.7 KB)
-
-</details>
-
-<details>
-<summary><b>#25 Zine Collage</b> (`zine-collage`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Archivo Black, Bangers, Playfair Display 900, Special Elite, Caveat 700 (mixed like ransom-note letters)
-- **Demo:** The rise of vinyl
-- **Prompt file:** `prompts/zine-collage.md`
-- **Reference code:** `sources/zine-collage.html` (59.7 KB)
-
-</details>
-
-<details>
-<summary><b>#26 Comic Panels</b> (`comic-panels`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Bangers
-- **Demo:** The day the internet broke
-- **Prompt file:** `prompts/comic-panels.md`
-- **Reference code:** `sources/comic-panels.html` (58.9 KB)
-
-</details>
-
-<details>
-<summary><b>#27 Parchment Map</b> (`parchment-map`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Playfair Display (700 and 900, italic), Special Elite
-- **Demo:** The first trip around the world, 1519 to 1522
-- **Prompt file:** `prompts/parchment-map.md`
-- **Reference code:** `sources/parchment-map.html` (62.5 KB)
-
-</details>
-
-<details>
-<summary><b>#30 Evidence Board</b> (`evidence-board`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Special Elite, Caveat (700), Anton
-- **Demo:** The missing painting (an invented case)
-- **Prompt file:** `prompts/evidence-board.md`
-- **Reference code:** `sources/evidence-board.html` (60.1 KB)
-
-</details>
-
-<details>
-<summary><b>#31 Storybook</b> (`storybook`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Playfair Display (700, italic), Inter (600)
-- **Demo:** The fox who counted stars (a bedtime fable)
-- **Prompt file:** `prompts/storybook.md`
-- **Reference code:** `sources/storybook.html` (58.7 KB)
-
-</details>
-
-### 3D (14 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 08 | **Clay Diorama** | `clay-diorama` | 720x1280 | ✓ | - | Fredoka (500 to 700), JetBrains Mono (700) | [Prompt](prompts/clay-diorama.md) | [HTML](sources/clay-diorama.html) |
-| 09 | **Bio Glow** | `bio-glow` | 720x1280 | ✓ | - | Space Grotesk (500 and 700), JetBrains Mono (500 and 700) | [Prompt](prompts/bio-glow.md) | [HTML](sources/bio-glow.html) |
-| 10 | **Cosmic Scale** | `cosmic-scale` | 720x1280 | ✓ | - | Space Grotesk (500 and 700), JetBrains Mono (500 and 700) | [Prompt](prompts/cosmic-scale.md) | [HTML](sources/cosmic-scale.html) |
-| 11 | **Exploded View** | `exploded-view` | 720x1280 | ✓ | - | Space Grotesk (500 and 700), JetBrains Mono (500 and 700) | [Prompt](prompts/exploded-view.md) | [HTML](sources/exploded-view.html) |
-| 12 | **Low-Poly Atlas** | `low-poly-atlas` | 720x1280 | ✓ | - | Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700) | [Prompt](prompts/low-poly-atlas.md) | [HTML](sources/low-poly-atlas.html) |
-| 13 | **Size Lineup** | `size-lineup` | 720x1280 | ✓ | - | Archivo Black, JetBrains Mono (500 and 700) | [Prompt](prompts/size-lineup.md) | [HTML](sources/size-lineup.html) |
-| 14 | **Data City** | `data-city` | 720x1280 | ✓ | - | Space Grotesk (500 and 700), JetBrains Mono (700) | [Prompt](prompts/data-city.md) | [HTML](sources/data-city.html) |
-| 15 | **Glass Icons** | `glass-icons` | 720x1280 | ✓ | - | Inter (500 to 900), JetBrains Mono (700) | [Prompt](prompts/glass-icons.md) | [HTML](sources/glass-icons.html) |
-| 16 | **Iso Cutaway** | `iso-cutaway` | 720x1280 | ✓ | - | Bricolage Grotesque (600 and 800), JetBrains Mono (700) | [Prompt](prompts/iso-cutaway.md) | [HTML](sources/iso-cutaway.html) |
-| 17 | **Globe Arcs** | `globe-arcs` | 720x1280 | ✓ | - | Space Grotesk (500 and 700), JetBrains Mono (700) | [Prompt](prompts/globe-arcs.md) | [HTML](sources/globe-arcs.html) |
-| 18 | **Physics Toybox** | `physics-toybox` | 720x1280 | ✓ | - | Archivo Black, Inter (700 and 800), JetBrains Mono (700) | [Prompt](prompts/physics-toybox.md) | [HTML](sources/physics-toybox.html) |
-| 19 | **Deep Layers** | `deep-layers` | 720x1280 | ✓ | - | Anton, JetBrains Mono (500 and 700) | [Prompt](prompts/deep-layers.md) | [HTML](sources/deep-layers.html) |
-| 20 | **Synth Grid** | `synth-grid` | 720x1280 | ✓ | - | Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700) | [Prompt](prompts/synth-grid.md) | [HTML](sources/synth-grid.html) |
-| 21 | **Product Turntable** | `product-turntable` | 720x1280 | ✓ | - | Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500) | [Prompt](prompts/product-turntable.md) | [HTML](sources/product-turntable.html) |
-
-<details>
-<summary><b>#08 Clay Diorama</b> (`clay-diorama`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Fredoka (500 to 700), JetBrains Mono (700)
-- **Demo:** How a volcano erupts
-- **Prompt file:** `prompts/clay-diorama.md`
-- **Reference code:** `sources/clay-diorama.html` (64.9 KB)
-
-</details>
-
-<details>
-<summary><b>#09 Bio Glow</b> (`bio-glow`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
-- **Demo:** Your blood in 60 seconds
-- **Prompt file:** `prompts/bio-glow.md`
-- **Reference code:** `sources/bio-glow.html` (61.2 KB)
-
-</details>
-
-<details>
-<summary><b>#10 Cosmic Scale</b> (`cosmic-scale`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
-- **Demo:** How big is the Sun?
-- **Prompt file:** `prompts/cosmic-scale.md`
-- **Reference code:** `sources/cosmic-scale.html` (60.8 KB)
-
-</details>
-
-<details>
-<summary><b>#11 Exploded View</b> (`exploded-view`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
-- **Demo:** What's inside a phone
-- **Prompt file:** `prompts/exploded-view.md`
-- **Reference code:** `sources/exploded-view.html` (58.2 KB)
-
-</details>
-
-<details>
-<summary><b>#12 Low-Poly Atlas</b> (`low-poly-atlas`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700)
-- **Demo:** Why Rome built roads
-- **Prompt file:** `prompts/low-poly-atlas.md`
-- **Reference code:** `sources/low-poly-atlas.html` (60.9 KB)
-
-</details>
-
-<details>
-<summary><b>#13 Size Lineup</b> (`size-lineup`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, JetBrains Mono (500 and 700)
-- **Demo:** How big is a blue whale?
-- **Prompt file:** `prompts/size-lineup.md`
-- **Reference code:** `sources/size-lineup.html` (58.7 KB)
-
-</details>
-
-<details>
-<summary><b>#14 Data City</b> (`data-city`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (700)
-- **Demo:** Hours online per day, 2018 to 2024 (example data)
-- **Prompt file:** `prompts/data-city.md`
-- **Reference code:** `sources/data-city.html` (58.4 KB)
-
-</details>
-
-<details>
-<summary><b>#15 Glass Icons</b> (`glass-icons`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (500 to 900), JetBrains Mono (700)
-- **Demo:** 5 AI tools that save hours (tool types, not brands)
-- **Prompt file:** `prompts/glass-icons.md`
-- **Reference code:** `sources/glass-icons.html` (58.3 KB)
-
-</details>
-
-<details>
-<summary><b>#16 Iso Cutaway</b> (`iso-cutaway`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Bricolage Grotesque (600 and 800), JetBrains Mono (700)
-- **Demo:** A day inside a bakery
-- **Prompt file:** `prompts/iso-cutaway.md`
-- **Reference code:** `sources/iso-cutaway.html` (60.0 KB)
-
-</details>
-
-<details>
-<summary><b>#17 Globe Arcs</b> (`globe-arcs`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (700)
-- **Demo:** Where your coffee travels
-- **Prompt file:** `prompts/globe-arcs.md`
-- **Reference code:** `sources/globe-arcs.html` (60.2 KB)
-
-</details>
-
-<details>
-<summary><b>#18 Physics Toybox</b> (`physics-toybox`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (700 and 800), JetBrains Mono (700)
-- **Demo:** What if you tip a chain of growing dominoes?
-- **Prompt file:** `prompts/physics-toybox.md`
-- **Reference code:** `sources/physics-toybox.html` (58.6 KB)
-
-</details>
-
-<details>
-<summary><b>#19 Deep Layers</b> (`deep-layers`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, JetBrains Mono (500 and 700)
-- **Demo:** How deep have we dug?
-- **Prompt file:** `prompts/deep-layers.md`
-- **Reference code:** `sources/deep-layers.html` (59.3 KB)
-
-</details>
-
-<details>
-<summary><b>#20 Synth Grid</b> (`synth-grid`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700)
-- **Demo:** The future of gaming: 3 trends
-- **Prompt file:** `prompts/synth-grid.md`
-- **Reference code:** `sources/synth-grid.html` (58.1 KB)
-
-</details>
-
-<details>
-<summary><b>#21 Product Turntable</b> (`product-turntable`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500)
-- **Demo:** Meet Luma (an invented skincare bottle)
-- **Prompt file:** `prompts/product-turntable.md`
-- **Reference code:** `sources/product-turntable.html` (58.1 KB)
-
-</details>
-
-### Retro (2 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 32 | **Pixel Quest** | `pixel-quest` | 720x1280 | - | - | Press Start 2P | [Prompt](prompts/pixel-quest.md) | [HTML](sources/pixel-quest.html) |
-| 33 | **Terminal** | `terminal` | 720x1280 | - | - | JetBrains Mono (500 and 700) | [Prompt](prompts/terminal.md) | [HTML](sources/terminal.html) |
-
-<details>
-<summary><b>#32 Pixel Quest</b> (`pixel-quest`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Press Start 2P
-- **Demo:** Level up your sleep
-- **Prompt file:** `prompts/pixel-quest.md`
-- **Reference code:** `sources/pixel-quest.html` (59.5 KB)
-
-</details>
-
-<details>
-<summary><b>#33 Terminal</b> (`terminal`) - Details</summary>
-
-- **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 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.
-- **Fonts:** JetBrains Mono (500 and 700)
-- **Demo:** Why 'password123' fails in 0.02 seconds
-- **Prompt file:** `prompts/terminal.md`
-- **Reference code:** `sources/terminal.html` (55.9 KB)
-
-</details>
-
-### Shorts Format (10 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 38 | **Quiz Countdown** | `quiz-countdown` | 720x1280 | - | - | Archivo Black, Inter (700 to 900), JetBrains Mono (700) | [Prompt](prompts/quiz-countdown.md) | [HTML](sources/quiz-countdown.html) |
-| 39 | **Top 5 Countdown** | `top-5-countdown` | 720x1280 | - | - | Anton, Inter (800), JetBrains Mono (700) | [Prompt](prompts/top-5-countdown.md) | [HTML](sources/top-5-countdown.html) |
-| 40 | **Tier List** | `tier-list` | 720x1280 | - | - | Archivo Black, Inter (700 and 800) | [Prompt](prompts/tier-list.md) | [HTML](sources/tier-list.html) |
-| 41 | **Chat Story** | `chat-story` | 720x1280 | - | - | Inter (500 to 800), JetBrains Mono (700) | [Prompt](prompts/chat-story.md) | [HTML](sources/chat-story.html) |
-| 42 | **Versus Split** | `versus-split` | 720x1280 | - | - | Anton, Inter (700 to 900) | [Prompt](prompts/versus-split.md) | [HTML](sources/versus-split.html) |
-| 43 | **Myth or Fact** | `myth-or-fact` | 720x1280 | - | - | Archivo Black, Inter (600 to 800), Anton (stamps) | [Prompt](prompts/myth-or-fact.md) | [HTML](sources/myth-or-fact.html) |
-| 44 | **Recipe Steps** | `recipe-steps` | 720x1280 | - | - | Inter (700 to 900), JetBrains Mono (700) | [Prompt](prompts/recipe-steps.md) | [HTML](sources/recipe-steps.html) |
-| 45 | **Quote Cinema** | `quote-cinema` | 720x1280 | - | - | Instrument Serif (regular and italic), Inter (600) | [Prompt](prompts/quote-cinema.md) | [HTML](sources/quote-cinema.html) |
-| 46 | **Breaking Desk** | `breaking-desk` | 720x1280 | - | ✓ | Archivo Black, Inter (700 to 900), JetBrains Mono (600) | [Prompt](prompts/breaking-desk.md) | [HTML](sources/breaking-desk.html) |
-| 47 | **Podcast Clip** | `podcast-clip` | 720x1280 | - | ✓ | Inter (800 and 900), JetBrains Mono (800) | [Prompt](prompts/podcast-clip.md) | [HTML](sources/podcast-clip.html) |
-
-<details>
-<summary><b>#38 Quiz Countdown</b> (`quiz-countdown`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (700 to 900), JetBrains Mono (700)
-- **Demo:** Which planet has the most moons?
-- **Prompt file:** `prompts/quiz-countdown.md`
-- **Reference code:** `sources/quiz-countdown.html` (57.3 KB)
-
-</details>
-
-<details>
-<summary><b>#39 Top 5 Countdown</b> (`top-5-countdown`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Inter (800), JetBrains Mono (700)
-- **Demo:** The 3 highest mountains on Earth
-- **Prompt file:** `prompts/top-5-countdown.md`
-- **Reference code:** `sources/top-5-countdown.html` (56.3 KB)
-
-</details>
-
-<details>
-<summary><b>#40 Tier List</b> (`tier-list`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (700 and 800)
-- **Demo:** My fruit tier list
-- **Prompt file:** `prompts/tier-list.md`
-- **Reference code:** `sources/tier-list.html` (57.6 KB)
-
-</details>
-
-<details>
-<summary><b>#41 Chat Story</b> (`chat-story`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (500 to 800), JetBrains Mono (700)
-- **Demo:** Who ate my leftover pizza? (a fictional chat)
-- **Prompt file:** `prompts/chat-story.md`
-- **Reference code:** `sources/chat-story.html` (57.3 KB)
-
-</details>
-
-<details>
-<summary><b>#42 Versus Split</b> (`versus-split`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Inter (700 to 900)
-- **Demo:** Cat vs dog
-- **Prompt file:** `prompts/versus-split.md`
-- **Reference code:** `sources/versus-split.html` (57.5 KB)
-
-</details>
-
-<details>
-<summary><b>#43 Myth or Fact</b> (`myth-or-fact`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (600 to 800), Anton (stamps)
-- **Demo:** Two body myths and facts
-- **Prompt file:** `prompts/myth-or-fact.md`
-- **Reference code:** `sources/myth-or-fact.html` (56.5 KB)
-
-</details>
-
-<details>
-<summary><b>#44 Recipe Steps</b> (`recipe-steps`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (700 to 900), JetBrains Mono (700)
-- **Demo:** A 3-minute omelette
-- **Prompt file:** `prompts/recipe-steps.md`
-- **Reference code:** `sources/recipe-steps.html` (60.1 KB)
-
-</details>
-
-<details>
-<summary><b>#45 Quote Cinema</b> (`quote-cinema`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Instrument Serif (regular and italic), Inter (600)
-- **Demo:** "The best time to plant a tree was 20 years ago."
-- **Prompt file:** `prompts/quote-cinema.md`
-- **Reference code:** `sources/quote-cinema.html` (54.2 KB)
-
-</details>
-
-<details>
-<summary><b>#46 Breaking Desk</b> (`breaking-desk`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Archivo Black, Inter (700 to 900), JetBrains Mono (600)
-- **Demo:** Weekly AI news recap
-- **Prompt file:** `prompts/breaking-desk.md`
-- **Reference code:** `sources/breaking-desk.html` (57.2 KB)
-
-</details>
-
-<details>
-<summary><b>#47 Podcast Clip</b> (`podcast-clip`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (800 and 900), JetBrains Mono (800)
-- **Demo:** A clip from an invented show, "The Side Project Show"
-- **Prompt file:** `prompts/podcast-clip.md`
-- **Reference code:** `sources/podcast-clip.html` (55.5 KB)
-
-</details>
-
-### Edit Overlay (10 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 48 | **Punch Captions** | `punch-captions` | 720x1280 | - | ✓ | Anton, Inter (800) | [Prompt](prompts/punch-captions.md) | [HTML](sources/punch-captions.html) |
-| 49 | **Karaoke Subs** | `karaoke-subs` | 720x1280 | - | ✓ | Inter (800) | [Prompt](prompts/karaoke-subs.md) | [HTML](sources/karaoke-subs.html) |
-| 50 | **Callout Kit** | `callout-kit` | 720x1280 | - | ✓ | Permanent Marker, JetBrains Mono (700), Inter (800) | [Prompt](prompts/callout-kit.md) | [HTML](sources/callout-kit.html) |
-| 51 | **Lower Thirds** | `lower-thirds` | 720x1280 | - | ✓ | Instrument Serif, Inter (500 to 900) | [Prompt](prompts/lower-thirds.md) | [HTML](sources/lower-thirds.html) |
-| 52 | **Headline Backdrop** | `headline-backdrop` | 720x1280 | - | ✓ | Playfair Display (700 and 900), Inter (800 and 900) | [Prompt](prompts/headline-backdrop.md) | [HTML](sources/headline-backdrop.html) |
-| 53 | **Stack Split** | `stack-split` | 720x1280 | - | ✓ | Inter (800) | [Prompt](prompts/stack-split.md) | [HTML](sources/stack-split.html) |
-| 54 | **Sticker Pop** | `sticker-pop` | 720x1280 | - | ✓ | Fredoka (600 and 700), Caveat (700) | [Prompt](prompts/sticker-pop.md) | [HTML](sources/sticker-pop.html) |
-| 55 | **Glitch Pack** | `glitch-pack` | 720x1280 | - | ✓ | Anton, JetBrains Mono (700) | [Prompt](prompts/glitch-pack.md) | [HTML](sources/glitch-pack.html) |
-| 56 | **Doc Cinema** | `doc-cinema` | 720x1280 | - | ✓ | Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500) | [Prompt](prompts/doc-cinema.md) | [HTML](sources/doc-cinema.html) |
-| 57 | **VHS Camcorder** | `vhs-camcorder` | 720x1280 | - | ✓ | VT323 | [Prompt](prompts/vhs-camcorder.md) | [HTML](sources/vhs-camcorder.html) |
-
-<details>
-<summary><b>#48 Punch Captions</b> (`punch-captions`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, Inter (800)
-- **Demo:** A talking-head hook: "This one habit changed everything"
-- **Prompt file:** `prompts/punch-captions.md`
-- **Reference code:** `sources/punch-captions.html` (55.4 KB)
-
-</details>
-
-<details>
-<summary><b>#49 Karaoke Subs</b> (`karaoke-subs`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (800)
-- **Demo:** A morning-routine talking clip
-- **Prompt file:** `prompts/karaoke-subs.md`
-- **Reference code:** `sources/karaoke-subs.html` (54.0 KB)
-
-</details>
-
-<details>
-<summary><b>#50 Callout Kit</b> (`callout-kit`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Permanent Marker, JetBrains Mono (700), Inter (800)
-- **Demo:** Pointing out an app on your phone in a review
-- **Prompt file:** `prompts/callout-kit.md`
-- **Reference code:** `sources/callout-kit.html` (56.8 KB)
-
-</details>
-
-<details>
-<summary><b>#51 Lower Thirds</b> (`lower-thirds`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Instrument Serif, Inter (500 to 900)
-- **Demo:** An interview intro with a guest name, a chapter and a subscribe nudge
-- **Prompt file:** `prompts/lower-thirds.md`
-- **Reference code:** `sources/lower-thirds.html` (56.0 KB)
-
-</details>
-
-<details>
-<summary><b>#52 Headline Backdrop</b> (`headline-backdrop`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Playfair Display (700 and 900), Inter (800 and 900)
-- **Demo:** Reacting to a (made-up) headline about laundry-folding robots
-- **Prompt file:** `prompts/headline-backdrop.md`
-- **Reference code:** `sources/headline-backdrop.html` (55.5 KB)
-
-</details>
-
-<details>
-<summary><b>#53 Stack Split</b> (`stack-split`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Inter (800)
-- **Demo:** A storytime: "my landlord texted me at 3am"
-- **Prompt file:** `prompts/stack-split.md`
-- **Reference code:** `sources/stack-split.html` (55.0 KB)
-
-</details>
-
-<details>
-<summary><b>#54 Sticker Pop</b> (`sticker-pop`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Fredoka (600 and 700), Caveat (700)
-- **Demo:** A study-with-me vlog intro
-- **Prompt file:** `prompts/sticker-pop.md`
-- **Reference code:** `sources/sticker-pop.html` (56.6 KB)
-
-</details>
-
-<details>
-<summary><b>#55 Glitch Pack</b> (`glitch-pack`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Anton, JetBrains Mono (700)
-- **Demo:** A tech-channel intro and transitions ("NEW UPDATE")
-- **Prompt file:** `prompts/glitch-pack.md`
-- **Reference code:** `sources/glitch-pack.html` (55.5 KB)
-
-</details>
-
-<details>
-<summary><b>#56 Doc Cinema</b> (`doc-cinema`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500)
-- **Demo:** The last lighthouse keeper (an invented short doc)
-- **Prompt file:** `prompts/doc-cinema.md`
-- **Reference code:** `sources/doc-cinema.html` (56.7 KB)
-
-</details>
-
-<details>
-<summary><b>#57 VHS Camcorder</b> (`vhs-camcorder`) - Details</summary>
-
-- **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 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.
-- **Fonts:** VT323
-- **Demo:** A summer nostalgia edit
-- **Prompt file:** `prompts/vhs-camcorder.md`
-- **Reference code:** `sources/vhs-camcorder.html` (55.3 KB)
-
-</details>
-
-### Character Story (5 styles)
-
-| # | Name | ID | Canvas | 3D | Overlay | Fonts | Prompt File | Source Code |
-|---|------|----|--------|----|---------|-------|-------------|-------------|
-| 58 | **Shadow Puppets** | `shadow-puppets` | 720x1280 | - | - | Cormorant Garamond (600, italic), Inter (600) | [Prompt](prompts/shadow-puppets.md) | [HTML](sources/shadow-puppets.html) |
-| 59 | **Visual Novel** | `visual-novel` | 720x1280 | - | - | M PLUS Rounded 1c (500 and 800) | [Prompt](prompts/visual-novel.md) | [HTML](sources/visual-novel.html) |
-| 60 | **Rubber Hose Reel** | `rubber-hose-reel` | 720x1280 | - | - | Limelight, Special Elite | [Prompt](prompts/rubber-hose-reel.md) | [HTML](sources/rubber-hose-reel.html) |
-| 61 | **Woodcut Tale** | `woodcut-tale` | 720x1280 | - | - | IM Fell English (regular and italic), IM Fell English SC | [Prompt](prompts/woodcut-tale.md) | [HTML](sources/woodcut-tale.html) |
-| 62 | **Neon Line** | `neon-line` | 720x1280 | - | - | Caveat (700, as neon script), JetBrains Mono (500) | [Prompt](prompts/neon-line.md) | [HTML](sources/neon-line.html) |
-
-<details>
-<summary><b>#58 Shadow Puppets</b> (`shadow-puppets`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Cormorant Garamond (600, italic), Inter (600)
-- **Demo:** The Fox and the Crow (an Aesop fable)
-- **Prompt file:** `prompts/shadow-puppets.md`
-- **Reference code:** `sources/shadow-puppets.html` (60.5 KB)
-
-</details>
-
-<details>
-<summary><b>#59 Visual Novel</b> (`visual-novel`) - Details</summary>
-
-- **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 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.
-- **Fonts:** M PLUS Rounded 1c (500 and 800)
-- **Demo:** Mika's first day at a new job (original character)
-- **Prompt file:** `prompts/visual-novel.md`
-- **Reference code:** `sources/visual-novel.html` (61.7 KB)
-
-</details>
-
-<details>
-<summary><b>#60 Rubber Hose Reel</b> (`rubber-hose-reel`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Limelight, Special Elite
-- **Demo:** The cat who hated Mondays (original character)
-- **Prompt file:** `prompts/rubber-hose-reel.md`
-- **Reference code:** `sources/rubber-hose-reel.html` (63.8 KB)
-
-</details>
-
-<details>
-<summary><b>#61 Woodcut Tale</b> (`woodcut-tale`) - Details</summary>
-
-- **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 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.
-- **Fonts:** IM Fell English (regular and italic), IM Fell English SC
-- **Demo:** The Tortoise and the Hare (an Aesop fable)
-- **Prompt file:** `prompts/woodcut-tale.md`
-- **Reference code:** `sources/woodcut-tale.html` (60.6 KB)
-
-</details>
-
-<details>
-<summary><b>#62 Neon Line</b> (`neon-line`) - Details</summary>
-
-- **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 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.
-- **Fonts:** Caveat (700, as neon script), JetBrains Mono (500)
-- **Demo:** A long-distance love story (original)
-- **Prompt file:** `prompts/neon-line.md`
-- **Reference code:** `sources/neon-line.html` (57.9 KB)
-
-</details>
-