@amg555/frameforge-mcp 2.7.6 → 2.7.7

package/.agent/skills/motion-styles/prompts/comic-panels.md

@@ -1,145 +0,0 @@
-# Motion graphics style #26: Comic Panels
-
-- **ID:** `comic-panels`
-- **Family:** Illustrated
-- **Canvas:** `720x1280`
-- **Fonts:** Bangers
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.
-
-## How It Explains
-The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.
-
-## Demo
-The day the internet broke
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Comic Panels" 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 PANELS layout, what is drawn in each panel (props, the character face and expression), the balloon and caption text, the burst word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the page grid with gutters, panel() halftone fills and 6 px borders, face() with expressive eyes and mouth, balloon() with tail, caption(), burst() spiky polygons, the reading-order camera (CAMK track) and the shake on the big hit).
-- 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: Bangers.
-
-THE STYLE
-- One comic page: a white page with 4 to 6 panels, 10 px gutters and 6 px black borders. Each panel has a flat colour fill with a halftone dot pattern on top.
-- Characters are simple and expressive: round heads, big white eyes with dots, eyebrows and an open mouth, a sweat drop for stress. Original characters only, never a known comic hero.
-- Speech balloons are white ellipses with a black outline and a pointed tail; captions are yellow boxes; sound effects are spiky bursts with Bangers lettering in yellow with a thick black stroke.
-- Camera: zoom into one panel at a time in reading order (CAMK), eased; shake on the big sound effect; pull out to the full page at the end.
-- Type: Bangers everywhere, all caps, slightly letter-spaced.
-- Pace: about 2 to 3 seconds per panel, and hold the full page 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 balloon text at 36 px or more, captions at 30 px or more and the title panel at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The day the internet broke") unless my content asks for it.
-
-SOUND
-- Bed: a light, bouncy pad with hats.
-- Map events to the kit: camera moves get a quick "whoosh"; balloons get a boing (a sine that bends up and down); captions get a soft "pop"; the burst gets "glitch", "boom" and "slam"; the full-page reveal gets "shimmer".
-- Full mix (no voiceover): keep a bouncy pad, a boing for every balloon, a whoosh for every camera move, and a crash and boom for the burst.
-- 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: Comic Panels
-Family: Illustrated
-Look: A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.
-How it explains: The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Comic Panels" style (Illustrated) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. The camera moves to each panel as its line starts, each balloon pops on its first word, and the burst lands with the shake on the loudest 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 PANELS layout, what is drawn in each panel (props, the character face and expression), the balloon and caption text, the burst word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the page grid with gutters, panel() halftone fills and 6 px borders, face() with expressive eyes and mouth, balloon() with tail, caption(), burst() spiky polygons, the reading-order camera (CAMK track) and the shake on the big hit).
-- 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: Bangers.
-
-THE STYLE
-- One comic page: a white page with 4 to 6 panels, 10 px gutters and 6 px black borders. Each panel has a flat colour fill with a halftone dot pattern on top.
-- Characters are simple and expressive: round heads, big white eyes with dots, eyebrows and an open mouth, a sweat drop for stress. Original characters only, never a known comic hero.
-- Speech balloons are white ellipses with a black outline and a pointed tail; captions are yellow boxes; sound effects are spiky bursts with Bangers lettering in yellow with a thick black stroke.
-- Camera: zoom into one panel at a time in reading order (CAMK), eased; shake on the big sound effect; pull out to the full page at the end.
-- Type: Bangers everywhere, all caps, slightly letter-spaced.
-- Pace: about 2 to 3 seconds per panel, and hold the full page 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 balloon text at 36 px or more, captions at 30 px or more and the title panel at 80 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The day the internet broke") unless my content asks for it.
-
-SOUND
-- Bed: a light, bouncy pad with hats.
-- Map events to the kit: camera moves get a quick "whoosh"; balloons get a boing (a sine that bends up and down); captions get a soft "pop"; the burst gets "glitch", "boom" and "slam"; the full-page reveal gets "shimmer".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark boings soft: true and keep the crash for the burst only.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Comic Panels
-Family: Illustrated
-Look: A comic-book page drawn in code: thick black panel borders, halftone dot fills in bright flat colours, round speech balloons, yellow caption boxes, and a big spiky sound-effect burst, with Bangers lettering throughout.
-How it explains: The camera reads the page like a reader: it zooms into the first panel, moves to the next as each beat lands, shakes on the big sound effect, then pulls out to show the whole page with the title panel. Balloons and effects pop in with a bounce.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/comic-panels.html` (58.9 KB)

package/.agent/skills/motion-styles/prompts/cosmic-scale.md

@@ -1,147 +0,0 @@
-# Motion graphics style #10: Cosmic Scale
-
-- **ID:** `cosmic-scale`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.
-
-## How It Explains
-It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.
-
-## Demo
-How big is the Sun?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Cosmic Scale" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
-- Replace the demo's story: TL, BODIES (names, real radii, positions, painted textures), the CAM keyframes, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the painted canvas textures (paintTex), the starfield, the log-scale camera track (camAt), proj3() labels that only show when a body is big enough, the sun glow pass, chip(), wordLine() and grain()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Sizes are real: every body uses its true radius relative to the others (Earth = 1 unit), lined up side by side. Never fake a ratio; let tiny things be tiny and point them out with a ring and a label.
-- Every surface is painted in code on a canvas (paintTex): oceans and continents, gas bands, craters, granulated plasma. No photos or downloaded textures.
-- The camera moves on a log scale (camAt keys hold the log of the distance), so each pull-back feels like the same size of jump. Stars stay fixed far away so the motion reads as scale, not travel.
-- Palette: black space (#02030a), white stars, warm sun orange (#ffb347 to #ff7a12) with a soft screen-blended glow, cool label blue (#bfe1ff). One warm accent (#ffcf8a) for the second headline line.
-- Type: Space Grotesk 700 headlines at the top, JetBrains Mono labels with the real size, a dashed ring around anything smaller than a few pixels.
-- Pace: hold the familiar object for 2 to 3 seconds, then one pull-back every 1.5 to 2.5 seconds, and hold the final reveal for about 3 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more and the counter at 90 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 big is the Sun?") unless my content asks for it.
-
-SOUND
-- Bed: a deep, slow drone with a filtered pad; no beat.
-- Map events to the kit: every pull-back gets a long, low "whoosh"; each label gets a soft ping; the final reveal gets "riser" into "boom"; the counter "tick"s only when the shown number changes; the takeaway gets "shimmer".
-- Full mix (no voiceover): keep the deep drone, at most about 3 sounds at once, and a moment of near-silence before the big reveal.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Cosmic Scale
-Family: 3D
-Look: Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.
-How it explains: It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Cosmic Scale" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each pull-back starts about 0.3 s before the next object is named, its label lands on its name, and the reveal of the biggest object lands on the stressed word.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
-- Replace the demo's story: TL, BODIES (names, real radii, positions, painted textures), the CAM keyframes, the labels and counter in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the painted canvas textures (paintTex), the starfield, the log-scale camera track (camAt), proj3() labels that only show when a body is big enough, the sun glow pass, chip(), wordLine() and grain()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
-
-THE STYLE
-- Sizes are real: every body uses its true radius relative to the others (Earth = 1 unit), lined up side by side. Never fake a ratio; let tiny things be tiny and point them out with a ring and a label.
-- Every surface is painted in code on a canvas (paintTex): oceans and continents, gas bands, craters, granulated plasma. No photos or downloaded textures.
-- The camera moves on a log scale (camAt keys hold the log of the distance), so each pull-back feels like the same size of jump. Stars stay fixed far away so the motion reads as scale, not travel.
-- Palette: black space (#02030a), white stars, warm sun orange (#ffb347 to #ff7a12) with a soft screen-blended glow, cool label blue (#bfe1ff). One warm accent (#ffcf8a) for the second headline line.
-- Type: Space Grotesk 700 headlines at the top, JetBrains Mono labels with the real size, a dashed ring around anything smaller than a few pixels.
-- Pace: hold the familiar object for 2 to 3 seconds, then one pull-back every 1.5 to 2.5 seconds, and hold the final reveal for about 3 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep headlines at 56 px or more, labels at 22 px or more and the counter at 90 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 big is the Sun?") unless my content asks for it.
-
-SOUND
-- Bed: a deep, slow drone with a filtered pad; no beat.
-- Map events to the kit: every pull-back gets a long, low "whoosh"; each label gets a soft ping; the final reveal gets "riser" into "boom"; the counter "tick"s only when the shown number changes; the takeaway gets "shimmer".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone very low, mark label pings soft: true and keep the boom for the single reveal.
-- Sync is everything: the sound score reads the same TL times as the picture.
-
-IF YOU CAN RUN CODE
-Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
-
-STYLE CARD
-Name: Cosmic Scale
-Family: 3D
-Look: Planets and stars at their true relative sizes in a deep starfield, built in Three.js with textures painted in code, and a camera that pulls back in big log-scale moves to reveal the scale.
-How it explains: It starts close on something familiar, then each beat the camera pulls back by a power of ten so the next, bigger object slides into frame beside it. Every body gets a thin label with its real size, and the final reveal lands with a boom and a big counter.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/cosmic-scale.html` (60.8 KB)

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

@@ -1,149 +0,0 @@
-# Motion graphics style #01: Creator Motion Graphics
-
-- **ID:** `creator-motion`
-- **Family:** Kinetic Type
-- **Canvas:** `1280x720`
-- **Fonts:** Anton, Instrument Serif (italic), Inter
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.
-
-## How It Explains
-Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.
-
-## Demo
-How to land your first client
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Creator Motion Graphics" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
-- Replace the demo's story: TL, CUTS, PUNCH, SHAKE, FLASH, LEAK, PUSH, the value curves, the scene functions, SCENES, the chrome() label text and scoreSound(). Keep and reuse the style's helpers (slam, row, swipe, slamMarked, strike, scribble, handArrow, drawYaw, bubble, background, finishing and the compositor).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Anton, Instrument Serif (italic), Inter.
-
-THE STYLE
-- Surface: a near-black editing-room background with slow warm and cool glows, a faint drifting grid, a vignette and film grain stepped at 24 fps. Run background() and finishing() on every frame at the reference’s strength.
-- Type: Anton in caps for statements, set big (80 to 220 px). Instrument Serif italic in yellow for the one soft or emotional phrase. Inter for labels and small supporting lines. At most one yellow word per line; green only for money and growth numbers; red only for the wrong idea.
-- How things appear: words slam in one at a time (large and blurred, settling with an expo ease). Cards, chips and pills pop with overshoot. Mockups swing in with a 3D tilt (drawYaw) or slide up from below.
-- Emphasis: punch zoom plus shake on the hardest words; a yellow highlighter swipe that turns the word dark; a hand-drawn circle and arrow onto the thing that matters; a red strike-through for the wrong idea; a stamp for a flat rejection.
-- Numbers: a rolling counter in green with a glow. When it locks: a boom, a white flash, a light leak and spark streaks.
-- Proof shots: stylized mockups drawn in code (browser pages, phone chats, dashboards, cards) with invented, generic names. No real logos, brand names or real people, and nothing that would pass as a real receipt or a real message. Label figures as examples when they are illustrative.
-- Scene changes: every new idea gets a cut, rotating between whip pans with motion blur, RGB glitches and flash cuts. Inside a scene keep things continuous: lines stack, shift up, get struck out, and new lines arrive.
-- Chrome: a small topic label at the top left, plus a STEP pill only when the content is a real sequence.
-- Pace: the hook lands in under 2 seconds, something new happens every 0.5 to 1.5 seconds, and the takeaway holds about 1.5 seconds at the end.
-
-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 statement text at 80 px or more, any label the story depends on at 28 px or more, and key numbers at 120 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 to land your first client") unless my content asks for it.
-
-SOUND
-- Music: a low drone and a riser into the first big word, the half-time beat (k.music) under the body, a tape stop on the wrong idea, and the beat back for the takeaway. Booms duck the music on their own.
-- Map events to the kit: word slams get "slam" (bigger word, more gain); pills, chips and cards get "pop"; cuts get "whoosh", "glitch" or a "slam" on the flash; highlighter and hand-drawn marks get "marker"; strike-throughs get "strike"; typing gets "keys"; a sent message "send", an incoming one "ping"; clicks "click"; counters "tick" only when the shown number changes and never more than 12 per second; the big number lands on "boom" + "slam" + "shimmer"; a rejection gets "stamp".
-- Full mix (no voiceover): keep the music, have at most about 3 sounds at once, and leave a moment of near-silence before the biggest hit.
-- 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: Creator Motion Graphics
-Family: Kinetic Type
-Look: The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.
-How it explains: Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Creator Motion Graphics" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Every on-screen word slams in at the start of its spoken word, within 0.03 s. Show 2 to 6 key words per sentence, not a full transcript.
-- 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, SHAKE, FLASH, LEAK, PUSH, the value curves, the scene functions, SCENES, the chrome() label text and scoreSound(). Keep and reuse the style's helpers (slam, row, swipe, slamMarked, strike, scribble, handArrow, drawYaw, bubble, background, finishing and the compositor).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Anton, Instrument Serif (italic), Inter.
-
-THE STYLE
-- Surface: a near-black editing-room background with slow warm and cool glows, a faint drifting grid, a vignette and film grain stepped at 24 fps. Run background() and finishing() on every frame at the reference’s strength.
-- Type: Anton in caps for statements, set big (80 to 220 px). Instrument Serif italic in yellow for the one soft or emotional phrase. Inter for labels and small supporting lines. At most one yellow word per line; green only for money and growth numbers; red only for the wrong idea.
-- How things appear: words slam in one at a time (large and blurred, settling with an expo ease). Cards, chips and pills pop with overshoot. Mockups swing in with a 3D tilt (drawYaw) or slide up from below.
-- Emphasis: punch zoom plus shake on the hardest words; a yellow highlighter swipe that turns the word dark; a hand-drawn circle and arrow onto the thing that matters; a red strike-through for the wrong idea; a stamp for a flat rejection.
-- Numbers: a rolling counter in green with a glow. When it locks: a boom, a white flash, a light leak and spark streaks.
-- Proof shots: stylized mockups drawn in code (browser pages, phone chats, dashboards, cards) with invented, generic names. No real logos, brand names or real people, and nothing that would pass as a real receipt or a real message. Label figures as examples when they are illustrative.
-- Scene changes: every new idea gets a cut, rotating between whip pans with motion blur, RGB glitches and flash cuts. Inside a scene keep things continuous: lines stack, shift up, get struck out, and new lines arrive.
-- Chrome: a small topic label at the top left, plus a STEP pill only when the content is a real sequence.
-- Pace: the hook lands in under 2 seconds, something new happens every 0.5 to 1.5 seconds, and the takeaway holds about 1.5 seconds at the end.
-
-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 statement text at 80 px or more, any label the story depends on at 28 px or more, and key numbers at 120 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 to land your first client") unless my content asks for it.
-
-SOUND
-- Music: a low drone and a riser into the first big word, the half-time beat (k.music) under the body, a tape stop on the wrong idea, and the beat back for the takeaway. Booms duck the music on their own.
-- Map events to the kit: word slams get "slam" (bigger word, more gain); pills, chips and cards get "pop"; cuts get "whoosh", "glitch" or a "slam" on the flash; highlighter and hand-drawn marks get "marker"; strike-throughs get "strike"; typing gets "keys"; a sent message "send", an incoming one "ping"; clicks "click"; counters "tick" only when the shown number changes and never more than 12 per second; the big number lands on "boom" + "slam" + "shimmer"; a rejection gets "stamp".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the music low and plays anything marked soft at about 55%. Mark small sounds (pops, ticks, markers, keys) soft: true. Keep booms for the 2 or 3 biggest moments, never put a riser over a spoken sentence, and keep the drone out from under speech.
-- 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: Creator Motion Graphics
-Family: Kinetic Type
-Look: The high-energy business-creator edit: huge condensed caps slamming in word by word, a yellow serif accent on the one word that matters, highlighter swipes, hand-drawn circles and arrows, tilted browser and phone mockups, rolling green counters, film grain and light leaks on near-black.
-How it explains: Every idea gets its own beat: words land on the beat with punch zooms and shake, the wrong idea gets a red strike and a stamp, proof appears as code-drawn mockups, the key number rolls up and locks with a boom, and whip pans, RGB glitches and flash cuts carry you between scenes.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/creator-motion.html` (63.6 KB)

package/.agent/skills/motion-styles/prompts/data-city.md

@@ -1,149 +0,0 @@
-# Motion graphics style #14: Data City
-
-- **ID:** `data-city`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.
-
-## How It Explains
-Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.
-
-## Demo
-Hours online per day, 2018 to 2024 (example data)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Data City" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
-- Replace the demo's story: TL, DATA (labels and values), the colour ramp, the highlight index, the headline, callout and takeaway text in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the grid floor and fog, towers built from DATA with window strips and emissive roofs, the rise-and-count timing, the orbiting camera, the beam, proj3() value labels, the glow pass, chip() and wordLine()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).
-
-THE STYLE
-- Data first: tower heights are exactly proportional to the values (one scale, baseline at zero). Label every tower on the floor and print its value above it. If the data is illustrative, keep an "EXAMPLE DATA" chip on screen.
-- Towers: navy boxes (#1c2a6e) with thin lit window strips on the front and a glowing roof whose colour runs from cyan (#33e1ff) to magenta (#ff4fd8) across the series.
-- Night city: deep navy background (#080d22), a blue grid floor, fog so the far edge fades, and a soft screen-blended glow above each roof.
-- Camera: a slow orbit around the skyline, then a rise above it for the takeaway. No cuts.
-- Type: Space Grotesk 700 headline top left in white with the second line in cyan; JetBrains Mono for values and labels.
-- Highlight: a translucent beam rises from the key tower, with a white callout card.
-- Pace: one tower every 0.3 to 0.5 seconds, hold the full skyline about 2 seconds, then the highlight and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, values at 26 px or more and axis labels at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Hours online per day, 2018 to 2024 (example data)") unless my content asks for it.
-
-SOUND
-- Bed: a dark synth pad with a pulsing bass on the beat (padBed with kick) and light hats.
-- Map events to the kit: each tower rising gets a pluck whose pitch follows its height; values "tick" while counting; the beam gets "riser" and a bright swell; the callout gets "pop"; the takeaway gets "shimmer".
-- Full mix (no voiceover): keep the pulsing bass pad, at most about 3 sounds at once, and a short gap before the highlight.
-- 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: Data City
-Family: 3D
-Look: A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.
-How it explains: Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Data City" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each tower starts rising as its label is said and its value locks on the number; the beam lands on the stressed word of the highlight.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
-- Replace the demo's story: TL, DATA (labels and values), the colour ramp, the highlight index, the headline, callout and takeaway text in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the grid floor and fog, towers built from DATA with window strips and emissive roofs, the rise-and-count timing, the orbiting camera, the beam, proj3() value labels, the glow pass, chip() and wordLine()).
-- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
-- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
-- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).
-
-THE STYLE
-- Data first: tower heights are exactly proportional to the values (one scale, baseline at zero). Label every tower on the floor and print its value above it. If the data is illustrative, keep an "EXAMPLE DATA" chip on screen.
-- Towers: navy boxes (#1c2a6e) with thin lit window strips on the front and a glowing roof whose colour runs from cyan (#33e1ff) to magenta (#ff4fd8) across the series.
-- Night city: deep navy background (#080d22), a blue grid floor, fog so the far edge fades, and a soft screen-blended glow above each roof.
-- Camera: a slow orbit around the skyline, then a rise above it for the takeaway. No cuts.
-- Type: Space Grotesk 700 headline top left in white with the second line in cyan; JetBrains Mono for values and labels.
-- Highlight: a translucent beam rises from the key tower, with a white callout card.
-- Pace: one tower every 0.3 to 0.5 seconds, hold the full skyline about 2 seconds, then the highlight and the takeaway.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep the headline at 56 px or more, values at 26 px or more and axis labels at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("Hours online per day, 2018 to 2024 (example data)") unless my content asks for it.
-
-SOUND
-- Bed: a dark synth pad with a pulsing bass on the beat (padBed with kick) and light hats.
-- Map events to the kit: each tower rising gets a pluck whose pitch follows its height; values "tick" while counting; the beam gets "riser" and a bright swell; the callout gets "pop"; the takeaway gets "shimmer".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark plucks and ticks soft: true and keep the swell for the highlight.
-- 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: Data City
-Family: 3D
-Look: A 3D bar chart that grows like a city skyline at night, built in Three.js: navy towers with lit windows, glowing cyan-to-magenta roofs, a grid floor fading into fog, and values floating above each tower.
-How it explains: Towers rise one by one with their values counting up while the camera slowly circles the skyline. The tallest gets a light beam and a callout, then the camera rises over the city for the takeaway number.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/data-city.html` (58.4 KB)