@amg555/frameforge-mcp 2.7.6 → 2.7.8

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

@@ -1,147 +0,0 @@
-# Motion graphics style #05: Data Story
-
-- **ID:** `data-story`
-- **Family:** Data
-- **Canvas:** `1280x720`
-- **Fonts:** Archivo (500 to 800), IBM Plex Mono (500 and 600)
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.
-
-## How It Explains
-Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.
-
-## Demo
-How we got to 8 billion people (UN World Population Prospects)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Data Story" 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.
-- Replace the demo's story: the data (POP, BILLIONS, YEARS_PER), TL, CUTS, the X and Y scales, the scene functions, SCENES, the source line text and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, composite, padBed), background(), tag(), cam(), popAt() (monotone curve), inverseYear(), the counter and the bar, card and pill drawing patterns).
-- 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 (500 to 800), IBM Plex Mono (500 and 600).
-
-THE STYLE
-- Data first: use real, sourced numbers for my topic and plot them to scale (no invented values, no cropped axes that exaggerate). Put a short "Source: ..." line at the bottom left of every frame. If a figure is an estimate, say so in the narration or a label. If you cannot verify a number, ask me instead of guessing.
-- Surface: deep ink (#0f141c) with a faint coral glow top left and a faint teal glow bottom right, very subtle gridlines, and a vignette.
-- Type: Archivo 800 for headlines and big numbers, IBM Plex Mono for every label, axis value, unit and the source line, and a small coral mono tag in caps above each headline. Ink #eef1f5, muted #7d8796.
-- Color has meaning: one accent per idea. Coral for the main series, teal for supporting bars, sand (#f2c14e) for the one thing the viewer should remember. Never more than three colors on screen.
-- Charts: lines draw left to right with a glowing head and a soft area fill, using a monotone curve through the real points so it never overshoots; milestone dots pop as the line passes them; bars grow from the baseline one by one with their value counting up on top; the key bar or span gets a sand ring or a sand re-trace with a glow.
-- Numbers: big counters with thousands separators count up with an expo ease and lock; a comparison card pair shows two numbers side by side with a sand multiplier counting between them.
-- Scene changes: soft slide-ups and clean pushes (composite with CUTS). The first number can shrink into a chart label so the opening flows into the chart without a cut.
-- Takeaway: one plain sentence in Archivo with a sand pill behind the key phrase, then a single mono context line. Hold about 1.5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 1280x720 keep headlines at 50 px or more, the takeaway at 80 px or more, key numbers at 100 px or more, and axis labels at 16 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 we got to 8 billion people (UN World Population Prospects)") unless my content asks for it.
-
-SOUND
-- Bed: a low, thoughtful pad (padBed) with a soft pulse once the charts start; no big drums.
-- Map events to the kit: counters "tick" only when the shown number changes, rising in pitch; each data milestone the line passes gets a soft pluck that climbs a pentatonic scale; each bar gets a pluck whose pitch follows its height; rings and pills get a bright swipe; scene changes get "whoosh"; cards get "pop"; the single biggest number lands on "boom" with a bell note; the takeaway gets an open chord.
-- Full mix (no voiceover): keep the low pad with a soft pulse, at most about 3 sounds at once, and a short gap before the big comparison 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: Data Story
-Family: Data
-Look: A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.
-How it explains: Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Data Story" 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. A number starts counting as it is spoken and locks on its last syllable; a line reaches each milestone as that year or value is said; each bar grows as its label is named.
-- 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: the data (POP, BILLIONS, YEARS_PER), TL, CUTS, the X and Y scales, the scene functions, SCENES, the source line text and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, composite, padBed), background(), tag(), cam(), popAt() (monotone curve), inverseYear(), the counter and the bar, card and pill drawing patterns).
-- 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 (500 to 800), IBM Plex Mono (500 and 600).
-
-THE STYLE
-- Data first: use real, sourced numbers for my topic and plot them to scale (no invented values, no cropped axes that exaggerate). Put a short "Source: ..." line at the bottom left of every frame. If a figure is an estimate, say so in the narration or a label. If you cannot verify a number, ask me instead of guessing.
-- Surface: deep ink (#0f141c) with a faint coral glow top left and a faint teal glow bottom right, very subtle gridlines, and a vignette.
-- Type: Archivo 800 for headlines and big numbers, IBM Plex Mono for every label, axis value, unit and the source line, and a small coral mono tag in caps above each headline. Ink #eef1f5, muted #7d8796.
-- Color has meaning: one accent per idea. Coral for the main series, teal for supporting bars, sand (#f2c14e) for the one thing the viewer should remember. Never more than three colors on screen.
-- Charts: lines draw left to right with a glowing head and a soft area fill, using a monotone curve through the real points so it never overshoots; milestone dots pop as the line passes them; bars grow from the baseline one by one with their value counting up on top; the key bar or span gets a sand ring or a sand re-trace with a glow.
-- Numbers: big counters with thousands separators count up with an expo ease and lock; a comparison card pair shows two numbers side by side with a sand multiplier counting between them.
-- Scene changes: soft slide-ups and clean pushes (composite with CUTS). The first number can shrink into a chart label so the opening flows into the chart without a cut.
-- Takeaway: one plain sentence in Archivo with a sand pill behind the key phrase, then a single mono context line. Hold about 1.5 seconds.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 1280x720 keep headlines at 50 px or more, the takeaway at 80 px or more, key numbers at 100 px or more, and axis labels at 16 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 we got to 8 billion people (UN World Population Prospects)") unless my content asks for it.
-
-SOUND
-- Bed: a low, thoughtful pad (padBed) with a soft pulse once the charts start; no big drums.
-- Map events to the kit: counters "tick" only when the shown number changes, rising in pitch; each data milestone the line passes gets a soft pluck that climbs a pentatonic scale; each bar gets a pluck whose pitch follows its height; rings and pills get a bright swipe; scene changes get "whoosh"; cards get "pop"; the single biggest number lands on "boom" with a bell note; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded, which keeps the pad low and plays anything marked soft at about 55%. Mark counter ticks and word ticks soft: true, keep the data plucks quiet and short, and keep "boom" for the single biggest number.
-- 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 Story
-Family: Data
-Look: A calm, editorial data explainer: deep ink background, one warm accent per idea (coral, teal, sand), Archivo headlines, IBM Plex Mono numbers and labels, charts that draw themselves to scale, and the source always on screen.
-How it explains: Numbers count up, then shrink into a label as the chart arrives. A line draws itself through the real data with dots popping at each milestone, the part that matters is re-traced in sand, bars grow one by one and get ringed, two cards set the key comparison side by side, and a plain-language takeaway lands with a sand pill.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/data-story.html` (46.9 KB)

package/.agent/skills/motion-styles/prompts/deep-layers.md

@@ -1,147 +0,0 @@
-# Motion graphics style #19: Deep Layers
-
-- **ID:** `deep-layers`
-- **Family:** 3D
-- **Canvas:** `720x1280`
-- **Fonts:** Anton, JetBrains Mono (500 and 700)
-- **Three.js 3D:** Yes
-- **Footage Overlay:** No
-
-## Look
-A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.
-
-## How It Explains
-The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.
-
-## Demo
-How deep have we dug?
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Deep Layers" 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, LAYERS (names, thickness, colours, the real depth each one starts at), the props on top, the depth curve in depthAt(), the labels and the takeaway in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the stacked cross-section block, the surface props, the drill line and glowing tip, the descending camera, the depth counter, the side tick ruler, the NOT TO SCALE chip, 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: Anton, JetBrains Mono (500 and 700).
-
-THE STYLE
-- The block is a stack of Three.js boxes, one per layer, each a believable material colour (grass green, soil brown, sand, grey rocks, dark granite, glowing orange heat). Thickness is compressed for the frame, so a "NOT TO SCALE" chip stays on screen, but every label shows the real depth.
-- A small surface scene (a house, trees) on top tells you where you are. The drill is a thin white cylinder with a glowing yellow tip that grows downward.
-- The camera dives down beside the cut face, always a little ahead of the drill tip.
-- Labels: dark mono chips on the left with the layer name and its real depth, joined to the face by ticks on a side ruler.
-- Type: Anton for the headline (white with a dark outline, second line yellow) and the depth counter, which glows warmer as it goes deeper.
-- Pace: one layer every 1.5 to 2 seconds; hold the bottom for about 2 seconds before 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 64 px or more, the depth counter at 80 px or more and layer labels at 22 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 deep have we dug?") unless my content asks for it.
-
-SOUND
-- Bed: a drill hum (filtered sawtooth with a slight wobble) over a low rumble that grows with depth.
-- Map events to the kit: each new layer gets a short beep (SND.beep) and a soft "tick"; the counter "tick"s when the shown number changes; reaching the hot layer gets a hiss and a low "boom"; the takeaway gets an open chord.
-- Full mix (no voiceover): keep the drill hum and the rumble, a beep for each layer, and a hiss of heat at the bottom.
-- 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: Deep Layers
-Family: 3D
-Look: A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.
-How it explains: The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Deep Layers" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. The drill reaches each layer as it is named and its label lands on that word; the counter locks on the last spoken syllable of the final depth.
-- 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, LAYERS (names, thickness, colours, the real depth each one starts at), the props on top, the depth curve in depthAt(), the labels and the takeaway in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), the stacked cross-section block, the surface props, the drill line and glowing tip, the descending camera, the depth counter, the side tick ruler, the NOT TO SCALE chip, 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: Anton, JetBrains Mono (500 and 700).
-
-THE STYLE
-- The block is a stack of Three.js boxes, one per layer, each a believable material colour (grass green, soil brown, sand, grey rocks, dark granite, glowing orange heat). Thickness is compressed for the frame, so a "NOT TO SCALE" chip stays on screen, but every label shows the real depth.
-- A small surface scene (a house, trees) on top tells you where you are. The drill is a thin white cylinder with a glowing yellow tip that grows downward.
-- The camera dives down beside the cut face, always a little ahead of the drill tip.
-- Labels: dark mono chips on the left with the layer name and its real depth, joined to the face by ticks on a side ruler.
-- Type: Anton for the headline (white with a dark outline, second line yellow) and the depth counter, which glows warmer as it goes deeper.
-- Pace: one layer every 1.5 to 2 seconds; hold the bottom for about 2 seconds before 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 64 px or more, the depth counter at 80 px or more and layer labels at 22 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 deep have we dug?") unless my content asks for it.
-
-SOUND
-- Bed: a drill hum (filtered sawtooth with a slight wobble) over a low rumble that grows with depth.
-- Map events to the kit: each new layer gets a short beep (SND.beep) and a soft "tick"; the counter "tick"s when the shown number changes; reaching the hot layer gets a hiss and a low "boom"; the takeaway gets an open chord.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drill hum very low and mark beeps 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: Deep Layers
-Family: 3D
-Look: A cross-section block of the ground in Three.js, with a tiny house and trees on top and stacked layers of soil, clay, rock and glowing hot rock below. A white drill line pushes down while the camera dives with it.
-How it explains: The camera starts at the surface and descends along the cut face as the drill goes down. A depth counter runs, each layer gets a label as the drill reaches it, the bottom glows orange-hot, and the takeaway puts the depth in context.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/deep-layers.html` (59.3 KB)

package/.agent/skills/motion-styles/prompts/doc-cinema.md

@@ -1,145 +0,0 @@
-# Motion graphics style #56: Doc Cinema
-
-- **ID:** `doc-cinema`
-- **Family:** Edit Overlay
-- **Canvas:** `720x1280`
-- **Fonts:** Instrument Serif (regular and italic), Inter (600), JetBrains Mono (500)
-- **Three.js 3D:** No
-- **Footage Overlay:** Yes
-
-## Look
-Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.
-
-## How It Explains
-Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.
-
-## Demo
-The last lighthouse keeper (an invented short doc)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Doc Cinema" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-BUILD DIRECTLY
-Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL, CHAPTERS (label, title lines, location and date, the still or shot used), the end card and scoreSound(); load your clip or stills with Load footage. Keep and reuse the style's helpers (the letterbox bars, grain and vignette, the grade pass, the Ken Burns push on every shot, the centred chapter title fade with a tracked label, the typed location stamp and the cross-dissolve between chapters).
-- 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 (regular and italic), Inter (600), JetBrains Mono (500).
-
-THE STYLE
-- Built for your footage or stills: footage() fills the frame behind the bars (your clip when loaded; an illustrated stand-in scene until then). Every shot gets a slow push-in of 4 to 8%.
-- Letterbox bars top and bottom (about 6% of the height each), heavy grain (stepped at 24 fps), a vignette and a slight warm highlight / cool shadow grade.
-- Chapter cards: a tracked Inter 600 label ("CHAPTER ONE") and a centred Instrument Serif title, the second line in italic, fading up with a slow rise; they clear before the story continues.
-- Location stamps: JetBrains Mono, small, bottom left, typed on.
-- For real stories use real places and dates; invented stories must not look like real archive footage.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep chapter titles at 64 px or more, the chapter label at 20 px or more and the stamp at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The last lighthouse keeper (an invented short doc)") unless my content asks for it.
-
-SOUND
-- Bed: a slow, low drone with room tone; long silences are part of the style.
-- Map events to the kit: each chapter title gets one soft piano-like note with long reverb; stamps get very soft typewriter "keys"; dissolves get a slow airy swell; the end card gets a low final note.
-- Full mix (no voiceover): a slow, low drone and a soft piano note for each chapter title, plus room tone; leave plenty of silence.
-- 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: Doc Cinema
-Family: Edit Overlay
-Look: Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.
-How it explains: Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Doc Cinema" style (Edit Overlay) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
-
-MY CONTENT
-[No topic yet. Ask me for my topic or script before building anything.]
-
-VOICEOVER TIMING
-[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
-
-How to use the timing:
-- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
-- Set the duration to the last word's end plus about 1.2 seconds.
-- Build the timeline (TL) from these times. Each chapter title fades in during the pause before the narration starts that chapter, and the location stamp types on the first mention of the place.
-- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
-- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
-- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
-
-STORYBOARD FIRST
-Before building, show me a storyboard and wait for my OK:
-- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
-- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
-- Below the grid, list any facts or numbers you had to assume.
-When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
-
-WHAT TO BUILD
-One self-contained HTML file (an artifact if you can), built on the reference file below:
-- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover, Load footage) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
-- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
-- Keep window.loadFootage(url) and the Load footage button working so I can drop in my own clip and see the overlay on it; until then the stand-in presenter shows where I sit in the frame.
-- Replace the demo's story: TL, CHAPTERS (label, title lines, location and date, the still or shot used), the end card and scoreSound(); load your clip or stills with Load footage. Keep and reuse the style's helpers (the letterbox bars, grain and vignette, the grade pass, the Ken Burns push on every shot, the centred chapter title fade with a tracked label, the typed location stamp and the cross-dissolve between chapters).
-- 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 (regular and italic), Inter (600), JetBrains Mono (500).
-
-THE STYLE
-- Built for your footage or stills: footage() fills the frame behind the bars (your clip when loaded; an illustrated stand-in scene until then). Every shot gets a slow push-in of 4 to 8%.
-- Letterbox bars top and bottom (about 6% of the height each), heavy grain (stepped at 24 fps), a vignette and a slight warm highlight / cool shadow grade.
-- Chapter cards: a tracked Inter 600 label ("CHAPTER ONE") and a centred Instrument Serif title, the second line in italic, fading up with a slow rise; they clear before the story continues.
-- Location stamps: JetBrains Mono, small, bottom left, typed on.
-- For real stories use real places and dates; invented stories must not look like real archive footage.
-
-RULES THAT KEEP IT IN STYLE
-- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
-- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
-- It will be watched on phones: at 720x1280 keep chapter titles at 64 px or more, the chapter label at 20 px or more and the stamp at 20 px or more. Fill the frame.
-- Keep each frame fast, well under 50 ms.
-- Give my topic its own demo content; do not reuse the reference's story ("The last lighthouse keeper (an invented short doc)") unless my content asks for it.
-
-SOUND
-- Bed: a slow, low drone with room tone; long silences are part of the style.
-- Map events to the kit: each chapter title gets one soft piano-like note with long reverb; stamps get very soft typewriter "keys"; dissolves get a slow airy swell; the end card gets a low final note.
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the drone 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: Doc Cinema
-Family: Edit Overlay
-Look: Mini-documentary finishing: letterbox bars, heavy film grain, a warm-cool grade, slow Ken Burns push-ins, big serif chapter titles centred in the frame, and a small mono location and date stamp in the corner.
-How it explains: Each chapter opens with a slow push-in and the title fading up letter-spaced in the centre, a location stamp types in at the bottom, then the title clears for the story. A soft cross-dissolve leads to the next chapter, and the end card holds in silence.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/doc-cinema.html` (56.7 KB)

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

@@ -1,145 +0,0 @@
-# Motion graphics style #30: Evidence Board
-
-- **ID:** `evidence-board`
-- **Family:** Illustrated
-- **Canvas:** `720x1280`
-- **Fonts:** Special Elite, Caveat (700), Anton
-- **Three.js 3D:** No
-- **Footage Overlay:** No
-
-## Look
-A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.
-
-## How It Explains
-The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.
-
-## Demo
-The missing painting (an invented case)
-
----
-
-## Ready-to-Copy Prompt (Standard)
-
-```markdown
-I want an animated video in the "Evidence Board" 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, ITEMS (what is pinned, where, and what it shows), LINKS (which pins the string joins and when), the typed card text, the stamp word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the cork texture, polaroid(), indexCard() with typewriter reveal, sticky(), pins, sagging string() that draws pin to pin, the case-file label, the stamp with distressed edges, the clue-to-clue camera (CAMK) and the final pull-back).
-- 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: Special Elite, Caveat (700), Anton.
-
-THE STYLE
-- The board is one large layer (bigger than the screen) with cork speckle; the camera moves across it with eased pans and zooms, then pulls back to show everything.
-- Clues are physical objects drawn in code: polaroids (white frame, dark photo area with a simple sketch, Caveat caption), lined index cards with Special Elite typing, yellow sticky notes in Caveat, each slightly rotated with a drop shadow and a red pin.
-- Red string (#c1121f) sags between pins and draws itself from one pin to the next.
-- Verdict: a rubber stamp (red, double border, distressed with knocked-out specks) slams onto the board with a shake.
-- True crime needs care: for real cases use only documented facts, no speculation presented as fact, and respect for victims; invented cases must say so.
-- Pace: about 2 seconds per clue, the stamp in the last 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 typed text at 30 px or more, captions at 36 px or more and the stamp 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 ("The missing painting (an invented case)") unless my content asks for it.
-
-SOUND
-- Bed: a low, tense pad and a slow pulse.
-- Map events to the kit: pins get a soft push (SND.tap low); string gets a short twang (a plucked low note with a bend); typing gets "keys"; camera moves get a soft "whoosh"; the stamp gets "stamp" and a low "boom".
-- Full mix (no voiceover): a tense low pad, a pin push for every pin, a string twang, typewriter keys, and a heavy stamp.
-- 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: Evidence Board
-Family: Illustrated
-Look: A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.
-How it explains: The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.
-
-```
-
----
-
-## Voiceover & Storyboard Prompt
-
-```markdown
-I want an animated video in the "Evidence Board" 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 arrives at each clue as it is mentioned, string draws while the connection is explained, the card types out while it is read, and the stamp slams on the verdict 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, ITEMS (what is pinned, where, and what it shows), LINKS (which pins the string joins and when), the typed card text, the stamp word, the camera keys in CAMK and scoreSound(). Keep and reuse the style's helpers (the cork texture, polaroid(), indexCard() with typewriter reveal, sticky(), pins, sagging string() that draws pin to pin, the case-file label, the stamp with distressed edges, the clue-to-clue camera (CAMK) and the final pull-back).
-- 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: Special Elite, Caveat (700), Anton.
-
-THE STYLE
-- The board is one large layer (bigger than the screen) with cork speckle; the camera moves across it with eased pans and zooms, then pulls back to show everything.
-- Clues are physical objects drawn in code: polaroids (white frame, dark photo area with a simple sketch, Caveat caption), lined index cards with Special Elite typing, yellow sticky notes in Caveat, each slightly rotated with a drop shadow and a red pin.
-- Red string (#c1121f) sags between pins and draws itself from one pin to the next.
-- Verdict: a rubber stamp (red, double border, distressed with knocked-out specks) slams onto the board with a shake.
-- True crime needs care: for real cases use only documented facts, no speculation presented as fact, and respect for victims; invented cases must say so.
-- Pace: about 2 seconds per clue, the stamp in the last 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 typed text at 30 px or more, captions at 36 px or more and the stamp 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 ("The missing painting (an invented case)") unless my content asks for it.
-
-SOUND
-- Bed: a low, tense pad and a slow pulse.
-- Map events to the kit: pins get a soft push (SND.tap low); string gets a short twang (a plucked low note with a bend); typing gets "keys"; camera moves get a soft "whoosh"; the stamp gets "stamp" and a low "boom".
-- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark keys and pins 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: Evidence Board
-Family: Illustrated
-Look: A detective corkboard: speckled cork, polaroids with sketched clues, typed index cards, yellow sticky notes, red push pins and red string, with a case-file label taped at the top and a rubber stamp for the verdict.
-How it explains: The camera moves across the board clue by clue, close enough to read each one. Red string draws itself from pin to pin as connections are made, a card types itself out, and the camera pulls back to the whole board as the verdict stamp slams down.
-
-```
-
----
-
-## Reference Source Code Location
-File: `plugins/motion-styles/sources/evidence-board.html` (60.1 KB)