@amg555/frameforge-mcp 2.7.6 → 2.7.8

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

@@ -1,145 +0,0 @@
-# Motion graphics style #35: Math Canvas
-
-- **ID:** `math-canvas`
-- **Family:** Data
-- **Canvas:** `720x1280`
-- **Fonts:** Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.
-
-## How It Explains
-The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.
-
-## Demo
-Compound interest: slow, then suddenly fast
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Math Canvas" 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 equation pieces (EQ), the function f(x) and the comparison g(x), the axis ranges and ticks, the labels, the gap note, the takeaway and scoreSound(). Keep and reuse the style's helpers (the slate grid, the term-by-term equation write-on, the yellow key box with the Caveat note, the axes with one scale, the self-plotting curve with area fill, glowing tip and live value, the dashed comparison, the gap bracket, and the mono axis labels).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700).
-
-THE STYLE
-- Background: dark slate (#12141b) with a faint 20 px grid. Maths is written in Instrument Serif italic (white), never in a sans.
-- Plot real functions with one scale per axis, zero-based unless the scene says otherwise, and compute every point from the function. Tick labels must name values the axes actually reach.
-- Colour has meaning: teal (#4fd1c5) for the main curve and its glowing tip, grey dashed (#6b7080) for the comparison, yellow (#ffd166) only for the key term box, the handwritten note and the gap bracket.
-- The curve plots left to right over a few seconds with a soft area fill under it and the live value riding at its tip.
-- Type: Space Grotesk 700 for the takeaway, JetBrains Mono for axis labels and captions, Caveat 700 for handwritten notes.
-- Pace: equation about 2 seconds, axes 0.5 seconds, the plot 4 to 5 seconds, then the gap and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the equation at 60 px or more, the takeaway at 46 px or more, live values at 30 px or more and axis 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 ("Compound interest: slow, then suddenly fast") unless my content asks for it.
-
-SOUND
-- Bed: a calm, slow pad.
-- Map events to the kit: each equation term gets a soft chalky tick; the key box gets "marker"; the plot gets a soft pluck at each tick on the x axis whose pitch climbs with the value; the gap bracket gets a low sine hit; the takeaway gets an open chord.
-- Full mix (no voiceover): a calm pad, a soft pluck for every unit the curve passes (rising in pitch with the value), and a low hit when the gap bracket lands.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Math Canvas
-Family: Data
-Look: A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.
-How it explains: The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Math Canvas" 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 term writes as it is said, the box lands on the term that matters, the curve plots while the change over time is described, and the gap bracket lands on the comparison 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 equation pieces (EQ), the function f(x) and the comparison g(x), the axis ranges and ticks, the labels, the gap note, the takeaway and scoreSound(). Keep and reuse the style's helpers (the slate grid, the term-by-term equation write-on, the yellow key box with the Caveat note, the axes with one scale, the self-plotting curve with area fill, glowing tip and live value, the dashed comparison, the gap bracket, and the mono axis labels).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Instrument Serif (italic, for maths), Space Grotesk (700), JetBrains Mono (500), Caveat (700).
-
-THE STYLE
-- Background: dark slate (#12141b) with a faint 20 px grid. Maths is written in Instrument Serif italic (white), never in a sans.
-- Plot real functions with one scale per axis, zero-based unless the scene says otherwise, and compute every point from the function. Tick labels must name values the axes actually reach.
-- Colour has meaning: teal (#4fd1c5) for the main curve and its glowing tip, grey dashed (#6b7080) for the comparison, yellow (#ffd166) only for the key term box, the handwritten note and the gap bracket.
-- The curve plots left to right over a few seconds with a soft area fill under it and the live value riding at its tip.
-- Type: Space Grotesk 700 for the takeaway, JetBrains Mono for axis labels and captions, Caveat 700 for handwritten notes.
-- Pace: equation about 2 seconds, axes 0.5 seconds, the plot 4 to 5 seconds, then the gap and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the equation at 60 px or more, the takeaway at 46 px or more, live values at 30 px or more and axis 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 ("Compound interest: slow, then suddenly fast") unless my content asks for it.
-
-SOUND
-- Bed: a calm, slow pad.
-- Map events to the kit: each equation term gets a soft chalky tick; the key box gets "marker"; the plot gets a soft pluck at each tick on the x axis whose pitch climbs with the value; the gap bracket gets a low sine hit; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks 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: Math Canvas
-Family: Data
-Look: A dark slate for maths: an equation written in an elegant italic serif, a yellow box and handwritten note on the key term, and a graph whose curve plots itself to scale with a glowing dot and a live value, beside a dashed comparison line.
-How it explains: The equation writes on term by term, the key term gets boxed and annotated, then the axes draw and the curve plots in real time with its value counting at the tip. The comparison line plots alongside, a bracket measures the gap, and a plain-language takeaway lands at the bottom.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/math-canvas.html` (58.0 KB)

package/.agent/skills/motion-styles/prompts/myth-or-fact.md

@@ -1,145 +0,0 @@
-# Motion graphics style #43: Myth or Fact
-
-- **ID:** `myth-or-fact`
-- **Family:** Shorts Format
-- **Canvas:** `720x1280`
-- **Fonts:** Archivo Black, Inter (600 to 800), Anton (stamps)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.
-
-## How It Explains
-Each round reads like a game: the statement card pops in, a short "thinking" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.
-
-## Demo
-Two body myths and facts
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Myth or Fact" 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, ROUNDS (statement lines, verdict, proof lines), the round counter and scoreSound(). Keep and reuse the style's helpers (the pale background and title band, the statement card with quote mark, the guess bar, the distressed stamp (red MYTH / green FACT) with slam and shake, the proof line with icon, and the round transitions).
-- 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 (600 to 800), Anton (stamps).
-
-THE STYLE
-- Background: pale cool grey (#eef1f4); the title "MYTH OR FACT?" in Archivo Black with a yellow question mark at the top.
-- Statement cards: white, 26 px corners, soft shadow, a large faint quote mark, the claim in Inter 800, and a small round number.
-- Stamps: a rotated rounded rectangle with a double border and Anton letters, red (#e03131) for MYTH, green (#2f9e44) for FACT, distressed with knocked-out specks; they slam from 2× size with a shake.
-- Proof: one or two short lines in Inter 700 with a round icon (green check for fact, red cross for myth).
-- Only real, checkable claims, and proof lines that state what the evidence actually shows.
-- Pace: about 5 to 6 seconds per round.
-
-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 statements at 46 px or more, the stamp at 100 px or more and proof lines at 30 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 ("Two body myths and facts") unless my content asks for it.
-
-SOUND
-- Bed: a light, curious pad.
-- Map events to the kit: cards get "pop" and SND.paper; the guess bar gets steady soft "tick"s; MYTH gets "stamp" and a low buzzer; FACT gets "stamp" and a bright two-note ding; proof lines get a soft "pop"; the final score gets an open chord.
-- Full mix (no voiceover): a light, curious pad, ticks for the guess bar, a heavy "stamp" with a buzzer (myth) or a ding (fact), and a soft pop for the proof.
-- 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: Myth or Fact
-Family: Shorts Format
-Look: A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.
-How it explains: Each round reads like a game: the statement card pops in, a short "thinking" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Myth or Fact" 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 card lands on the first word of the statement, the guess bar runs during the pause, the stamp slams on "myth" or "fact", and the proof reads in as it is said.
-- 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, ROUNDS (statement lines, verdict, proof lines), the round counter and scoreSound(). Keep and reuse the style's helpers (the pale background and title band, the statement card with quote mark, the guess bar, the distressed stamp (red MYTH / green FACT) with slam and shake, the proof line with icon, and the round transitions).
-- 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 (600 to 800), Anton (stamps).
-
-THE STYLE
-- Background: pale cool grey (#eef1f4); the title "MYTH OR FACT?" in Archivo Black with a yellow question mark at the top.
-- Statement cards: white, 26 px corners, soft shadow, a large faint quote mark, the claim in Inter 800, and a small round number.
-- Stamps: a rotated rounded rectangle with a double border and Anton letters, red (#e03131) for MYTH, green (#2f9e44) for FACT, distressed with knocked-out specks; they slam from 2× size with a shake.
-- Proof: one or two short lines in Inter 700 with a round icon (green check for fact, red cross for myth).
-- Only real, checkable claims, and proof lines that state what the evidence actually shows.
-- Pace: about 5 to 6 seconds per round.
-
-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 statements at 46 px or more, the stamp at 100 px or more and proof lines at 30 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 ("Two body myths and facts") unless my content asks for it.
-
-SOUND
-- Bed: a light, curious pad.
-- Map events to the kit: cards get "pop" and SND.paper; the guess bar gets steady soft "tick"s; MYTH gets "stamp" and a low buzzer; FACT gets "stamp" and a bright two-note ding; proof lines get a soft "pop"; the final score gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark ticks soft: true.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Myth or Fact
-Family: Shorts Format
-Look: A clean debunk Short on pale grey: a white statement card with a big quote mark, then a rubber stamp slams down (red MYTH or green FACT) with distressed ink, followed by one line of proof with a check icon.
-How it explains: Each round reads like a game: the statement card pops in, a short "thinking" pause with a ticking bar invites a guess, then the stamp slams with a shake and the proof line explains. A second round follows with the opposite verdict, then a score for the viewer.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/myth-or-fact.html` (56.5 KB)

package/.agent/skills/motion-styles/prompts/neon-line.md

@@ -1,145 +0,0 @@
-# Motion graphics style #62: Neon Line
-
-- **ID:** `neon-line`
-- **Family:** Character Story
-- **Canvas:** `720x1280`
-- **Fonts:** Caveat (700, as neon script), JetBrains Mono (500)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.
-
-## How It Explains
-Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.
-
-## Demo
-A long-distance love story (original)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Neon Line" 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 paths (FIG_A and FIG_B: one continuous polyline each), their colours, the props (phones, clocks, skyline), the counter, the captions and the merge shape, and scoreSound(). Keep and reuse the style's helpers (the night-blue wall with faint brick lines, the neon renderer (a wide soft glow pass, a bright core and a white centre), the one-stroke draw-on, the switch-on flicker, the dashed call line, the walking motion, the line merge into a heart and the Caveat neon captions).
-- 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: Caveat (700, as neon script), JetBrains Mono (500).
-
-THE STYLE
-- Background: a deep night-blue wall (#070b1a) with faint brick lines and a dark vignette, like a real neon sign mounted on a wall.
-- Every figure is one continuous polyline (a single neon tube), drawn on by path length; render it three times: a wide blurred glow in its colour, a bright core, and a thin white centre.
-- Only two or three neon colours: pink (#ff4fa3), cyan (#36e1ff) and a warm yellow (#ffd36b) for small details.
-- Lines switch on with a short flicker (two or three off-on blinks) and buzz faintly.
-- Captions in Caveat as neon script in the same glow treatment; small data (distances, times) in JetBrains Mono.
-- Pace: each figure takes 1 to 1.5 seconds to draw; one new prop or beat every 2 seconds; hold the final merged shape 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 captions at 56 px or more and characters at least 30% of the frame height; line cores at 5 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("A long-distance love story (original)") unless my content asks for it.
-
-SOUND
-- Bed: a slow, warm synth pad (padBed) with a soft pulse.
-- Map events to the kit: neon switch-ons get a click and a short buzz (a low square hum with a fast tremolo); the call line gets a soft ring ("ping"); the falling counter gets soft ticks; the merge gets "shimmer" and a gentle chord.
-- Full mix (no voiceover): a warm, slow synth pad, a neon buzz and click when each line switches on, a soft ring for the call, and a gentle chord for the merge.
-- 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: Neon Line
-Family: Character Story
-Look: Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.
-How it explains: Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Neon Line" 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 figure draws on while it is introduced, the call line connects on "call" or "talk", the counter falls while the distance shrinks in the narration, and the merge lands on the last line.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Replace the demo's story: TL, the character paths (FIG_A and FIG_B: one continuous polyline each), their colours, the props (phones, clocks, skyline), the counter, the captions and the merge shape, and scoreSound(). Keep and reuse the style's helpers (the night-blue wall with faint brick lines, the neon renderer (a wide soft glow pass, a bright core and a white centre), the one-stroke draw-on, the switch-on flicker, the dashed call line, the walking motion, the line merge into a heart and the Caveat neon captions).
-- 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: Caveat (700, as neon script), JetBrains Mono (500).
-
-THE STYLE
-- Background: a deep night-blue wall (#070b1a) with faint brick lines and a dark vignette, like a real neon sign mounted on a wall.
-- Every figure is one continuous polyline (a single neon tube), drawn on by path length; render it three times: a wide blurred glow in its colour, a bright core, and a thin white centre.
-- Only two or three neon colours: pink (#ff4fa3), cyan (#36e1ff) and a warm yellow (#ffd36b) for small details.
-- Lines switch on with a short flicker (two or three off-on blinks) and buzz faintly.
-- Captions in Caveat as neon script in the same glow treatment; small data (distances, times) in JetBrains Mono.
-- Pace: each figure takes 1 to 1.5 seconds to draw; one new prop or beat every 2 seconds; hold the final merged shape 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 captions at 56 px or more and characters at least 30% of the frame height; line cores at 5 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("A long-distance love story (original)") unless my content asks for it.
-
-SOUND
-- Bed: a slow, warm synth pad (padBed) with a soft pulse.
-- Map events to the kit: neon switch-ons get a click and a short buzz (a low square hum with a fast tremolo); the call line gets a soft ring ("ping"); the falling counter gets soft ticks; the merge gets "shimmer" and a gentle chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz 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: Neon Line
-Family: Character Story
-Look: Characters drawn as single continuous glowing neon lines on a deep night-blue wall: one pink, one cyan, with a soft bloom, a flicker when they switch on, neon-script captions, and small glowing props (phones, clocks, a skyline) in the same line style.
-How it explains: Each character draws itself in one stroke as if a neon tube is lighting up. Props and connections draw between them (a dashed glowing call line, clocks with different times), they move toward each other as a counter falls, and their two lines meet and merge into one shape for the ending.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/neon-line.html` (57.9 KB)

package/.agent/skills/motion-styles/prompts/paper-craft.md

@@ -1,145 +0,0 @@
-# Motion graphics style #22: Paper Craft
-
-- **ID:** `paper-craft`
-- **Family:** Illustrated
-- **Canvas:** `720x1280`
-- **Fonts:** Fredoka (500 to 700)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.
-
-## How It Explains
-The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.
-
-## Demo
-How bees make honey
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Paper Craft" 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 scene pieces (hills, sky props), the hero character (drawBee) and its PATH, the STEPS strips, the fact chip, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 12 fps stop-motion clock (stop()), the paper boil jitter (boil()), paper() shadows, hill() layers, the fibre texture, tornStrip(), the slide-up build and the Fredoka strips).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).
-
-THE STYLE
-- Everything is flat paper drawn in code: solid shapes with a soft drop shadow (offset down, 10 px blur), a faint fibre texture over the frame, no outlines, no gradients except the sky.
-- Stop-motion timing: animated positions are sampled on a 12 fps clock (stop(t)), and every layer boils by a pixel or two each step. Never move anything smoothly at 30 fps.
-- Palette: sky blue (#b9e2f0), layered greens (#a4d36f to #4b8c3b), sunny yellow (#ffd04d), honey (#f2b33d), pink and white flowers, dark brown text (#3a2a16), honey accent (#e08a00).
-- Titles and steps sit on torn white paper strips, slightly rotated, slapped on with a quick overshoot.
-- One small hand-made character carries the story (flapping wings, a dotted path behind it).
-- Pace: the build takes about 1.5 seconds, then one step every 2 to 2.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 strip titles at 44 px or more, step text at 34 px or more and chips 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 bees make honey") unless my content asks for it.
-
-SOUND
-- Music: a gentle marimba melody (k.voice triangle notes with short decay) over a soft pad.
-- Map events to the kit: every paper layer or strip landing gets a paper rustle (SND.paper) and a soft tap; the bee gets a buzzing hum (a sawtooth with wobble) while it flies; arriving gets a bloop; the fact chip gets "pop"; the takeaway gets a marimba run.
-- Full mix (no voiceover): keep the marimba melody, paper rustles on every slap, and the bee buzz under the motion.
-- 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: Paper Craft
-Family: Illustrated
-Look: Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.
-How it explains: The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Paper Craft" 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 layer or prop lands on the word that names it, the character moves while the action is described, and each step strip slaps on its first 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 scene pieces (hills, sky props), the hero character (drawBee) and its PATH, the STEPS strips, the fact chip, the takeaway and scoreSound(). Keep and reuse the style's helpers (the 12 fps stop-motion clock (stop()), the paper boil jitter (boil()), paper() shadows, hill() layers, the fibre texture, tornStrip(), the slide-up build and the Fredoka strips).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Fredoka (500 to 700).
-
-THE STYLE
-- Everything is flat paper drawn in code: solid shapes with a soft drop shadow (offset down, 10 px blur), a faint fibre texture over the frame, no outlines, no gradients except the sky.
-- Stop-motion timing: animated positions are sampled on a 12 fps clock (stop(t)), and every layer boils by a pixel or two each step. Never move anything smoothly at 30 fps.
-- Palette: sky blue (#b9e2f0), layered greens (#a4d36f to #4b8c3b), sunny yellow (#ffd04d), honey (#f2b33d), pink and white flowers, dark brown text (#3a2a16), honey accent (#e08a00).
-- Titles and steps sit on torn white paper strips, slightly rotated, slapped on with a quick overshoot.
-- One small hand-made character carries the story (flapping wings, a dotted path behind it).
-- Pace: the build takes about 1.5 seconds, then one step every 2 to 2.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 strip titles at 44 px or more, step text at 34 px or more and chips 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 bees make honey") unless my content asks for it.
-
-SOUND
-- Music: a gentle marimba melody (k.voice triangle notes with short decay) over a soft pad.
-- Map events to the kit: every paper layer or strip landing gets a paper rustle (SND.paper) and a soft tap; the bee gets a buzzing hum (a sawtooth with wobble) while it flies; arriving gets a bloop; the fact chip gets "pop"; the takeaway gets a marimba run.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the buzz low and mark rustles 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: Paper Craft
-Family: Illustrated
-Look: Layered cut paper with real drop shadows and a fibre texture: rolling paper hills, a paper sun, flowers and a striped paper bee, all moving at 12 frames a second like stop-motion, with titles on torn white paper strips.
-How it explains: The scene builds itself layer by layer, then a little character travels through it beat by beat while numbered paper strips slap on to name each step. Everything boils slightly from frame to frame like real paper under a camera, and the takeaway lands on one last strip.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/paper-craft.html` (60.7 KB)