@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/headline-backdrop.md

@@ -0,0 +1,145 @@
+# Motion graphics style #52: Headline Backdrop
+
+- **ID:** `headline-backdrop`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Playfair Display (700 and 900), Inter (800 and 900)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## Look
+Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.
+
+## How It Explains
+Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.
+
+## Demo
+Reacting to a (made-up) headline about laundry-folding robots
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Headline Backdrop" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, ARTICLES (invented site name, headline lines, which line is highlighted), the reaction text and scoreSound(); load your clip with Load footage (shot against a plain background for the cut-out look). Keep and reuse the style's helpers (the pale background, invented article cards with grey body lines, the stack-and-scroll motion, the yellow marker swipe, the sticker-edge cut-out treatment of the footage, the drop shadow and the reaction chip).
+- 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), Inter (800 and 900).
+
+THE STYLE
+- Built for your footage: the presenter is cut out (with your clip: a centred crop in a rounded mask; with the stand-in: a real silhouette) and gets a thick white sticker outline and a soft shadow so it sits in front of the cards.
+- Articles are always invented: an invented site name in Playfair Display 900, a serif headline, grey placeholder body lines. Never mock up a real outlet, a real person's quote or a real post.
+- The key line gets a yellow (#ffd60a) marker swipe that grows left to right behind the text.
+- Cards tilt slightly (±4°) and stack with soft shadows on a pale grey-blue background (#e6eaef).
+- Reaction chips: black with yellow Inter 900 text, popping next to the head.
+
+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 40 px or more, the reaction chip at 30 px or more, and keep your face clear of the cards. 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 ("Reacting to a (made-up) headline about laundry-folding robots") unless my content asks for it.
+
+SOUND
+- No music by default (your clip leads).
+- Map events to the kit: cards get SND.paper; the highlight gets "marker"; the reaction gets "pop" and a short comic sting; the card swap gets a soft "whoosh".
+- Full mix (no voiceover): paper slides for cards, a marker for the highlight, a pop for the reaction.
+- 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: Headline Backdrop
+Family: Edit Overlay
+Look: Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.
+How it explains: Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Headline Backdrop" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 card slides in as you mention it, the highlighter swipes along the line while you read it, and the reaction chip pops on the punchline.
+- 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, ARTICLES (invented site name, headline lines, which line is highlighted), the reaction text and scoreSound(); load your clip with Load footage (shot against a plain background for the cut-out look). Keep and reuse the style's helpers (the pale background, invented article cards with grey body lines, the stack-and-scroll motion, the yellow marker swipe, the sticker-edge cut-out treatment of the footage, the drop shadow and the reaction chip).
+- 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), Inter (800 and 900).
+
+THE STYLE
+- Built for your footage: the presenter is cut out (with your clip: a centred crop in a rounded mask; with the stand-in: a real silhouette) and gets a thick white sticker outline and a soft shadow so it sits in front of the cards.
+- Articles are always invented: an invented site name in Playfair Display 900, a serif headline, grey placeholder body lines. Never mock up a real outlet, a real person's quote or a real post.
+- The key line gets a yellow (#ffd60a) marker swipe that grows left to right behind the text.
+- Cards tilt slightly (±4°) and stack with soft shadows on a pale grey-blue background (#e6eaef).
+- Reaction chips: black with yellow Inter 900 text, popping next to the head.
+
+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 40 px or more, the reaction chip at 30 px or more, and keep your face clear of the cards. 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 ("Reacting to a (made-up) headline about laundry-folding robots") unless my content asks for it.
+
+SOUND
+- No music by default (your clip leads).
+- Map events to the kit: cards get SND.paper; the highlight gets "marker"; the reaction gets "pop" and a short comic sting; the card swap gets a soft "whoosh".
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark everything 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: Headline Backdrop
+Family: Edit Overlay
+Look: Commentary layout: you, cut out with a thick white sticker edge and a soft shadow, standing in front of invented article cards that scroll and tilt behind you, with a yellow marker swipe on the line that matters and a black-and-yellow reaction chip.
+How it explains: Article cards slide in and stack behind you, the camera drifts down the top card, and the key line gets a yellow highlighter swipe as you read it. A second card swaps in for the counterpoint, and a reaction chip pops beside your head on the punchline.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/headline-backdrop.html` (55.5 KB)

package/plugins/motion-styles/prompts/iso-cutaway.md

@@ -0,0 +1,147 @@
+# Motion graphics style #16: Iso Cutaway
+
+- **ID:** `iso-cutaway`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Bricolage Grotesque (600 and 800), JetBrains Mono (700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.
+
+## How It Explains
+A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.
+
+## Demo
+A day inside a bakery
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Iso Cutaway" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, FLOORS (wall colours, props, people and their paths), the clock range, the labels, the headline and takeaway and scoreSound(). Keep and reuse the style's helpers (makeGL(), the orthographic iso camera, the floor slab and two back walls per storey, tiny capsule people that walk between waypoints, the night-to-day sky and light ramp, the clock chip, the dark labels on leader lines, wordLine()).
+- 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: Bricolage Grotesque (600 and 800), JetBrains Mono (700).
+
+THE STYLE
+- One building, seen in true isometric with an OrthographicCamera, built from boxes: a slab per floor, two back walls per floor in a distinct warm colour, props from boxes, cylinders and spheres, people as tiny capsules with round heads.
+- Time is the story: a clock chip at the top runs through the day, the sky colour and light warm from night blue (#1d2a4a) to morning cream (#fde8d2), and each floor gets its moment.
+- Only the active floor is fully lit; the others sit slightly darker. People walk between waypoints with an ease and a small bob.
+- Labels: dark brown chips (#3b2416) with a mono time and verb, on leader lines from the floor to the right edge.
+- Type: Bricolage Grotesque 800 headline in dark brown with the second line in the accent (#d9542b).
+- Pace: one floor beat every 2.5 to 3 seconds, clock ticks every half hour of story time.
+
+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, labels at 22 px or more and the clock at 40 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 ("A day inside a bakery") unless my content asks for it.
+
+SOUND
+- Bed: a cosy, warm pad (padBed) and a steady soft clock tick.
+- Map events to the kit: each floor lighting up gets a soft "whoosh" and a pluck; machines get a low hum; people stepping get soft taps; the shop opening gets a two-note bell (SND.chime); the takeaway gets an open chord.
+- Full mix (no voiceover): keep the cosy pad and the clock ticks, at most about 3 sounds at once.
+- 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: Iso Cutaway
+Family: 3D
+Look: An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.
+How it explains: A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Iso Cutaway" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 clock jumps to each time as it is said, the floor it names lights up on the same word, and its label lands on the time.
+- 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, FLOORS (wall colours, props, people and their paths), the clock range, the labels, the headline and takeaway and scoreSound(). Keep and reuse the style's helpers (makeGL(), the orthographic iso camera, the floor slab and two back walls per storey, tiny capsule people that walk between waypoints, the night-to-day sky and light ramp, the clock chip, the dark labels on leader lines, wordLine()).
+- 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: Bricolage Grotesque (600 and 800), JetBrains Mono (700).
+
+THE STYLE
+- One building, seen in true isometric with an OrthographicCamera, built from boxes: a slab per floor, two back walls per floor in a distinct warm colour, props from boxes, cylinders and spheres, people as tiny capsules with round heads.
+- Time is the story: a clock chip at the top runs through the day, the sky colour and light warm from night blue (#1d2a4a) to morning cream (#fde8d2), and each floor gets its moment.
+- Only the active floor is fully lit; the others sit slightly darker. People walk between waypoints with an ease and a small bob.
+- Labels: dark brown chips (#3b2416) with a mono time and verb, on leader lines from the floor to the right edge.
+- Type: Bricolage Grotesque 800 headline in dark brown with the second line in the accent (#d9542b).
+- Pace: one floor beat every 2.5 to 3 seconds, clock ticks every half hour of story time.
+
+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, labels at 22 px or more and the clock at 40 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 ("A day inside a bakery") unless my content asks for it.
+
+SOUND
+- Bed: a cosy, warm pad (padBed) and a steady soft clock tick.
+- Map events to the kit: each floor lighting up gets a soft "whoosh" and a pluck; machines get a low hum; people stepping get soft taps; the shop opening gets a two-note bell (SND.chime); the takeaway gets an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the clock ticks soft: true and 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: Iso Cutaway
+Family: 3D
+Look: An isometric cutaway building in Three.js with an orthographic camera: floors like a doll house, warm wall colours, tiny people, and a sky that goes from night blue to morning warm as a clock chip runs.
+How it explains: A clock chip ticks through the day while each floor lights up in turn: tiny people move between spots, machines glow, small props appear, and a dark time-stamped label points at the floor that is busy. The takeaway lands once the day is done.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/iso-cutaway.html` (60.0 KB)

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

@@ -0,0 +1,145 @@
+# Motion graphics style #29: Isotype
+
+- **ID:** `isotype`
+- **Family:** Data
+- **Canvas:** `720x1280`
+- **Fonts:** Archivo Black, Inter (500 and 800), JetBrains Mono (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.
+
+## How It Explains
+The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.
+
+## Demo
+1 in 3 US adults sleep less than 7 hours
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Isotype" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, the stat (RATIO, the headline text and the big number), the icon shape in personIcon() if the subject is not people, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 9 by 9 icon grid, the row-by-row pop in, the one-by-one colour fill, the regroup into a solid block (sorted target slots), the big number, the source line and the restrained palette).
+- 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 (700).
+
+THE STYLE
+- One icon equals a fixed number of people (say so if it is not 1). Use a real, sourced ratio and keep the count of coloured icons exact for it.
+- Icons are simple and identical: a round head and a rounded body, grey (#c3ced8) by default, coral (#ff5a3c) for the share that matters. No other colours.
+- Background: cool pale grey-blue (#edf2f6); text in deep navy (#13212e).
+- Order: fill the crowd row by row, colour the share one by one, then move the coloured icons into a solid block at the start of the grid (sorted target slots) so the split reads at a glance.
+- Type: Archivo Black for the big number, Inter 800 for the statement (second line in coral), JetBrains Mono for the source line at the bottom.
+- Pace: crowd in about 1.5 seconds, colour fill about 2 seconds, regroup about 1.5 seconds.
+
+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 big number at 120 px or more, the statement at 30 px or more and the source at 20 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("1 in 3 US adults sleep less than 7 hours") unless my content asks for it.
+
+SOUND
+- Bed: a calm, light pad (padBed).
+- Map events to the kit: each row gets a soft "tick"; each coloured icon gets a short pluck that climbs; the big number gets "slam"; the regroup gets a soft "whoosh"; the takeaway gets an open chord.
+- Full mix (no voiceover): a calm pad, a soft tick per row, a rising pluck per coloured icon, and a low hit on the big number.
+- 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: Isotype
+Family: Data
+Look: Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.
+How it explains: The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Isotype" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 crowd fills while the group is described, the colour fill runs while the share is said, the big number slams on the number, and the regroup happens on the comparison.
+- 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, the stat (RATIO, the headline text and the big number), the icon shape in personIcon() if the subject is not people, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 9 by 9 icon grid, the row-by-row pop in, the one-by-one colour fill, the regroup into a solid block (sorted target slots), the big number, the source line and the restrained palette).
+- 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 (700).
+
+THE STYLE
+- One icon equals a fixed number of people (say so if it is not 1). Use a real, sourced ratio and keep the count of coloured icons exact for it.
+- Icons are simple and identical: a round head and a rounded body, grey (#c3ced8) by default, coral (#ff5a3c) for the share that matters. No other colours.
+- Background: cool pale grey-blue (#edf2f6); text in deep navy (#13212e).
+- Order: fill the crowd row by row, colour the share one by one, then move the coloured icons into a solid block at the start of the grid (sorted target slots) so the split reads at a glance.
+- Type: Archivo Black for the big number, Inter 800 for the statement (second line in coral), JetBrains Mono for the source line at the bottom.
+- Pace: crowd in about 1.5 seconds, colour fill about 2 seconds, regroup about 1.5 seconds.
+
+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 big number at 120 px or more, the statement at 30 px or more and the source at 20 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("1 in 3 US adults sleep less than 7 hours") unless my content asks for it.
+
+SOUND
+- Bed: a calm, light pad (padBed).
+- Map events to the kit: each row gets a soft "tick"; each coloured icon gets a short pluck that climbs; the big number gets "slam"; the regroup gets a soft "whoosh"; the takeaway gets an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks and plucks 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: Isotype
+Family: Data
+Look: Pictogram statistics in the Isotype tradition: a grid of small grey people icons that pop in row by row, then the share that matters turns coral one by one and regroups into its own block, under one huge number.
+How it explains: The crowd fills in first so you feel the size, then the stat colours in person by person, the big ratio slams in, and the coloured people walk into their own block so the split is obvious. A plain source line stays at the bottom.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/isotype.html` (55.8 KB)

package/plugins/motion-styles/prompts/karaoke-subs.md

@@ -0,0 +1,145 @@
+# Motion graphics style #49: Karaoke Subs
+
+- **ID:** `karaoke-subs`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Inter (800)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## Look
+Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.
+
+## How It Explains
+The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.
+
+## Demo
+A morning-routine talking clip
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Karaoke Subs" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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: PHRASES (each phrase as words with start times, from your word-level SRT) and the pill colour; load your clip with Load footage. Keep and reuse the style's helpers (footage(), the rounded glass box with blur-look fill, two-line layout with automatic wrapping, the gliding highlight pill (it slides between word boxes), spoken/upcoming opacities and the phrase swap).
+- 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: Inter (800).
+
+THE STYLE
+- Built for your footage and your word timings: paste a word-level SRT and every word gets its own start time.
+- The box: dark glass (#0e1014 at 74%), 22 px corners, centred in the lower third, sized to its text with 28 px padding.
+- Words: Inter 800 at 40 px or more. Spoken words white, upcoming words white at 45%, the current word dark (#0b1a10) on a green pill (#3ddc84) that slides and resizes between words with a quick ease.
+- One phrase at a time, at most two lines of about 22 characters; phrases swap with a 0.2 s fade and a 10 px lift.
+- Accessibility first: high contrast, no effects that hurt readability, exact timing.
+
+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 subtitle words at 40 px or more, never more than two lines, and keep the box above the bottom 15% (phone UI). Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A morning-routine talking clip") unless my content asks for it.
+
+SOUND
+- No music: the clip's own audio leads.
+- Optional: a barely audible "tick" at the start of each phrase; nothing on individual words.
+- Full mix (no voiceover): none needed; the clip's own audio is the soundtrack. A very faint tick per phrase is optional.
+- 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: Karaoke Subs
+Family: Edit Overlay
+Look: Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.
+How it explains: The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Karaoke Subs" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 pill reaches each word at its start time from the SRT, within 0.03 s; a new phrase appears 0.1 s before its first word.
+- 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: PHRASES (each phrase as words with start times, from your word-level SRT) and the pill colour; load your clip with Load footage. Keep and reuse the style's helpers (footage(), the rounded glass box with blur-look fill, two-line layout with automatic wrapping, the gliding highlight pill (it slides between word boxes), spoken/upcoming opacities and the phrase swap).
+- 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: Inter (800).
+
+THE STYLE
+- Built for your footage and your word timings: paste a word-level SRT and every word gets its own start time.
+- The box: dark glass (#0e1014 at 74%), 22 px corners, centred in the lower third, sized to its text with 28 px padding.
+- Words: Inter 800 at 40 px or more. Spoken words white, upcoming words white at 45%, the current word dark (#0b1a10) on a green pill (#3ddc84) that slides and resizes between words with a quick ease.
+- One phrase at a time, at most two lines of about 22 characters; phrases swap with a 0.2 s fade and a 10 px lift.
+- Accessibility first: high contrast, no effects that hurt readability, exact timing.
+
+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 subtitle words at 40 px or more, never more than two lines, and keep the box above the bottom 15% (phone UI). Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A morning-routine talking clip") unless my content asks for it.
+
+SOUND
+- No music: the clip's own audio leads.
+- Optional: a barely audible "tick" at the start of each phrase; nothing on individual words.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything silent or near-silent.
+- 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: Karaoke Subs
+Family: Edit Overlay
+Look: Clean, readable subtitles for any talking video: a rounded dark glass box in the lower third holding two lines, where the word being spoken sits on a bright green pill, spoken words stay white and upcoming words wait at half opacity.
+How it explains: The subtitle box shows one phrase (up to two lines) at a time; the green pill glides from word to word exactly as each is spoken, and the box swaps to the next phrase with a soft fade and lift. Nothing else moves, so it suits any edit.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/karaoke-subs.html` (54.0 KB)