@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/terminal.md

@@ -0,0 +1,145 @@
+# Motion graphics style #33: Terminal
+
+- **ID:** `terminal`
+- **Family:** Retro
+- **Canvas:** `720x1280`
+- **Fonts:** JetBrains Mono (500 and 700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+Why 'password123' fails in 0.02 seconds
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: JetBrains Mono (500 and 700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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.
+- 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.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Terminal
+Family: Retro
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[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.]
+
+How to use the timing:
+- 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.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- 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.
+- 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.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- 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.
+- 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.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: JetBrains Mono (500 and 700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep keys soft: true and the hum very low.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Terminal
+Family: Retro
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/terminal.html` (55.9 KB)

package/plugins/motion-styles/prompts/tier-list.md

@@ -0,0 +1,143 @@
+# Motion graphics style #40: Tier List
+
+- **ID:** `tier-list`
+- **Family:** Shorts Format
+- **Canvas:** `720x1280`
+- **Fonts:** Archivo Black, Inter (700 and 800)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+My fruit tier list
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("My fruit tier list") unless my content asks for it.
+
+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.
+- 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.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Tier List
+Family: Shorts Format
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[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.]
+
+How to use the timing:
+- 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.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- 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.
+- 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.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- 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.
+- 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.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("My fruit tier list") unless my content asks for it.
+
+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.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pops soft: true and keep the drum roll short.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Tier List
+Family: Shorts Format
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/tier-list.html` (57.6 KB)

package/plugins/motion-styles/prompts/timeline-rail.md

@@ -0,0 +1,145 @@
+# Motion graphics style #28: Timeline Rail
+
+- **ID:** `timeline-rail`
+- **Family:** Data
+- **Canvas:** `720x1280`
+- **Fonts:** Archivo Black, Space Grotesk (700), Inter (600 and 700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+The phone in 150 years
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Archivo Black, Space Grotesk (700), Inter (600 and 700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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.
+- Full mix (no voiceover): a ticking pad, a soft whoosh for each scroll, a tick for the odometer and a chime per card.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Timeline Rail
+Family: Data
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[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.]
+
+How to use the timing:
+- 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.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- 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.
+- 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.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- 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.
+- 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.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Archivo Black, Space Grotesk (700), Inter (600 and 700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and chimes soft: true.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Timeline Rail
+Family: Data
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/timeline-rail.html` (57.5 KB)

package/plugins/motion-styles/prompts/top-5-countdown.md

@@ -0,0 +1,145 @@
+# Motion graphics style #39: Top 5 Countdown
+
+- **ID:** `top-5-countdown`
+- **Family:** Shorts Format
+- **Canvas:** `720x1280`
+- **Fonts:** Anton, Inter (800), JetBrains Mono (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+The 3 highest mountains on Earth
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800), JetBrains Mono (700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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".
+- Full mix (no voiceover): a driving pulse, a riser into each rank, "slam" on each number and a "boom" for number one.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Top 5 Countdown
+Family: Shorts Format
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+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.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[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.]
+
+How to use the timing:
+- 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.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- 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.
+- 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.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- 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.
+- 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.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- 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.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- 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).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800), JetBrains Mono (700).
+
+THE STYLE
+- 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.
+
+RULES THAT KEEP IT IN STYLE
+- 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.
+- 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.
+- 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.
+- Keep each frame fast, well under 50 ms.
+- 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.
+
+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".
+- 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.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render 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.
+
+STYLE CARD
+Name: Top 5 Countdown
+Family: Shorts Format
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/top-5-countdown.html` (56.3 KB)