@amg555/frameforge-mcp 2.7.6 → 2.7.8

package/.agent/skills/motion-styles/prompts/bio-glow.md

@@ -1,149 +0,0 @@
-# Motion graphics style #09: Bio Glow
-
-- **ID:** `bio-glow`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.
-
-## How It Explains
-The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.
-
-## Demo
-Your blood in 60 seconds
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Bio Glow" 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, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom).
-- 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: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.
-- The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.
-- Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything "fresh", off-white for defenders.
-- Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.
-- One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.
-- Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.
-- Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Your blood in 60 seconds") unless my content asks for it.
-
-SOUND
-- Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.
-- Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow "whoosh"; counters "tick" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets "shimmer".
-- Full mix (no voiceover): keep the heartbeat and the dark pad, at most about 3 sounds at once, and drop the heartbeat for one beat before the counter locks.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Bio Glow
-Family: 3D
-Look: Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.
-How it explains: The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Bio Glow" 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 hero object swims into its close-up as it is named, each label draws its leader line on the word it names, small things arrive on the word that introduces them, and the counter locks on the last syllable of its 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).
-- 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, CELLS, the hero and guest objects in init3() (the red cell, oxygen, the white cell), pose(t), the labels and counters in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the inside-out vessel tube, the travelling camera and flowing cells in pose(), proj3() for labels, leader(), chip(), wordLine(), vignette() and the red bloom).
-- 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: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Everything is Three.js geometry posed from t: a big inside-out cylinder for the vessel, tori for red cells, a displaced icosahedron for white cells, small emissive spheres for molecules. No images or models.
-- The camera always moves forward down the vessel and sways gently; cells flow past at different speeds and fade into the fog behind. Keep the fog and the dark red background so depth reads on a phone.
-- Palette: deep blood red background (#3a070b), glossy cell red (#c91d2c), warm salmon accent (#ff8f7d) for the second headline line, cool blue (#7fd3ff) only for oxygen or anything "fresh", off-white for defenders.
-- Type: Space Grotesk 700 for headlines at the top, white then salmon. JetBrains Mono for labels in frosted chips with a 1.5 px white outline, joined to their object by a thin leader line that draws itself.
-- One hero object per beat comes close to the camera; everything else stays as moving background. Labels always name a real structure with a real size or job.
-- Numbers: one big glowing counter at the bottom with a small mono caption under it. Use real, checked figures for the body.
-- Pace: the hook lands in under 1 second, the hero arrives by second 3, one new label every 1 to 2 seconds, and the takeaway holds about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more, and the big counter at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Your blood in 60 seconds") unless my content asks for it.
-
-SOUND
-- Bed: a slow heartbeat (two low thumps per beat) under a dark, filtered pad, plus a soft flowing hiss.
-- Map events to the kit: labels get a soft tick; molecules sticking get small glassy pings that climb; the hero arrival gets a slow "whoosh"; counters "tick" only when the shown number changes; a new kind of cell gets a low swell; the takeaway gets "shimmer".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the heartbeat very low, mark pings and ticks soft: true, and keep the shimmer for the takeaway only.
-- 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: Bio Glow
-Family: 3D
-Look: Inside the body, built in Three.js: glossy red cells drift down a glowing red vessel toward the camera, with fog for depth, a warm bloom, and clean white labels on thin leader lines.
-How it explains: The camera travels down the vessel the whole time. One hero cell swims up close and gets a label, small blue oxygen bubbles fly in and stick to it, a big glowing counter climbs, and a bumpy white defender cell rolls through before the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/bio-glow.html` (61.2 KB)

package/.agent/skills/motion-styles/prompts/blueprint.md

@@ -1,145 +0,0 @@
-# Motion graphics style #24: Blueprint
-
-- **ID:** `blueprint`
-- **Family:** Hand-Drawn
-- **Canvas:** `720x1280`
-- **Fonts:** Space Grotesk (700), JetBrains Mono (500 and 700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.
-
-## How It Explains
-The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.
-
-## Demo
-How a pin tumbler lock works
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Blueprint" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the mechanism geometry (PINS, CUTS, the housing and key profile in keyY()), the callouts, the wrong-version beat, the takeaway in the title block and scoreSound(). Keep and reuse the style's helpers (the blueprint grid, line(), the ink-in reveal, dim() dimension lines, the dashed yellow reference line, callout() mono labels on leaders, the corner title block, the moving-mechanism approach (positions computed from the driving part)).
-- 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: Space Grotesk (700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Background: blueprint blue (#0d3a6e) with a fine 12 px grid and a 60 px major grid. All line work is pale (#d8eeff), 2 px, with no fills except faint hatching.
-- Draw the real mechanism with correct proportions and part names. Compute every moving part from the part that drives it (here each pin height comes from the key profile under it), so the motion is physically right.
-- Yellow (#ffd75e) is only for the critical reference (a dashed line or a highlight) and the success state; red (#ff6b6b) only for a failure.
-- Dimension lines with arrowheads and mono measurements; callouts in JetBrains Mono on thin leader lines; a title block in the bottom-right corner with sheet number and scale.
-- Type: Space Grotesk 700 headline at the top (white, second line pale blue).
-- Pace: ink-in about 2 seconds, then the mechanism in 2 to 3 seconds, the success beat, the failure beat, and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, callouts at 22 px or more and dimension text at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("How a pin tumbler lock works") unless my content asks for it.
-
-SOUND
-- Bed: a soft, steady pad with a slow pulse.
-- Map events to the kit: line work gets drafting-pen scratches (SND.scratch); each part that lifts or drops gets a small metallic click; success gets a two-note chime and "click"; failure gets a dull thud; the takeaway gets an open chord.
-- Full mix (no voiceover): drafting-pen scratches during the ink-in, a metallic click for every part that moves, and a soft pad.
-- 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: Blueprint
-Family: Hand-Drawn
-Look: A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.
-How it explains: The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Blueprint" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. The drawing inks in during the intro sentence, the driving part moves while its action is described, the highlight lands on the word that says it works, and the wrong version appears on "but" or "if".
-- 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 mechanism geometry (PINS, CUTS, the housing and key profile in keyY()), the callouts, the wrong-version beat, the takeaway in the title block and scoreSound(). Keep and reuse the style's helpers (the blueprint grid, line(), the ink-in reveal, dim() dimension lines, the dashed yellow reference line, callout() mono labels on leaders, the corner title block, the moving-mechanism approach (positions computed from the driving part)).
-- 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: Space Grotesk (700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Background: blueprint blue (#0d3a6e) with a fine 12 px grid and a 60 px major grid. All line work is pale (#d8eeff), 2 px, with no fills except faint hatching.
-- Draw the real mechanism with correct proportions and part names. Compute every moving part from the part that drives it (here each pin height comes from the key profile under it), so the motion is physically right.
-- Yellow (#ffd75e) is only for the critical reference (a dashed line or a highlight) and the success state; red (#ff6b6b) only for a failure.
-- Dimension lines with arrowheads and mono measurements; callouts in JetBrains Mono on thin leader lines; a title block in the bottom-right corner with sheet number and scale.
-- Type: Space Grotesk 700 headline at the top (white, second line pale blue).
-- Pace: ink-in about 2 seconds, then the mechanism in 2 to 3 seconds, the success beat, the failure beat, and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, callouts at 22 px or more and dimension text at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("How a pin tumbler lock works") unless my content asks for it.
-
-SOUND
-- Bed: a soft, steady pad with a slow pulse.
-- Map events to the kit: line work gets drafting-pen scratches (SND.scratch); each part that lifts or drops gets a small metallic click; success gets a two-note chime and "click"; failure gets a dull thud; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark scratches and clicks 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: Blueprint
-Family: Hand-Drawn
-Look: A technical drawing on blueprint blue: pale line work on a fine grid, dimension lines with arrowheads, a dashed yellow reference line, mono callouts and a title block in the corner, with the mechanism actually moving.
-How it explains: The drawing inks itself in, then the mechanism runs: a part slides in and every other part reacts the way it really would. A yellow line or highlight shows the moment it works, a wrong version shows why it fails, and the title block holds the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/blueprint.html` (61.0 KB)

package/.agent/skills/motion-styles/prompts/breaking-desk.md

@@ -1,147 +0,0 @@
-# Motion graphics style #46: Breaking Desk
-
-- **ID:** `breaking-desk`
-- **Family:** Shorts Format
-- **Canvas:** `720x1280`
-- **Fonts:** Archivo Black, Inter (700 to 900), JetBrains Mono (600)
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.
-
-## How It Explains
-The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a "MORE AT 6" style card closes.
-
-## Demo
-Weekly AI news recap
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Breaking Desk" 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, the channel name (invented), HEADLINES, TICKER items, the map inset dot position, the closing card and scoreSound(); load your own footage with Load footage. Keep and reuse the style's helpers (footage() under everything, the LIVE bug and clock, the BREAKING tab, the typing headline bar with a flash, the ticker, the map inset with a pulsing dot, the headline swap wipe and the colour rules).
-- 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 (600).
-
-THE STYLE
-- Built for your footage: everything sits on top of footage(), which shows your clip when it is loaded and a stand-in presenter until then. Keep the presenter's face clear of graphics.
-- Always an invented channel name and look; never imitate a real network's logo, colours or layout, and never present opinions as reported fact.
-- Red (#e11d2e) for LIVE and BREAKING only; white bars with near-black text (#0b1220) for headlines; a dark ticker bar with white mono text.
-- Headline bars type themselves at about 30 characters a second and flash white once complete.
-- The map inset is a dark rounded card with simple continent blobs and a pulsing red dot.
-- Pace: bug and tab in the first second, one headline every 4 to 5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the ticker at 22 px or more and the bug at 24 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 ("Weekly AI news recap") unless my content asks for it.
-
-SOUND
-- Bed: a tense news bed (a low pulsing synth with soft hats).
-- Map events to the kit: open with a sting (a short brass-like sawtooth chord plus a timpani boom); the tab gets "whoosh"; typing gets soft ticks; the headline flash gets "click"; swaps get "whoosh" and "glitch" at low gain; the close gets a short sting.
-- Full mix (no voiceover): a news sting (a brass-like chord with a timpani hit) at the start, a tension bed, a whoosh for each swap and soft ticks for typing.
-- 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: Breaking Desk
-Family: Shorts Format
-Look: An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.
-How it explains: The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a "MORE AT 6" style card closes.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Breaking Desk" 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 BREAKING tab lands on the first word, the headline types while it is read, the map dot pulses on the place name, and the second headline swaps on "and" or "also".
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL, the channel name (invented), HEADLINES, TICKER items, the map inset dot position, the closing card and scoreSound(); load your own footage with Load footage. Keep and reuse the style's helpers (footage() under everything, the LIVE bug and clock, the BREAKING tab, the typing headline bar with a flash, the ticker, the map inset with a pulsing dot, the headline swap wipe and the colour rules).
-- 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 (600).
-
-THE STYLE
-- Built for your footage: everything sits on top of footage(), which shows your clip when it is loaded and a stand-in presenter until then. Keep the presenter's face clear of graphics.
-- Always an invented channel name and look; never imitate a real network's logo, colours or layout, and never present opinions as reported fact.
-- Red (#e11d2e) for LIVE and BREAKING only; white bars with near-black text (#0b1220) for headlines; a dark ticker bar with white mono text.
-- Headline bars type themselves at about 30 characters a second and flash white once complete.
-- The map inset is a dark rounded card with simple continent blobs and a pulsing red dot.
-- Pace: bug and tab in the first second, one headline every 4 to 5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 40 px or more, the ticker at 22 px or more and the bug at 24 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 ("Weekly AI news recap") unless my content asks for it.
-
-SOUND
-- Bed: a tense news bed (a low pulsing synth with soft hats).
-- Map events to the kit: open with a sting (a short brass-like sawtooth chord plus a timpani boom); the tab gets "whoosh"; typing gets soft ticks; the headline flash gets "click"; swaps get "whoosh" and "glitch" at low gain; the close gets a short sting.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the bed very low and mark ticks 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: Breaking Desk
-Family: Shorts Format
-Look: An invented news-desk package over your footage: a LIVE bug with a channel name, a red BREAKING tab, a white headline bar that types itself, a scrolling ticker, a map inset with a pulsing dot, and a clock.
-How it explains: The LIVE bug and clock pop in, the BREAKING tab slides in, the headline types out with a flash, the ticker scrolls under it, and a map inset shows where it happened. A second headline swaps in with a wipe for the follow-up, and a "MORE AT 6" style card closes.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/breaking-desk.html` (57.2 KB)

package/.agent/skills/motion-styles/prompts/callout-kit.md

@@ -1,147 +0,0 @@
-# Motion graphics style #50: Callout Kit
-
-- **ID:** `callout-kit`
-- **Family:** Edit Overlay
-- **Canvas:** `720x1280`
-- **Fonts:** Permanent Marker, JetBrains Mono (700), Inter (800)
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.
-
-## How It Explains
-Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.
-
-## Demo
-Pointing out an app on your phone in a review
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Callout Kit" 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 the callout list (positions, sizes, labels, what the zoom box shows), and scoreSound(); load your clip with Load footage and set the coordinates to your shot. Keep and reuse the style's helpers (footage(), the hand-drawn marker circle (hdEllipse-style), marker arrows with labels, the zoom box with connector lines and border, the pixelate blur mask, the spotlight cut-out and the draw-on timing).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Permanent Marker, JetBrains Mono (700), Inter (800).
-
-THE STYLE
-- Built for your footage: callouts are placed in frame coordinates on top of footage(); set them to where things sit in your shot.
-- Marker red (#ff3b3b) for circles, arrows and labels (Permanent Marker), with a subtle dark shadow so they read on any footage.
-- The zoom box: a white-bordered rounded rectangle showing the detail at 2× (or a drawn stand-in), a small "2× ZOOM" tag, and two thin connector lines back to the source area.
-- Blur masks pixelate (blocky mosaic) anything private: faces of strangers, emails, plates. Always cover before it appears.
-- Spotlight: everything darkens to 60% except a soft circle on the point.
-- One callout at a time; each draws on in 0.4 to 0.8 seconds and clears before the next.
-
-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 marker labels at 44 px or more, mono tags at 20 px or more, and line widths at 6 px or more so they read on a phone. 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 ("Pointing out an app on your phone in a review") unless my content asks for it.
-
-SOUND
-- No music by default (your clip leads); effects only.
-- Map events to the kit: circles and underlines get "marker"; arrows get a soft "whoosh"; the zoom box gets "pop"; the blur gets a "click" (shutter); the spotlight gets a soft low swell.
-- Full mix (no voiceover): marker squeaks while drawing, a pop for the zoom box, a soft whoosh for the arrow, a camera-shutter click for the blur.
-- 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: Callout Kit
-Family: Edit Overlay
-Look: Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.
-How it explains: Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Callout Kit" 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. Each circle starts drawing on the word that names the thing, arrows land on "this" or "here", the zoom box opens on the detail word, and the blur appears before anything private is visible.
-- 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 the callout list (positions, sizes, labels, what the zoom box shows), and scoreSound(); load your clip with Load footage and set the coordinates to your shot. Keep and reuse the style's helpers (footage(), the hand-drawn marker circle (hdEllipse-style), marker arrows with labels, the zoom box with connector lines and border, the pixelate blur mask, the spotlight cut-out and the draw-on timing).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Permanent Marker, JetBrains Mono (700), Inter (800).
-
-THE STYLE
-- Built for your footage: callouts are placed in frame coordinates on top of footage(); set them to where things sit in your shot.
-- Marker red (#ff3b3b) for circles, arrows and labels (Permanent Marker), with a subtle dark shadow so they read on any footage.
-- The zoom box: a white-bordered rounded rectangle showing the detail at 2× (or a drawn stand-in), a small "2× ZOOM" tag, and two thin connector lines back to the source area.
-- Blur masks pixelate (blocky mosaic) anything private: faces of strangers, emails, plates. Always cover before it appears.
-- Spotlight: everything darkens to 60% except a soft circle on the point.
-- One callout at a time; each draws on in 0.4 to 0.8 seconds and clears before the next.
-
-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 marker labels at 44 px or more, mono tags at 20 px or more, and line widths at 6 px or more so they read on a phone. 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 ("Pointing out an app on your phone in a review") unless my content asks for it.
-
-SOUND
-- No music by default (your clip leads); effects only.
-- Map events to the kit: circles and underlines get "marker"; arrows get a soft "whoosh"; the zoom box gets "pop"; the blur gets a "click" (shutter); the spotlight gets a soft low swell.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound soft: true.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Callout Kit
-Family: Edit Overlay
-Look: Hand-drawn annotation tools over your footage: red marker circles that draw themselves, arrows with marker labels, a magnifier box that zooms into a detail with connector lines, a pixelate blur for anything private, and a pulsing spotlight.
-How it explains: Each callout draws itself on the beat: the marker circle loops around the thing, an arrow swings in with a label, the zoom box pops open with lines back to the source, a blur mask pixelates a private area, and a spotlight darkens everything except the point. They clear before the next one.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/callout-kit.html` (56.8 KB)