@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/prompts/pop-info.md

@@ -1,145 +0,0 @@
-# Motion graphics style #07: Pop Info
-
-- **ID:** `pop-info`
-- **Family:** Illustrated
-- **Canvas:** `1280x720`
-- **Fonts:** Fredoka (500 to 700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.
-
-## How It Explains
-The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.
-
-## Demo
-Why is the milk always at the back of the store?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Pop Info" 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.
-- Replace the demo's story: TL, the scene (drawRoom, drawShelf and the product layout ROWS, or a new setting for my topic), the character (drawShopper) and its reactions, the bubble contents (drawBubble: mascot, counter and tag), drawPath, the camera move in renderAt and scoreSound(). Keep and reuse the style's helpers (the 680 x 383 design space with renderAt() scaling it to the canvas, prog(), popS(), wobble(), blink(), the easings, rr(), the dust layer, the iris wipe (drawWipe), the parallax split between background and foreground, and the explainer() compositor).
-- 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: Fredoka (500 to 700).
-
-THE STYLE
-- Everything is original flat vector art drawn with canvas paths: no images, no outlines, simple rounded shapes, one flat shadow tone per object, soft highlights, and a few drifting dust specks for life. Invent the setting and characters for my topic; never copy a real brand, logo, mascot or packaging.
-- Draw in the 680 x 383 design space and let renderAt() scale it, so the art stays crisp at any size. Keep shapes big and readable on a phone.
-- Palette: a muted, desaturated room (sage wall #D7DCCB, warm floor #C4B79D), warm accent objects (#E07A5F, #F2CC8F, #81B29A, #6C9BB8), deep teal #2F6F73 for the idea bubble, coral #E85D4A for alerts and signs, and sunny yellow #FFD86B for tags, the iris ring and sparkles. Text is white or dark teal.
-- One character with a strong, simple emotion (eyebrows, mouth, blinks, a sweat drop, a sigh) is the emotional anchor. It sits in the foreground with gentle parallax while the camera pushes the background.
-- The idea lives in a bubble: a friendly mascot or icon, a number that counts up with an eased curve, and a small pill tag. Numbers must be real or clearly framed as an example; if you cannot verify one, ask me.
-- Motion is springy and playful: things pop in with a back-eased scale (popS), settle with a decaying wobble, the scene slides in from the sides, a dotted path draws itself and a pin drops, and the camera does one slow push. Open and close with the teal iris wipe with a yellow ring.
-- Keep it to one scene per idea, with clear staging: setting, character reaction, the idea in the bubble, the visual proof (path, arrow or chart), then the iris closes.
-
-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 1280x720 in the 680 x 383 design space keep the main number at 21 px or more, labels at 11 px or more and any title at 26 px or more (that is about 40, 21 and 50 px at 1280x720), and keep the character and the bubble large. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Why is the milk always at the back of the store?") unless my content asks for it.
-
-SOUND
-- Soft, toy-like and sparse: rounded pops for the bubble, tags and pin, little sine bloops for character reactions, wooden taps for landings, counter steps and path dots (thinning out as the counter lands), airy whooshes for the iris and the slides, and one breathy sigh.
-- No chimes, bells, pings or sparkle sounds, even for winks and sparkles on screen. The cartoon carries the charm; the sound only gives it weight.
-- Full mix (no voiceover): a light, friendly music bed (k.music at a low gain), at most about 3 sounds at once, and a short quiet moment before the pin or the payoff lands.
-- 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: Pop Info
-Family: Illustrated
-Look: A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.
-How it explains: The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Pop Info" 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 character reacts on the word that carries the feeling; the bubble pops in as the idea is introduced; the counter starts as the number is spoken and locks on its last syllable; the path draws while the journey is described and the pin drops on the destination.
-- 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.
-- Replace the demo's story: TL, the scene (drawRoom, drawShelf and the product layout ROWS, or a new setting for my topic), the character (drawShopper) and its reactions, the bubble contents (drawBubble: mascot, counter and tag), drawPath, the camera move in renderAt and scoreSound(). Keep and reuse the style's helpers (the 680 x 383 design space with renderAt() scaling it to the canvas, prog(), popS(), wobble(), blink(), the easings, rr(), the dust layer, the iris wipe (drawWipe), the parallax split between background and foreground, and the explainer() compositor).
-- 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: Fredoka (500 to 700).
-
-THE STYLE
-- Everything is original flat vector art drawn with canvas paths: no images, no outlines, simple rounded shapes, one flat shadow tone per object, soft highlights, and a few drifting dust specks for life. Invent the setting and characters for my topic; never copy a real brand, logo, mascot or packaging.
-- Draw in the 680 x 383 design space and let renderAt() scale it, so the art stays crisp at any size. Keep shapes big and readable on a phone.
-- Palette: a muted, desaturated room (sage wall #D7DCCB, warm floor #C4B79D), warm accent objects (#E07A5F, #F2CC8F, #81B29A, #6C9BB8), deep teal #2F6F73 for the idea bubble, coral #E85D4A for alerts and signs, and sunny yellow #FFD86B for tags, the iris ring and sparkles. Text is white or dark teal.
-- One character with a strong, simple emotion (eyebrows, mouth, blinks, a sweat drop, a sigh) is the emotional anchor. It sits in the foreground with gentle parallax while the camera pushes the background.
-- The idea lives in a bubble: a friendly mascot or icon, a number that counts up with an eased curve, and a small pill tag. Numbers must be real or clearly framed as an example; if you cannot verify one, ask me.
-- Motion is springy and playful: things pop in with a back-eased scale (popS), settle with a decaying wobble, the scene slides in from the sides, a dotted path draws itself and a pin drops, and the camera does one slow push. Open and close with the teal iris wipe with a yellow ring.
-- Keep it to one scene per idea, with clear staging: setting, character reaction, the idea in the bubble, the visual proof (path, arrow or chart), then the iris closes.
-
-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 1280x720 in the 680 x 383 design space keep the main number at 21 px or more, labels at 11 px or more and any title at 26 px or more (that is about 40, 21 and 50 px at 1280x720), and keep the character and the bubble large. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Why is the milk always at the back of the store?") unless my content asks for it.
-
-SOUND
-- Soft, toy-like and sparse: rounded pops for the bubble, tags and pin, little sine bloops for character reactions, wooden taps for landings, counter steps and path dots (thinning out as the counter lands), airy whooshes for the iris and the slides, and one breathy sigh.
-- No chimes, bells, pings or sparkle sounds, even for winks and sparkles on screen. The cartoon carries the charm; the sound only gives it weight.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark taps, counter ticks and path dots soft: true and keep pops for the bubble, the tag and the pin.
-- 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: Pop Info
-Family: Illustrated
-Look: A flat-vector animated infographic, drawn entirely in code: a cosy cartoon scene (here a grocery aisle in soft perspective), one small character with a big feeling, a teal thought bubble that carries the idea, a counter, a dotted path and an iris wipe in and out. Muted room colours, warm product colours, rounded Fredoka type.
-How it explains: The scene builds itself: an iris opens, shelves slide in from both sides, the character pops up and reacts (annoyed, looking, sighing). The idea appears as a bubble with a friendly mascot, a number counts up inside it with a little tag, a dotted path draws through the scene to a pin, and the camera slowly pushes toward the point of interest. An iris closes on the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/pop-info.html` (47.7 KB)

package/.agent/skills/motion-styles/prompts/product-turntable.md

@@ -1,149 +0,0 @@
-# Motion graphics style #21: Product Turntable
-
-- **ID:** `product-turntable`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.
-
-## How It Explains
-The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.
-
-## Demo
-Meet Luma (an invented skincare bottle)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Product Turntable" 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 product shape (the lathe profile, cap, band), the label texture text, CALLOUTS (text and anchor points), the name and tagline and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dark studio with spot key, rim and fill lights, the glossy pedestal with the emissive rim ring, the turning product, the light sweep pass, callouts on leader lines, the hero name card and grain()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500).
-
-THE STYLE
-- The product is built in Three.js from a LatheGeometry profile (bottles, jars, cups), cylinders and boxes, with physical materials (clearcoat, metal caps) and a label texture painted on a canvas. Always an invented product and brand; never a real logo, packaging or brand name.
-- Studio: near-black (#141417) with one warm spot key from the upper left, a cool blue rim light from behind, and a glossy dark pedestal with a thin glowing amber ring.
-- The product turns slowly the whole time; the camera eases in at the start and settles for the hero frame.
-- Callouts: white Inter 700 titles with small mono details, on thin amber leader lines from points on the product, alternating left and right.
-- Type: Instrument Serif italic for the product name (white, huge); Inter and JetBrains Mono for specs; nothing else.
-- Claims must be true for the product you are showing; label invented figures as examples.
-- Pace: the first callout lands by second 2, one callout every 1.5 to 2 seconds, hold the hero frame about 3 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 product name at 80 px or more, callout titles at 26 px or more and callout details at 18 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 ("Meet Luma (an invented skincare bottle)") unless my content asks for it.
-
-SOUND
-- Bed: a soft, warm luxury pad with no drums.
-- Map events to the kit: callouts get a glassy "sparkle" and a soft tick; the light sweep gets a slow airy "whoosh"; the hero card gets a deep, soft hit (a low sine boom) with an open chord.
-- Full mix (no voiceover): keep the soft luxury pad, warm swells, a glassy sparkle per callout, and one deep hit for the hero card.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Product Turntable
-Family: 3D
-Look: A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.
-How it explains: The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Product Turntable" 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. Each callout pops as its feature is named, the light sweep passes on the product name, and the hero card lands on the last line.
-- 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 product shape (the lathe profile, cap, band), the label texture text, CALLOUTS (text and anchor points), the name and tagline and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dark studio with spot key, rim and fill lights, the glossy pedestal with the emissive rim ring, the turning product, the light sweep pass, callouts on leader lines, the hero name card and grain()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic), Inter (500 to 800), JetBrains Mono (500).
-
-THE STYLE
-- The product is built in Three.js from a LatheGeometry profile (bottles, jars, cups), cylinders and boxes, with physical materials (clearcoat, metal caps) and a label texture painted on a canvas. Always an invented product and brand; never a real logo, packaging or brand name.
-- Studio: near-black (#141417) with one warm spot key from the upper left, a cool blue rim light from behind, and a glossy dark pedestal with a thin glowing amber ring.
-- The product turns slowly the whole time; the camera eases in at the start and settles for the hero frame.
-- Callouts: white Inter 700 titles with small mono details, on thin amber leader lines from points on the product, alternating left and right.
-- Type: Instrument Serif italic for the product name (white, huge); Inter and JetBrains Mono for specs; nothing else.
-- Claims must be true for the product you are showing; label invented figures as examples.
-- Pace: the first callout lands by second 2, one callout every 1.5 to 2 seconds, hold the hero frame about 3 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 product name at 80 px or more, callout titles at 26 px or more and callout details at 18 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 ("Meet Luma (an invented skincare bottle)") unless my content asks for it.
-
-SOUND
-- Bed: a soft, warm luxury pad with no drums.
-- Map events to the kit: callouts get a glassy "sparkle" and a soft tick; the light sweep gets a slow airy "whoosh"; the hero card gets a deep, soft hit (a low sine boom) with an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark sparkles soft: true and keep the swells 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: Product Turntable
-Family: 3D
-Look: A premium product shot in Three.js: an invented product turning on a glossy dark pedestal with a glowing amber rim, a warm key light and a cool rim light, with thin spec callouts and a big italic serif name.
-How it explains: The camera eases in on the product as it turns, a light sweep glides across it, and spec callouts pop out one at a time on thin leader lines. It ends on a hero frame with the product name in a big italic serif.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/product-turntable.html` (58.1 KB)

package/.agent/skills/motion-styles/prompts/punch-captions.md

@@ -1,145 +0,0 @@
-# Motion graphics style #48: Punch Captions
-
-- **ID:** `punch-captions`
-- **Family:** Edit Overlay
-- **Canvas:** `720x1280`
-- **Fonts:** Anton, Inter (800)
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.
-
-## How It Explains
-Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.
-
-## Demo
-A talking-head hook: "This one habit changed everything"
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Punch Captions" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL and CAPS (chunks of words with their times, which word is the key word, which sticker pops), PUNCHES (zoom hits), the handle and scoreSound(); load your clip with Load footage and paste word timings for the captions. Keep and reuse the style's helpers (footage() with punch zooms, the chunked Anton captions with thick outline and slam-in, the yellow tilted key word, the sticker painters (bolt, spark, arrow, star), the safe-zone layout and the handle chip).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800).
-
-THE STYLE
-- Built for your footage: footage() fills the frame (your clip when loaded, a stand-in until then). Captions sit in the middle band, never over the eyes, and stay inside phone safe zones.
-- Captions: Anton, white, all caps, a black outline about 12% of the size, 1 to 3 words per chunk, centred; each word slams in (scale 1.6 to 1, quick blur).
-- The key word of each chunk: yellow (#ffe14d), 25% bigger and tilted a few degrees, with a punch zoom (4 to 8%) on the footage at the same moment.
-- Stickers are drawn in code (bolt, spark burst, arrow, star) in yellow or white with a black outline; never emoji images or brand stickers.
-- Never caption the whole transcript at once: chunks of 1 to 3 words only.
-
-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 caption words at 76 px or more, key words at 96 px or more and keep captions inside the middle 60% of the 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 ("A talking-head hook: "This one habit changed everything"") unless my content asks for it.
-
-SOUND
-- Bed: none (your audio leads). Effects only.
-- Map events to the kit: each chunk gets a soft "pop"; key words get "slam" at low gain with the punch zoom; stickers get "sparkle" or SND.bloop; chunk changes with a cut get a short "whoosh".
-- Full mix (no voiceover): soft whooshes and pops so the clip still feels edited; with your own audio, keep only small pops and the punch "slam" at low gain.
-- 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: Punch Captions
-Family: Edit Overlay
-Look: High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.
-How it explains: Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Punch Captions" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Every caption word slams in at the start of its spoken word, within 0.03 s; the key word lands on its stressed syllable with the punch zoom; stickers pop 0.1 s after the key word.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL and CAPS (chunks of words with their times, which word is the key word, which sticker pops), PUNCHES (zoom hits), the handle and scoreSound(); load your clip with Load footage and paste word timings for the captions. Keep and reuse the style's helpers (footage() with punch zooms, the chunked Anton captions with thick outline and slam-in, the yellow tilted key word, the sticker painters (bolt, spark, arrow, star), the safe-zone layout and the handle chip).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Anton, Inter (800).
-
-THE STYLE
-- Built for your footage: footage() fills the frame (your clip when loaded, a stand-in until then). Captions sit in the middle band, never over the eyes, and stay inside phone safe zones.
-- Captions: Anton, white, all caps, a black outline about 12% of the size, 1 to 3 words per chunk, centred; each word slams in (scale 1.6 to 1, quick blur).
-- The key word of each chunk: yellow (#ffe14d), 25% bigger and tilted a few degrees, with a punch zoom (4 to 8%) on the footage at the same moment.
-- Stickers are drawn in code (bolt, spark burst, arrow, star) in yellow or white with a black outline; never emoji images or brand stickers.
-- Never caption the whole transcript at once: chunks of 1 to 3 words only.
-
-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 caption words at 76 px or more, key words at 96 px or more and keep captions inside the middle 60% of the 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 ("A talking-head hook: "This one habit changed everything"") unless my content asks for it.
-
-SOUND
-- Bed: none (your audio leads). Effects only.
-- Map events to the kit: each chunk gets a soft "pop"; key words get "slam" at low gain with the punch zoom; stickers get "sparkle" or SND.bloop; chunk changes with a cut get a short "whoosh".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every caption sound soft: true and keep the slams at half gain.
-- 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: Punch Captions
-Family: Edit Overlay
-Look: High-retention captions over your talking-head clip: one to three words at a time in huge white Anton with a thick black outline, the key word swapped to yellow and tilted, little sticker pops (bolts, sparks, arrows) drawn in code, and punch-in zooms on the hits.
-How it explains: Captions follow the speech in tiny chunks, each word slamming in with a scale and blur; the stressed word turns yellow and bigger with a punch zoom on the footage, and a small code-drawn sticker pops beside it. A handle sits quietly at the bottom.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/punch-captions.html` (55.4 KB)

package/.agent/skills/motion-styles/prompts/quiz-countdown.md

@@ -1,145 +0,0 @@
-# Motion graphics style #38: Quiz Countdown
-
-- **ID:** `quiz-countdown`
-- **Family:** Shorts Format
-- **Canvas:** `720x1280`
-- **Fonts:** Archivo Black, Inter (700 to 900), JetBrains Mono (700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.
-
-## How It Explains
-The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.
-
-## Demo
-Which planet has the most moons?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Quiz Countdown" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, Q (the question, four answers, the correct index, the fact line), the question number, the next-question tease and scoreSound(). Keep and reuse the style's helpers (the striped background, the timer ring and countdown number, the question card, the answer pills with letter badges, the staggered slide-in, the reveal (green pill, check, dimmed wrong answers), the confetti burst and the comment prompt).
-- 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 to 900), JetBrains Mono (700).
-
-THE STYLE
-- Background: saturated orange (#ff7a1a) with wide diagonal lighter stripes that drift slowly.
-- Question card: white, 24 px corners, a soft orange shadow, a mono "QUESTION n / 10" label in orange above the question in Inter 800.
-- Answers: four white pills with an orange letter badge (A to D), sliding in from the right one after another.
-- Timer: a thick white ring that drains clockwise around a big Archivo Black number counting down; the last 3 seconds pulse.
-- Reveal: the right pill turns green (#2fb36b) with a check, the others drop to 40% opacity, confetti bursts from the right pill, and a one-line fact appears below.
-- Use real, current facts and say "as of" with the year when numbers change.
-
-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 question at 46 px or more, answers at 38 px or more and the countdown at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Which planet has the most moons?") unless my content asks for it.
-
-SOUND
-- Bed: an upbeat game-show pad with hats and a light kick.
-- Map events to the kit: the card gets "pop" and SND.paper; answers get "whoosh" plus a tick; each countdown second gets a "tick" (louder at 3, 2, 1); zero gets a buzzer (a low square tone); the reveal gets a bright arpeggio and "sparkle"; the fact gets a soft "pop".
-- Full mix (no voiceover): an upbeat game-show pad, a tick per second that gets louder near zero, a buzzer at zero and a fanfare on the reveal.
-- 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: Quiz Countdown
-Family: Shorts Format
-Look: A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.
-How it explains: The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Quiz Countdown" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. The question card lands on the first word of the question, each answer slides in as it is read, the countdown starts after the last answer, and the reveal lands on the answer 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, Q (the question, four answers, the correct index, the fact line), the question number, the next-question tease and scoreSound(). Keep and reuse the style's helpers (the striped background, the timer ring and countdown number, the question card, the answer pills with letter badges, the staggered slide-in, the reveal (green pill, check, dimmed wrong answers), the confetti burst and the comment prompt).
-- 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 to 900), JetBrains Mono (700).
-
-THE STYLE
-- Background: saturated orange (#ff7a1a) with wide diagonal lighter stripes that drift slowly.
-- Question card: white, 24 px corners, a soft orange shadow, a mono "QUESTION n / 10" label in orange above the question in Inter 800.
-- Answers: four white pills with an orange letter badge (A to D), sliding in from the right one after another.
-- Timer: a thick white ring that drains clockwise around a big Archivo Black number counting down; the last 3 seconds pulse.
-- Reveal: the right pill turns green (#2fb36b) with a check, the others drop to 40% opacity, confetti bursts from the right pill, and a one-line fact appears below.
-- Use real, current facts and say "as of" with the year when numbers change.
-
-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 question at 46 px or more, answers at 38 px or more and the countdown at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Which planet has the most moons?") unless my content asks for it.
-
-SOUND
-- Bed: an upbeat game-show pad with hats and a light kick.
-- Map events to the kit: the card gets "pop" and SND.paper; answers get "whoosh" plus a tick; each countdown second gets a "tick" (louder at 3, 2, 1); zero gets a buzzer (a low square tone); the reveal gets a bright arpeggio and "sparkle"; the fact gets a soft "pop".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep ticks soft: true but audible.
-- 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: Quiz Countdown
-Family: Shorts Format
-Look: A loud trivia Short on a bright orange striped background: a white question card, four answer pills with letter badges, a white timer ring that drains around a big countdown number, then a green reveal with confetti.
-How it explains: The question card pops in, the four answers slide in one by one, the ring drains while the number counts down with a tick each second, then the right answer flashes green with confetti while the others fade. A one-line fact explains the answer and the next question is teased.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/quiz-countdown.html` (57.3 KB)