@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/quote-cinema.md

@@ -0,0 +1,145 @@
+# Motion graphics style #45: Quote Cinema
+
+- **ID:** `quote-cinema`
+- **Family:** Shorts Format
+- **Canvas:** `720x1280`
+- **Fonts:** Instrument Serif (regular and italic), Inter (600)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.
+
+## How It Explains
+The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft "save this" note closes it.
+
+## Demo
+"The best time to plant a tree was 20 years ago."
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Quote Cinema" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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: QUOTE (the words, which word is the key word, the line breaks), the author line, the closing note, TL timing and scoreSound(). Keep and reuse the style's helpers (the warm black gradient, the drifting light leak, grain and vignette, the slow push-in, the word-by-word fade with a soft rise, the warm italic key word, the faint big quote mark and the tracked author line).
+- 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 (regular and italic), Inter (600).
+
+THE STYLE
+- Background: warm near-black (#0d0b0a to #1f1410) with one soft orange light leak (#ff9a3c, screen-blended) that drifts slowly, plus heavy grain and a vignette.
+- The whole frame pushes in about 6% over the clip; nothing else moves fast.
+- The quote is set in Instrument Serif at a large size, left aligned, one phrase per line; each word fades up with a 14 px rise in reading rhythm.
+- One key word in warm italic (#ffb36b). A short warm rule and the author in Inter 600 caps with wide tracking.
+- Only quote people accurately with the real author; use "proverb" or "attributed to" when the source is uncertain.
+- Pace: about 0.3 seconds per word, hold the full quote at least 2 seconds.
+
+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 quote at 64 px or more and the author line at 22 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 best time to plant a tree was 20 years ago."") unless my content asks for it.
+
+SOUND
+- Music: a slow, warm pad of soft sine and triangle chords with long reverb, like a felt piano (SND.chord and k.voice).
+- Map events to the kit: each new line gets a very soft pluck; the key word gets a gentle swell; the author line gets one low note; the closing note gets "shimmer" at low gain.
+- Full mix (no voiceover): a slow, warm piano-like pad with long reverb, a soft swell on the key word, and a low note under the author line.
+- 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: Quote Cinema
+Family: Shorts Format
+Look: A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.
+How it explains: The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft "save this" note closes it.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Quote Cinema" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 word fades up as it is spoken, the key word turns warm on its stress, and the author line lands after the quote ends.
+- 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: QUOTE (the words, which word is the key word, the line breaks), the author line, the closing note, TL timing and scoreSound(). Keep and reuse the style's helpers (the warm black gradient, the drifting light leak, grain and vignette, the slow push-in, the word-by-word fade with a soft rise, the warm italic key word, the faint big quote mark and the tracked author line).
+- 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 (regular and italic), Inter (600).
+
+THE STYLE
+- Background: warm near-black (#0d0b0a to #1f1410) with one soft orange light leak (#ff9a3c, screen-blended) that drifts slowly, plus heavy grain and a vignette.
+- The whole frame pushes in about 6% over the clip; nothing else moves fast.
+- The quote is set in Instrument Serif at a large size, left aligned, one phrase per line; each word fades up with a 14 px rise in reading rhythm.
+- One key word in warm italic (#ffb36b). A short warm rule and the author in Inter 600 caps with wide tracking.
+- Only quote people accurately with the real author; use "proverb" or "attributed to" when the source is uncertain.
+- Pace: about 0.3 seconds per word, hold the full quote at least 2 seconds.
+
+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 quote at 64 px or more and the author line at 22 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 best time to plant a tree was 20 years ago."") unless my content asks for it.
+
+SOUND
+- Music: a slow, warm pad of soft sine and triangle chords with long reverb, like a felt piano (SND.chord and k.voice).
+- Map events to the kit: each new line gets a very soft pluck; the key word gets a gentle swell; the author line gets one low note; the closing note gets "shimmer" at low gain.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the pad 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: Quote Cinema
+Family: Shorts Format
+Look: A quiet cinematic quote card: deep warm black, a slow drifting light leak, heavy film grain and a slow push-in, with a quote that sets word by word in a large serif, one key word in warm italic, and a tracked author line.
+How it explains: The frame breathes: the light leak drifts across, the camera pushes in slowly, and the quote fades up one word at a time in rhythm with the reading. The key word turns warm italic, the author line slides in, and a soft "save this" note closes it.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/quote-cinema.html` (54.2 KB)

package/plugins/motion-styles/prompts/recipe-steps.md

@@ -0,0 +1,145 @@
+# Motion graphics style #44: Recipe Steps
+
+- **ID:** `recipe-steps`
+- **Family:** Shorts Format
+- **Canvas:** `720x1280`
+- **Fonts:** Inter (700 to 900), JetBrains Mono (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.
+
+## How It Explains
+The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.
+
+## Demo
+A 3-minute omelette
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Recipe Steps" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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, INGREDIENTS (chips and their icons), STEPS (title, seconds, and the scene painter for each), the dish name and scoreSound(). Keep and reuse the style's helpers (the wood table, ingredient chips with drop-in, the top-down scene painters (bowl, pan, plate), the per-step scene swap, the dark step card with step count and a draining timer ring, steam curls and the serve line).
+- 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 (700 to 900), JetBrains Mono (700).
+
+THE STYLE
+- Everything is seen from directly above on a warm wood table (#b97a46 with plank lines and grain). Bowls, pans, plates and food are simple flat shapes with soft shadows, drawn in code.
+- Ingredient chips are white pills with a small icon, dropping in from above with a bounce, along the top.
+- Each step swaps the centre prop with a quick slide, and the food changes state inside it (whisking, spreading, folding).
+- The step card is dark (#1d1a17 at 92%) at the bottom: an orange (#ffb347) "STEP n / N" label, the step in Inter 900, and a timer ring that drains with the real time left.
+- Real quantities and times; say "about" when it depends on the stove.
+- Pace: ingredients in 1.5 seconds, then 3 to 4 seconds per step, the finished dish held about 2 seconds.
+
+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 step titles at 46 px or more, ingredient chips at 26 px or more and the timer at 26 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A 3-minute omelette") unless my content asks for it.
+
+SOUND
+- Bed: a cosy, warm pad with light hats.
+- Map events to the kit: ingredient chips get SND.tap; steps get a soft "whoosh"; whisking gets SND.scratch loops; the pan gets a sizzle (high-passed noise); each step end gets a timer ding (SND.chime); the dish gets a bell and an open chord.
+- Full mix (no voiceover): a cosy kitchen pad, soft taps for chips, a whisk scratch, a sizzle under the pan step, a timer ding per step and a final bell.
+- 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: Recipe Steps
+Family: Shorts Format
+Look: A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.
+How it explains: The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Recipe Steps" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 ingredient drops as it is named, each step card and scene arrive on the first word of the step, the timer runs while the step is described, and the finished dish lands on "serve".
+- 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, INGREDIENTS (chips and their icons), STEPS (title, seconds, and the scene painter for each), the dish name and scoreSound(). Keep and reuse the style's helpers (the wood table, ingredient chips with drop-in, the top-down scene painters (bowl, pan, plate), the per-step scene swap, the dark step card with step count and a draining timer ring, steam curls and the serve line).
+- 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 (700 to 900), JetBrains Mono (700).
+
+THE STYLE
+- Everything is seen from directly above on a warm wood table (#b97a46 with plank lines and grain). Bowls, pans, plates and food are simple flat shapes with soft shadows, drawn in code.
+- Ingredient chips are white pills with a small icon, dropping in from above with a bounce, along the top.
+- Each step swaps the centre prop with a quick slide, and the food changes state inside it (whisking, spreading, folding).
+- The step card is dark (#1d1a17 at 92%) at the bottom: an orange (#ffb347) "STEP n / N" label, the step in Inter 900, and a timer ring that drains with the real time left.
+- Real quantities and times; say "about" when it depends on the stove.
+- Pace: ingredients in 1.5 seconds, then 3 to 4 seconds per step, the finished dish held about 2 seconds.
+
+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 step titles at 46 px or more, ingredient chips at 26 px or more and the timer at 26 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A 3-minute omelette") unless my content asks for it.
+
+SOUND
+- Bed: a cosy, warm pad with light hats.
+- Map events to the kit: ingredient chips get SND.tap; steps get a soft "whoosh"; whisking gets SND.scratch loops; the pan gets a sizzle (high-passed noise); each step end gets a timer ding (SND.chime); the dish gets a bell and an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sizzle very low and mark taps 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: Recipe Steps
+Family: Shorts Format
+Look: A top-down cooking Short on a warm wooden table: food and tools drawn in code from above (bowl, pan, plate), ingredient chips that drop in, a dark step card with a big step number, and a timer ring that drains for each step.
+How it explains: The ingredients drop onto the table first, then each step swaps the scene from above: the whisk spins in the bowl, the egg spreads in the pan, the omelette folds onto the plate. The step card and its timer track progress, and the finished dish gets a steam curl and a serve line.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/recipe-steps.html` (60.1 KB)

package/plugins/motion-styles/prompts/rubber-hose-reel.md

@@ -0,0 +1,145 @@
+# Motion graphics style #60: Rubber Hose Reel
+
+- **ID:** `rubber-hose-reel`
+- **Family:** Character Story
+- **Canvas:** `720x1280`
+- **Fonts:** Limelight, Special Elite
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.
+
+## How It Explains
+The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.
+
+## Demo
+The cat who hated Mondays (original character)
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Rubber Hose Reel" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 character (drawCat: body, head shape, face), the props and set, the gag beats (ACTS and their poses), the title card text and scoreSound(). Keep and reuse the style's helpers (the rubber-hose limb renderer (bezier noodle limbs with white gloves and big shoes), the pie-cut eyes, the on-beat bounce (BEAT), squash and stretch, the grey painted set, film flicker, dust, scratches and gate weave, the art-deco title card and the THE END iris).
+- 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: Limelight, Special Elite.
+
+THE STYLE
+- An original character only (never Mickey, Felix, Bimbo, Cuphead or any studio character): a round body, noodle limbs drawn as thick bezier hoses with white four-finger gloves and big round shoes, and pie-cut eyes.
+- Everything bounces on the beat (BEAT seconds): characters, props, even the furniture squash and stretch in time.
+- Black, white and greys only, painted with soft gradients; on top: flicker (frame-to-frame brightness), dust specks, vertical scratches, a gentle gate weave and a strong vignette.
+- Title cards: an art-deco double frame with corner fans, Limelight lettering, on black.
+- Takes are big: eyes pop out on stalks, jaw drops, hat flies off, motion lines and impact stars.
+- End with a black iris closing on the character and a THE END card.
+
+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 title cards at 70 px or more and caption cards at 36 px or more; keep the character at least 40% of the frame height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("The cat who hated Mondays (original character)") unless my content asks for it.
+
+SOUND
+- Music: a ragtime loop: oom-pah bass on 1 and 3, stride chords on 2 and 4 (square or triangle), and a simple honky melody.
+- Map events to the kit: jumps get a slide whistle (a rising then falling sine); bonks get a boing; the big gag gets a cymbal crash (bright noise) and "boom"; title cards get a projector clatter; the iris gets a short descending run.
+- Full mix (no voiceover): a ragtime loop (oom-pah bass, stride chords, a honky melody), slide whistle, boings, a cymbal crash for the big gag, and projector clatter underneath.
+- 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: Rubber Hose Reel
+Family: Character Story
+Look: A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.
+How it explains: The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Rubber Hose Reel" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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. Every bounce sits on the music beat; the takes (eyes popping, jaw drop) land on the punch words, and title cards appear in pauses.
+- 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 character (drawCat: body, head shape, face), the props and set, the gag beats (ACTS and their poses), the title card text and scoreSound(). Keep and reuse the style's helpers (the rubber-hose limb renderer (bezier noodle limbs with white gloves and big shoes), the pie-cut eyes, the on-beat bounce (BEAT), squash and stretch, the grey painted set, film flicker, dust, scratches and gate weave, the art-deco title card and the THE END iris).
+- 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: Limelight, Special Elite.
+
+THE STYLE
+- An original character only (never Mickey, Felix, Bimbo, Cuphead or any studio character): a round body, noodle limbs drawn as thick bezier hoses with white four-finger gloves and big round shoes, and pie-cut eyes.
+- Everything bounces on the beat (BEAT seconds): characters, props, even the furniture squash and stretch in time.
+- Black, white and greys only, painted with soft gradients; on top: flicker (frame-to-frame brightness), dust specks, vertical scratches, a gentle gate weave and a strong vignette.
+- Title cards: an art-deco double frame with corner fans, Limelight lettering, on black.
+- Takes are big: eyes pop out on stalks, jaw drops, hat flies off, motion lines and impact stars.
+- End with a black iris closing on the character and a THE END card.
+
+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 title cards at 70 px or more and caption cards at 36 px or more; keep the character at least 40% of the frame height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("The cat who hated Mondays (original character)") unless my content asks for it.
+
+SOUND
+- Music: a ragtime loop: oom-pah bass on 1 and 3, stride chords on 2 and 4 (square or triangle), and a simple honky melody.
+- Map events to the kit: jumps get a slide whistle (a rising then falling sine); bonks get a boing; the big gag gets a cymbal crash (bright noise) and "boom"; title cards get a projector clatter; the iris gets a short descending run.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the ragtime low; keep the slide whistle and boings.
+- 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: Rubber Hose Reel
+Family: Character Story
+Look: A 1930s black-and-white cartoon: an original rubber-hose character with noodle limbs, pie-cut eyes and white gloves bouncing on the beat, on a grey painted set, with film flicker, dust, scratches, a gate weave and art-deco title cards.
+How it explains: The whole short bounces to the music: the character and even the props squash and stretch on every beat. Title cards in an art-deco frame open each act, the gag builds in three beats with exaggerated takes (eyes pop, jaw drops), and an iris closes on THE END.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/rubber-hose-reel.html` (63.8 KB)

package/plugins/motion-styles/prompts/shadow-puppets.md

@@ -0,0 +1,145 @@
+# Motion graphics style #58: Shadow Puppets
+
+- **ID:** `shadow-puppets`
+- **Family:** Character Story
+- **Canvas:** `720x1280`
+- **Fonts:** Cormorant Garamond (600, italic), Inter (600)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.
+
+## How It Explains
+Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.
+
+## Demo
+The Fox and the Crow (an Aesop fable)
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Shadow Puppets" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 puppets (crowPuppet and foxPuppet: their shapes, joints and rod points), the scenery pieces, the story LINES and the moral, and scoreSound(). Keep and reuse the style's helpers (the backlit screen with flame flicker and paper grain, the wooden frame and curtains, solid black silhouettes with thin rods to the bottom edge, jointed parts that rotate around pivots, the slide-in of puppets and scenery, the serif narration lines and the curtain close).
+- 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: Cormorant Garamond (600, italic), Inter (600).
+
+THE STYLE
+- Every character and prop is a solid black silhouette (#120c08) drawn in code with clean, readable outlines and a few cut-out holes (an eye, a pattern), held by thin rods running to the bottom of the screen.
+- Puppets are jointed: each moving part rotates around a pivot (jaw, beak, head, wing, legs). Animate with simple, slightly stiff motion, like hands working the rods.
+- The screen is warm backlit paper (radial glow #ffcf8a to #c4743a) that flickers gently (a noise-driven brightness change) with a faint paper grain; a dark wooden frame and red curtains surround it.
+- Scenery (trees, hills, houses) is also silhouette, sliding in from the sides behind the puppets.
+- Type: Cormorant Garamond 600 for narration in a dark band at the bottom, italic for the moral.
+- Use public-domain fables and folk tales, or original stories.
+
+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 narration at 44 px or more, the moral at 56 px or more, and puppets at least a third of the frame height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("The Fox and the Crow (an Aesop fable)") unless my content asks for it.
+
+SOUND
+- Music: a gentle folk melody on plucked strings (triangle plucks) with a soft drone.
+- Map events to the kit: puppets entering get a wooden creak (a low filtered noise sweep) and SND.tap; talking gets soft clicks; the key action gets a small drum hit (SND.thud); the curtain gets a long soft "whoosh"; the moral gets an open chord. A low flame crackle runs under everything.
+- Full mix (no voiceover): a gentle folk melody (plucked strings), a soft crackle of flame, wooden creaks when puppets enter, and a little drum for the key action.
+- 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: Shadow Puppets
+Family: Character Story
+Look: A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.
+How it explains: Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Shadow Puppets" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+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 puppet slides in as it is introduced, a jaw or beak moves while that character speaks, actions (drop, catch, bow) land on their verbs, and each narration line fades in on its first word.
+- 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 puppets (crowPuppet and foxPuppet: their shapes, joints and rod points), the scenery pieces, the story LINES and the moral, and scoreSound(). Keep and reuse the style's helpers (the backlit screen with flame flicker and paper grain, the wooden frame and curtains, solid black silhouettes with thin rods to the bottom edge, jointed parts that rotate around pivots, the slide-in of puppets and scenery, the serif narration lines and the curtain close).
+- 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: Cormorant Garamond (600, italic), Inter (600).
+
+THE STYLE
+- Every character and prop is a solid black silhouette (#120c08) drawn in code with clean, readable outlines and a few cut-out holes (an eye, a pattern), held by thin rods running to the bottom of the screen.
+- Puppets are jointed: each moving part rotates around a pivot (jaw, beak, head, wing, legs). Animate with simple, slightly stiff motion, like hands working the rods.
+- The screen is warm backlit paper (radial glow #ffcf8a to #c4743a) that flickers gently (a noise-driven brightness change) with a faint paper grain; a dark wooden frame and red curtains surround it.
+- Scenery (trees, hills, houses) is also silhouette, sliding in from the sides behind the puppets.
+- Type: Cormorant Garamond 600 for narration in a dark band at the bottom, italic for the moral.
+- Use public-domain fables and folk tales, or original stories.
+
+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 narration at 44 px or more, the moral at 56 px or more, and puppets at least a third of the frame height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("The Fox and the Crow (an Aesop fable)") unless my content asks for it.
+
+SOUND
+- Music: a gentle folk melody on plucked strings (triangle plucks) with a soft drone.
+- Map events to the kit: puppets entering get a wooden creak (a low filtered noise sweep) and SND.tap; talking gets soft clicks; the key action gets a small drum hit (SND.thud); the curtain gets a long soft "whoosh"; the moral gets an open chord. A low flame crackle runs under everything.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the melody very low and mark creaks 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: Shadow Puppets
+Family: Character Story
+Look: A shadow-puppet theatre: jointed black silhouette puppets on visible rods, pressed against a warm backlit paper screen that glows and flickers like a flame, with cut-out scenery, a wooden stage frame and fable lines in an elegant serif.
+How it explains: Puppets slide in on their rods and act with simple jointed moves (a beak that opens, a jaw that talks, a head that tilts, legs that step). Scenery pieces slide behind them, the light flickers and breathes, and each beat of the story is narrated in a serif line at the bottom before the moral closes the curtain.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/shadow-puppets.html` (60.5 KB)