@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/prompts/versus-split.md

@@ -1,145 +0,0 @@
-# Motion graphics style #42: Versus Split
-
-- **ID:** `versus-split`
-- **Family:** Shorts Format
-- **Canvas:** `720x1280`
-- **Fonts:** Anton, Inter (700 to 900)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.
-
-## How It Explains
-Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.
-
-## Demo
-Cat vs dog
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Versus Split" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the two SIDES (names, colours, the character painters), STATS (label, values, units, who wins), the verdict and scoreSound(). Keep and reuse the style's helpers (the diagonal split with slam-in, the VS badge, the character painters, the racing stat bars with counters, the winner crown, the running score and the verdict slam).
-- 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
-- Two halves split by a diagonal: coral (#ff6b4a) on the left, blue (#2b6cff) on the right. They slam in from the sides and hold.
-- Each side gets a simple character drawn in code (shapes only, a clear silhouette and face) and its name in big white Anton.
-- A black VS badge with a yellow (#ffd23f) ring sits on the seam and slams in after the halves.
-- Stats sit in a dark translucent panel: the label in Inter 900 caps, two bars growing outward from the centre in each side's colour, values counting at the ends, and a yellow crown over the winner.
-- Use real, typical values and footnote anything that only applies to one breed, model or case.
-- Pace: halves in about 1 second, one stat row every 1.5 to 2 seconds, verdict held about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the names at 64 px or more, stat labels at 24 px or more and values at 28 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 ("Cat vs dog") unless my content asks for it.
-
-SOUND
-- Bed: a punchy fight-night beat (kick and snare on padBed).
-- Map events to the kit: halves get "slam" and "whoosh"; the badge gets "boom"; each row gets a soft "whoosh" and counter ticks; each crown gets a bright ding (SND.chime); the verdict gets "slam" and a crowd cheer (a wide noise swell).
-- Full mix (no voiceover): a fight-night beat, a "slam" for the halves, a whoosh per row, a ding for each crown and a crowd cheer for the verdict.
-- 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: Versus Split
-Family: Shorts Format
-Look: A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.
-How it explains: Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Versus Split" 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 halves slam in on the two names, each stat row starts as its label is read, the crown lands on the winner, and the verdict slams 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).
-- Replace the demo's story: TL, the two SIDES (names, colours, the character painters), STATS (label, values, units, who wins), the verdict and scoreSound(). Keep and reuse the style's helpers (the diagonal split with slam-in, the VS badge, the character painters, the racing stat bars with counters, the winner crown, the running score and the verdict slam).
-- 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
-- Two halves split by a diagonal: coral (#ff6b4a) on the left, blue (#2b6cff) on the right. They slam in from the sides and hold.
-- Each side gets a simple character drawn in code (shapes only, a clear silhouette and face) and its name in big white Anton.
-- A black VS badge with a yellow (#ffd23f) ring sits on the seam and slams in after the halves.
-- Stats sit in a dark translucent panel: the label in Inter 900 caps, two bars growing outward from the centre in each side's colour, values counting at the ends, and a yellow crown over the winner.
-- Use real, typical values and footnote anything that only applies to one breed, model or case.
-- Pace: halves in about 1 second, one stat row every 1.5 to 2 seconds, verdict held about 2 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the names at 64 px or more, stat labels at 24 px or more and values at 28 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 ("Cat vs dog") unless my content asks for it.
-
-SOUND
-- Bed: a punchy fight-night beat (kick and snare on padBed).
-- Map events to the kit: halves get "slam" and "whoosh"; the badge gets "boom"; each row gets a soft "whoosh" and counter ticks; each crown gets a bright ding (SND.chime); the verdict gets "slam" and a crowd cheer (a wide noise swell).
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark whooshes soft: true and keep the cheer short.
-- 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: Versus Split
-Family: Shorts Format
-Look: A head-to-head Short: the screen splits diagonally into coral and blue halves that slam in from the sides, a black VS badge with a yellow ring, two characters drawn in code, and stat bars that race toward each other row by row with a winner crown.
-How it explains: Both sides slide in and collide, the VS badge slams, then each stat row runs: the two bars race out from the centre, the numbers count, and a small crown pops on the winner. A running score keeps track, and the final verdict slams at the end.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/versus-split.html` (57.5 KB)

package/.agent/skills/motion-styles/prompts/vhs-camcorder.md

@@ -1,145 +0,0 @@
-# Motion graphics style #57: VHS Camcorder
-
-- **ID:** `vhs-camcorder`
-- **Family:** Edit Overlay
-- **Canvas:** `720x1280`
-- **Fonts:** VT323
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.
-
-## How It Explains
-Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.
-
-## Demo
-A summer nostalgia edit
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "VHS Camcorder" 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, the date, the start time, the rewind moments, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage() under a warm, faded grade, red and cyan chroma offsets, the rolling tracking band with tear, scanlines, the VT323 on-screen display (PLAY / REC / REW, battery, date, running time), and the rewind transition).
-- 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: VT323.
-
-THE STYLE
-- Built for your footage: footage() under everything, then a warm faded grade (multiply warm, lift blacks), red and cyan offset copies for chroma bleed, and scanlines.
-- The on-screen display uses VT323 in white with a soft dark shadow: PLAY ▶ or REC ● top left, SP below, a battery icon top right, the date and a running clock bottom left.
-- A tracking band (white noise lines and a horizontal tear) rolls from top to bottom every few seconds; keep it out of faces for long.
-- Rewind: REW ◀◀ replaces PLAY, horizontal streaks and a stronger tear, the clock runs backwards, then PLAY returns.
-- Use a believable but clearly nostalgic date; never fake a real event's footage.
-
-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 display text at 36 px or more and inside a 40 px margin. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("A summer nostalgia edit") unless my content asks for it.
-
-SOUND
-- Bed: constant tape hiss (high-passed noise) and a quiet motor hum.
-- Map events to the kit: REC, PLAY and REW get a mechanical "click"; the rewind gets a fast warbling, pitch-rising noise; the tracking band gets a short crackle burst.
-- Full mix (no voiceover): tape hiss, a soft motor hum, a mechanical click when REC or REW starts, and a fast warble for the rewind.
-- 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: VHS Camcorder
-Family: Edit Overlay
-Look: A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.
-How it explains: Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "VHS Camcorder" 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. Rewinds happen between thoughts; the tracking band rolls in pauses, never across a key word.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL, the date, the start time, the rewind moments, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage() under a warm, faded grade, red and cyan chroma offsets, the rolling tracking band with tear, scanlines, the VT323 on-screen display (PLAY / REC / REW, battery, date, running time), and the rewind transition).
-- 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: VT323.
-
-THE STYLE
-- Built for your footage: footage() under everything, then a warm faded grade (multiply warm, lift blacks), red and cyan offset copies for chroma bleed, and scanlines.
-- The on-screen display uses VT323 in white with a soft dark shadow: PLAY ▶ or REC ● top left, SP below, a battery icon top right, the date and a running clock bottom left.
-- A tracking band (white noise lines and a horizontal tear) rolls from top to bottom every few seconds; keep it out of faces for long.
-- Rewind: REW ◀◀ replaces PLAY, horizontal streaks and a stronger tear, the clock runs backwards, then PLAY returns.
-- Use a believable but clearly nostalgic date; never fake a real event's footage.
-
-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 display text at 36 px or more and inside a 40 px margin. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("A summer nostalgia edit") unless my content asks for it.
-
-SOUND
-- Bed: constant tape hiss (high-passed noise) and a quiet motor hum.
-- Map events to the kit: REC, PLAY and REW get a mechanical "click"; the rewind gets a fast warbling, pitch-rising noise; the tracking band gets a short crackle burst.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the hiss very low.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: VHS Camcorder
-Family: Edit Overlay
-Look: A home-video camcorder overlay on your footage: a blocky white PLAY or REC readout, a blinking red dot, a battery icon, a date and time stamp, a tracking-noise band that rolls through, chroma bleed, a warm faded grade and scanlines.
-How it explains: Your clip plays as if recorded on tape: the on-screen display ticks the clock, a tracking band rolls through every few seconds with a little horizontal tear, the colour bleeds red and cyan at the edges, and a rewind moment (REW ◀◀ with streaks) jumps between scenes.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/vhs-camcorder.html` (55.3 KB)

package/.agent/skills/motion-styles/prompts/visual-novel.md

@@ -1,145 +0,0 @@
-# Motion graphics style #59: Visual Novel
-
-- **ID:** `visual-novel`
-- **Family:** Character Story
-- **Canvas:** `720x1280`
-- **Fonts:** M PLUS Rounded 1c (500 and 800)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.
-
-## How It Explains
-The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.
-
-## Demo
-Mika's first day at a new job (original character)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Visual Novel" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the character design in drawMika() (hair, colours, outfit), the background painter, DIALOGUE (speaker, line, expression, effect, time), the CHOICES and scoreSound(). Keep and reuse the style's helpers (the blurred background layer, the bust rig (head, hair, eyes with highlights, brows, mouth shapes, blush) with expression presets, the slide-in and bounce, the effects (sweat, sparkle, shock lines), the dialogue box with name tag, typewriter and blinking arrow, and the choice menu with cursor).
-- 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: M PLUS Rounded 1c (500 and 800).
-
-THE STYLE
-- One original character drawn entirely in code: a big rounded head, layered hair with a shine streak, large eyes with two white highlights, simple nose and mouth shapes, a collar and shoulders. Never draw an existing anime character.
-- Expressions are presets (smile, nervous, shocked, laugh, thinking) built from eyebrow angle, eye shape, mouth shape and blush; effects (sweat drop, sparkles, shock lines, a question mark) pop around the head.
-- The background is a soft painted scene (an office, a classroom, a street) drawn in code and blurred, with a gentle bloom.
-- Dialogue box: rounded, dark translucent (#1b1530 at 82%) with a soft pink border, a name tag pill (#ff8fb8), text typed at about 28 characters a second and a bouncing ▼ when done.
-- Choices: two stacked pill buttons in the centre; a cursor moves to one and it lights up.
-- Type: M PLUS Rounded 1c everywhere.
-
-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 dialogue at 34 px or more, the name tag at 30 px or more, choices at 32 px or more, and the character filling at least half the frame height. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Mika's first day at a new job (original character)") unless my content asks for it.
-
-SOUND
-- Music: a light slice-of-life loop (soft triangle piano chords and a simple melody).
-- Map events to the kit: typing gets soft short blips per character pair; the character entering gets a soft "whoosh"; shock gets a boing (bending sine); happy lines get "sparkle"; sweat gets a small falling tone; the choice menu gets "pop" and the pick gets a chime.
-- Full mix (no voiceover): a light, slice-of-life piano loop, soft blips while text types, a "boing" for shock, a sparkle for happy moments and a select chime on the choice.
-- 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: Visual Novel
-Family: Character Story
-Look: A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.
-How it explains: The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Visual Novel" style (Character Story) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each line starts typing on its first spoken word and finishes as the line ends; the expression changes on the word that carries the feeling.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the character design in drawMika() (hair, colours, outfit), the background painter, DIALOGUE (speaker, line, expression, effect, time), the CHOICES and scoreSound(). Keep and reuse the style's helpers (the blurred background layer, the bust rig (head, hair, eyes with highlights, brows, mouth shapes, blush) with expression presets, the slide-in and bounce, the effects (sweat, sparkle, shock lines), the dialogue box with name tag, typewriter and blinking arrow, and the choice menu with cursor).
-- 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: M PLUS Rounded 1c (500 and 800).
-
-THE STYLE
-- One original character drawn entirely in code: a big rounded head, layered hair with a shine streak, large eyes with two white highlights, simple nose and mouth shapes, a collar and shoulders. Never draw an existing anime character.
-- Expressions are presets (smile, nervous, shocked, laugh, thinking) built from eyebrow angle, eye shape, mouth shape and blush; effects (sweat drop, sparkles, shock lines, a question mark) pop around the head.
-- The background is a soft painted scene (an office, a classroom, a street) drawn in code and blurred, with a gentle bloom.
-- Dialogue box: rounded, dark translucent (#1b1530 at 82%) with a soft pink border, a name tag pill (#ff8fb8), text typed at about 28 characters a second and a bouncing ▼ when done.
-- Choices: two stacked pill buttons in the centre; a cursor moves to one and it lights up.
-- Type: M PLUS Rounded 1c everywhere.
-
-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 dialogue at 34 px or more, the name tag at 30 px or more, choices at 32 px or more, and the character filling at least half the frame height. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Mika's first day at a new job (original character)") unless my content asks for it.
-
-SOUND
-- Music: a light slice-of-life loop (soft triangle piano chords and a simple melody).
-- Map events to the kit: typing gets soft short blips per character pair; the character entering gets a soft "whoosh"; shock gets a boing (bending sine); happy lines get "sparkle"; sweat gets a small falling tone; the choice menu gets "pop" and the pick gets a chime.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the loop low and mark blips soft: true.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Visual Novel
-Family: Character Story
-Look: A visual-novel scene: a soft, blurred painted background, a large original anime-style character bust drawn in code with big glossy eyes, swapping expressions (smile, nervous sweat, shocked, laughing with blush), and a translucent dialogue box with a name tag and typewriter text.
-How it explains: The story is told as dialogue: the character slides in, each line types out in the box with a blinking arrow, and her expression, pose bounce and little effects (sweat drop, sparkles, shock lines, blush) change with what she says. It ends on a two-option choice menu where a cursor picks one.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/visual-novel.html` (61.7 KB)

package/.agent/skills/motion-styles/prompts/warm-canvas.md

@@ -1,145 +0,0 @@
-# Motion graphics style #06: Warm Canvas
-
-- **ID:** `warm-canvas`
-- **Family:** Talking Head
-- **Canvas:** `1280x720`
-- **Fonts:** Fraunces (500 to 700) and Inter (500 to 700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.
-
-## How It Explains
-Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.
-
-## Demo
-Can AI really plan my week?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Warm Canvas" style (Talking Head) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
-- Replace the demo's story: TL, CUTS, PUNCH (the jump-cut zooms inside the A-roll), the chapter card titles, the caption words, the side chips, the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the palette C, SERIF and SANS, PIP and COLX, toneText(), shadowCard(), tag(), enter(), fadeOut(), the icon set, canvasBG(), the A-roll stand-in and fullARoll(), caption(), titleChip(), sideChip(), chapterCard(), the card, table and planner drawing patterns, the vertical push compositor, and the Load A-roll button with window.loadARoll()).
-- 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: Fraunces (500 to 700) and Inter (500 to 700).
-
-THE STYLE
-- Built for my own footage (A-roll): the speaker is the star and the graphics only explain. Keep the "Load A-roll" button and window.loadARoll(url) working so I can drop in my clip and see it in sync; until then the defocused stand-in shows where I sit in frame. If I give you my recording, time everything to it.
-- Two modes only. Mode 1: full-frame A-roll with at most one centered caption (white Fraunces 600 with a soft shadow, key words in sky blue #4f9cf0) and small white side chips with an icon and a two-line label. Mode 2: the warm canvas (#f7f5f4 with one big soft swoosh #ebe6e2), the speaker in a rounded 272x384 picture-in-picture at the right with a thin blue ring, and the content centered in the left column (COLX).
-- Type: Fraunces 600 for headlines, captions and card titles, tracked -2%, in two tones (ink #111111 plus sky blue for the key phrase). Inter 500 to 600 for UI labels, tags and small text in #2b2826 and #8f8a87. Title case for headlines.
-- Cards: white, radius 20, a very soft warm shadow, pastel tinted tags (blue, purple, green, yellow tints) and simple code-drawn icons. Never more than one window or two cards on the canvas at once.
-- One idea per beat: a title chip at the top of the column, then the explanation (cards with a dashed arrow, a table, a mock app window, or three takeaway pills). Each beat clears before the next arrives.
-- Motion is gentle: fades with a small rise (enter), soft counters, cards that slide together, never a bounce or a shake. Chapter cards (a blue number tile, a two-tone title and a progress dash row) push in and out vertically. Everything else is a clean cut.
-- Show me 2 to 4 beats on the canvas between A-roll moments, and come back to the full-frame A-roll for the personal lines.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 1280x720 keep headlines and chapter titles at 52 px or more, captions at 60 px or more, card titles at 28 px or more, and UI labels at 14 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 ("Can AI really plan my week?") unless my content asks for it.
-
-SOUND
-- Quiet and tactile, built to sit under a real voice: soft paper slides (pink noise through a rising bandpass) for chips, cards and title chips, low wooden taps for list items, pills and table rows, a light keyboard patter for counters, a breathy swell for each vertical push, and one quiet pad under the canvas section.
-- No chimes, bells, pings, sparkles or risers, and no music beat. Never more than 2 sounds at once.
-- Full mix (no voiceover): no music bed beyond the one quiet pad under the canvas, at most 2 sounds at once, and plenty of air between them.
-- 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: Warm Canvas
-Family: Talking Head
-Look: A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.
-How it explains: Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Warm Canvas" style (Talking Head) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each caption word fades up as it is spoken, key words in blue on their stressed syllable; a card, chip or pill lands as its idea is named; a counter locks on its last spoken syllable; the PiP shrink and the canvas arrive on the first word of a new idea, and the A-roll returns as the speaker gets personal again.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
-- Replace the demo's story: TL, CUTS, PUNCH (the jump-cut zooms inside the A-roll), the chapter card titles, the caption words, the side chips, the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the palette C, SERIF and SANS, PIP and COLX, toneText(), shadowCard(), tag(), enter(), fadeOut(), the icon set, canvasBG(), the A-roll stand-in and fullARoll(), caption(), titleChip(), sideChip(), chapterCard(), the card, table and planner drawing patterns, the vertical push compositor, and the Load A-roll button with window.loadARoll()).
-- 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: Fraunces (500 to 700) and Inter (500 to 700).
-
-THE STYLE
-- Built for my own footage (A-roll): the speaker is the star and the graphics only explain. Keep the "Load A-roll" button and window.loadARoll(url) working so I can drop in my clip and see it in sync; until then the defocused stand-in shows where I sit in frame. If I give you my recording, time everything to it.
-- Two modes only. Mode 1: full-frame A-roll with at most one centered caption (white Fraunces 600 with a soft shadow, key words in sky blue #4f9cf0) and small white side chips with an icon and a two-line label. Mode 2: the warm canvas (#f7f5f4 with one big soft swoosh #ebe6e2), the speaker in a rounded 272x384 picture-in-picture at the right with a thin blue ring, and the content centered in the left column (COLX).
-- Type: Fraunces 600 for headlines, captions and card titles, tracked -2%, in two tones (ink #111111 plus sky blue for the key phrase). Inter 500 to 600 for UI labels, tags and small text in #2b2826 and #8f8a87. Title case for headlines.
-- Cards: white, radius 20, a very soft warm shadow, pastel tinted tags (blue, purple, green, yellow tints) and simple code-drawn icons. Never more than one window or two cards on the canvas at once.
-- One idea per beat: a title chip at the top of the column, then the explanation (cards with a dashed arrow, a table, a mock app window, or three takeaway pills). Each beat clears before the next arrives.
-- Motion is gentle: fades with a small rise (enter), soft counters, cards that slide together, never a bounce or a shake. Chapter cards (a blue number tile, a two-tone title and a progress dash row) push in and out vertically. Everything else is a clean cut.
-- Show me 2 to 4 beats on the canvas between A-roll moments, and come back to the full-frame A-roll for the personal lines.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 1280x720 keep headlines and chapter titles at 52 px or more, captions at 60 px or more, card titles at 28 px or more, and UI labels at 14 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 ("Can AI really plan my week?") unless my content asks for it.
-
-SOUND
-- Quiet and tactile, built to sit under a real voice: soft paper slides (pink noise through a rising bandpass) for chips, cards and title chips, low wooden taps for list items, pills and table rows, a light keyboard patter for counters, a breathy swell for each vertical push, and one quiet pad under the canvas section.
-- No chimes, bells, pings, sparkles or risers, and no music beat. Never more than 2 sounds at once.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark slides, taps and keys soft: true, keep the swells for the vertical pushes only, and never put a sound on top of a stressed word.
-- 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: Warm Canvas
-Family: Talking Head
-Look: A calm, editorial creator edit built around your own footage: full-frame talking head with a few clean serif captions, then a warm off-white canvas with a soft swoosh where white cards explain the idea while you shrink into a rounded picture-in-picture. Fraunces headlines in ink and sky blue, quiet Inter UI text, pastel chips.
-How it explains: Two modes and nothing else. On the A-roll, one or two captions fade up word by word with the key words in blue and small side chips slide in. On the canvas, a title chip lands, then one idea per beat: two cards with a dashed arrow, a comparison table whose numbers count up, a planner window where the bad blocks get flagged and removed, and three takeaway pills. Chapter cards push in vertically.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/warm-canvas.html` (64.4 KB)