@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/prompts/parchment-map.md

@@ -1,147 +0,0 @@
-# Motion graphics style #27: Parchment Map
-
-- **ID:** `parchment-map`
-- **Family:** Illustrated
-- **Canvas:** `720x1280`
-- **Fonts:** Playfair Display (700 and 900, italic), Special Elite
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.
-
-## How It Explains
-The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.
-
-## Demo
-The first trip around the world, 1519 to 1522
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Parchment Map" style (Illustrated) 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 land outlines in LAND (if the area changes), ROUTE (lon/lat waypoints with arrival times), STAMPS, the title, the counter and takeaway and scoreSound(). Keep and reuse the style's helpers (the pre-rendered parchment map layer (stains, graticule, double-inked coasts), the lon/lat to map projection, the camera that follows the ship, the dashed red route with arrowhead, the ship, the compass rose, the burnt-edge vignette and the Special Elite stamps).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), Special Elite.
-
-THE STYLE
-- The map is a pre-rendered parchment layer: warm paper (#efdcb2 to #dfc28a) with brown stains, a faint graticule every 30 degrees, and coastlines inked twice in sepia (#5a3a1c) with a pale fill. Keep geography roughly real for real places.
-- Project lon/lat to the map with one scale; route waypoints carry their real coordinates and their arrival time, so the ship always moves at story speed.
-- The route is a red (#a3261c) dashed line that grows behind the ship, with an arrowhead at the front. The ship is a small inked hull with two sails that bobs on the waves.
-- The camera pans across the map following the ship; the title and stamps stay fixed on screen.
-- Type: Playfair Display 900 for the title (second line italic), Special Elite typewriter text for date stamps on cream labels with a red border.
-- Burnt edges (a dark brown vignette) and paper grain on top of everything.
-- Pace: one stamp every 2 to 3 seconds of travel; hold the final stamp about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, stamps at 26 px or more and the counter at 60 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 first trip around the world, 1519 to 1522") unless my content asks for it.
-
-SOUND
-- Bed: a slow, low sea swell (brown noise with a slow filter sweep) and a warm, sparse pad.
-- Map events to the kit: the drawing route gets a soft quill scratch (SND.scratch); each stamp gets a stamp thud ("stamp" at low gain) and a soft bell; storms or deaths get a low swell; the takeaway gets an open chord.
-- Full mix (no voiceover): keep the slow sea swell, the quill scratch while the route draws, a creak or bell at each stamp, and a warm chord at the end.
-- 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: Parchment Map
-Family: Illustrated
-Look: An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.
-How it explains: The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Parchment Map" style (Illustrated) 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 ship reaches each place as it is named, the date stamp drops on the date, and the final stamp lands on the last spoken number.
-- 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 land outlines in LAND (if the area changes), ROUTE (lon/lat waypoints with arrival times), STAMPS, the title, the counter and takeaway and scoreSound(). Keep and reuse the style's helpers (the pre-rendered parchment map layer (stains, graticule, double-inked coasts), the lon/lat to map projection, the camera that follows the ship, the dashed red route with arrowhead, the ship, the compass rose, the burnt-edge vignette and the Special Elite stamps).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Playfair Display (700 and 900, italic), Special Elite.
-
-THE STYLE
-- The map is a pre-rendered parchment layer: warm paper (#efdcb2 to #dfc28a) with brown stains, a faint graticule every 30 degrees, and coastlines inked twice in sepia (#5a3a1c) with a pale fill. Keep geography roughly real for real places.
-- Project lon/lat to the map with one scale; route waypoints carry their real coordinates and their arrival time, so the ship always moves at story speed.
-- The route is a red (#a3261c) dashed line that grows behind the ship, with an arrowhead at the front. The ship is a small inked hull with two sails that bobs on the waves.
-- The camera pans across the map following the ship; the title and stamps stay fixed on screen.
-- Type: Playfair Display 900 for the title (second line italic), Special Elite typewriter text for date stamps on cream labels with a red border.
-- Burnt edges (a dark brown vignette) and paper grain on top of everything.
-- Pace: one stamp every 2 to 3 seconds of travel; hold the final stamp about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 64 px or more, stamps at 26 px or more and the counter at 60 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 first trip around the world, 1519 to 1522") unless my content asks for it.
-
-SOUND
-- Bed: a slow, low sea swell (brown noise with a slow filter sweep) and a warm, sparse pad.
-- Map events to the kit: the drawing route gets a soft quill scratch (SND.scratch); each stamp gets a stamp thud ("stamp" at low gain) and a soft bell; storms or deaths get a low swell; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the sea swell very low and mark scratches 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: Parchment Map
-Family: Illustrated
-Look: An aged ink map on stained parchment: hand-inked coastlines with a second faint outline, a graticule, burnt edges, a compass rose, a little sailing ship and a red dashed route that draws itself as the camera follows it across the map.
-How it explains: The camera pans across a wide map, following the ship as the red route draws behind it. At each key place a typewriter date stamp drops in, and a counter or final stamp sums up the journey before the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/parchment-map.html` (62.5 KB)

package/.agent/skills/motion-styles/prompts/physics-toybox.md

@@ -1,147 +0,0 @@
-# Motion graphics style #18: Physics Toybox
-
-- **ID:** `physics-toybox`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Archivo Black, Inter (700 and 800), JetBrains Mono (700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.
-
-## How It Explains
-A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.
-
-## Demo
-What if you tip a chain of growing dominoes?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Physics Toybox" 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, the chain (count, sizes, path, colours), the slow-motion window in simT(), the props, the facts in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3() with shadows, the floor, the deterministic fall model (each piece starts when the previous one hits it), the simT() time remap for slow motion, motion streaks, chip() and wordLine()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800), JetBrains Mono (700).
-
-THE STYLE
-- Every object is a simple, glossy Three.js primitive in toy colours (#ff5a5f, #2ec4b6, #3a86ff, #ff9f1c, #8f5bff) on a warm yellow floor (#ffe39b) with sharp soft shadows.
-- Motion must be physically believable but deterministic: compute fall angles, rolls and bounces from t with simple formulas (no physics engine), each piece starting when the previous one reaches it.
-- Slow motion: remap time with simT(t) for one key window (0.25×) and show a dark "0.25× SLOW-MO" chip while it runs.
-- Type: Archivo Black headline in near-black with the second line red; one white fact chip at the bottom in Inter 700.
-- Use real physics facts (with the source idea in plain words).
-- Pace: the setup holds under 2 seconds, the chain runs, slow motion lasts 2 to 3 seconds, the takeaway holds about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, the fact chip at 28 px or more and the slow-mo tag 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 ("What if you tip a chain of growing dominoes?") unless my content asks for it.
-
-SOUND
-- Bed: a playful, light pad with soft hats.
-- Map events to the kit: a rolling ball gets a soft filtered noise roll; each domino hit gets a "click" plus a wooden tap whose pitch drops as the pieces get bigger; slow motion gets a pitched-down "whoosh"; the last big hit gets SND.thud and "boom"; the takeaway gets an open chord.
-- Full mix (no voiceover): keep the playful pad, every hit audible, and a short gap before the last, biggest hit.
-- 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: Physics Toybox
-Family: 3D
-Look: Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.
-How it explains: A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Physics Toybox" 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 first hit lands on the word that starts the chain, slow motion begins on the word that sets up the key moment, and the last piece lands on the stressed word of 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) 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, the chain (count, sizes, path, colours), the slow-motion window in simT(), the props, the facts in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3() with shadows, the floor, the deterministic fall model (each piece starts when the previous one hits it), the simT() time remap for slow motion, motion streaks, chip() and wordLine()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (700 and 800), JetBrains Mono (700).
-
-THE STYLE
-- Every object is a simple, glossy Three.js primitive in toy colours (#ff5a5f, #2ec4b6, #3a86ff, #ff9f1c, #8f5bff) on a warm yellow floor (#ffe39b) with sharp soft shadows.
-- Motion must be physically believable but deterministic: compute fall angles, rolls and bounces from t with simple formulas (no physics engine), each piece starting when the previous one reaches it.
-- Slow motion: remap time with simT(t) for one key window (0.25×) and show a dark "0.25× SLOW-MO" chip while it runs.
-- Type: Archivo Black headline in near-black with the second line red; one white fact chip at the bottom in Inter 700.
-- Use real physics facts (with the source idea in plain words).
-- Pace: the setup holds under 2 seconds, the chain runs, slow motion lasts 2 to 3 seconds, the takeaway holds about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, the fact chip at 28 px or more and the slow-mo tag 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 ("What if you tip a chain of growing dominoes?") unless my content asks for it.
-
-SOUND
-- Bed: a playful, light pad with soft hats.
-- Map events to the kit: a rolling ball gets a soft filtered noise roll; each domino hit gets a "click" plus a wooden tap whose pitch drops as the pieces get bigger; slow motion gets a pitched-down "whoosh"; the last big hit gets SND.thud and "boom"; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark clacks soft: true and keep the final thud full.
-- 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: Physics Toybox
-Family: 3D
-Look: Bright plastic toys in Three.js on a sunny yellow floor: glossy balls, a white ramp and a curving chain of coloured dominoes that grow in size, with crisp shadows and a slow-motion moment on the key hit.
-How it explains: A ball rolls down the ramp and starts a chain reaction you can follow beat by beat. Time slows to a quarter when the important thing happens (a chip says so), then snaps back to full speed for the big finish and the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/physics-toybox.html` (58.6 KB)

package/.agent/skills/motion-styles/prompts/pixel-quest.md

@@ -1,145 +0,0 @@
-# Motion graphics style #32: Pixel Quest
-
-- **ID:** `pixel-quest`
-- **Family:** Retro
-- **Canvas:** `720x1280`
-- **Fonts:** Press Start 2P
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.
-
-## How It Explains
-The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.
-
-## Demo
-Level up your sleep
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Pixel Quest" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the LEVEL layout (gaps, platforms, gems), the hero sprite colours, QUESTS (dialog text and when they appear), the level-up text and scoreSound(). Keep and reuse the style's helpers (the low-res world canvas (180×320) scaled 4× with smoothing off, the walking/jumping hero sprite, the scrolling camera, pixel hearts, the XP bar and LVL counter, the typewriter dialog box, the level-up flash and the Press Start 2P lettering).
-- 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: Press Start 2P.
-
-THE STYLE
-- All world art is drawn at 180×320 on its own canvas with whole-pixel rectangles, then scaled 4× with image smoothing off. No anti-aliased shapes in the world layer.
-- Original sprites only: a small hero with a cap and two walking frames, gems (not coins), brick platforms and flags. Never copy a real game character, item or level.
-- Palette: limited and bright: sky bands (#5fcde4 to #a6e6f0), greens (#3f9b4f, #5ac85a), brown dirt (#8b5a2b), brick orange (#c86b2b), gem yellow (#ffd23f), hero red cap (#e63946) and blue overalls (#1d4ed8).
-- HUD on top in screen pixels: pixel hearts, an XP bar, a LVL number and a score, all in Press Start 2P with a black outline.
-- Dialog box: black with a white 3 px border at the bottom, text typed at about 30 characters a second with a blinking ▼.
-- Pace: the hero never stops walking; one quest every 2.5 seconds; the level-up near the end.
-
-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 dialog text at 20 px or more, HUD text at 24 px or more and titles at 44 px or more (all in Press Start 2P). 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 ("Level up your sleep") unless my content asks for it.
-
-SOUND
-- Music: a chiptune loop: a square-wave lead melody, a triangle bass on the beat, and short noise hats.
-- Map events to the kit: jumps get a rising square sweep; gems get a two-note bleep (SND.beep); dialog text gets tiny blips per few characters; level-up gets a fast rising arpeggio; the title blinks with a soft blip.
-- Full mix (no voiceover): keep the chiptune loop (square lead, triangle bass, noise hats), with jump, gem and level-up sounds on top.
-- 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: Pixel Quest
-Family: Retro
-Look: Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.
-How it explains: The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Pixel Quest" style (Retro) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each quest box opens on the first word of its tip and types while it is read, gems ping as they are counted, and the level-up flash lands on the payoff 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 LEVEL layout (gaps, platforms, gems), the hero sprite colours, QUESTS (dialog text and when they appear), the level-up text and scoreSound(). Keep and reuse the style's helpers (the low-res world canvas (180×320) scaled 4× with smoothing off, the walking/jumping hero sprite, the scrolling camera, pixel hearts, the XP bar and LVL counter, the typewriter dialog box, the level-up flash and the Press Start 2P lettering).
-- 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: Press Start 2P.
-
-THE STYLE
-- All world art is drawn at 180×320 on its own canvas with whole-pixel rectangles, then scaled 4× with image smoothing off. No anti-aliased shapes in the world layer.
-- Original sprites only: a small hero with a cap and two walking frames, gems (not coins), brick platforms and flags. Never copy a real game character, item or level.
-- Palette: limited and bright: sky bands (#5fcde4 to #a6e6f0), greens (#3f9b4f, #5ac85a), brown dirt (#8b5a2b), brick orange (#c86b2b), gem yellow (#ffd23f), hero red cap (#e63946) and blue overalls (#1d4ed8).
-- HUD on top in screen pixels: pixel hearts, an XP bar, a LVL number and a score, all in Press Start 2P with a black outline.
-- Dialog box: black with a white 3 px border at the bottom, text typed at about 30 characters a second with a blinking ▼.
-- Pace: the hero never stops walking; one quest every 2.5 seconds; the level-up near the end.
-
-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 dialog text at 20 px or more, HUD text at 24 px or more and titles at 44 px or more (all in Press Start 2P). 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 ("Level up your sleep") unless my content asks for it.
-
-SOUND
-- Music: a chiptune loop: a square-wave lead melody, a triangle bass on the beat, and short noise hats.
-- Map events to the kit: jumps get a rising square sweep; gems get a two-note bleep (SND.beep); dialog text gets tiny blips per few characters; level-up gets a fast rising arpeggio; the title blinks with a soft blip.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the loop low. Mark gem pings and text blips 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: Pixel Quest
-Family: Retro
-Look: Chunky pixel art drawn on a 180 by 320 grid and scaled up 4×: a side-scrolling level with a little hero, sky bands, pixel clouds, brick platforms and gems, under a retro HUD (hearts, XP bar, level number) with a dialog box for every tip.
-How it explains: The hero walks through the level while the camera scrolls with them. Each tip is a quest that pops up in a dialog box with typewriter text; the hero jumps gaps, grabs gems (the score climbs), and the level-up flash fills the XP bar for the payoff.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/pixel-quest.html` (59.5 KB)

package/.agent/skills/motion-styles/prompts/podcast-clip.md

@@ -1,147 +0,0 @@
-# Motion graphics style #47: Podcast Clip
-
-- **ID:** `podcast-clip`
-- **Family:** Shorts Format
-- **Canvas:** `720x1280`
-- **Fonts:** Inter (800 and 900), JetBrains Mono (800)
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.
-
-## How It Explains
-Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.
-
-## Demo
-A clip from an invented show, "The Side Project Show"
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Podcast Clip" 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, 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, LINES (speaker, words with times, which words are yellow), the show name and episode, and scoreSound(); load your recording with Load footage (it fills both panels, cropped). Keep and reuse the style's helpers (footage() in two rounded panels with a slight zoom on the active speaker, the green active ring, the seam captions with yellow key words and a thick black outline, the episode tag, the reactive waveform and the progress 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 (800 and 900), JetBrains Mono (800).
-
-THE STYLE
-- Built for your footage: both panels use footage() (your recording when loaded, cropped and zoomed differently per speaker; a stand-in until then). Keep faces clear of captions.
-- Black background (#0b0b0d); panels have 26 px corners; the active panel gets a 5 px green ring (#36d67b) and a 4% zoom.
-- Captions: Inter 900 white with a thick black stroke, 2 to 4 words at a time, key words in yellow (#ffd43b) and slightly bigger, popping in on their word.
-- Small black-glass name tags in the panel corners, an episode tag in green top left, the show name in white caps.
-- A waveform of rounded bars at the bottom reacts to who is talking, and a thin progress line runs across the bottom.
-- Pace: caption groups change every 0.6 to 1.2 seconds, following the speech exactly.
-
-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 captions at 44 px or more, name tags at 20 px or more and the episode tag 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 ("A clip from an invented show, "The Side Project Show"") unless my content asks for it.
-
-SOUND
-- Bed: a very low lo-fi pad so the voices sit on top.
-- Map events to the kit: caption groups get a very soft "pop"; speaker changes get a soft tick; the end card gets a short chime.
-- Full mix (no voiceover): a low lo-fi bed, a soft pop for each caption group and a tiny tick when the speaker changes; the real audio is your recording.
-- 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: Podcast Clip
-Family: Shorts Format
-Look: A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.
-How it explains: Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Podcast Clip" 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 caption group appears on its first spoken word, yellow words land on their stress, and the active ring switches on the first word of each speaker.
-- 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, LINES (speaker, words with times, which words are yellow), the show name and episode, and scoreSound(); load your recording with Load footage (it fills both panels, cropped). Keep and reuse the style's helpers (footage() in two rounded panels with a slight zoom on the active speaker, the green active ring, the seam captions with yellow key words and a thick black outline, the episode tag, the reactive waveform and the progress 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 (800 and 900), JetBrains Mono (800).
-
-THE STYLE
-- Built for your footage: both panels use footage() (your recording when loaded, cropped and zoomed differently per speaker; a stand-in until then). Keep faces clear of captions.
-- Black background (#0b0b0d); panels have 26 px corners; the active panel gets a 5 px green ring (#36d67b) and a 4% zoom.
-- Captions: Inter 900 white with a thick black stroke, 2 to 4 words at a time, key words in yellow (#ffd43b) and slightly bigger, popping in on their word.
-- Small black-glass name tags in the panel corners, an episode tag in green top left, the show name in white caps.
-- A waveform of rounded bars at the bottom reacts to who is talking, and a thin progress line runs across the bottom.
-- Pace: caption groups change every 0.6 to 1.2 seconds, following the speech exactly.
-
-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 captions at 44 px or more, name tags at 20 px or more and the episode tag 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 ("A clip from an invented show, "The Side Project Show"") unless my content asks for it.
-
-SOUND
-- Bed: a very low lo-fi pad so the voices sit on top.
-- Map events to the kit: caption groups get a very soft "pop"; speaker changes get a soft tick; the end card gets a short chime.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep everything soft: the voices carry the clip.
-- 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: Podcast Clip
-Family: Shorts Format
-Look: A vertical podcast clip: two stacked rounded speaker panels on black (host on top, guest below), a green ring on whoever is talking, bold captions in the seam with the key words in yellow, an episode tag and a live waveform at the bottom.
-How it explains: Captions appear two to four words at a time in the seam between the panels, the active-speaker ring jumps to whoever is talking with a slight zoom on their panel, the waveform reacts to the speech, and a progress line runs along the bottom so viewers know how long is left.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/podcast-clip.html` (55.5 KB)