@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/chalk-talk.md

@@ -0,0 +1,153 @@
+# Motion graphics style #02: Chalk Talk
+
+- **ID:** `chalk-talk`
+- **Family:** Hand-Drawn
+- **Canvas:** `1280x720`
+- **Fonts:** Cabin Sketch (700), Kalam (400 and 700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.
+
+## How It Explains
+One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.
+
+## Demo
+Get 1% better every day
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Chalk Talk" style (Hand-Drawn) 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, the counter curve (cntStep, cntVal, cntText), ITEMS, drawCounter(), WIPE and its timing, and scoreSound(). Keep and reuse the style's helpers (board(), tooth(), noise2, chalkLine, chalkText, layoutText, resample, quad, ellipse, wipeMask, the frame and tray, the chalk stick, the eraser, dust() and the compositor).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Cabin Sketch (700), Kalam (400 and 700).
+
+THE STYLE
+- Surface: one long slate (BW wide, 720 tall) baked once with mottled green, faint chalk ghosts of old lessons and old eraser smears. The tooth pattern is punched out of the chalk layer every frame so strokes break like real chalk. Keep the wooden frame, the tray with chalk pieces, the classroom light falloff and the fine grain.
+- Writing: everything appears by being chalked on in order. Letters arrive one at a time with a little jitter; lines are drawn along their path with small skips. The chalk stick follows the tip whenever something is being written, and dust falls from it.
+- Type: Cabin Sketch for titles and the big takeaway, Kalam for equations, labels and notes. White chalk for content, yellow for the main idea and curves, pink for emphasis and key numbers, blue for side notes. Exponents and small marks use the dy offset on text parts.
+- Camera: one board, one continuous shot. The camera tracks along the slate to a fresh stretch for each new idea (CAM keys) and leans in gently on the key moment. No cuts.
+- Emphasis: pink rings around the key number or point, yellow underlines and brackets, chalk arrows that lead the eye along the board.
+- Numbers: re-chalked as they count (a fresh scrawl about 10 times a second), then ringed when they land.
+- Scene change: the felt eraser wipes a section back and forth, leaving a faint haze, and the next idea is written in the cleared space.
+- Diagrams: draw real charts to scale for the topic, with axes, labels and curves computed from the actual function.
+- Pace: something is always being written. Allow 0.4 to 1.2 seconds per line and hold the takeaway 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 headings at 90 px or more, chalked writing at 56 px or more, labels at 36 px or more, and key numbers at 72 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 ("Get 1% better every day") unless my content asks for it.
+
+SOUND
+- Bed: quiet room tone only, no music. A double knock on the board can open the lesson.
+- Chalk: every word gets its own scratch (grainy band-passed noise bursts with a tap where the stick lands), timed by character position across its write window. Lines get one long scratch; rings and underlines a little louder. Use the score helpers tap, scratch, write and pluck, built on k.hiss and k.voice.
+- Counter: a short scratch each time the shown number changes. Eraser: a felt swish for each pass, panned with the eraser.
+- Big moments: soft plucked notes, two for a landed number and a rising arpeggio for the takeaway. Keep it gentle; this is a lesson, not a trailer.
+- Full mix (no voiceover): room tone, chalk and eraser sounds, and soft plucks on the big moments. No music.
+- 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: Chalk Talk
+Family: Hand-Drawn
+Look: A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.
+How it explains: One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Chalk Talk" style (Hand-Drawn) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
+
+How to use the timing:
+- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- Build the timeline (TL) from these times. Each line of chalk starts being written as its first word is spoken and finishes by the end of that phrase; a short label can land on a single word. Write the key phrase on the board, not the whole transcript.
+- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
+- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
+- Replace the demo's story: TL, CAM, the counter curve (cntStep, cntVal, cntText), ITEMS, drawCounter(), WIPE and its timing, and scoreSound(). Keep and reuse the style's helpers (board(), tooth(), noise2, chalkLine, chalkText, layoutText, resample, quad, ellipse, wipeMask, the frame and tray, the chalk stick, the eraser, dust() and the compositor).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Cabin Sketch (700), Kalam (400 and 700).
+
+THE STYLE
+- Surface: one long slate (BW wide, 720 tall) baked once with mottled green, faint chalk ghosts of old lessons and old eraser smears. The tooth pattern is punched out of the chalk layer every frame so strokes break like real chalk. Keep the wooden frame, the tray with chalk pieces, the classroom light falloff and the fine grain.
+- Writing: everything appears by being chalked on in order. Letters arrive one at a time with a little jitter; lines are drawn along their path with small skips. The chalk stick follows the tip whenever something is being written, and dust falls from it.
+- Type: Cabin Sketch for titles and the big takeaway, Kalam for equations, labels and notes. White chalk for content, yellow for the main idea and curves, pink for emphasis and key numbers, blue for side notes. Exponents and small marks use the dy offset on text parts.
+- Camera: one board, one continuous shot. The camera tracks along the slate to a fresh stretch for each new idea (CAM keys) and leans in gently on the key moment. No cuts.
+- Emphasis: pink rings around the key number or point, yellow underlines and brackets, chalk arrows that lead the eye along the board.
+- Numbers: re-chalked as they count (a fresh scrawl about 10 times a second), then ringed when they land.
+- Scene change: the felt eraser wipes a section back and forth, leaving a faint haze, and the next idea is written in the cleared space.
+- Diagrams: draw real charts to scale for the topic, with axes, labels and curves computed from the actual function.
+- Pace: something is always being written. Allow 0.4 to 1.2 seconds per line and hold the takeaway 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 headings at 90 px or more, chalked writing at 56 px or more, labels at 36 px or more, and key numbers at 72 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 ("Get 1% better every day") unless my content asks for it.
+
+SOUND
+- Bed: quiet room tone only, no music. A double knock on the board can open the lesson.
+- Chalk: every word gets its own scratch (grainy band-passed noise bursts with a tap where the stick lands), timed by character position across its write window. Lines get one long scratch; rings and underlines a little louder. Use the score helpers tap, scratch, write and pluck, built on k.hiss and k.voice.
+- Counter: a short scratch each time the shown number changes. Eraser: a felt swish for each pass, panned with the eraser.
+- Big moments: soft plucked notes, two for a landed number and a rising arpeggio for the takeaway. Keep it gentle; this is a lesson, not a trailer.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chalk scratches and taps soft: true so they sit under the voice, keep the room tone very low, and keep plucks for the 2 or 3 biggest moments 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: Chalk Talk
+Family: Hand-Drawn
+Look: A teacher at a long green slate: grainy chalk strokes that skip over the board’s tooth, colored chalk for emphasis, dust falling from the stick as it writes, faint ghosts of old lessons, a wooden frame and a dusty chalk tray.
+How it explains: One continuous lesson along the board: a visible chalk stick writes every word and draws every line, the camera tracks to the next stretch of slate, numbers are re-chalked as they count, pink chalk rings the key moments, and a felt eraser wipes a section clean for the takeaway.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/chalk-talk.html` (47.1 KB)

package/plugins/motion-styles/prompts/chat-story.md

@@ -0,0 +1,143 @@
+# Motion graphics style #41: Chat Story
+
+- **ID:** `chat-story`
+- **Family:** Shorts Format
+- **Canvas:** `720x1280`
+- **Fonts:** Inter (500 to 800), JetBrains Mono (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for "me" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.
+
+## How It Explains
+Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.
+
+## Demo
+Who ate my leftover pizza? (a fictional chat)
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Chat Story" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- Replace the demo's story: TL, MSGS (who, text, time), the contact name and initial, the reaction, the tag text and scoreSound(). Keep and reuse the style's helpers (the invented app chrome (header, avatar, input bar), bubble layout with tails and wrapping, the typing indicator before each incoming message, the auto-scroll, timestamps, read receipt, the pop-in motion and the reaction).
+- 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 (500 to 800), JetBrains Mono (700).
+
+THE STYLE
+- This is an invented chat app, not a copy of a real one: our own header layout, teal (#1fb5a5) outgoing bubbles, white incoming bubbles with a soft shadow, a light grey-blue background (#e9edf2).
+- Always keep a small "FICTIONAL STORY" tag on screen, and never show real names, numbers or screenshots of real conversations.
+- Bubbles wrap at about 70% of the width, with a small tail corner, Inter 500 text and a pop-in (scale from 0.6 with a back ease).
+- Before every incoming message, the typing dots animate for 0.6 to 1.2 seconds. The thread scrolls up smoothly when it fills.
+- Pace: one message every 0.8 to 1.5 seconds; the punchline gets the longest pause.
+
+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 message text at 30 px or more, the contact name at 32 px or more and timestamps at 18 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("Who ate my leftover pizza? (a fictional chat)") unless my content asks for it.
+
+SOUND
+- Bed: none, or a very quiet pad; the message sounds are the music.
+- Map events to the kit: outgoing messages get "send"; incoming get "ping"; typing dots get soft keyboard clicks ("keys", soft); the reaction gets "pop" and a short comic sting (two falling notes).
+- Full mix (no voiceover): a soft send swoosh for "me", a receive ping for them, quiet typing clicks during the dots, and a comic sting on the punchline.
+- 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: Chat Story
+Family: Shorts Format
+Look: A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for "me" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.
+How it explains: Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Chat Story" style (Shorts Format) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
+
+How to use the timing:
+- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- Build the timeline (TL) from these times. Each bubble pops on the first word of its line, typing dots run during the pause before a reply, and the reaction lands on the laugh or the punchline.
+- 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, MSGS (who, text, time), the contact name and initial, the reaction, the tag text and scoreSound(). Keep and reuse the style's helpers (the invented app chrome (header, avatar, input bar), bubble layout with tails and wrapping, the typing indicator before each incoming message, the auto-scroll, timestamps, read receipt, the pop-in motion and the reaction).
+- 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 (500 to 800), JetBrains Mono (700).
+
+THE STYLE
+- This is an invented chat app, not a copy of a real one: our own header layout, teal (#1fb5a5) outgoing bubbles, white incoming bubbles with a soft shadow, a light grey-blue background (#e9edf2).
+- Always keep a small "FICTIONAL STORY" tag on screen, and never show real names, numbers or screenshots of real conversations.
+- Bubbles wrap at about 70% of the width, with a small tail corner, Inter 500 text and a pop-in (scale from 0.6 with a back ease).
+- Before every incoming message, the typing dots animate for 0.6 to 1.2 seconds. The thread scrolls up smoothly when it fills.
+- Pace: one message every 0.8 to 1.5 seconds; the punchline gets the longest pause.
+
+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 message text at 30 px or more, the contact name at 32 px or more and timestamps at 18 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("Who ate my leftover pizza? (a fictional chat)") unless my content asks for it.
+
+SOUND
+- Bed: none, or a very quiet pad; the message sounds are the music.
+- Map events to the kit: outgoing messages get "send"; incoming get "ping"; typing dots get soft keyboard clicks ("keys", soft); the reaction gets "pop" and a short comic sting (two falling notes).
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and typing 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: Chat Story
+Family: Shorts Format
+Look: A story told through an invented messaging app: a clean header with a gradient avatar and an online dot, teal bubbles for "me" and white bubbles for them, typing dots before every reply, timestamps, read receipts, and a fictional-story tag.
+How it explains: Messages pop in one by one, each reply preceded by a typing indicator for suspense, and the thread scrolls up as it fills. The punchline arrives after the longest pause, then a reaction emoji pops onto it.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/chat-story.html` (57.3 KB)

package/plugins/motion-styles/prompts/clay-diorama.md

@@ -0,0 +1,149 @@
+# Motion graphics style #08: Clay Diorama
+
+- **ID:** `clay-diorama`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Fredoka (500 to 700), JetBrains Mono (700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.
+
+## How It Explains
+The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.
+
+## Demo
+How a volcano erupts
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Clay Diorama" 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, BLOBS, the clay world in init3() (the base, the props and their colours), pose(t), the cards in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), M3/P3/put, proj3(), the round base and grass disc, the orbiting camera in pose(), tiltShift(), card(), pop/slam/wordLine/chip 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: Fredoka (500 to 700), JetBrains Mono (700).
+
+THE STYLE
+- Everything 3D is real Three.js geometry built once in init3() and posed from t in pose(t): no images, no models from the web. Every object is a simple rounded primitive (cylinders, cones, spheres, capsules) in matte clay colours with soft shadows.
+- The world sits on one round base with a grass or sand disc, like a tabletop miniature. Keep it in the middle third of the frame and keep the tilt-shift blur at the top and bottom on every frame.
+- Palette: warm peach background (#f5d5c0), clay browns, soft greens (#94c56a, #5aa65a), cream cards (#fffaf5), dark brown text (#5b3424) and one hot accent (#e2561e) for the key word. Invent colours for new props in the same matte, slightly desaturated range.
+- Type: Fredoka 600 to 700 on cream cards with 44 px corners and a soft brown shadow. One card per beat, popping in with a back ease. JetBrains Mono only for small chips and units.
+- Motion is toy-like: things pop up with overshoot, wobble with squash and stretch before a big moment, fly on real ballistic arcs and splat flat when they land. The camera orbits slowly the whole time and pulls back for the takeaway.
+- Numbers count up inside a chip or a gauge bar on a card. Draw every subject accurately for the topic (a real heart has four chambers, a real bridge has supports) while keeping the clay simplicity.
+- Pace: the hook card lands in under 1 second, one new thing every 0.5 to 1.5 seconds, the takeaway card holds about 2 seconds.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep card headlines at 54 px or more, card text at 30 px or more, mono labels at 22 px or more, and keep the diorama filling the middle third of the frame. 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 a volcano erupts") unless my content asks for it.
+
+SOUND
+- Bed: a bright, simple pad (padBed) with light hats, and a soft kick only during the action.
+- Map events to the kit: props popping up get SND.bloop with rising pitch; cards get SND.paper plus "pop"; building tension gets a brown-noise rumble that grows; the big moment gets "riser" into "boom" and "slam"; landings get SND.thud; counters "tick" only when the shown number changes; the takeaway gets an open major chord (SND.chord).
+- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and leave a short gap before the biggest moment.
+- 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: Clay Diorama
+Family: 3D
+Look: A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.
+How it explains: The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Clay Diorama" style (3D) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
+
+How to use the timing:
+- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- Build the timeline (TL) from these times. Each prop pops in as it is named, a card lands on the first word of its beat, a counter starts as its number is spoken and locks on its last syllable, and the big event (the eruption, the crash, the reveal) lands on its stressed word.
+- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
+- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged. Also keep the shared library helpers block (track, txt, chip, slam, rise, wordLine, hd, footage, composite, cam, punch, makeGL and the sound helpers) unchanged.
+- Keep the canvas at 720x1280 (9:16, for Shorts, Reels and TikTok).
+- Keep the Three.js r128 script tag and build every 3D object in code: no models or textures from the web.
+- Replace the demo's story: TL, BLOBS, the clay world in init3() (the base, the props and their colours), pose(t), the cards in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), M3/P3/put, proj3(), the round base and grass disc, the orbiting camera in pose(), tiltShift(), card(), pop/slam/wordLine/chip 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: Fredoka (500 to 700), JetBrains Mono (700).
+
+THE STYLE
+- Everything 3D is real Three.js geometry built once in init3() and posed from t in pose(t): no images, no models from the web. Every object is a simple rounded primitive (cylinders, cones, spheres, capsules) in matte clay colours with soft shadows.
+- The world sits on one round base with a grass or sand disc, like a tabletop miniature. Keep it in the middle third of the frame and keep the tilt-shift blur at the top and bottom on every frame.
+- Palette: warm peach background (#f5d5c0), clay browns, soft greens (#94c56a, #5aa65a), cream cards (#fffaf5), dark brown text (#5b3424) and one hot accent (#e2561e) for the key word. Invent colours for new props in the same matte, slightly desaturated range.
+- Type: Fredoka 600 to 700 on cream cards with 44 px corners and a soft brown shadow. One card per beat, popping in with a back ease. JetBrains Mono only for small chips and units.
+- Motion is toy-like: things pop up with overshoot, wobble with squash and stretch before a big moment, fly on real ballistic arcs and splat flat when they land. The camera orbits slowly the whole time and pulls back for the takeaway.
+- Numbers count up inside a chip or a gauge bar on a card. Draw every subject accurately for the topic (a real heart has four chambers, a real bridge has supports) while keeping the clay simplicity.
+- Pace: the hook card lands in under 1 second, one new thing every 0.5 to 1.5 seconds, the takeaway card holds about 2 seconds.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep card headlines at 54 px or more, card text at 30 px or more, mono labels at 22 px or more, and keep the diorama filling the middle third of the frame. 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 a volcano erupts") unless my content asks for it.
+
+SOUND
+- Bed: a bright, simple pad (padBed) with light hats, and a soft kick only during the action.
+- Map events to the kit: props popping up get SND.bloop with rising pitch; cards get SND.paper plus "pop"; building tension gets a brown-noise rumble that grows; the big moment gets "riser" into "boom" and "slam"; landings get SND.thud; counters "tick" only when the shown number changes; the takeaway gets an open major chord (SND.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 bloops, ticks and thuds soft: true, keep the boom for the single biggest moment, and never put a riser over a spoken sentence.
+- 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: Clay Diorama
+Family: 3D
+Look: A soft clay miniature world on a round base, built in Three.js: chunky rounded shapes, warm studio light, a slow orbiting camera and a tilt-shift blur, with cream Fredoka cards explaining each beat.
+How it explains: The diorama pops up piece by piece, then the camera orbits while the idea plays out on the little world (pressure builds, the volcano wobbles, lava bursts out and blobs splat across the grass). Each beat gets one rounded card with a big word, a gauge or a counter, and the camera pulls back for the takeaway.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/clay-diorama.html` (64.9 KB)

package/plugins/motion-styles/prompts/clean-tech.md

@@ -0,0 +1,147 @@
+# Motion graphics style #03: Clean Tech
+
+- **ID:** `clean-tech`
+- **Family:** Kinetic Type
+- **Canvas:** `1280x720`
+- **Fonts:** Inter Tight (500 to 800), JetBrains Mono (500 and 700)
+- **Three.js 3D:** No
+- **Footage Overlay:** No
+
+## Look
+A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.
+
+## How It Explains
+Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.
+
+## Demo
+How AI agents get work done
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Clean Tech" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+BUILD DIRECTLY
+Skip the storyboard and build the full animation now. Afterwards, list any facts or numbers you assumed.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
+- Replace the demo's story: TL, CUTS, BUMPS, the counter curve (stepCount), LOOP and ARCS, promptCard(), node(), the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, typed, softCard, checkMark, composite, padBed), background(), cam() and the vignette 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: Inter Tight (500 to 800), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Surface: cool off-white (#f5f6f8) with a slowly drifting dot grid, a faint blue glow top right and a faint green glow bottom left, and a light vignette. Keep background() and the vignette on every frame.
+- Type: Inter Tight 800 for statements, centered or left aligned, never all caps. Inter Tight 500 to 700 for card text. JetBrains Mono in caps with letter spacing for small labels (THE SHIFT, TASKS, STEPS TAKEN). Ink #0d0f14, muted grey for secondary text, electric blue #2f5bff as the only accent, green #18b46b only for done and checked.
+- How things appear: each word rises from behind a mask with an expo ease (rise, riseLine). Cards slide up and fade in, nodes pop in with a small overshoot, text in input cards is typed with a blinking caret.
+- Emphasis: a blue pill grows behind the one key word and the word turns white (pillBehind). Small blue glows on whatever is active. A green check pops in for anything finished.
+- Diagrams: build ideas from small UI pieces drawn in code: white rounded cards (softCard), mono labels, progress bars, a dashed path with a travelling dot, a counter. Use invented, generic names for any companies or products.
+- Camera: a gentle push-in over each scene and a small bump when a pill lands (cam with BUMPS).
+- Scene changes: clean horizontal pushes for a new idea and a zoom-through into a detail (composite with CUTS). No glitches or flashes.
+- Pace: the hook lands in under 2 seconds, one new element every 0.3 to 1 second, and the takeaway holds 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 statements at 78 px or more, card text at 26 px or more, mono labels at 18 px or more, and key numbers at 120 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("How AI agents get work done") unless my content asks for it.
+
+SOUND
+- Bed: a soft synth pad (padBed) with light hats and a gentle kick under the body, dropping out for the hook and the ending.
+- Map events to the kit: rising words get a tiny glassy tick (rise1); blue pills get a clean swipe with a bell note; cards and nodes get "pop"; typing gets "keys" and sending gets "send"; scene pushes get "whoosh"; a zoom-through gets a short "riser" then a whoosh; finished tasks and checks get a two-note chime; counters "tick" only when the shown number changes.
+- Full mix (no voiceover): keep the soft pad with light hats, at most about 3 sounds at once, and a short gap before the takeaway pill.
+- 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: Clean Tech
+Family: Kinetic Type
+Look: A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.
+How it explains: Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Clean Tech" style (Kinetic Type) from the Motion Graphics Style Library. Below is a complete, working reference animation in this style: its core helpers (CM), a synthesized sound kit (SFX), the style's scenes, its sound score and the player page. Treat that file as the ground truth for how this style looks, moves and sounds, and rebuild it around my content.
+
+MY CONTENT
+[No topic yet. Ask me for my topic or script before building anything.]
+
+VOICEOVER TIMING
+[No timing pasted yet. Before building, ask me for a word-level SRT or word timestamps of my voiceover. If I only have the audio file, offer to transcribe it into word timings.]
+
+How to use the timing:
+- Turn it into a list of words with start and end times in seconds. If the timing is per line only, spread each line's words across its span in proportion to their length.
+- Set the duration to the last word's end plus about 1.2 seconds.
+- Build the timeline (TL) from these times. Each word rises at the start of its spoken word, within 0.03 s, and the blue pill lands on the stressed word. Show 2 to 6 key words per sentence, not a full transcript.
+- Cut between scenes only at idea boundaries (a new step, a new claim, a reveal), never mid-word, and finish each cut just before the next idea's first spoken word.
+- Put the emphasis moves on stressed words. A counter lands at the exact moment its number is spoken.
+- Keep the player's "Load voiceover" button working so I can drop in my audio and hear it in sync.
+
+STORYBOARD FIRST
+Before building, show me a storyboard and wait for my OK:
+- One HTML page (an artifact if you can) with a grid of 6 to 10 panels, one per beat. Draw each panel on a canvas with the reference's own helpers, scene drawing and finishing pass, so the stills already look like the finished piece. No animation or sound yet.
+- Under each panel: the beat number, its start and end time, the exact on-screen words, the camera move or emphasis, how it gets there from the previous beat (the same scene continuing, or a cut and which kind), and its key sounds.
+- Below the grid, list any facts or numbers you had to assume.
+When I approve it (or after my changes), build the full animation and reuse the storyboard's drawing code.
+
+WHAT TO BUILD
+One self-contained HTML file (an artifact if you can), built on the reference file below:
+- Keep the page, the player (play/pause, scrub, time, sound toggle, loop, Load voiceover) and the CM and SFX blocks unchanged.
+- Replace the demo's story: TL, CUTS, BUMPS, the counter curve (stepCount), LOOP and ARCS, promptCard(), node(), the scene functions, SCENES and scoreSound(). Keep and reuse the style's helpers (the ui-kit helpers (rr, track, rise, riseLine, pillBehind, typed, softCard, checkMark, composite, padBed), background(), cam() and the vignette 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: Inter Tight (500 to 800), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Surface: cool off-white (#f5f6f8) with a slowly drifting dot grid, a faint blue glow top right and a faint green glow bottom left, and a light vignette. Keep background() and the vignette on every frame.
+- Type: Inter Tight 800 for statements, centered or left aligned, never all caps. Inter Tight 500 to 700 for card text. JetBrains Mono in caps with letter spacing for small labels (THE SHIFT, TASKS, STEPS TAKEN). Ink #0d0f14, muted grey for secondary text, electric blue #2f5bff as the only accent, green #18b46b only for done and checked.
+- How things appear: each word rises from behind a mask with an expo ease (rise, riseLine). Cards slide up and fade in, nodes pop in with a small overshoot, text in input cards is typed with a blinking caret.
+- Emphasis: a blue pill grows behind the one key word and the word turns white (pillBehind). Small blue glows on whatever is active. A green check pops in for anything finished.
+- Diagrams: build ideas from small UI pieces drawn in code: white rounded cards (softCard), mono labels, progress bars, a dashed path with a travelling dot, a counter. Use invented, generic names for any companies or products.
+- Camera: a gentle push-in over each scene and a small bump when a pill lands (cam with BUMPS).
+- Scene changes: clean horizontal pushes for a new idea and a zoom-through into a detail (composite with CUTS). No glitches or flashes.
+- Pace: the hook lands in under 2 seconds, one new element every 0.3 to 1 second, and the takeaway holds 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 statements at 78 px or more, card text at 26 px or more, mono labels at 18 px or more, and key numbers at 120 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("How AI agents get work done") unless my content asks for it.
+
+SOUND
+- Bed: a soft synth pad (padBed) with light hats and a gentle kick under the body, dropping out for the hook and the ending.
+- Map events to the kit: rising words get a tiny glassy tick (rise1); blue pills get a clean swipe with a bell note; cards and nodes get "pop"; typing gets "keys" and sending gets "send"; scene pushes get "whoosh"; a zoom-through gets a short "riser" then a whoosh; finished tasks and checks get a two-note chime; counters "tick" only when the shown number changes.
+- 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 word ticks, pops and row ticks soft: true, keep swipes for the 2 or 3 key pills, and never put a riser over a spoken sentence.
+- 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: Clean Tech
+Family: Kinetic Type
+Look: A calm, bright product-explainer look: cool off-white with a drifting dot grid, crisp Inter Tight words that rise into place, white UI cards with soft shadows, one electric blue accent, mono labels and a green check for anything finished.
+How it explains: Short statements rise word by word and the key word gets a blue pill. Ideas become small working diagrams: a prompt card that types and sends, nodes that pop in, a dot that travels a loop, task rows that tick off, a counter that climbs, a document that fills in. Clean push and zoom-through cuts move between ideas.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/clean-tech.html` (46.1 KB)