@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/motion-styles/prompts/exploded-view.md

@@ -0,0 +1,149 @@
+# Motion graphics style #11: Exploded View
+
+- **ID:** `exploded-view`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (500 and 700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.
+
+## How It Explains
+The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.
+
+## Demo
+What's inside a phone
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Exploded View" 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, PARTS (names, sizes, colours, details), the build in init3(), the highlight beat, the labels in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the shadow-only floor, the slow turntable rotation, the lift-apart and snap-back motion in pose(), the right-hand label column with leader lines, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Build the object in Three.js from real proportions: boxes, cylinders and extrusions for each layer, small boxes for chips and parts, real materials (glass is transparent, metal is metallic). Never copy a real brand or logo; invent nothing that pretends to be a real model.
+- The studio: light grey background (#e7eaee), a shadow-only floor, soft key light from the upper right. The object turns slowly the whole time.
+- Parts lift straight up (or along their assembly axis) one at a time with an ease-out, leaving even gaps, then later snap back in reverse order.
+- Labels: a right-hand column of numbered labels (blue number, dark name in JetBrains Mono) joined to each part by a 2 px leader line that draws itself.
+- Type: Space Grotesk 700 headline top left in near-black (#14171f) with the second line in blue (#2f6bff).
+- Highlight: one part glows (emissive pulse) with a big chip explaining why it matters.
+- Pace: closed object for 1.5 to 2 seconds, one part every 0.4 to 0.6 seconds, hold the highlight 2 to 3 seconds.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep headlines at 60 px or more, part names at 24 px or more and part numbers 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 ("What's inside a phone") unless my content asks for it.
+
+SOUND
+- Bed: a clean, light pad (padBed) with soft hats.
+- Map events to the kit: each part lifting gets a short servo whir (a filtered sawtooth sweep) and a "click" when it stops; labels get a soft tick; the highlight gets a hum swell and a chime; the snap-back gets a reversed whir and a thud; the takeaway gets an open chord.
+- Full mix (no voiceover): keep the clean pad, at most about 3 sounds at once, and a short gap before the snap-back.
+- 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: Exploded View
+Family: 3D
+Look: A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.
+How it explains: The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Exploded View" 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 part lifts away as it is named, its label draws on the same word, the highlight glows on the stressed word, and the snap-back lands on the first word of the takeaway.
+- 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, PARTS (names, sizes, colours, details), the build in init3(), the highlight beat, the labels in overlay() and scoreSound(). Keep and reuse the style's helpers (makeGL(), lights3(), the shadow-only floor, the slow turntable rotation, the lift-apart and snap-back motion in pose(), the right-hand label column with leader lines, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (500 and 700).
+
+THE STYLE
+- Build the object in Three.js from real proportions: boxes, cylinders and extrusions for each layer, small boxes for chips and parts, real materials (glass is transparent, metal is metallic). Never copy a real brand or logo; invent nothing that pretends to be a real model.
+- The studio: light grey background (#e7eaee), a shadow-only floor, soft key light from the upper right. The object turns slowly the whole time.
+- Parts lift straight up (or along their assembly axis) one at a time with an ease-out, leaving even gaps, then later snap back in reverse order.
+- Labels: a right-hand column of numbered labels (blue number, dark name in JetBrains Mono) joined to each part by a 2 px leader line that draws itself.
+- Type: Space Grotesk 700 headline top left in near-black (#14171f) with the second line in blue (#2f6bff).
+- Highlight: one part glows (emissive pulse) with a big chip explaining why it matters.
+- Pace: closed object for 1.5 to 2 seconds, one part every 0.4 to 0.6 seconds, hold the highlight 2 to 3 seconds.
+
+RULES THAT KEEP IT IN STYLE
+- Change the story, the words and the props; do not change the medium. Draw every subject accurately for my topic and double-check any facts and numbers you show.
+- Every frame is a pure function of t. Use CM.rng(seed) and CM.noise1(seed) for all randomness, never Math.random. Caching static layers is fine.
+- It will be watched on phones: at 720x1280 keep headlines at 60 px or more, part names at 24 px or more and part numbers 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 ("What's inside a phone") unless my content asks for it.
+
+SOUND
+- Bed: a clean, light pad (padBed) with soft hats.
+- Map events to the kit: each part lifting gets a short servo whir (a filtered sawtooth sweep) and a "click" when it stops; labels get a soft tick; the highlight gets a hum swell and a chime; the snap-back gets a reversed whir and a thud; the takeaway gets an open chord.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark servo whirs and ticks soft: true and keep the thud for the snap-back 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: Exploded View
+Family: 3D
+Look: A clean studio teardown in Three.js: an object turns slowly on a light grey floor and floats apart into its layers, each part tagged with a numbered mono label on a thin leader line.
+How it explains: The closed object turns once, then its parts lift away one at a time with a mechanical click, labels drawing out to a neat column on the right. One part glows while the camera holds on it, then everything snaps back together for the takeaway.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/exploded-view.html` (58.2 KB)

package/plugins/motion-styles/prompts/glass-icons.md

@@ -0,0 +1,147 @@
+# Motion graphics style #15: Glass Icons
+
+- **ID:** `glass-icons`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Inter (500 to 900), JetBrains Mono (700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.
+
+## How It Explains
+The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.
+
+## Demo
+5 AI tools that save hours (tool types, not brands)
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Glass Icons" 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, ICONS (colours, symbols, names, one-liners), the focus order, the headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the rounded-square extruded icon geometry with clearcoat glass, the coloured point lights, the float/focus/line-up motion in pose(), the frosted info card, the gradient background, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Inter (500 to 900), JetBrains Mono (700).
+
+THE STYLE
+- Icons are real 3D: rounded squares extruded with a bevel, MeshPhysicalMaterial with clearcoat and slight transparency, each a different soft colour, with a simple white 3D symbol on the face. Never use a real app logo or brand; describe tool types.
+- Background: a soft three-colour gradient (mint #c7f0e4, sky #c8dcff, peach #ffd9c7) painted in 2D behind a transparent WebGL canvas, lit by two coloured point lights for glassy highlights.
+- One icon is in focus at a time: it swings to the centre, grows and faces the camera; the rest float smaller and dimmer behind it.
+- Info card: frosted white (rgba white 0.7, white border) under the focused icon with a mono number, an Inter 800 name and one plain benefit line.
+- Type: Inter 900 headline in near-black (#0f1a2a), second line blue (#2d5bff); JetBrains Mono for numbers and tags.
+- Pace: icons arrive in the first 1.5 seconds, then one focus every 2 seconds, and the line-up 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 the headline at 64 px or more, the card title at 48 px or more and card text at 28 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 ("5 AI tools that save hours (tool types, not brands)") unless my content asks for it.
+
+SOUND
+- Bed: a bright, airy pad with light hats.
+- Map events to the kit: icons arriving get soft glassy pings; each focus gets a soft "whoosh" and a two-note glass chime (SND.chime) that climbs; card text gets a soft tick; the line-up gets a rising arpeggio and "shimmer".
+- Full mix (no voiceover): keep the bright pad, at most about 3 sounds at once, and a clean glass chime on each focus.
+- 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: Glass Icons
+Family: 3D
+Look: Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.
+How it explains: The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Glass Icons" 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. An icon swings forward on the first word of its item, its name lands on that word, and the line-up lands on the first word of the takeaway.
+- 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, ICONS (colours, symbols, names, one-liners), the focus order, the headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the rounded-square extruded icon geometry with clearcoat glass, the coloured point lights, the float/focus/line-up motion in pose(), the frosted info card, the gradient background, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Inter (500 to 900), JetBrains Mono (700).
+
+THE STYLE
+- Icons are real 3D: rounded squares extruded with a bevel, MeshPhysicalMaterial with clearcoat and slight transparency, each a different soft colour, with a simple white 3D symbol on the face. Never use a real app logo or brand; describe tool types.
+- Background: a soft three-colour gradient (mint #c7f0e4, sky #c8dcff, peach #ffd9c7) painted in 2D behind a transparent WebGL canvas, lit by two coloured point lights for glassy highlights.
+- One icon is in focus at a time: it swings to the centre, grows and faces the camera; the rest float smaller and dimmer behind it.
+- Info card: frosted white (rgba white 0.7, white border) under the focused icon with a mono number, an Inter 800 name and one plain benefit line.
+- Type: Inter 900 headline in near-black (#0f1a2a), second line blue (#2d5bff); JetBrains Mono for numbers and tags.
+- Pace: icons arrive in the first 1.5 seconds, then one focus every 2 seconds, and the line-up 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 the headline at 64 px or more, the card title at 48 px or more and card text at 28 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 ("5 AI tools that save hours (tool types, not brands)") unless my content asks for it.
+
+SOUND
+- Bed: a bright, airy pad with light hats.
+- Map events to the kit: icons arriving get soft glassy pings; each focus gets a soft "whoosh" and a two-note glass chime (SND.chime) that climbs; card text gets a soft tick; the line-up gets a rising arpeggio and "shimmer".
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark chimes and ticks soft: true and keep the whoosh quiet.
+- 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: Glass Icons
+Family: 3D
+Look: Glossy translucent 3D app icons in Three.js, floating on a soft mint, sky and peach gradient, each with a white symbol on its face, frosted labels and a crisp black headline.
+How it explains: The icons float in from depth into a loose stack, then one at a time an icon swings forward to the centre, turns to face you and gets a frosted card with its number, name and one-line benefit while the others dim back. The takeaway lines them all up in a row.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/glass-icons.html` (58.3 KB)

package/plugins/motion-styles/prompts/glitch-pack.md

@@ -0,0 +1,145 @@
+# Motion graphics style #55: Glitch Pack
+
+- **ID:** `glitch-pack`
+- **Family:** Edit Overlay
+- **Canvas:** `720x1280`
+- **Fonts:** Anton, JetBrains Mono (700)
+- **Three.js 3D:** No
+- **Footage Overlay:** Yes
+
+## Look
+A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a "SYSTEM REBOOT" terminal tag and glitch transitions that tear your footage apart and put it back together.
+
+## How It Explains
+The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.
+
+## Demo
+A tech-channel intro and transitions ("NEW UPDATE")
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Glitch Pack" 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, the title words, HITS (glitch accents over the footage), the tags and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the RGB split title, slice displacement from the canvas itself, block noise, scanlines and vignette, the glitch transition (tear in, tear out), the intensity curve glitchAt(t) and the mono tags).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (700).
+
+THE STYLE
+- Glitch is a seasoning: intense for the intro, transitions and 2 to 4 accent words, otherwise your footage plays clean.
+- RGB split: draw the title three times (red #ff0040, cyan #00ffd5 with lighter blending, then white) with offsets that follow glitchAt(t).
+- Slices: copy horizontal bands of the canvas onto itself shifted left or right; block noise: small red, cyan and white rectangles.
+- Scanlines every 3 px and a dark vignette on top; a small mono tag ("> SYSTEM REBOOT", "v2.0") in a corner.
+- Respect photosensitivity: no full-frame white flashes faster than 3 a second.
+
+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 at 140 px or more, accent words at 90 px or more and tags at 22 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A tech-channel intro and transitions ("NEW UPDATE")") unless my content asks for it.
+
+SOUND
+- No music bed needed; the glitches are the sound.
+- Map events to the kit: glitch moments get "glitch" plus bit-crushed square zaps; the title resolve gets "slam" and a low sub drop (a falling sine); transitions get "whoosh" with a "glitch"; tags get small beeps.
+- Full mix (no voiceover): digital stutters, bit-crushed zaps and a low sub drop on the title and transitions.
+- 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: Glitch Pack
+Family: Edit Overlay
+Look: A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a "SYSTEM REBOOT" terminal tag and glitch transitions that tear your footage apart and put it back together.
+How it explains: The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Glitch Pack" 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 resolves on the first word, transitions hit on cuts, and each accent glitch lands on its stressed word for 0.2 to 0.4 seconds.
+- 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, the title words, HITS (glitch accents over the footage), the tags and scoreSound(); load your clip with Load footage. Keep and reuse the style's helpers (footage(), the RGB split title, slice displacement from the canvas itself, block noise, scanlines and vignette, the glitch transition (tear in, tear out), the intensity curve glitchAt(t) and the mono tags).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Anton, JetBrains Mono (700).
+
+THE STYLE
+- Glitch is a seasoning: intense for the intro, transitions and 2 to 4 accent words, otherwise your footage plays clean.
+- RGB split: draw the title three times (red #ff0040, cyan #00ffd5 with lighter blending, then white) with offsets that follow glitchAt(t).
+- Slices: copy horizontal bands of the canvas onto itself shifted left or right; block noise: small red, cyan and white rectangles.
+- Scanlines every 3 px and a dark vignette on top; a small mono tag ("> SYSTEM REBOOT", "v2.0") in a corner.
+- Respect photosensitivity: no full-frame white flashes faster than 3 a second.
+
+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 at 140 px or more, accent words at 90 px or more and tags at 22 px or more. Fill the frame.
+- Keep each frame fast, well under 50 ms.
+- Give my topic its own demo content; do not reuse the reference's story ("A tech-channel intro and transitions ("NEW UPDATE")") unless my content asks for it.
+
+SOUND
+- No music bed needed; the glitches are the sound.
+- Map events to the kit: glitch moments get "glitch" plus bit-crushed square zaps; the title resolve gets "slam" and a low sub drop (a falling sine); transitions get "whoosh" with a "glitch"; tags get small beeps.
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Keep glitch sounds short and 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: Glitch Pack
+Family: Edit Overlay
+Look: A digital-glitch toolkit: RGB-split titles in Anton, horizontal slice displacement, block noise in red and cyan, scanlines, a "SYSTEM REBOOT" terminal tag and glitch transitions that tear your footage apart and put it back together.
+How it explains: The intro title glitches on (RGB split, slices, noise) and resolves crisp, then a glitch transition tears into your clip. Short glitch hits punctuate key words over the footage, and an outro glitch closes it with a version tag.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/glitch-pack.html` (55.5 KB)

package/plugins/motion-styles/prompts/globe-arcs.md

@@ -0,0 +1,147 @@
+# Motion graphics style #17: Globe Arcs
+
+- **ID:** `globe-arcs`
+- **Family:** 3D
+- **Canvas:** `720x1280`
+- **Fonts:** Space Grotesk (500 and 700), JetBrains Mono (700)
+- **Three.js 3D:** Yes
+- **Footage Overlay:** No
+
+## Look
+A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.
+
+## How It Explains
+The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.
+
+## Demo
+Where your coffee travels
+
+---
+
+## Ready-to-Copy Prompt (Standard)
+
+```markdown
+I want an animated video in the "Globe Arcs" 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, the land mask in landAt(), ROUTES (lat/lon pairs and names), the travelling dot, labels, counter, headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dotted globe built from landAt(), ll() lat/lon placement, arcs as growing tubes (setDrawRange) on great-circle curves, pins with glow, the atmosphere pass, the starfield, proj3() labels, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).
+
+THE STYLE
+- The globe is a dark sphere plus thousands of small cyan points placed where land is. For a real-world topic, make landAt(lat, lon) follow real continents (simple polygons or a coarse mask is fine) so routes start and end in the right places.
+- Routes are amber (#ffb547) tubes on great-circle arcs that lift off the surface (higher for longer routes) and grow with setDrawRange. Pins are small glowing spheres.
+- Space: near-black navy (#040913), a fixed starfield, and a soft blue atmosphere ring painted in 2D behind the labels.
+- Type: Space Grotesk 700 headline in white with the second line amber; JetBrains Mono for place chips (amber fill, dark text) and distances.
+- Use real places, real distances (say "about") and real times.
+- Pace: the globe turns into position in about 1.5 seconds, then one route every 1.5 to 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 the headline at 60 px or more, place labels at 22 px or more and the counter at 60 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 ("Where your coffee travels") unless my content asks for it.
+
+SOUND
+- Bed: an airy, slow pad with a soft low drone.
+- Map events to the kit: pins get a soft sonar ping (a sine with long verb); each arc gets a rising airy "whoosh"; the travelling dot gets a faint tick trail; the counter "tick"s when the shown number changes; the takeaway gets "shimmer".
+- Full mix (no voiceover): keep the airy pad, at most about 3 sounds at once, sonar pings for pins.
+- 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: Globe Arcs
+Family: 3D
+Look: A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.
+How it explains: The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.
+
+```
+
+---
+
+## Voiceover & Storyboard Prompt
+
+```markdown
+I want an animated video in the "Globe Arcs" 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. A route starts drawing as its start is named and lands on its destination word, its pin glows on the same word, and the counter locks on the last spoken syllable of the distance.
+- 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, the land mask in landAt(), ROUTES (lat/lon pairs and names), the travelling dot, labels, counter, headline and takeaway text and scoreSound(). Keep and reuse the style's helpers (makeGL(), the dotted globe built from landAt(), ll() lat/lon placement, arcs as growing tubes (setDrawRange) on great-circle curves, pins with glow, the atmosphere pass, the starfield, proj3() labels, chip() and wordLine()).
+- Aim for 15 to 40 seconds unless my content needs more, and set the duration in TL.D.
+- Keep window.seek(t), window.DURATION, window.scoreSound and window.SFX exposed, so the video can be rendered frame by frame.
+- Load the style's fonts before the first draw, as the reference does: Space Grotesk (500 and 700), JetBrains Mono (700).
+
+THE STYLE
+- The globe is a dark sphere plus thousands of small cyan points placed where land is. For a real-world topic, make landAt(lat, lon) follow real continents (simple polygons or a coarse mask is fine) so routes start and end in the right places.
+- Routes are amber (#ffb547) tubes on great-circle arcs that lift off the surface (higher for longer routes) and grow with setDrawRange. Pins are small glowing spheres.
+- Space: near-black navy (#040913), a fixed starfield, and a soft blue atmosphere ring painted in 2D behind the labels.
+- Type: Space Grotesk 700 headline in white with the second line amber; JetBrains Mono for place chips (amber fill, dark text) and distances.
+- Use real places, real distances (say "about") and real times.
+- Pace: the globe turns into position in about 1.5 seconds, then one route every 1.5 to 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 the headline at 60 px or more, place labels at 22 px or more and the counter at 60 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 ("Where your coffee travels") unless my content asks for it.
+
+SOUND
+- Bed: an airy, slow pad with a soft low drone.
+- Map events to the kit: pins get a soft sonar ping (a sine with long verb); each arc gets a rising airy "whoosh"; the travelling dot gets a faint tick trail; the counter "tick"s when the shown number changes; the takeaway gets "shimmer".
+- Voiceover mix: the player calls SFX.live with { voiceover: true } once narration is loaded. Mark pings and ticks soft: true and keep whooshes low.
+- Sync is everything: the sound score reads the same TL times as the picture.
+
+IF YOU CAN RUN CODE
+Render an MP4: open the file in headless Chrome, call window.seek(i / 30) for every frame, capture the canvas and pipe the frames into ffmpeg. Render the effects with SFX.render(window.scoreSound, window.DURATION, 48000, { voiceover: false }), which returns interleaved stereo floats, and mux them in. With a voiceover, render the effects with { voiceover: true } and mix them under my audio file.
+
+STYLE CARD
+Name: Globe Arcs
+Family: 3D
+Look: A dark navy globe made of glowing cyan dots in Three.js, turning slowly in a starfield, with warm amber route arcs that draw themselves between pins and a soft blue atmosphere glow.
+How it explains: The globe turns into view, a pin drops at the start, then each route arcs up off the surface and lands on its destination while a small dot travels along it. Labels pop at the ends and a counter adds up the distance before the takeaway.
+
+```
+
+---
+
+## Reference Source Code Location
+File: `plugins/motion-styles/sources/globe-arcs.html` (60.2 KB)