@amg555/frameforge-mcp 2.7.6 → 2.7.7

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

@@ -1,145 +0,0 @@
-# Motion graphics style #31: Storybook
-
-- **ID:** `storybook`
-- **Family:** Illustrated
-- **Canvas:** `720x1280`
-- **Fonts:** Playfair Display (700, italic), Inter (600)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.
-
-## How It Explains
-Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.
-
-## Demo
-The fox who counted stars (a bedtime fable)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Storybook" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the PAGES (washes, the character outline paths, details, the sentence on each page), the counter or ending, and scoreSound(). Keep and reuse the style's helpers (the paper grain, wash() bloom (layered irregular blobs with soft edges), inkPath() line reveal, the gold ink stars, the word-by-word storyline, the page frame and the page-turn cut).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Playfair Display (700, italic), Inter (600).
-
-THE STYLE
-- Paper: warm cream watercolour paper (#fbf7ee) with fine grain and a thin brown frame around the picture area. The text area sits below the picture.
-- Washes: each area is several overlapping irregular blobs at low alpha (wash()), blooming outward from a centre over about a second, with a slightly darker edge.
-- Ink: one thin brown line (#3a2a20, 2 to 3 px) that draws the character and key objects along their path. Small gold details (#e8c35a) for stars and sparkles.
-- Palette: night blue washes (#2d4a8a), warm moon (#f6e1a0), green hills (#6a9a5b), the character in one warm colour (#e0793a).
-- Type: Playfair Display italic for the storyline, word by word, centred; Inter small caps for the chapter line.
-- Pace: a page takes about 6 seconds: washes, ink, details, then the sentence. Page turns take 0.8 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 storyline at 48 px or more and the chapter line 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 ("The fox who counted stars (a bedtime fable)") unless my content asks for it.
-
-SOUND
-- Music: a slow music-box melody (high sine notes with a little reverb) over a very soft pad.
-- Map events to the kit: each wash gets a soft brush swish (SND.paper, soft); ink lines get a very quiet scratch; stars get small high chimes; page turns get a longer paper sweep; the ending gets a gentle chord.
-- Full mix (no voiceover): keep the music-box melody, a soft brush swish per wash, and a paper sound for each page turn.
-- 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: Storybook
-Family: Illustrated
-Look: A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.
-How it explains: Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Storybook" 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. Each wash blooms while its part of the scene is described, the ink line draws while the character is introduced, and each storyline word fades in as it is spoken.
-- 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 PAGES (washes, the character outline paths, details, the sentence on each page), the counter or ending, and scoreSound(). Keep and reuse the style's helpers (the paper grain, wash() bloom (layered irregular blobs with soft edges), inkPath() line reveal, the gold ink stars, the word-by-word storyline, the page frame and the page-turn cut).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Playfair Display (700, italic), Inter (600).
-
-THE STYLE
-- Paper: warm cream watercolour paper (#fbf7ee) with fine grain and a thin brown frame around the picture area. The text area sits below the picture.
-- Washes: each area is several overlapping irregular blobs at low alpha (wash()), blooming outward from a centre over about a second, with a slightly darker edge.
-- Ink: one thin brown line (#3a2a20, 2 to 3 px) that draws the character and key objects along their path. Small gold details (#e8c35a) for stars and sparkles.
-- Palette: night blue washes (#2d4a8a), warm moon (#f6e1a0), green hills (#6a9a5b), the character in one warm colour (#e0793a).
-- Type: Playfair Display italic for the storyline, word by word, centred; Inter small caps for the chapter line.
-- Pace: a page takes about 6 seconds: washes, ink, details, then the sentence. Page turns take 0.8 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 storyline at 48 px or more and the chapter line 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 ("The fox who counted stars (a bedtime fable)") unless my content asks for it.
-
-SOUND
-- Music: a slow music-box melody (high sine notes with a little reverb) over a very soft pad.
-- Map events to the kit: each wash gets a soft brush swish (SND.paper, soft); ink lines get a very quiet scratch; stars get small high chimes; page turns get a longer paper sweep; the ending gets a gentle chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the music box very low and mark swishes 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: Storybook
-Family: Illustrated
-Look: A picture book on cream watercolour paper: soft washes that bloom in layer by layer, thin brown ink lines that draw the character, gold ink stars, and an italic serif storyline that appears word by word, with page-turn transitions.
-How it explains: Each page paints itself: the sky and ground washes bloom outward, the ink outline of the character draws on, small details pop, and the sentence reads in word by word under the picture. A page turn moves to the next moment of the story.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/storybook.html` (58.7 KB)

package/.agent/skills/motion-styles/prompts/swiss-grid.md

@@ -1,145 +0,0 @@
-# Motion graphics style #34: Swiss Grid
-
-- **ID:** `swiss-grid`
-- **Family:** Kinetic Type
-- **Canvas:** `720x1280`
-- **Fonts:** Archivo Black, Inter (500, 700 and 900)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.
-
-## How It Explains
-Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.
-
-## Demo
-73% of your brain is water
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Swiss Grid" style (Kinetic Type) 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 fact (NUM, its unit, the statement lines, the second point), the block layout in LAYOUTS, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the six-column grid, the wipe-in blocks, the digit-by-digit counter, the line-by-line mask reveals, the grid re-arrangement between LAYOUTS, the strict left alignment and the red, black and blue palette).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500, 700 and 900).
-
-THE STYLE
-- Off-white ground (#f5f5f2) with a faint six-column grid (60 px columns plus margins). Everything snaps to the grid; nothing is centred except by the grid.
-- Colour is structural: red (#e1251b) and blue (#1f4fd8) blocks, black (#111) type and bars, nothing else.
-- One huge number in Archivo Black, counting up digit by digit; statements in Inter 900, flush left, tight leading; labels in Inter 700 small caps with tracking.
-- Motion is precise: rectangular wipes, mask reveals that rise exactly one line, and layout changes where every block slides to a new grid position with the same easing.
-- Always show the source in small type at the bottom.
-- Pace: the composition builds in about 2 seconds, the number counts for about 1.5 seconds, one re-arrangement, then 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 big number at 180 px or more, statements at 46 px or more and labels 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 ("73% of your brain is water") unless my content asks for it.
-
-SOUND
-- Bed: a minimal pulse: a soft sine bass note on each beat and a quiet click track.
-- Map events to the kit: each block wipe gets a crisp "click"; number digits get a "tick" each; the lock gets a low sine hit; the re-arrangement gets a short "whoosh"; the takeaway gets a single clean chord.
-- Full mix (no voiceover): a minimal pulse (a soft sine bass and clicks), a crisp click per block, a low hit when the number 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: Swiss Grid
-Family: Kinetic Type
-Look: International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.
-How it explains: Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Swiss Grid" style (Kinetic Type) 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. Blocks wipe in on the beat of the first sentence, the number locks on its last spoken syllable, each statement line snaps on its first word, and the re-arrangement lands on the turn ("but", "and").
-- 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 fact (NUM, its unit, the statement lines, the second point), the block layout in LAYOUTS, the source line, the takeaway and scoreSound(). Keep and reuse the style's helpers (the six-column grid, the wipe-in blocks, the digit-by-digit counter, the line-by-line mask reveals, the grid re-arrangement between LAYOUTS, the strict left alignment and the red, black and blue palette).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Archivo Black, Inter (500, 700 and 900).
-
-THE STYLE
-- Off-white ground (#f5f5f2) with a faint six-column grid (60 px columns plus margins). Everything snaps to the grid; nothing is centred except by the grid.
-- Colour is structural: red (#e1251b) and blue (#1f4fd8) blocks, black (#111) type and bars, nothing else.
-- One huge number in Archivo Black, counting up digit by digit; statements in Inter 900, flush left, tight leading; labels in Inter 700 small caps with tracking.
-- Motion is precise: rectangular wipes, mask reveals that rise exactly one line, and layout changes where every block slides to a new grid position with the same easing.
-- Always show the source in small type at the bottom.
-- Pace: the composition builds in about 2 seconds, the number counts for about 1.5 seconds, one re-arrangement, then 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 big number at 180 px or more, statements at 46 px or more and labels 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 ("73% of your brain is water") unless my content asks for it.
-
-SOUND
-- Bed: a minimal pulse: a soft sine bass note on each beat and a quiet click track.
-- Map events to the kit: each block wipe gets a crisp "click"; number digits get a "tick" each; the lock gets a low sine hit; the re-arrangement gets a short "whoosh"; the takeaway gets a single clean chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark 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: Swiss Grid
-Family: Kinetic Type
-Look: International Typographic Style in motion: a strict six-column grid, one huge number, solid red, black and blue geometric blocks, flush-left Inter in black, and small caps labels, all snapping into place with precise wipes.
-How it explains: Blocks wipe in along the grid, the big number counts up digit by digit, and the statement snaps in line by line. Halfway through, the whole composition re-arranges on the grid to introduce the second point, then settles on a one-line takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/swiss-grid.html` (55.9 KB)

package/.agent/skills/motion-styles/prompts/synth-grid.md

@@ -1,147 +0,0 @@
-# Motion graphics style #20: Synth Grid
-
-- **ID:** `synth-grid`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Anton (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.
-
-## How It Explains
-The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking "press start" style sign-off.
-
-## Demo
-The future of gaming: 3 trends
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Synth Grid" 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, POINTS (the numbered items), the title and sign-off text, the sun colours if needed and scoreSound(). Keep and reuse the style's helpers (makeGL(), the scrolling wireframe terrain (mountains at the sides, flat road in the middle), the striped sun, the sky gradient, chrome() titles, the neon frames, the blinking sign-off, grain() and the scanlines).
-- 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 (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700).
-
-THE STYLE
-- The ground is one Three.js wireframe plane (magenta #ff3df0) over a solid dark plane, scrolled toward the camera by moving it modulo one grid cell so the loop is seamless. Mountains rise only at the sides; the middle stays a flat road.
-- The sky is a 2D gradient (#0b0221 to #3d0b5f to #ff3d81) with a big striped sun (yellow to pink, horizontal cut bands) sitting on the horizon and a soft pink glow.
-- Type: Anton skewed 10 degrees with a chrome gradient (white, pale blue, a dark horizon line, lilac) and a pink outer glow; Permanent Marker in cyan (#5ff6ff) with a cyan glow for the second line; JetBrains Mono for numbers.
-- Items live in neon frames: dark translucent boxes with a 3 px glowing cyan or pink border, sliding in from the side.
-- Scanlines and light grain on top of everything.
-- Pace: the title lands within 1 second, one item every 2 seconds, the sign-off blinks for the last 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the chrome title at 80 px or more, item text at 36 px or more and numbers at 26 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The future of gaming: 3 trends") unless my content asks for it.
-
-SOUND
-- Music: a synthwave loop (sawtooth bass arpeggio on 16ths, a big gated snare on 2 and 4, a soft kick, a wide saw pad) built with k.voice and k.hiss.
-- Map events to the kit: the title gets "slam" and "riser" before it; frames get a laser "zap" (a fast falling square sweep) and a soft "whoosh"; the sign-off gets a chiptune arpeggio.
-- Full mix (no voiceover): keep the synthwave beat (bass arpeggio, gated snare, saw pad), at most about 3 effects at once.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Synth Grid
-Family: 3D
-Look: A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.
-How it explains: The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking "press start" style sign-off.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Synth Grid" 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 title slams on the first stressed word, each neon frame slides in as its point is introduced, and the sign-off blinks on the last 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).
-- 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, POINTS (the numbered items), the title and sign-off text, the sun colours if needed and scoreSound(). Keep and reuse the style's helpers (makeGL(), the scrolling wireframe terrain (mountains at the sides, flat road in the middle), the striped sun, the sky gradient, chrome() titles, the neon frames, the blinking sign-off, grain() and the scanlines).
-- 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 (skewed, chrome gradient), Permanent Marker, JetBrains Mono (700).
-
-THE STYLE
-- The ground is one Three.js wireframe plane (magenta #ff3df0) over a solid dark plane, scrolled toward the camera by moving it modulo one grid cell so the loop is seamless. Mountains rise only at the sides; the middle stays a flat road.
-- The sky is a 2D gradient (#0b0221 to #3d0b5f to #ff3d81) with a big striped sun (yellow to pink, horizontal cut bands) sitting on the horizon and a soft pink glow.
-- Type: Anton skewed 10 degrees with a chrome gradient (white, pale blue, a dark horizon line, lilac) and a pink outer glow; Permanent Marker in cyan (#5ff6ff) with a cyan glow for the second line; JetBrains Mono for numbers.
-- Items live in neon frames: dark translucent boxes with a 3 px glowing cyan or pink border, sliding in from the side.
-- Scanlines and light grain on top of everything.
-- Pace: the title lands within 1 second, one item every 2 seconds, the sign-off blinks for the last 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the chrome title at 80 px or more, item text at 36 px or more and numbers at 26 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The future of gaming: 3 trends") unless my content asks for it.
-
-SOUND
-- Music: a synthwave loop (sawtooth bass arpeggio on 16ths, a big gated snare on 2 and 4, a soft kick, a wide saw pad) built with k.voice and k.hiss.
-- Map events to the kit: the title gets "slam" and "riser" before it; frames get a laser "zap" (a fast falling square sweep) and a soft "whoosh"; the sign-off gets a chiptune arpeggio.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low. Mark zaps 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: Synth Grid
-Family: 3D
-Look: A retro neon world: a magenta wireframe landscape scrolling toward you in Three.js under a striped sunset sun, purple sky, chrome-gradient titles with a pink glow and a cyan marker script.
-How it explains: The grid races toward the camera the whole time. A chrome title slams in, then numbered neon frames slide in one by one for each point, each with a cyan label, before a blinking "press start" style sign-off.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/synth-grid.html` (58.1 KB)

package/.agent/skills/motion-styles/prompts/tactics-board.md

@@ -1,145 +0,0 @@
-# Motion graphics style #36: Tactics Board
-
-- **ID:** `tactics-board`
-- **Family:** Data
-- **Canvas:** `720x1280`
-- **Fonts:** Anton, Inter (700 to 900)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.
-
-## How It Explains
-Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.
-
-## Demo
-How a counter-attack works
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Tactics Board" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the sport (pitch markings in pitch()), PLAYERS (keyframed positions), PASSES (from, to, times), RUNS (arrows), the clock range, the finish word, the takeaway and scoreSound(). Keep and reuse the style's helpers (the striped pitch and line markings, token() players with numbers and shadows, keyframed movement (track), drawing run arrows, the ball travelling pass to pass with numbered markers, the clock chip, the dark title band and the finish flash).
-- 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 (700 to 900).
-
-THE STYLE
-- The pitch is drawn to the sport's real proportions (stripes in two greens, white lines at 2 px), seen straight from above and filling the frame below the title band.
-- Players are round tokens (red and blue, white outline, white number, soft shadow). Their positions come from keyframes (track) so movement is smooth and believable.
-- Runs are white dashed curves with arrowheads that draw just before the player moves; the ball is a white dot that travels along each pass, leaving a solid yellow (#ffd23f) line with a numbered marker.
-- A clock chip counts the real time of the move; the finish gets a white flash and one big Anton word.
-- Use a real, typical pattern of play; label anything specific to one real match with its real details.
-- Pace: the setup holds about 1.5 seconds, then one pass every 1 to 1.5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, player numbers at 18 px or more and the clock at 26 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("How a counter-attack works") unless my content asks for it.
-
-SOUND
-- Bed: a low crowd murmur (pink noise, band-passed) that swells as the attack builds.
-- Map events to the kit: a whistle (two high sine tones with vibrato) starts the move; each pass gets a ball kick (a short low thump with a noise click); run arrows get a soft "whoosh"; the finish gets a roar (wide noise swell) and "boom".
-- Full mix (no voiceover): keep a low crowd bed that swells as the attack builds, a whistle at the start, a kick for every pass and a roar on the finish.
-- 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: Tactics Board
-Family: Data
-Look: A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.
-How it explains: Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Tactics Board" style (Data) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each run arrow draws as the run is described, each pass starts on the word that names it, and the finish lands on the stressed word.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the sport (pitch markings in pitch()), PLAYERS (keyframed positions), PASSES (from, to, times), RUNS (arrows), the clock range, the finish word, the takeaway and scoreSound(). Keep and reuse the style's helpers (the striped pitch and line markings, token() players with numbers and shadows, keyframed movement (track), drawing run arrows, the ball travelling pass to pass with numbered markers, the clock chip, the dark title band and the finish flash).
-- 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 (700 to 900).
-
-THE STYLE
-- The pitch is drawn to the sport's real proportions (stripes in two greens, white lines at 2 px), seen straight from above and filling the frame below the title band.
-- Players are round tokens (red and blue, white outline, white number, soft shadow). Their positions come from keyframes (track) so movement is smooth and believable.
-- Runs are white dashed curves with arrowheads that draw just before the player moves; the ball is a white dot that travels along each pass, leaving a solid yellow (#ffd23f) line with a numbered marker.
-- A clock chip counts the real time of the move; the finish gets a white flash and one big Anton word.
-- Use a real, typical pattern of play; label anything specific to one real match with its real details.
-- Pace: the setup holds about 1.5 seconds, then one pass every 1 to 1.5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 60 px or more, player numbers at 18 px or more and the clock at 26 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("How a counter-attack works") unless my content asks for it.
-
-SOUND
-- Bed: a low crowd murmur (pink noise, band-passed) that swells as the attack builds.
-- Map events to the kit: a whistle (two high sine tones with vibrato) starts the move; each pass gets a ball kick (a short low thump with a noise click); run arrows get a soft "whoosh"; the finish gets a roar (wide noise swell) and "boom".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crowd very low and mark kicks 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: Tactics Board
-Family: Data
-Look: A top-down pitch with mown stripes and crisp white lines, red and blue numbered player tokens with soft shadows, dashed run arrows that draw themselves, a yellow ball path with numbered passes, and a running clock chip.
-How it explains: Players move between real positions as the play unfolds: each run arrow draws just before the run, the ball travels pass by pass with a numbered marker, defenders shift, and the clock counts the seconds. The finish gets a flash and a big word, then the takeaway.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/tactics-board.html` (58.6 KB)