@docyrus/animaguru 0.24.0 → 0.25.0

package/NOTICE.md

@@ -1551,6 +1551,30 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+mg-styles-15
+MIT License
+
+Copyright (c) 2026 Vincentwei1021
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
 ## Art Motion references
 
 English adaptations of Huashu Art Motion (https://github.com/alchaincyf/huashu-art-motion). Source revision and coverage are in skills/animaguru-art-motion/references/coverage.json.

package/README.md

@@ -45,9 +45,11 @@ CLI 0.23.0 adds eight evidence styles, in which real data, imagery or scans carr
 
 CLI 0.24.0 adds eight documentary & broadcast styles, cut from real archive footage, documents and data: Caption News, 1920s Newsreel, Live Countdown Split-screen, Time-lapse Symphony, Visual Investigation, Constructivist Montage, Sports Telestrator and Broadcast News Package. Their skills carry the same real-evidence and sourcing discipline as the evidence styles, with licence-clean archive and footage sources per style. Each has a runnable study (`npm run example -- caption-news`).
 
+CLI 0.25.0 adds seven contemporary motion-design styles: Aurora & Glass, Liquid Motion, Bauhaus Geometry, Synthwave & Y2K, Sticker Explainer, Variety Captions and One-Line Art. Their signature techniques follow the MIT-licensed [mg-styles-15](https://github.com/Vincentwei1021/mg-styles-15) collection; the skills, studies and preview art are original. Each has a runnable study (`npm run example -- aurora-glass`).
+
 CLI 0.16.2 also installs `animaguru-art-motion` for Codex and Claude Code: one skill with 36 English art-treatment references and nine explainer motion grammars, plus AnimaGuru generation, timing, camera and review guidance. Request it explicitly for a custom film treatment; its references are separate from the gallery presets. Source coverage and the upstream MIT notice are included in the skill.
 
-CLI 0.5.2 includes a complete local PixiJS video workspace, now with 48 visual styles:
+CLI 0.5.2 includes a complete local PixiJS video workspace, now with 55 visual styles:
 
 ```sh
 animaguru templates
@@ -63,7 +65,7 @@ Open the generated folder in **Codex or Claude Code**, then describe the video y
 - Agent instructions that first ask **Explainer, Advertisement or General Video**, then offer the available visual styles and [the preview gallery](https://animaguru.com/animation-styles), then gather a short creative brief. Each choice is saved before continuing.
 - `film.config.json`, editable TypeScript scenes, localized copy, local asset/production folders, portable HTML5 ZIP export for iframe embedding, and `npm run export:mp4` with exact frame capture and output verification.
 
-New projects leave category and template unset in `animaguru.project.json`. `animaguru.templates.json` lists categories, styles and their installed skills. The 48 visual styles cover cutout, type, vector, technical, evidence, documentary, character, print, paper, material and cinematic treatments. Every style skill ships with the project, including its relevant visual interview and review criteria. Categories describe purpose and templates describe appearance and motion. The brief establishes audience, tone, message, story, duration and any CTA.
+New projects leave category and template unset in `animaguru.project.json`. `animaguru.templates.json` lists categories, styles and their installed skills. The 55 visual styles cover cutout, type, vector, technical, evidence, documentary, character, print, paper, material and cinematic treatments. Every style skill ships with the project, including its relevant visual interview and review criteria. Categories describe purpose and templates describe appearance and motion. The brief establishes audience, tone, message, story, duration and any CTA.
 
 CLI 0.23.0 also adds **Machine Anatomy** (`machine-anatomy`): an idea explained as a working isometric machine of many small shaded parts in a framed figure card with a live readout. Adapted from the MIT-licensed [Anatomy](https://github.com/wheresryan22/anatomy) skill, it bundles that skill's geometry kit in `src/kit/anatomy/` with a PixiJS adapter, and `npm run example -- machine-anatomy` installs its original study.
 

package/dist/animaguru.js

@@ -19761,7 +19761,7 @@ var require_ignore2 = __commonJS({
 // cli/package.json
 var package_default = {
   name: "@docyrus/animaguru",
-  version: "0.24.0",
+  version: "0.25.0",
   description: "Agent-friendly AnimaGuru CLI built with CrustJS",
   type: "module",
   bin: {
@@ -46153,6 +46153,125 @@ var animation_styles_default = {
       previewCaption: "The sting slams in and flies to the corner bug, a rundown's rows flip and tick off one by one, and a split-flap board turns an old value into the new. Illustrative bulletin, procedural graphics throughout.",
       family: "documentary",
       example: true
+    },
+    "aurora-glass": {
+      name: "Aurora & Glass",
+      description: "Slow drifting fields of blurred colour under frosted glass cards with hairline highlights, where everything breathes and nothing hurries.",
+      materials: [
+        "Blurred aurora colour fields",
+        "Frosted glass cards",
+        "Hairline light edges"
+      ],
+      motion: [
+        "Slow colour-field drift",
+        "Cards surfacing through blur",
+        "Light sliding along glass edges"
+      ],
+      previewCaption: "Frosted cards surface over drifting aurora light, a clear glass lens glides across the question and magnifies it, then settles into the title capsule as the cards fall back out of focus. An invented product, rendered entirely in code.",
+      family: "graphic",
+      example: true
+    },
+    "liquid-motion": {
+      name: "Liquid Motion",
+      description: "Glossy liquid that pours, stretches into thin necks, snaps and fuses, with wave-front wipes and droplets that land a beat behind.",
+      materials: [
+        "Glossy candy liquid",
+        "Metaball merges",
+        "Droplets and splashes"
+      ],
+      motion: [
+        "Wave-front liquid wipes",
+        "Neck stretch, snap and rebound",
+        "One drop pouring into a mark"
+      ],
+      previewCaption: "Drops splash into a tangerine pool, blobs tear free on thinning necks and fuse into one swirling drop, two paint waves flood across behind it, and the drop pours into a glossy wordmark before a drip snaps off its p.",
+      family: "material",
+      example: true
+    },
+    "bauhaus-geometry": {
+      name: "Bauhaus Geometry",
+      description: "Circles, triangles and bars in primary colours move only along a strict grid, one exact action per beat, like a poster that keeps rebuilding itself.",
+      materials: [
+        "Primary-colour geometry",
+        "Strict modular grid",
+        "Printed poster type"
+      ],
+      motion: [
+        "Grid-locked moves on the beat",
+        "Pivots on centres, corners and the frame",
+        "Mechanical, overshoot-free easing"
+      ],
+      previewCaption: "A grid draws itself and shapes land on its lines one beat at a time, the whole poster turns about its centre, quarter turns ripple through a row of tiles, and the type locks in before the camera pulls back to the printed sheet. Drawn entirely in code.",
+      family: "graphic",
+      example: true
+    },
+    "synthwave-y2k": {
+      name: "Synthwave & Y2K",
+      description: "A neon perspective grid under a slatted sunset, chrome lettering with a lens flare and pop-up desktop windows, all played back through a flickering VHS deck.",
+      materials: [
+        "Neon grid and slatted sun",
+        "Bevelled chrome lettering",
+        "VHS scanlines and colour bleed"
+      ],
+      motion: [
+        "Endless grid run to the horizon",
+        "Chrome title slam with flare and glint",
+        "Pop-ups, cursor drags and tape glitches"
+      ],
+      previewCaption: "The VCR's blue screen rolls into a neon grid racing at a slatted sun, a chrome title slams in with a flare and a tape stutter, a neon script strikes on, and a pop-up is dragged aside and clicked before the windows switch off like a tube. Drawn entirely in code.",
+      family: "cinematic",
+      example: true
+    },
+    "sticker-explainer": {
+      name: "Sticker Explainer",
+      description: "Cut-out photos with thick white borders, flat icons and exact charts laid across one huge board, linked by long camera moves while every line of narration adds a new piece.",
+      materials: [
+        "White-bordered photo stickers",
+        "Flat icons and exact charts",
+        "Calm blue-grey board"
+      ],
+      motion: [
+        "Long eased pans and zooms",
+        "Stickers slapped onto the board",
+        "Counters and bars on every line"
+      ],
+      previewCaption: "Coffee stickers slap onto one blue-grey board as the camera travels from fact to fact, counters roll and bars grow with each narration line, and the board pulls back to the sum in the middle. Procedural stickers and rounded figures, not real photographs.",
+      family: "technical",
+      example: true
+    },
+    "variety-captions": {
+      name: "Variety Captions",
+      description: "TV variety-show captions: chunky rounded type in layered outlines pops onto the footage a beat after every gag, and every feeling gets its own reaction mark.",
+      materials: [
+        "Layered-outline rounded type",
+        "Burst frames, sweat drops and sparkles",
+        "Bright, clashing colour"
+      ],
+      motion: [
+        "Overshoot pops on the gag",
+        "Letter-by-letter bounces",
+        "Freeze-frame shock bursts"
+      ],
+      previewCaption: "A cat bats a mug to the edge as question marks bounce in, the freeze frame gets a NOT THE MUG!! burst, a sweat drop slides past a deadpan stare, and a stamp lands on zero regrets. Procedurally rendered stand-in footage, not a real clip.",
+      family: "graphic",
+      example: true
+    },
+    "one-line-art": {
+      name: "One-Line Art",
+      description: "A single thin line draws one figure, keeps going and becomes the next, carrying the whole film in one unbroken stroke across open space.",
+      materials: [
+        "One constant-width line",
+        "One or two colours",
+        "Generous negative space"
+      ],
+      motion: [
+        "Self-drawing stroke",
+        "Figures flowing into each other",
+        "Line turning into a filled mark"
+      ],
+      previewCaption: "One champagne line draws a sun on the horizon, three arches and a woman's profile without lifting, closes a ring that fills with gold from the point where it met, then pulls back to the wordmark. Invented brand, drawn entirely in code.",
+      family: "graphic",
+      example: true
     }
   },
   browseStyles: "Browse animation styles",
@@ -46294,7 +46413,14 @@ var VIDEO_STYLE_IDS = [
   "visual-investigation",
   "kino-montage",
   "telestrator",
-  "news-package"
+  "news-package",
+  "aurora-glass",
+  "liquid-motion",
+  "bauhaus-geometry",
+  "synthwave-y2k",
+  "sticker-explainer",
+  "variety-captions",
+  "one-line-art"
 ];
 var VIDEO_WORKFLOW_IDS = [
   "product-proof",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docyrus/animaguru",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Agent-friendly AnimaGuru CLI built with CrustJS",
   "type": "module",
   "bin": {

package/skills/animaguru-aurora-glass/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: animaguru-aurora-glass
+description: Build Aurora & Glass visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# Aurora & Glass
+
+Slow drifting fields of blurred colour under frosted glass cards with hairline highlights: the calm, translucent look of current product and AI launches, where everything breathes and nothing hurries. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#aurora-glass). Fold missing visual questions into the shared interview:
+
+- Which neighbouring hues fit the brand (violet, blue and teal; or orange, pink and red), on a dark or a light ground?
+- What do the cards hold (real product screens, a conversation, settings, a few numbers), and which single moment deserves the clear lens?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Filters or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text, interface states and numbers belong in authored canvas content.
+
+- Aurora ground: three to five large solid shapes blurred 80–150 px, each drifting on its own slow closed path (a 20–40 s loop) and breathing a few percent in size over a deep base. Keep to two or three neighbouring hues; complementary colours turn muddy where they blend. Add a few thin light threads or specks so the glass has detail to soften.
+- Glass cards: the backdrop blurred 20–40 px inside a large-radius rounded shape, a 5–10 % white fill, a one-pixel inner edge at about 30 % white, a faint top sheen and a soft lifted shadow. Stack two or three cards at different depths: nearer cards drift further and blur whatever lies behind them, farther cards included.
+- Light: one key light travels slowly; each glass edge brightens where its normal faces it, so light slides along the edges as cards and light move.
+- Hero lens, at most one per film: a clear liquid-glass shape that magnifies its centre, bends hard at a bevelled rim with a slight colour split, and carries a specular edge toward the light. Let it glide over the content, then settle into a capsule or button that holds the title.
+- Pace: sine or near-linear easing, no overshoot and no bounce. Text and interface content enter only with opacity and about 8 px of rise, staggered; state changes crossfade. Receding layers lose opacity and fall out of focus rather than flying away.
+- Add 3–5 % noise or dither over the frame against gradient banding, and judge banding in the exported file at its delivery bitrate.
+
+Use the [production recipe](references/recipe.md) for the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motions a function of absolute seconds; separate drawing cadence from camera/light cadence when the material calls for it. Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+Inspect banding in the colour fields, edge highlights that stay one pixel and follow the light, card text that stays legible over the brightest field, blur that visibly softens what sits behind each card, and that nothing moves fast. Check representative full-resolution frames, moving playback, desktop/mobile fit and cold seeks. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D/2.5D rendering method accurately. Physically rendered 3D remains deferred.

package/skills/animaguru-aurora-glass/references/recipe.md

@@ -0,0 +1,27 @@
+# Aurora & Glass production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `aurora-glass`. Its drawing commands are consumed by `src/studies/pixi-renderer.ts`; geometry and time sampling are shared with the gallery renderer. All copy lives in `shared/locales/en/style-studies.json`.
+
+In an untouched starter, run `npm run example -- aurora-glass`, then `npm run dev`. The command refuses to replace an authored film, retains starter backups in `production/example-backup/`, and writes an 8-second study with its own resource tracks. `npm run export:html` and `npm run export:mp4` use this installed film normally. To use the recipe inside an existing film, import `studyFrame()` and `StudyRenderer`, then compose the selected scene into the project's timeline instead of running the installer.
+
+## Assets and licences
+
+Draw the colour fields, glass and interface in code. When the cards should show real product screens, photographs or icons, use the user's own material or licence-clean sources (CC0, public domain, or a licence the user confirms), and record each in `production/CREDITS.md`. Use fonts the project may embed (OFL or licensed faces); a light, open sans suits the style. Never reproduce another company's interface or trademark unless the user owns it.
+
+## Adaptation decisions
+
+- Render the colour fields as large `Graphics` circles in one container behind a single `BlurFilter` (strength 80–150) at a reduced filter resolution, or as a small mesh-gradient fragment shader; the field holds no detail, so half resolution is invisible.
+- For each card, render the layers behind it into a `RenderTexture`, show the card's region of that texture through a `BlurFilter` (strength 20–40) masked by a rounded-rectangle `Graphics`, then add the white fill, the one-pixel inner stroke and a sheen gradient. Drive edge brightness from the angle between each edge's normal and the moving light, with a gradient stroke or a small shader.
+- Make the lens a small filter over the back texture: sample magnified toward its centre, displace along the rim normal with a slightly different offset per colour channel, and add the specular rim. Morph it into a capsule by animating its half sizes and corner radius together.
+- Overlay a fixed noise sprite or a noise filter at 3–5 % and export at a bitrate that keeps it, or banding returns in the MP4.
+
+The study is silent, original procedural art with an invented product; it demonstrates material, layout and motion rather than real product claims. Its stacked translucent ellipses and flat panes stand in for the blur and frosting described above. Configure an original subject, palette, scene sequence, duration and soundtrack from the brief.
+
+Use `src/studies/timing.ts` for deterministic easing, seeded variation, measured stroke truncation and cue helpers. `window.animaguru.texts` exposes visible study text bounds for `npm run review`; text declarations alone do not count as visual proof. Inspect the actual frames as well.
+
+## Sources and attribution
+
+Inspired by the following pinned references; source-specific 3D/media dependencies are not bundled. New study art and scene geometry are original. The workspace's `VIDEO-STYLE-NOTICES.txt` preserves the repository notices and clarifies third-party asset scope.
+
+- [prompts/12-aurora-glass.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/12-aurora-glass.md)
+- [demos/12-aurora-glass/main.js](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/demos/12-aurora-glass/main.js)

package/skills/animaguru-bauhaus-geometry/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-bauhaus-geometry
+description: Build Bauhaus Geometry visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# Bauhaus Geometry
+
+A kinetic poster in the Bauhaus and Swiss tradition: circles, triangles, quarter discs and bars in red, yellow, blue and black on cream paper move only along a strict modular grid, one exact action per beat, until the composition locks into a finished poster with its type. Order is the point: every move is a whole number of modules, every landing sits on a grid line, and nothing overshoots. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#bauhaus-geometry). Fold missing visual questions into the shared interview:
+
+- What sets the beat (a music track's tempo, or a reading pace), and which moment should land on the downbeat?
+- Which words carry the poster (a title, a three-word line, a date or place), and do brand colours replace the primaries or join them?
+- Should the finish read as flat screen graphics or as a printed sheet (paper, ink, registration marks)?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container or Filters skills. Read `animaguru` before generating assets: generation can supply music or narration; the geometry and type are authored code, never a generated image. Discover current models and estimates, respect the user's budget, and reuse completed media.
+
+- The grid is the score. Pick one module and derive every position, size and distance from it (for example 80 px at 1280 × 720: a 14 × 8 field inside an 80/40 px margin, so the frame centre is a grid crossing). Moves are whole modules; sizes are whole or half modules; edges land on lines. Show the construction grid as a pale line, at least while the composition assembles.
+- Palette: red `#E03C31`, yellow `#F2B705`, blue `#1E4FA3`, ink black and cream paper `#F1E9DA`, or the brand's own limited set used the same way. Flat fills, no gradients on the shapes. One geometric sans for display (Futura-like), one condensed grotesque for small caps; set type horizontally or vertically on the grid.
+- One action per beat (0.5 s at 120 bpm): a slide, a swing, a sweep, a cut-in, a split. Ease with easeInOutQuad or linear over a fraction of the beat (about 0.3 s); never a spring, bounce or overshoot. Bars and rules may grow at constant speed. Cut-ins land exactly on the beat.
+- Alternate pivots and make each rotation a quarter or half turn so the shape lands on the grid: a shape's own centre, one of its vertices or corners (a triangle swinging about its right angle, a quarter disc sweeping about its corner like a clock hand), and the frame centre (a whole composition turning 180° maps the grid onto itself).
+- Drive arrays with phase offsets, like p5.js kinetic posters: a wave of quarter turns crosses a row of tiles column by column, each tile a fixed fraction of a beat after its neighbour, and the whole wave finishes inside its beat.
+- Build to a held poster: the composition assembles, has one big hero move (a turn or a cascade) at 60–75 % of the runtime, then the type cuts in and the frame holds with the grid stepping back. End on a cut or a mechanical camera pull-back, never a dissolve.
+- For a printed finish, lay the colours as separate ink layers on a paper texture: slightly ragged edges, a little density variation, a pixel of misregistration between layers, and registration marks in every layer so the offset shows. Keep small type crisp enough to read.
+
+Use the [production recipe](references/recipe.md) for the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motions a function of absolute seconds so any frame can be sought cold. Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+At full resolution, check every landing against the grid (positions and edges on module lines), every action against the cue sheet (one per beat, cut-ins on the beat), easing curves free of overshoot, the colour count, and type legibility and margins at the intended size. Step through the fastest moves frame by frame and seek into the middle of them cold. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D rendering method accurately. Physically rendered 3D remains deferred.

package/skills/animaguru-bauhaus-geometry/references/recipe.md

@@ -0,0 +1,30 @@
+# Bauhaus Geometry production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `bauhaus-geometry`. Its drawing commands are consumed by `src/studies/pixi-renderer.ts`; geometry and time sampling are shared with the gallery renderer. All copy lives in `shared/locales/en/style-studies.json`.
+
+In an untouched starter, run `npm run example -- bauhaus-geometry`, then `npm run dev`. The command refuses to replace an authored film, retains starter backups in `production/example-backup/`, and writes an 8-second study with its own resource tracks. `npm run export:html` and `npm run export:mp4` use this installed film normally. To use the recipe inside an existing film, import `studyFrame()` and `StudyRenderer`, then compose the selected scene into the project's timeline instead of running the installer.
+
+## Assets
+
+The style needs no footage or generated imagery: shapes, grid and type are drawn in code. Use fonts licensed for commercial use and bundle them with the film (for example Jost or League Spartan for a Futura-like display face, Barlow Condensed or Oswald for small caps, all under the SIL Open Font License). A paper texture, if used, is procedural or CC0. Record each font and texture in `production/CREDITS.md`. Invent names and copy; do not imitate a real school's, museum's or brand's identity.
+
+## Adaptation decisions
+
+- Keep the grid as data: one module `M`, origin `(X0, Y0)` and `gx(c) = X0 + c * M`, `gy(r) = Y0 + r * M`. Store every element's resting position and size in modules and derive pixels from them, so a layout change never breaks alignment.
+- Draw each shape once as `Graphics` (circle, polygon, an `arc` for a quarter disc) inside a `Container` whose `pivot` is the action's pivot: the shape's centre, the vertex it swings about, or the frame centre for a whole-composition turn. Animate only `position` and `rotation` from absolute time; growing bars and rules are a width or a mask derived from time.
+- Schedule actions from a cue table in beats (`seconds = beat * 60 / bpm`) and ease with easeInOutQuad (`k < .5 ? 2k² : 1 - (2 - 2k)² / 2`) or linear. Avoid `spring()` from `timing.ts` here: its exponential settle reads organic rather than mechanical, and any initial velocity makes it overshoot.
+- For an array wave, start each tile at `beat + column * step + row * step / 2` and keep `step × columns + turn length` inside the beat, so the next cut-in lands on a still frame.
+- Printed finish: a paper `Sprite` from a procedural canvas texture under the shapes, each ink colour on its own `Container` offset by a pixel for misregistration, and a light grain overlay. A multiply-style blend keeps overprints honest where colours cross. Registration marks go in every ink layer so the offset is visible.
+- Vertical type is a `Text` rotated −90° about its baseline corner; set it to the grid like any shape. Load the fonts before the first frame so seeks never show fallback faces.
+- Reserve motion blur for genuinely fast moves (a 180° turn in one beat), using a few sub-steps or a directional blur filter; keep held frames sharp.
+
+The study is silent, original procedural art. It demonstrates the grid, the beat-locked actions, the pivot alternation and the phase-offset array, not a prescribed film. The gallery preview renders the same choreography as a printed poster: separate ink layers on a paper stock, off register by a pixel, finishing on a pull-back to the sheet on a wall. Configure the subject, palette, scene sequence, duration and soundtrack from the brief.
+
+Use `src/studies/timing.ts` for deterministic easing, seeded variation, measured stroke truncation and cue helpers. `window.animaguru.texts` exposes visible study text bounds for `npm run review`; text declarations alone do not count as visual proof. Inspect the actual frames as well.
+
+## Sources and attribution
+
+Inspired by the following pinned references; no source code, assets or audio are bundled. New study art and scene geometry are original. The workspace's `VIDEO-STYLE-NOTICES.txt` preserves the repository notices and clarifies third-party asset scope.
+
+- [prompts/09-bauhaus.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/09-bauhaus.md)
+- [demos/09-bauhaus/film.js](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/demos/09-bauhaus/film.js)

package/skills/animaguru-liquid-motion/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-liquid-motion
+description: Build Liquid Motion visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# Liquid Motion
+
+Graphics that behave like thick, glossy liquid: shapes pour, stretch into thin necks, snap and fuse; transitions are a wave of paint flooding the frame; a mark gathers from a single drop. Organic, satisfying and high-energy, it suits music videos, food and drink advertising, brand idents and transition packages. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#liquid-motion). Fold missing visual questions into the shared interview:
+
+- Which liquid is it: candy-glossy paint, milk and cream, juice, molten metal or ink? Which 3–5 colours, and which ground behind them?
+- What should form from the liquid at the end (a logo, a word, a product silhouette), and which beat should the paint wave carry?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Filters, custom rendering (shaders), Container or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text, logos and exact geometry belong in authored canvas content.
+
+- Model every liquid shape as a distance field and join shapes with a smooth minimum, so two drops grow a neck before they touch and fuse with a fillet. The cheaper route is the gooey filter: circles blurred by 20 px or more, then an alpha threshold (`ColorMatrixFilter` or a small custom filter); keep one route per film.
+- Shade it as thick liquid, never flat blobs: a rounded surface-tension bead at every edge, a studio softbox reflected along the top-left of that bead, a sharp key highlight, a Fresnel rim, slightly brighter thin edges and a soft contact shadow on whatever lies behind.
+- Liquid is thrown, never moved at constant speed: fast out, slow in (`cubic-bezier(0.22, 1, 0.36, 1)`). Nothing travels in a straight line or holds perfectly still; let surfaces swell and highlights drift.
+- Stretch, neck, snap, rebound: a shape pulled away leaves a neck that thins, breaks in the middle, and each half recoils into its own end, with both ends ringing back over 2–3 frames.
+- Secondary droplets follow the main mass 2–3 frames late and squash flat on landing before they fuse back in. Splashes throw a central jet that pinches off a droplet, plus a crown thrown sideways.
+- Transitions are liquid wipes: a wave front with 3–5 bulges swelling out of phase, droplets thrown ahead of it and swallowed again. Two fronts in a row (a colour, then the next scene's ground) swap scenes without a cut or a crossfade.
+- Form a mark from one drop through a simple intermediate shape (drop → pill → letters), morphing the distance fields point for point. Late droplets landing a beat after can complete it, for example as the full stop.
+- When colours merge, keep clean zones (a swirl, a gradient through neighbouring hues) instead of averaging complementary colours into mud.
+
+Use the [production recipe](references/recipe.md) for the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motions a function of absolute seconds; separate drawing cadence from camera/light cadence when the material calls for it. Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+Step through every neck snap and droplet landing frame by frame: the break, the 2–3 frame recoil at both ends and the late follower must all be visible. Check that wave fronts fully cover the frame before the scene behind them is swapped, that merged colours stay clean, that highlights sit on the edge facing the key light, and that the formed mark is legible on a still frame. Check representative full-resolution frames, moving playback, desktop/mobile fit and cold seeks. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D/2.5D rendering method accurately. Physically rendered 3D remains deferred.

package/skills/animaguru-liquid-motion/references/recipe.md

@@ -0,0 +1,24 @@
+# Liquid Motion production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `liquid-motion`. Its drawing commands are consumed by `src/studies/pixi-renderer.ts`; geometry and time sampling are shared with the gallery renderer. All copy lives in `shared/locales/en/style-studies.json`.
+
+In an untouched starter, run `npm run example -- liquid-motion`, then `npm run dev`. The command refuses to replace an authored film, retains starter backups in `production/example-backup/`, and writes an 8-second study with its own resource tracks. `npm run export:html` and `npm run export:mp4` use this installed film normally. To use the recipe inside an existing film, import `studyFrame()` and `StudyRenderer`, then compose the selected scene into the project's timeline instead of running the installer.
+
+## Adaptation decisions
+
+- Render the liquid with one custom `Filter` or `Mesh` shader that receives the drops, necks and wave fronts as uniforms (centres, radii, capsule ends, front offsets per bulge) and evaluates a smooth-minimum distance field per pixel. Lettering or logos join the field as a distance texture: rasterize the type once to a canvas, run a distance transform, round it with a small closing and opening, and upload it as a texture. Morph a mark by interpolating distances (drop → pill → letters), never by cross-fading sprites.
+- Shade inside the same shader: derive the edge bead's normal from the field gradient and a quarter-circle height profile, reflect a softbox and a strip light, add a sharp key highlight and a Fresnel rim, and blend colours by each primitive's distance so merged zones stay crisp. Draw drop shadows as a blurred, offset copy of the coverage under each layer.
+- Without custom shaders, use the gooey route: draw circles and capsules into a `Container`, apply a `BlurFilter` of about 20 px and an alpha-threshold `ColorMatrixFilter`, then add `Graphics` highlights along the top-left edges. It reads flatter; keep its colours few and its highlights consistent.
+- Build wave fronts per row (or per sample along the edge) from an eased sweep, a lean, a running ripple and 3–5 bulges with their own phases; spawn spray droplets at the bulge tips. Layer two fronts to swap scenes, and swap the background only once the second front has covered every row.
+- Drive necks, snaps, rebounds and late droplets from closed-form functions of time (eased paths, damped cosines, ballistic arcs), so any frame can be sought cold.
+
+The study is silent, original procedural art. It demonstrates material, transforms and layout rather than proving real product claims. The gallery preview is drawn entirely in code for an invented brand; replace its wordmark, palette and copy with the brief's. Configure an original subject, palette, scene sequence, duration and soundtrack from the brief. Liquid sound design (pours, gloops, splashes, drips) lands on the same cues as the visuals.
+
+Use `src/studies/timing.ts` for deterministic easing, seeded variation, measured stroke truncation and cue helpers. `window.animaguru.texts` exposes visible study text bounds for `npm run review`; text declarations alone do not count as visual proof. Inspect the actual frames as well.
+
+## Sources and attribution
+
+Inspired by the following pinned references; no source code, meshes, samples or media are bundled. New study art and scene geometry are original. The workspace's `VIDEO-STYLE-NOTICES.txt` preserves the repository notices and clarifies third-party asset scope.
+
+- [prompts/07-liquid.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/07-liquid.md)
+- [demos/07-liquid/js/scene.js](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/demos/07-liquid/js/scene.js)

package/skills/animaguru-one-line-art/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: animaguru-one-line-art
+description: Build One-Line Art visuals and motion in an AnimaGuru PixiJS video workspace, where one constant-width line draws every figure without lifting. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# One-Line Art
+
+A single thin line draws one figure, keeps going and becomes the next, so the whole film is one unbroken stroke across open space. It is the monoline language of fashion, finance, architecture and jewellery brands: one or two colours, a constant hairline, generous negative space and a line that turns into a filled form for the brand moment. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#one-line-art). Fold missing visual questions into the shared interview:
+
+- Which figures should the one line pass through, in what order, and what does it end on (a logo, a product silhouette, a word)?
+- Light ground with ink, or a deep ground with a metallic line? Which one or two colours, and which typeface for the closing wordmark?
+- Is a logo or product outline supplied as vector art that the line can trace?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container and Filters skills. Read `animaguru` before generating assets: generation can supply music or a paper texture, never the line itself. Discover current models and estimates, respect the user's budget, and reuse completed media. The line, the figures it draws and every word belong in authored canvas content.
+
+- Author the whole film as one ordered path. The tail of each figure is the start of the next; plan the joins in the vector file (or in code) before animating, so no figure needs a lift. The pen lifts once, at the end.
+- Keep the line width constant for the whole film, 2–4 px at 1080p, measured on screen: when the camera zooms, redraw the stroke at the same screen width rather than scaling it. Use round caps and joins.
+- Split the path into strokes at real corners. Inside each stroke, drive arc length with an ease-in-out (`cubic-bezier(0.65, 0, 0.35, 1)`), so the nib slows into every corner and sets off again; give strokes time in proportion to length so the pace stays even.
+- Line to fill: once a closed figure (the logo, a product) is complete, expand a fill from the anchor where the line closed it, clipped to the figure, then let any line that falls inside switch to the ground colour so it reads as engraved.
+- A virtual camera rides just ahead of the nib with a gentle drift, lets older line settle to a dimmer tone as it moves on, then pulls back so the whole drawing reads as one composed poster above the wordmark.
+- Keep texture quiet: an optional faint tremor attached to the path (seeded once, never per frame), a soft glow on the line, a small hot point at the nib, paper tooth on the ground. No gradients inside the line, no second line weight.
+
+Use the [production recipe](references/recipe.md) for the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motion a function of absolute seconds so cold seeks reproduce the same frame. Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+Scrub every join: no gaps, no doubled caps, no figure that needs a lift. Check that the line keeps one width through zooms, that the nib visibly slows at corners, that each figure reads at the moment it completes and again in the final pull-back, and that the fill stays inside its figure. Check representative full-resolution frames, moving playback, desktop/mobile fit and cold seeks. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D rendering method accurately.

package/skills/animaguru-one-line-art/references/recipe.md

@@ -0,0 +1,28 @@
+# One-Line Art production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `one-line-art`. Its drawing commands are consumed by `src/studies/pixi-renderer.ts`; geometry and time sampling are shared with the gallery renderer. All copy lives in `shared/locales/en/style-studies.json`.
+
+In an untouched starter, run `npm run example -- one-line-art`, then `npm run dev`. The command refuses to replace an authored film, retains starter backups in `production/example-backup/`, and writes an 8-second study with its own resource tracks. `npm run export:html` and `npm run export:mp4` use this installed film normally. To use the recipe inside an existing film, import `studyFrame()` and `StudyRenderer`, then compose the selected scene into the project's timeline instead of running the installer.
+
+## Assets and sources
+
+The line is authored, not generated. When the brief supplies a logo or product, trace its outline from the client's own vector file (SVG, AI or PDF exported to SVG) and record the file in `production/CREDITS.md`. Paper or fabric textures for the ground come from CC0 sources (Poly Haven, ambientCG) or are generated in code; fonts must be licensed for video (SIL OFL families such as Cormorant, Playfair Display or Bodoni Moda, or the client's own licensed brand fonts). Invent brand names in examples; never trace a real trademark the user does not own.
+
+## Adaptation decisions
+
+- Store the path once as sampled points with cumulative arc length, the time each point is reached and a role (outline or engraved). Sample curves by distance (about 1.5–2 px) so long curves do not race. `strokePoints()` in `src/studies/timing.ts` truncates a polyline by measured length for simple cases.
+- Draw the visible part each frame as a `Graphics` stroke in screen space after applying the camera transform, at a fixed width with round caps and joins, so zooming never thins or thickens the line. Draw the nib as a small additive glow at the interpolated tip.
+- Dim older line by its age (time since its point was drawn) rather than by position, and run a highlight along arc length for the closing sheen; both stay pure functions of time.
+- Build the fill as a `Graphics` shape of the closed figure, masked by a circle that grows from the closing anchor; add a brushed-metal or ink texture as a `Sprite` inside the same mask. Re-colour engraved line segments where the fill covers them.
+- Set the wordmark as live `Text` with letter-spacing that tightens as it fades up, and a hairline rule beneath it.
+
+The study is silent, original procedural art with an invented brand; it demonstrates material, layout and motion. The gallery preview renders the same idea at higher fidelity: a champagne line on a midnight ground passes through a sun on the horizon, a three-arch loggia, a woman's profile and a brand ring that fills with gold before the wordmark. Configure the subject, palette, figure sequence, duration and soundtrack from the brief.
+
+Use `src/studies/timing.ts` for deterministic easing, seeded variation, measured stroke truncation and cue helpers. `window.animaguru.texts` exposes visible study text bounds for `npm run review`; text declarations alone do not count as visual proof. Inspect the actual frames as well.
+
+## Sources and attribution
+
+Inspired by the following pinned references; no source code, assets or fonts are bundled. New study art and scene geometry are original. The workspace's `VIDEO-STYLE-NOTICES.txt` preserves the repository notices and clarifies third-party asset scope.
+
+- [prompts/02-line-art.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/02-line-art.md)
+- [demos/02-line-art/film.js](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/demos/02-line-art/film.js)

package/skills/animaguru-sticker-explainer/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: animaguru-sticker-explainer
+description: Build Sticker Explainer visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# Sticker Explainer
+
+The knowledge-video board: cut-out photos with thick white borders, flat icons and exact charts laid across one huge calm canvas, and a single camera that travels from fact to fact while every narration line brings a new element. It reads serious and dense: restrained colour, one monoline sans, numbers that are always to scale. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#sticker-explainer). Fold missing visual questions into the shared interview:
+
+- Which photos, product shots or data do you have, and which facts should the camera visit, in what order?
+- What is the one number or conclusion the board pulls back to at the end?
+
+## Keep the facts traceable
+
+Ask the user for their own photos and data first; otherwise use licence-clean sources (see the [production recipe](references/recipe.md)). Every number on the board comes from a source or a stated calculation: keep `production/FACTS.md` (each figure, its source URL or the arithmetic behind it) and `production/CREDITS.md` (every photo's source, author and licence), and deliver both with the film. Generated cut-outs may stand in for generic objects (a cup, a sack, a phone), never for a specific real person, place, product or event, and a generated image never carries a figure. Rounded or illustrative values say so on screen.
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Container, Sprite, Graphics, Text and Filters skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential numbers, labels and charts stay authored canvas content, never baked into a picture.
+
+- One board, several frames wide and tall, on a cool neutral ground (blue-grey or off-white) with a faint dot grid and fibre; facts sit in regions on it, linked by thin dashed threads. Only the camera moves between regions.
+- Every photo becomes a sticker: subject cut out, then one uniform white margin of 8–12 px at delivery size, a soft shadow with a tight contact core and the same light direction on every sticker. Bake the margin into the texture so it never thickens or thins with the camera zoom.
+- Stickers slap on: they drop from about 1.3× scale with a few degrees of turn while their shadow tightens, land in 0.2–0.3 s and settle with a small spring; the board can thump by under 1% on impact.
+- The camera holds with a slow 2–3% push, then travels in 0.7–1 s with a long ease, easing back mid-move so the departing and arriving facts share the frame; it ends pulled back on the whole board with the conclusion set large in the middle.
+- One narration line, one new element: a sticker, a counter, a chart or a labelled leader line lands within about 0.2 s of its line. Keep the subtitle in a fixed pill, a chapter tag in a corner, and two or three colours plus one accent.
+- Charts are exact: zero-based bars to scale from one data model, counters rolling in fixed-width digit cells to the exact final value, and a source or approximation note under each chart.
+
+Use the [production recipe](references/recipe.md) for sources, the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motions a function of absolute seconds. Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+Check every figure against `FACTS.md`, bar lengths against their values, sticker margins and shadows for consistency at every zoom, that no frame mid-move is an empty stretch of board, that labels clear the subtitle pill, and that the final pull-back frame reads as a finished poster. Check representative full-resolution frames, moving playback, desktop/mobile fit and cold seeks. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D/2.5D rendering method accurately. Physically rendered 3D remains deferred.

package/skills/animaguru-sticker-explainer/references/recipe.md

@@ -0,0 +1,27 @@
+# Sticker Explainer production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `sticker-explainer`. Its drawing commands are consumed by `src/studies/pixi-renderer.ts`; geometry and time sampling are shared with the gallery renderer. All copy lives in `shared/locales/en/style-studies.json`.
+
+In an untouched starter, run `npm run example -- sticker-explainer`, then `npm run dev`. The command refuses to replace an authored film, retains starter backups in `production/example-backup/`, and writes an 8-second study with its own resource tracks. `npm run export:html` and `npm run export:mp4` use this installed film normally. To use the recipe inside an existing film, import `studyFrame()` and `StudyRenderer`, then compose the selected scene into the project's timeline instead of running the installer.
+
+## Photos, data and sources
+
+The user's own product shots, photos and data come first. Otherwise: Wikimedia Commons (read the licence on each file page: CC0, public domain or CC BY are fine; not CC BY-SA, "no known restrictions" or unclear licences), U.S. federal agencies (NASA, NOAA, USDA, USGS: works of federal employees are public domain), Openverse results filtered to CC0 or public domain, and official statistics from the publishing agency's own site. Download into the film's `public/` or `production/` folders, log every request, record each photo in `production/CREDITS.md` and each figure, with its source or arithmetic, in `production/FACTS.md`. When the brief allows generated cut-outs for generic objects, generate them on a plain background so the cut-out is clean, and list them in `CREDITS.md` as generated.
+
+## Adaptation decisions
+
+- Build the board as one `Container` holding every region; the camera is that container's position and scale, computed each frame from a table of shots (centre and zoom) and absolute time. Interpolate zoom in log space and multiply it by a `1 − k·sin(πu)` dip during a move so both regions stay in view. Keep the subtitle pill, chapter tag and honesty labels in a separate screen-space container above the board.
+- Make each sticker texture once at load: cut the subject out (or use the photo's alpha), dilate its silhouette by a distance pass to a uniform 8–12 px margin at delivery scale, fill the margin white and render it to a `RenderTexture` with `renderer.generateTexture`. Draw the shadow as a second, blurred sprite underneath, offset down-right. Never use a live outline filter: its width would scale with the camera.
+- Animate the slap on the sticker's own container (scale, rotation, alpha) and the shadow's offset and opacity separately; the board thump is a brief extra factor on the camera zoom.
+- Draw charts with `Graphics` from one data model and redraw only while values change; set counters in per-digit `Text` or `BitmapText` cells so they never jitter, and finish on the exact formatted value.
+- Draw threads and route lines as polylines truncated by arc length (`strokePoints` in `src/studies/timing.ts`) so they grow along the camera's path; a dashed line is a sequence of short segments.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates the board, sticker, camera and chart system, not a real subject. Replace its stand-ins with the user's photos and sourced figures described above. The gallery preview renders its "photo" stickers procedurally (shaded height fields of a cup, beans, a coffee branch and a jute sack) with rounded, approximate figures, and says so on screen. Configure the subject, palette, scene sequence, duration and soundtrack from the brief.
+
+Use `src/studies/timing.ts` for deterministic easing, seeded variation, measured stroke truncation and cue helpers. `window.animaguru.texts` exposes visible study text bounds for `npm run review`; text declarations alone do not count as visual proof. Inspect the actual frames as well.
+
+## Sources and attribution
+
+Inspired by the following pinned reference, which describes the PaperClip-style knowledge-video format; no code, footage, music or assets from it are bundled. New study art and scene geometry are original. The workspace's `VIDEO-STYLE-NOTICES.txt` preserves the repository notices and clarifies third-party asset scope.
+
+- [prompts/19-paperclip.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/19-paperclip.md)

package/skills/animaguru-synthwave-y2k/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-synthwave-y2k
+description: Build Synthwave & Y2K visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+disable-model-invocation: true
+---
+
+# Synthwave & Y2K
+
+A whole-film quote of a media era: a neon perspective grid running at a slatted sunset, chrome lettering with a flare and a glint, and Y2K desktop pop-ups driven by a cursor, all played back through one VHS deck. Subject, audience, emotional tone and story come from the user's brief. This style supports Explainer, Advertisement and General Video.
+
+## Establish direction
+
+Follow sibling `animaguru-video` for purpose → style → compact interview before new production. Reuse explicit choices and completed briefs; honor a requested interview skip. Share [the style gallery](https://animaguru.com/animation-styles#synthwave-y2k). Fold missing visual questions into the shared interview:
+
+- Pure 80s synthwave (grid, sun, chrome), Y2K desktop (pop-ups, acid chrome, cursor), or both in one film?
+- How worn should the tape be: a light vintage finish, or a tired cassette with tracking errors and stutters?
+- Which words get chrome and which get neon, and is there an on-screen action the cursor should perform?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Mesh, Filters and Blend Modes skills. Read `animaguru` before generating assets: generation can supply a soundtrack or a backdrop plate, but the grid, sun, type and windows are drawn in code. Discover current models and estimates, respect the user's budget, and reuse completed media. Essential text belongs in authored canvas content, never baked into an image.
+
+- The grid is a one-point perspective floor computed in world space (lines at fixed world spacing, scrolled by camera travel), so lines thicken toward the lens and stay locked to the horizon. Fade lines into their average glow where a cell shrinks below about 4 px; never let them shimmer into moiré at the horizon.
+- The sun is a multi-stop vertical gradient (pale yellow → orange → magenta) with slats cut from its lower half, widening toward the bottom and drifting downward; mountains, palms and cloud strips may cross it, its reflection ripples on the floor.
+- Glow is double: a tight bloom of about 3–4 px and a wide one of about 30 px, both from an emission layer that holds only the neon (grid, rims, sun, script tubes), added on top. Glow never lifts the whole frame; keep the sky top near navy-black.
+- Chrome lettering is a heavy italic sans with a high-contrast metal gradient that breaks at a hard horizon band near its middle (sky blue → white → dark band → warm tones), a stepped extrusion, a thin bevel highlight, one shine sweep and one star glint. A title slam lands with a flare and, if wanted, a short flash; neon script strikes on left to right with a hot leading edge and a brief sputter.
+- Y2K desktop language: glossy pop-ups with gradient title bars, bevelled buttons and candy icons; they pop with overshoot, a cursor moves, presses, drags (an outline may stand in for the window while dragging), cascades more pop-ups and clicks; windows close by collapsing to a line like a switched-off tube. Invent the operating system: no real OS logos, chrome or sounds.
+- The VHS chain runs in a fixed order: row wobble and tears, chroma bleed (luma sharp; colour blurred over about 9 px and delayed 1–2 px, or red and blue split 1–2 px), luma noise and dropouts, tracking bars and bottom head-switching noise, then scanlines (every other row 10–15% darker) and rounded tube corners. An on-screen display (PLAY ▶, tape counter, SP) sits above the tape damage and below the scanlines. An optional 4:3 rounded mask is a framing choice, not a requirement.
+- Cadence is part of the medium: one or two glitches a second at most, a few passages stepped to 15 fps, and a two-frame reverse stutter on a hit. Keep essential reading moments clean.
+
+Use the [production recipe](references/recipe.md) for the bundled original study and port-specific decisions. It is a technique example, not a prescribed film. Keep motions a function of absolute seconds; separate the scene clock (stepped, stuttered) from the tape clock (noise and glitches always moving). Prepare assets locally, preserve async seeking and register actual resource/cue times. Keep essential type editable and localized.
+
+## Review and delivery
+
+Inspect grid stability near the horizon, chrome legibility under glow, the slam and stutter frames one by one, cursor targets (it must actually reach the buttons it clicks), and that glitches avoid essential text. Check representative full-resolution frames, moving playback, desktop/mobile fit and cold seeks. Fonts must be licensed for embedding (OFL or system-bundled for local rendering); music and sound must be licence-clean or generated. Follow `animaguru-video` for production records, audio mixing and HTML5 delivery; export MP4 when requested. Describe the actual 2D/2.5D rendering method accurately. Physically rendered 3D remains deferred.