@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/low-poly-atlas.md

@@ -0,0 +1,149 @@
+# Motion graphics style #12: Low-Poly Atlas
+
+- **ID:** `low-poly-atlas`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+Why Rome built roads
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Low-Poly Atlas" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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).
+- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
+- Replace the demo's story: TL, hgt() (the shape of the land), ROADS (from and to, in order), the city props, the arrow timing, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the flat-shaded vertex-coloured terrain built from hgt(), the water plane, growing tubes with setDrawRange(), the arrow that follows a curve, the drifting camera, proj3() labels, chip() and wordLine()).
+- 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: Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700).
+
+THE STYLE
+- The land is one flat-shaded plane displaced by hgt(x, z) and coloured per face by height (sand, grass, forest, rock, snow). Shape the land for the topic (coasts, a peninsula, a river valley) but keep it stylised, never a traced real map.
+- Light: low warm sunset key (#ffcf99) from one side, warm fog, peach sky (#f2b07a). Water is a single slightly transparent blue plane.
+- Routes are tubes along Catmull-Rom curves that hug the terrain and grow with setDrawRange. Campaign arrows are red (#c4302b) extrusions that follow a route.
+- Type: Playfair Display 900 headline at the top over a warm fade, the second line italic. JetBrains Mono for dates and place chips (dark brown #2a1a10 on cream).
+- Use real dates, places and distances, and say "about" for estimates.
+- Camera: one slow drift and orbit over the land, no cuts; let the routes do the storytelling.
+- Pace: the title holds about 2 seconds, each route takes 1.5 to 2.5 seconds to draw, and the takeaway holds about 2 seconds.
+
+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 headlines at 64 px or more, place names at 22 px or more and the counter at 80 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 Rome built roads") unless my content asks for it.
+
+SOUND
+- Bed: low, slow drums (deep thumps with a short noise tail) and a warm pad; horn-like chords (filtered sawtooth) for the title and the end.
+- Map events to the kit: a route drawing gets a soft scratching quill (SND.scratch); the marching arrow gets steady soft steps; chips get a soft tick; the counter "tick"s when the shown number changes; the final line gets the horn chord.
+- Full mix (no voiceover): keep the low drums and the horn chords, at most about 3 sounds at once, and a short gap before the counter locks.
+- 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: Low-Poly Atlas
+Family: 3D
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Low-Poly Atlas" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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. A route starts drawing as it is mentioned and reaches its end on the destination word, the arrow moves while the march is described, a date chip lands on the date, and the counter locks on its last spoken syllable.
+- 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).
+- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
+- Replace the demo's story: TL, hgt() (the shape of the land), ROADS (from and to, in order), the city props, the arrow timing, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the flat-shaded vertex-coloured terrain built from hgt(), the water plane, growing tubes with setDrawRange(), the arrow that follows a curve, the drifting camera, proj3() labels, chip() and wordLine()).
+- 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: Playfair Display (700 and 900, italic), JetBrains Mono (500 and 700).
+
+THE STYLE
+- The land is one flat-shaded plane displaced by hgt(x, z) and coloured per face by height (sand, grass, forest, rock, snow). Shape the land for the topic (coasts, a peninsula, a river valley) but keep it stylised, never a traced real map.
+- Light: low warm sunset key (#ffcf99) from one side, warm fog, peach sky (#f2b07a). Water is a single slightly transparent blue plane.
+- Routes are tubes along Catmull-Rom curves that hug the terrain and grow with setDrawRange. Campaign arrows are red (#c4302b) extrusions that follow a route.
+- Type: Playfair Display 900 headline at the top over a warm fade, the second line italic. JetBrains Mono for dates and place chips (dark brown #2a1a10 on cream).
+- Use real dates, places and distances, and say "about" for estimates.
+- Camera: one slow drift and orbit over the land, no cuts; let the routes do the storytelling.
+- Pace: the title holds about 2 seconds, each route takes 1.5 to 2.5 seconds to draw, and the takeaway holds about 2 seconds.
+
+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 headlines at 64 px or more, place names at 22 px or more and the counter at 80 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 Rome built roads") unless my content asks for it.
+
+SOUND
+- Bed: low, slow drums (deep thumps with a short noise tail) and a warm pad; horn-like chords (filtered sawtooth) for the title and the end.
+- Map events to the kit: a route drawing gets a soft scratching quill (SND.scratch); the marching arrow gets steady soft steps; chips get a soft tick; the counter "tick"s when the shown number changes; the final line gets the horn chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drums low, mark ticks and steps soft: true, and keep the horn for the title and the last line.
+- 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: Low-Poly Atlas
+Family: 3D
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/low-poly-atlas.html` (60.9 KB)

package/plugins/motion-styles/prompts/lower-thirds.md

@@ -0,0 +1,147 @@
+# Motion graphics style #51: Lower Thirds
+
+- **ID:** `lower-thirds`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Instrument Serif, Inter (500 to 900)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## 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.
+
+## Demo
+An interview intro with a guest name, a chapter and a subscribe nudge
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Lower Thirds" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
+- Replace the demo's story: TL, the name and role, CHAPTERS (number, title), the handle, the accent colour and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the accent-bar wipe name tag, the chapter card with label, serif title and progress dots, the handle bar, the subscribe pill with bell wiggle and cursor click, and the shared timings (in 0.5 s, hold, out 0.3 s)).
+- 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: Instrument Serif, Inter (500 to 900).
+
+THE STYLE
+- Built for your footage: graphics live in the bottom-left and the top, away from faces, inside title-safe margins (40 px).
+- One accent colour (amber #ffb347 here) used only for the bar, labels and progress; everything else white on dark glass (rgba 12,14,18,0.78).
+- Name tag: a 8 px accent bar wipes up first, then the panel wipes out to the right; name in Inter 900, role in Inter 500.
+- Chapter card: a small tracked label ("CHAPTER 2") in the accent, the title in Instrument Serif rising in, and a row of progress dashes with the current one filled.
+- Subscribe nudge: a red pill (#e5322d) with a bell icon that wiggles, a cursor that taps it, and the pill flips to "SUBSCRIBED".
+- Every element: 0.5 s in, holds while relevant, 0.3 s out.
+
+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 names at 40 px or more, roles at 24 px or more, chapter titles at 64 px or more, and keep everything inside the title-safe area. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("An interview intro with a guest name, a chapter and a subscribe nudge") unless my content asks for it.
+
+SOUND
+- No music (your audio leads); effects only.
+- Map events to the kit: each entrance gets a soft "whoosh"; the chapter card gets a soft "pop" and a tick per progress dash; the bell gets two quick high pings ("ping"); the cursor tap gets "click".
+- Full mix (no voiceover): soft swooshes for each entrance, a bell for the subscribe nudge, a click for the cursor.
+- 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: Lower Thirds
+Family: Edit Overlay
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Lower Thirds" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 name tag lands as the person starts speaking, the chapter card lands on the first word of the new section, and the subscribe nudge appears in a natural pause.
+- 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, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
+- Replace the demo's story: TL, the name and role, CHAPTERS (number, title), the handle, the accent colour and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the accent-bar wipe name tag, the chapter card with label, serif title and progress dots, the handle bar, the subscribe pill with bell wiggle and cursor click, and the shared timings (in 0.5 s, hold, out 0.3 s)).
+- 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: Instrument Serif, Inter (500 to 900).
+
+THE STYLE
+- Built for your footage: graphics live in the bottom-left and the top, away from faces, inside title-safe margins (40 px).
+- One accent colour (amber #ffb347 here) used only for the bar, labels and progress; everything else white on dark glass (rgba 12,14,18,0.78).
+- Name tag: a 8 px accent bar wipes up first, then the panel wipes out to the right; name in Inter 900, role in Inter 500.
+- Chapter card: a small tracked label ("CHAPTER 2") in the accent, the title in Instrument Serif rising in, and a row of progress dashes with the current one filled.
+- Subscribe nudge: a red pill (#e5322d) with a bell icon that wiggles, a cursor that taps it, and the pill flips to "SUBSCRIBED".
+- Every element: 0.5 s in, holds while relevant, 0.3 s out.
+
+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 names at 40 px or more, roles at 24 px or more, chapter titles at 64 px or more, and keep everything inside the title-safe area. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("An interview intro with a guest name, a chapter and a subscribe nudge") unless my content asks for it.
+
+SOUND
+- No music (your audio leads); effects only.
+- Map events to the kit: each entrance gets a soft "whoosh"; the chapter card gets a soft "pop" and a tick per progress dash; the bell gets two quick high pings ("ping"); the cursor tap gets "click".
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound 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: Lower Thirds
+Family: Edit Overlay
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/lower-thirds.html` (56.0 KB)

package/plugins/motion-styles/prompts/marker-board.md

@@ -0,0 +1,145 @@
+# Motion graphics style #23: Marker Board
+
+- **ID:** `marker-board`
+- **Family:** Hand-Drawn
+- **Canvas:** `720x1280`
+- **Fonts:** Permanent Marker, Caveat (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+The 3-step funnel
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Marker Board" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 STROKES (the ordered list of what gets drawn: text, boxes, arrows, circles, notes, with their times and colours) and scoreSound(). Keep and reuse the style's helpers (the board, frame and tray, the ghost smudges, drawText() write-on reveal, hd() hand-drawn lines and ellipses, the pen that follows the active stroke tip, the four marker colours and the Caveat notes).
+- 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: Permanent Marker, Caveat (700).
+
+THE STYLE
+- One whiteboard (#f9fafa) in a light grey frame with a tray at the bottom and faint ghost smudges of old erasing. No cuts: the whole idea is drawn on one board.
+- Everything is drawn in order: text is revealed left to right with a clip (drawText), lines and shapes with hd() at the stroke progress. A marker pen (body, cap, tip) follows the tip of whatever is being drawn.
+- Colours mean things: black for structure, blue for the title and labels, red only for the key idea (circle, underline, note), green only for the payoff.
+- Type: Permanent Marker for all board writing; Caveat 700 for small handwritten side notes.
+- Keep strokes chunky (4 to 6 px) and slightly wobbly, with two passes per line.
+- Pace: something is always being drawn. Allow 0.4 to 1 second per stroke, and hold the finished board about 2 seconds.
+
+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 title at 56 px or more, box words at 40 px or more and notes 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 ("The 3-step funnel") unless my content asks for it.
+
+SOUND
+- Bed: a quiet, warm pad.
+- Map events to the kit: every stroke gets a marker squeak ("marker" for its duration, soft); a cap click (click) at the start; the red circle gets a longer, louder marker; the green payoff gets a pluck; the end gets an open chord.
+- Full mix (no voiceover): marker squeaks on every stroke, a cap click at the start, and a soft pad under it all.
+- 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: Marker Board
+Family: Hand-Drawn
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Marker Board" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 stroke starts as its word is spoken and finishes by the end of that phrase; the red circle draws 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 STROKES (the ordered list of what gets drawn: text, boxes, arrows, circles, notes, with their times and colours) and scoreSound(). Keep and reuse the style's helpers (the board, frame and tray, the ghost smudges, drawText() write-on reveal, hd() hand-drawn lines and ellipses, the pen that follows the active stroke tip, the four marker colours and the Caveat notes).
+- 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: Permanent Marker, Caveat (700).
+
+THE STYLE
+- One whiteboard (#f9fafa) in a light grey frame with a tray at the bottom and faint ghost smudges of old erasing. No cuts: the whole idea is drawn on one board.
+- Everything is drawn in order: text is revealed left to right with a clip (drawText), lines and shapes with hd() at the stroke progress. A marker pen (body, cap, tip) follows the tip of whatever is being drawn.
+- Colours mean things: black for structure, blue for the title and labels, red only for the key idea (circle, underline, note), green only for the payoff.
+- Type: Permanent Marker for all board writing; Caveat 700 for small handwritten side notes.
+- Keep strokes chunky (4 to 6 px) and slightly wobbly, with two passes per line.
+- Pace: something is always being drawn. Allow 0.4 to 1 second per stroke, and hold the finished board about 2 seconds.
+
+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 title at 56 px or more, box words at 40 px or more and notes 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 ("The 3-step funnel") unless my content asks for it.
+
+SOUND
+- Bed: a quiet, warm pad.
+- Map events to the kit: every stroke gets a marker squeak ("marker" for its duration, soft); a cap click (click) at the start; the red circle gets a longer, louder marker; the green payoff gets a pluck; the end gets an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark marker sounds soft: true so they sit under the voice.
+- 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: Marker Board
+Family: Hand-Drawn
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/marker-board.html` (57.2 KB)

package/plugins/motion-styles/prompts/market-tape.md

@@ -0,0 +1,145 @@
+# Motion graphics style #37: Market Tape
+
+- **ID:** `market-tape`
+- **Family:** Data
+- **Canvas:** `720x1280`
+- **Fonts:** Archivo Black, Inter (500 and 800), JetBrains Mono (500 and 700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## 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.
+
+## Demo
+Why prices crash (example data, not advice)
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Market Tape" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, PRICES (or your own example series), the ticker symbols (invented), the event label, the LOOP diagram text, the takeaway and scoreSound(). Keep and reuse the style's helpers (the dark trading grid, the scrolling ticker strip, candles that print one by one with wicks, the price tag riding the last close, the red flash and shake on the break, the counting percentage chip, the four-step loop diagram, and the EXAMPLE DATA · NOT ADVICE line).
+- 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 (500 and 800), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Never give financial advice: keep "EXAMPLE DATA · EDUCATION, NOT ADVICE" on screen, use invented tickers, and label any real figures with their source and date.
+- Background: near-black (#0b0f14) with faint horizontal grid lines; a ticker strip at the top scrolling invented symbols with green (#2ee59d) ups and red (#ff5a5f) downs.
+- Candles are drawn to one price scale: body from open to close, thin wick from low to high, green up and red down, printing one by one left to right. A pill tag rides the latest close.
+- The break: a short red flash over the frame, a small shake, and a red percentage chip that counts down.
+- Explain with a simple four-node loop (rounded boxes, curved arrows) whose steps light up in turn.
+- Type: Archivo Black headline (white, then red for the key word), Inter for explanation, JetBrains Mono for prices and the ticker.
+
+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 headline at 60 px or more, prices and percentages at 26 px or more and the loop labels at 26 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("Why prices crash (example data, not advice)") unless my content asks for it.
+
+SOUND
+- Bed: a tense, low synth pulse (padBed with kick) that drops out at the break.
+- Map events to the kit: each candle gets a soft "tick" (higher for green, lower for red); the break gets a two-tone alarm, "boom" and a falling tone; the counter "tick"s as it changes; each loop step gets a soft pluck; the takeaway gets a low swell.
+- Full mix (no voiceover): a tense synth pulse, a soft tick for every candle, an alarm and a bass drop on the break, and a heartbeat-like pulse under the loop.
+- 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: Market Tape
+Family: Data
+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.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Market Tape" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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. Candles print while the rise is described, the break lands on the stressed word ("crash", "dropped"), the percentage locks on the spoken number, and each loop step lights up as it is named.
+- 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, PRICES (or your own example series), the ticker symbols (invented), the event label, the LOOP diagram text, the takeaway and scoreSound(). Keep and reuse the style's helpers (the dark trading grid, the scrolling ticker strip, candles that print one by one with wicks, the price tag riding the last close, the red flash and shake on the break, the counting percentage chip, the four-step loop diagram, and the EXAMPLE DATA · NOT ADVICE line).
+- 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 (500 and 800), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Never give financial advice: keep "EXAMPLE DATA · EDUCATION, NOT ADVICE" on screen, use invented tickers, and label any real figures with their source and date.
+- Background: near-black (#0b0f14) with faint horizontal grid lines; a ticker strip at the top scrolling invented symbols with green (#2ee59d) ups and red (#ff5a5f) downs.
+- Candles are drawn to one price scale: body from open to close, thin wick from low to high, green up and red down, printing one by one left to right. A pill tag rides the latest close.
+- The break: a short red flash over the frame, a small shake, and a red percentage chip that counts down.
+- Explain with a simple four-node loop (rounded boxes, curved arrows) whose steps light up in turn.
+- Type: Archivo Black headline (white, then red for the key word), Inter for explanation, JetBrains Mono for prices and the ticker.
+
+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 headline at 60 px or more, prices and percentages at 26 px or more and the loop labels at 26 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("Why prices crash (example data, not advice)") unless my content asks for it.
+
+SOUND
+- Bed: a tense, low synth pulse (padBed with kick) that drops out at the break.
+- Map events to the kit: each candle gets a soft "tick" (higher for green, lower for red); the break gets a two-tone alarm, "boom" and a falling tone; the counter "tick"s as it changes; each loop step gets a soft pluck; the takeaway gets a low swell.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true and keep the alarm 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: Market Tape
+Family: Data
+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.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/market-tape.html` (58.1 KB)