@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/size-lineup.md

@@ -0,0 +1,149 @@
+# Motion graphics style #13: Size Lineup
+
+- **ID:** `size-lineup`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Archivo Black, JetBrains Mono (500 and 700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.
+
+## How It Explains
+The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.
+
+## Demo
+How big is a blue whale?
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Size Lineup" 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, ITEMS (names, real sizes, shapes, colours, positions), the shapes in init3(), the camera keys in CAMK, the tags in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the endless floor with GridHelper and fog, the camera track (track over CAMK), dimension lines drawn from proj3() of base and top, the dark height chips, 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: Archivo Black, JetBrains Mono (500 and 700).
+
+THE STYLE
+- Every object is built from simple Three.js primitives at its real size in metres (1 unit = 1 m) and stands on the same floor. Simplify shapes (capsules, ellipsoids, boxes) but keep proportions true: never scale anything up "for readability".
+- Order is always smallest to biggest, left to right, with even gaps. The camera trucks right and pulls back so each new object enters from the right.
+- Floor: pale blue-grey (#e8eef4) with a soft grid and fog so it reads as endless. One soft shadow-casting light.
+- Tags: a 2 px dimension line with end ticks beside each object (base to top), a dark navy chip (#14263d) with the size, and a small mono name above it.
+- Type: Archivo Black headline at the top in navy with the second line in blue (#2f6bd8). JetBrains Mono for every number.
+- Use real, typical sizes and say "up to" when you show a maximum.
+- Pace: hold the first object about 2 seconds, then one new object every 2 to 2.5 seconds, and hold the full lineup 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 the headline at 60 px or more, height tags at 24 px or more and names 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 ("How big is a blue whale?") unless my content asks for it.
+
+SOUND
+- Bed: a light, curious pad (padBed) with soft hats.
+- Map events to the kit: soft footsteps (SND.tap) while the camera travels; each new tag gets a pluck that climbs in pitch; dimension lines get a short "tick"; the giant gets a long, low swell with a slow pitch bend and a "boom"; the takeaway gets an open chord.
+- Full mix (no voiceover): keep the light pad, soft steps while the camera travels, and a short silence before the giant is revealed.
+- 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: Size Lineup
+Family: 3D
+Look: Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.
+How it explains: The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Size Lineup" 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 camera starts moving to the next object about 0.3 s before it is named, its dimension line draws on its name and its tag lands on the number.
+- 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, ITEMS (names, real sizes, shapes, colours, positions), the shapes in init3(), the camera keys in CAMK, the tags in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the endless floor with GridHelper and fog, the camera track (track over CAMK), dimension lines drawn from proj3() of base and top, the dark height chips, 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: Archivo Black, JetBrains Mono (500 and 700).
+
+THE STYLE
+- Every object is built from simple Three.js primitives at its real size in metres (1 unit = 1 m) and stands on the same floor. Simplify shapes (capsules, ellipsoids, boxes) but keep proportions true: never scale anything up "for readability".
+- Order is always smallest to biggest, left to right, with even gaps. The camera trucks right and pulls back so each new object enters from the right.
+- Floor: pale blue-grey (#e8eef4) with a soft grid and fog so it reads as endless. One soft shadow-casting light.
+- Tags: a 2 px dimension line with end ticks beside each object (base to top), a dark navy chip (#14263d) with the size, and a small mono name above it.
+- Type: Archivo Black headline at the top in navy with the second line in blue (#2f6bd8). JetBrains Mono for every number.
+- Use real, typical sizes and say "up to" when you show a maximum.
+- Pace: hold the first object about 2 seconds, then one new object every 2 to 2.5 seconds, and hold the full lineup 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 the headline at 60 px or more, height tags at 24 px or more and names 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 ("How big is a blue whale?") unless my content asks for it.
+
+SOUND
+- Bed: a light, curious pad (padBed) with soft hats.
+- Map events to the kit: soft footsteps (SND.tap) while the camera travels; each new tag gets a pluck that climbs in pitch; dimension lines get a short "tick"; the giant gets a long, low swell with a slow pitch bend and a "boom"; the takeaway gets an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark steps and plucks soft: true and keep the low swell for the final 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: Size Lineup
+Family: 3D
+Look: Things lined up smallest to biggest on an endless pale floor with a grid, built in Three.js, while the camera glides past and pulls back. Each one gets a dimension line and a dark height tag.
+How it explains: The camera starts close on the smallest thing, then trucks sideways and pulls back as each bigger one enters, so the scale keeps growing. Height lines draw themselves beside each object, and the final pull-back shows the whole lineup with the giant at the end.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/size-lineup.html` (58.7 KB)

package/plugins/motion-styles/prompts/software-walkthrough.md

@@ -0,0 +1,147 @@
+# Motion graphics style #04: Software Walkthrough
+
+- **ID:** `software-walkthrough`
+- **Family:** Screen and UI
+- **Canvas:** `1280x720`
+- **Fonts:** DM Sans (400 to 700), DM Mono (400 and 500)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.
+
+## How It Explains
+It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.
+
+## Demo
+Your first automation in an invented app called Flowdesk
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Software Walkthrough" style (Screen and UI) 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, CAM, CURSOR, STEP_NAMES, the app pieces (sidebar, header, homePage, emptyState, modal, editor), the spotlight calls in explainer(), titleCard(), notification(), outroCard() and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, typed, softCard, cursorArrow, checkMark, padBed), wallpaper(), appWindow() as the frame, spotlight(), cursor(), stepCallout() and the camera transform in explainer()).
+- 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: DM Sans (400 to 700), DM Mono (400 and 500).
+
+THE STYLE
+- Surface: a desktop with a soft indigo to teal gradient wallpaper and two slow light blooms. On it, one app window (rounded, deep shadow) with a title bar, a sidebar and a main area. The whole UI is drawn in code, crisp and believable, for an invented app with an invented name. Never copy a real product’s UI, name or logo.
+- Type: DM Sans for all UI and titles (700 for headings and selected items, 400 to 500 for body), DM Mono in caps for tiny labels (WHEN, THEN, LIVE). Ink #14161c, muted #6a6f7c, one accent (#5b5bf6) for buttons, selection and the cursor ripple, green #1fb46e for live and success, yellow #ffd60a only for spotlight edges.
+- Cursor: a classic arrow that moves along eased waypoints (CURSOR keys), dips slightly on each click, and leaves an accent ripple. Every click has a visible result within 0.1 s: a pressed button, a selected row, an opened menu.
+- Camera: one continuous screen recording. Zoom in (1.2x to 1.6x) toward the area being used, hold, and ease back out to the full window between steps (CAM keys). The camera leads the cursor slightly.
+- Emphasis: a spotlight dims everything except a rounded cutout with a yellow edge around the one control that matters. Toasts, notifications and a side panel slide in to prove the result.
+- Chrome: a title card first (small mono tag, a big two-line title, a pill with the step count and time), a dark numbered step pill at the bottom left that swaps as each step starts, and a dark lower third with a green check at the end.
+- Flow: real UI behaviour in order: navigate, empty state, modal with choices, dropdown, continue, editor with connected nodes, typed fields, chips, a toggle that turns on, and the outcome happening (a new row, a message, a file).
+- Pace: 3 to 5 seconds per step, never more than one new action at a time, and a 1.5 second hold on the result.
+
+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 the title card at 90 px or more, step callouts at 28 px, app text at 18 px or more (the camera zooms in on anything smaller), and the lower third at 40 px. 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 ("Your first automation in an invented app called Flowdesk") unless my content asks for it.
+
+SOUND
+- Bed: a warm, slow pad (padBed) with soft hats while the steps run, no kick. It drops away under the title card for a moment.
+- Map events to the kit: every cursor click gets "click"; modals, menus, nodes and chips get "pop" (higher pitch for smaller things); typing gets "keys"; every camera zoom in or out gets a soft pink-noise swell; step pills get a two-note chime that climbs a little with each step; the toggle gets a short bright swish; a toast or the result gets a chime; an incoming notification gets "ping"; panels sliding in get a soft "whoosh".
+- Full mix (no voiceover): keep the warm pad and soft hats, crisp clicks on every click, and a quiet moment before the result appears.
+- 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: Software Walkthrough
+Family: Screen and UI
+Look: A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.
+How it explains: It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Software Walkthrough" style (Screen and UI) 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 click lands on the spoken word that names it, the camera starts moving about 0.3 s before the thing it shows is mentioned, and each step pill appears as its step is introduced.
+- 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, CAM, CURSOR, STEP_NAMES, the app pieces (sidebar, header, homePage, emptyState, modal, editor), the spotlight calls in explainer(), titleCard(), notification(), outroCard() and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, typed, softCard, cursorArrow, checkMark, padBed), wallpaper(), appWindow() as the frame, spotlight(), cursor(), stepCallout() and the camera transform in explainer()).
+- 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: DM Sans (400 to 700), DM Mono (400 and 500).
+
+THE STYLE
+- Surface: a desktop with a soft indigo to teal gradient wallpaper and two slow light blooms. On it, one app window (rounded, deep shadow) with a title bar, a sidebar and a main area. The whole UI is drawn in code, crisp and believable, for an invented app with an invented name. Never copy a real product’s UI, name or logo.
+- Type: DM Sans for all UI and titles (700 for headings and selected items, 400 to 500 for body), DM Mono in caps for tiny labels (WHEN, THEN, LIVE). Ink #14161c, muted #6a6f7c, one accent (#5b5bf6) for buttons, selection and the cursor ripple, green #1fb46e for live and success, yellow #ffd60a only for spotlight edges.
+- Cursor: a classic arrow that moves along eased waypoints (CURSOR keys), dips slightly on each click, and leaves an accent ripple. Every click has a visible result within 0.1 s: a pressed button, a selected row, an opened menu.
+- Camera: one continuous screen recording. Zoom in (1.2x to 1.6x) toward the area being used, hold, and ease back out to the full window between steps (CAM keys). The camera leads the cursor slightly.
+- Emphasis: a spotlight dims everything except a rounded cutout with a yellow edge around the one control that matters. Toasts, notifications and a side panel slide in to prove the result.
+- Chrome: a title card first (small mono tag, a big two-line title, a pill with the step count and time), a dark numbered step pill at the bottom left that swaps as each step starts, and a dark lower third with a green check at the end.
+- Flow: real UI behaviour in order: navigate, empty state, modal with choices, dropdown, continue, editor with connected nodes, typed fields, chips, a toggle that turns on, and the outcome happening (a new row, a message, a file).
+- Pace: 3 to 5 seconds per step, never more than one new action at a time, and a 1.5 second hold on the result.
+
+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 the title card at 90 px or more, step callouts at 28 px, app text at 18 px or more (the camera zooms in on anything smaller), and the lower third at 40 px. 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 ("Your first automation in an invented app called Flowdesk") unless my content asks for it.
+
+SOUND
+- Bed: a warm, slow pad (padBed) with soft hats while the steps run, no kick. It drops away under the title card for a moment.
+- Map events to the kit: every cursor click gets "click"; modals, menus, nodes and chips get "pop" (higher pitch for smaller things); typing gets "keys"; every camera zoom in or out gets a soft pink-noise swell; step pills get a two-note chime that climbs a little with each step; the toggle gets a short bright swish; a toast or the result gets a chime; an incoming notification gets "ping"; panels sliding in get a soft "whoosh".
+- 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%. Keep clicks at full level (they are the proof), mark camera whooshes and ticks soft: true, and keep chimes for the step pills and the final result 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: Software Walkthrough
+Family: Screen and UI
+Look: A polished screen-recording tutorial built entirely in code: an app window on a soft gradient desktop, a real-feeling cursor with click ripples, a camera that zooms into what matters, yellow-edged spotlights, numbered step callouts and a calm pad underneath.
+How it explains: It shows the clicks, not just the idea: a title card, then the cursor moves through the real flow while the camera follows it in and out, modals and menus open, fields get typed, toggles flip, and a dark step pill at the bottom left counts you through. It ends on the result actually happening and a short lower third.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/software-walkthrough.html` (56.5 KB)

package/plugins/motion-styles/prompts/stack-split.md

@@ -0,0 +1,145 @@
+# Motion graphics style #53: Stack Split
+
+- **ID:** `stack-split`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Inter (800)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## Look
+The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.
+
+## How It Explains
+The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.
+
+## Demo
+A storytime: "my landlord texted me at 3am"
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Stack Split" 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, LINES (the caption sentences with times), the bottom loop painter (here the sand cutter) and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (the two-half layout, footage() in the top half, the seamless code-drawn loop in the bottom half (period-based so it never jumps), the white seam caption bar with soft shadow, the swap animation and the story progress line).
+- 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: Inter (800).
+
+THE STYLE
+- Top half: footage() (your clip; the stand-in until loaded), cropped to fill. Bottom half: a calm, satisfying loop drawn in code that repeats on a fixed period so it never jumps (here: kinetic sand sliced by a knife).
+- The loop uses soft pastel layers (#ff9eb5, #ffd27a, #9be3c4, #a8c5ff, #d4a8ff, #ffb38a) on a light base, with fine grain for texture.
+- Caption bar: white with 14 px corners and a soft shadow, sitting over the seam, Inter 800 dark text, one sentence at a time with a quick lift-and-fade swap.
+- A thin progress line under the caption bar fills across the story.
+- Never use someone else's gameplay or footage in the bottom half; draw the loop.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep captions at 34 px or more, at most two lines, and keep the seam bar between 46% and 54% of the height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A storytime: "my landlord texted me at 3am"") unless my content asks for it.
+
+SOUND
+- Bed: a quiet lo-fi pad (your audio leads).
+- Map events to the kit: every knife slice gets a soft crunch (a short band-passed noise burst); falling layers get a soft thud (SND.tap low); caption swaps get a barely audible tick.
+- Full mix (no voiceover): a soft ASMR crunch for each slice and a quiet lo-fi bed; your clip's audio leads.
+- 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: Stack Split
+Family: Edit Overlay
+Look: The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.
+How it explains: The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Stack Split" 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 caption line swaps in on the first word of its sentence; the loop below never syncs to speech.
+- 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, LINES (the caption sentences with times), the bottom loop painter (here the sand cutter) and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (the two-half layout, footage() in the top half, the seamless code-drawn loop in the bottom half (period-based so it never jumps), the white seam caption bar with soft shadow, the swap animation and the story progress line).
+- 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: Inter (800).
+
+THE STYLE
+- Top half: footage() (your clip; the stand-in until loaded), cropped to fill. Bottom half: a calm, satisfying loop drawn in code that repeats on a fixed period so it never jumps (here: kinetic sand sliced by a knife).
+- The loop uses soft pastel layers (#ff9eb5, #ffd27a, #9be3c4, #a8c5ff, #d4a8ff, #ffb38a) on a light base, with fine grain for texture.
+- Caption bar: white with 14 px corners and a soft shadow, sitting over the seam, Inter 800 dark text, one sentence at a time with a quick lift-and-fade swap.
+- A thin progress line under the caption bar fills across the story.
+- Never use someone else's gameplay or footage in the bottom half; draw the loop.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep captions at 34 px or more, at most two lines, and keep the seam bar between 46% and 54% of the height. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A storytime: "my landlord texted me at 3am"") unless my content asks for it.
+
+SOUND
+- Bed: a quiet lo-fi pad (your audio leads).
+- Map events to the kit: every knife slice gets a soft crunch (a short band-passed noise burst); falling layers get a soft thud (SND.tap low); caption swaps get a barely audible tick.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep the crunches very soft.
+- 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: Stack Split
+Family: Edit Overlay
+Look: The retention split: your clip on the top half, a satisfying loop drawn in code on the bottom half (kinetic sand being sliced into rainbow layers), and a white caption bar in the seam that carries the story line by line.
+How it explains: The top half plays your storytime clip while the bottom loops something calm and satisfying: a knife slices thin rainbow layers of sand that fall and crumble. The caption bar in the seam swaps every sentence, and a progress line under it shows how far through the story you are.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/stack-split.html` (55.0 KB)

package/plugins/motion-styles/prompts/sticker-pop.md

@@ -0,0 +1,145 @@
+# Motion graphics style #54: Sticker Pop
+
+- **ID:** `sticker-pop`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Fredoka (600 and 700), Caveat (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## Look
+A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.
+
+## How It Explains
+Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.
+
+## Demo
+A study-with-me vlog intro
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Sticker Pop" 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, STICKERS (shape, colour, position, time), the title pill text, the note lines and the tick-list, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the die-cut sticker painter (white border, drop shadow, pop and wobble), washi tape, the lined note with the Caveat write-on, the tick-list and the peel-off exit).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Fredoka (600 and 700), Caveat (700).
+
+THE STYLE
+- Built for your footage: stickers sit around you, never over your face; footage() shows your clip or the stand-in.
+- Stickers are drawn in code with a thick white die-cut border and a soft drop shadow, in soft candy colours (pink #ff7eb6, yellow #ffd23f, mint #8de0c4, coffee #a0704a). No emoji images or brand stickers.
+- Motion: pop in with overshoot (back ease), then a decaying wobble; peel off by scaling down with a tilt.
+- Washi tape: translucent pastel strips with paler stripes at the frame corners.
+- Notes: off-white lined paper with Caveat handwriting that writes left to right; tick boxes fill with a hand-drawn check.
+
+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 title pill at 40 px or more, note handwriting at 40 px or more, and stickers at least 90 px across. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A study-with-me vlog intro") unless my content asks for it.
+
+SOUND
+- Bed: a soft lo-fi pad with a gentle beat.
+- Map events to the kit: stickers get a squishy pop (SND.bloop plus "pop"); tape gets a short rip (a rising band-passed noise); the note gets SND.scratch; ticks get "marker" short; peel-offs get a soft "whoosh".
+- Full mix (no voiceover): a soft lo-fi bed, a squishy pop for each sticker, a tape rip for washi, pencil scratches for the note.
+- 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: Sticker Pop
+Family: Edit Overlay
+Look: A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.
+How it explains: Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Sticker Pop" 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. The title pill pops on the first word, each mood sticker on the word it matches, the note writes while you say it, and each tick lands on its item.
+- 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, STICKERS (shape, colour, position, time), the title pill text, the note lines and the tick-list, and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the die-cut sticker painter (white border, drop shadow, pop and wobble), washi tape, the lined note with the Caveat write-on, the tick-list and the peel-off exit).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Fredoka (600 and 700), Caveat (700).
+
+THE STYLE
+- Built for your footage: stickers sit around you, never over your face; footage() shows your clip or the stand-in.
+- Stickers are drawn in code with a thick white die-cut border and a soft drop shadow, in soft candy colours (pink #ff7eb6, yellow #ffd23f, mint #8de0c4, coffee #a0704a). No emoji images or brand stickers.
+- Motion: pop in with overshoot (back ease), then a decaying wobble; peel off by scaling down with a tilt.
+- Washi tape: translucent pastel strips with paler stripes at the frame corners.
+- Notes: off-white lined paper with Caveat handwriting that writes left to right; tick boxes fill with a hand-drawn check.
+
+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 title pill at 40 px or more, note handwriting at 40 px or more, and stickers at least 90 px across. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A study-with-me vlog intro") unless my content asks for it.
+
+SOUND
+- Bed: a soft lo-fi pad with a gentle beat.
+- Map events to the kit: stickers get a squishy pop (SND.bloop plus "pop"); tape gets a short rip (a rising band-passed noise); the note gets SND.scratch; ticks get "marker" short; peel-offs get a soft "whoosh".
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark every sound 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: Sticker Pop
+Family: Edit Overlay
+Look: A cosy scrapbook layer over your vlog: die-cut stickers with thick white borders (a title pill, stars, hearts, a coffee cup), striped washi tape on the corners and a lined paper note with handwriting, all popping in with a wobble.
+How it explains: Stickers slap on in rhythm with what you say: a title pill first, then small mood stickers near you, a handwritten note that writes itself, and a tick-list that fills in. Each one pops with overshoot, settles with a little wobble and peels away before the next set.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/sticker-pop.html` (56.6 KB)