@docyrus/animaguru 0.23.0 → 0.25.0

package/skills/animaguru-city-symphony/references/recipe.md

@@ -0,0 +1,26 @@
+# Time-lapse Symphony production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `city-symphony`. 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 -- city-symphony`, 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.
+
+## Evidence and sources
+
+Wikimedia Commons (modern time-lapse, aerial and slow-motion footage under CC BY/CC0; the Carol M. Highsmith Archive for public-domain photographs; check the licence on each file page, and that a YouTube/Vimeo import carries a passed review, not merely a pending one), Library of Congress (archive film published in the US before 1931 is public domain; a "no known restrictions" statement alone is not enough), NASA (orbital night photography of cities, public domain), Internet Archive (scanned books marked NOT_IN_COPYRIGHT with a pre-1931 date for the closing quote), Natural Earth (public domain map geometry). Download into the film's `public/` or `production/` folders, log every request, and record each asset in `production/CREDITS.md` and each number, with its quoted wording, in `production/FACTS.md`.
+
+## Adaptation decisions
+
+- Approximate frame-blended "light rivers" by accumulating a short trail of recent texture samples into a `RenderTexture` with decaying alpha, or by motion-blurring a sped-up `Sprite`/video texture; cap the blend window so clouds don't turn to mush.
+- Drive every cut, slam and grid stage from one shared `bar(n, beat)` timing function, so density always matches the score's current subdivision rather than a typed shot length.
+- Build the number card and the day-ring clock as `Graphics`/`Text`, locking digits one per sixteenth note; apply the release-print grade (S-curve, warm highlights, bloom above a luma threshold, grain) with a `ColorMatrixFilter` plus a small bloom pass, shared by every shot including archive film.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates material, layout and motion, not evidence. Replace its stand-ins with the real time-lapse, aerial, archive or photographic footage described above, never with generated imagery. The gallery preview is a procedural city rendered in code, not a real skyline, labelled as such. 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; 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.
+
+- [styles/city-symphony/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/city-symphony/STYLE.md)
+- [styles/city-symphony/demo/index.html](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/city-symphony/demo/index.html)

package/skills/animaguru-countdown/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: animaguru-countdown
+description: Build Live Countdown Split-screen 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
+---
+
+# Live Countdown Split-screen
+
+Real-time footage of one event with a known zero: screen time equals event time, a clock ticks every second, and the screen splits into more cells as the moment nears, merging into one picture at zero. It is a documentary & broadcast style: real synced footage, documents and data carry the film. 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#countdown). Fold missing visual questions into the shared interview:
+
+- Which event with a known zero, and how many synced camera angles, documents or data do you have?
+- Which milestones should the control strip carry, and what should the clock count to after zero?
+
+## Use real evidence
+
+Ask the user for their own footage, recordings, photos or data of the event first; otherwise find licence-clean sources (see the [production recipe](references/recipe.md)). Screen time equals event time: never cut, reorder or speed up the real stretch. Label footage honestly rather than faking sync ("same window · not frame-synced" instead of a forced alignment), and keep `production/FACTS.md` (every number, time, name and call, with source) and `production/CREDITS.md` (every asset's source, author and licence), delivered with the film.
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Container, Graphics, Text or Filters skills. Read `animaguru` before generating assets: generation can supply music or narration, never the event footage itself. Discover current models and estimates, respect the user's budget, and reuse completed media. Essential clock digits, checklists and labels belong in authored canvas content.
+
+- The layout is the edit: cells open, close and resize on a real spoken call or event in the native audio, never on the music; cell count rises toward zero, then drops to one at the merge.
+- Draw the clock in fixed-width digit slots so it never jitters; sync badges (synced, same-window, real-time) are part of the look's honesty, not an afterthought.
+- At zero, every cell animates to its tile of the merged full-screen frame while chrome fades, then the clock inverts from counting down to counting up.
+
+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; 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 sync accuracy at zero, clock digit stability under re-layout, sync-badge honesty on every unsynced cell, and every milestone and number against `FACTS.md`. 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-countdown/references/recipe.md

@@ -0,0 +1,26 @@
+# Live Countdown Split-screen production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `countdown`. 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 -- countdown`, 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.
+
+## Evidence and sources
+
+NASA (images.nasa.gov, svs.gsfc.nasa.gov — U.S. federal government works, public domain; check each item for third-party material and never imply endorsement), other U.S. federal agencies (NOAA, National Archives, DoD DVIDS), Internet Archive (only items whose record shows public domain, pre-1931 U.S. publication or CC0/CC BY; skip YouTube mirrors), Wikimedia Commons (CC0, public domain or CC BY only), Library of Congress (read each rights statement). Download only the seconds needed, log every request, and record each asset in `production/CREDITS.md` and each claim, time and call in `production/FACTS.md`.
+
+## Adaptation decisions
+
+- Model each camera as a `Sprite` or video texture inside its own `Container`, whose rectangle is driven by layout keyframes (grid, merge, cut, swap) interpolated with an `easeInOutCubic`, never a hand-typed per-shot duration.
+- Draw the fixed-slot clock as individual `Text` or `BitmapText` glyphs in equal-width cells, swapped on the whole second so digits never jitter; drive the sub-second bar and ticks from the same clock state.
+- Build the zero merge by animating every cell's rectangle to its tile of one full-screen frame while chip and border graphics fade in the transition's first half, then flip the clock's colour and header state from counting down to counting up.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates material, layout and motion, not evidence. Replace its stand-ins with the real synced footage, documents and data described above, never with generated imagery. The gallery preview uses illustrative camera cells with no real launch or event behind them, labelled as such. 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; 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.
+
+- [styles/countdown/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/countdown/STYLE.md)
+- [styles/countdown/demo/index.html](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/countdown/demo/index.html)

package/skills/animaguru-kino-montage/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: animaguru-kino-montage
+description: Build Constructivist Montage 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
+---
+
+# Constructivist Montage
+
+Real archive footage, photographs and documents, printed as one ink-and-paper poster with a single red, cut on a machine beat: diagonal bands carry the type, windows hold the film, people are scissored out of photographs and stacked into structures. It is a documentary & broadcast style: real footage, photographs and documents carry the film. 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#kino-montage). Fold missing visual questions into the shared interview:
+
+- Which archive footage, photographs and documents (with rights) tell this story, and what is the signature build (a tower, a bridge span, a crowd forming a word)?
+- What is the axis angle and tempo for the diagonal bands and the beat grid?
+
+## Use real evidence
+
+Ask the user for their own film, video, photographs, scans or data first; otherwise find licence-clean sources (see the [production recipe](references/recipe.md)). Never stand a generated image in for archive material, and never invent a number. Keep `production/FACTS.md` (every number, date and claim, with its source and quoted wording) and `production/CREDITS.md` (every asset's source, author and licence), delivered with the film. CC BY-SA or "no known restrictions" are not usable without the user's explicit agreement.
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Filters, Graphics, Text or Container skills. Read `animaguru` before generating assets: generation can supply music or narration, never the archive imagery itself. Discover current models and estimates, respect the user's budget, and reuse completed media. Essential counters, headings and marked facts belong in authored canvas content.
+
+- Four elements only — bands, windows, cut-outs, type blocks — share one ink-to-paper print grade; red is the only colour, laid on top, and never sits on red.
+- Cuts conflict in direction, value or geometry on a beat grid that can halve per section; nothing holds longer than a second without something moving.
+- The signature photomontage tower (or equivalent build) climbs one unit per beat with the count; a document's own drawings can be "lifted off the page" and restood to scale as a 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; 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 the print grade's consistency per clip, red never sitting on red, counter-to-caption agreement, type clear of window edges, and every number against `FACTS.md`. 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-kino-montage/references/recipe.md

@@ -0,0 +1,26 @@
+# Constructivist Montage production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `kino-montage`. 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 -- kino-montage`, 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.
+
+## Evidence and sources
+
+Internet Archive (read each item's `licenseurl`; for pre-1978 US film, check the title and end cards for a copyright notice — published 1930 or earlier is public domain by date), Wikimedia Commons (public domain, CC0 or CC BY, credited in full; not CC BY-SA), U.S. National Archives, Library of Congress, NASA and other federal agencies (federal works are public domain; check each item's rights statement), open-access museums such as the Met, Rijksmuseum and Smithsonian (CC0 where the object page says so), university and city library digitised ephemera (read the rights statement; "copyright status undetermined" is not usable). Download into the film's `public/` or `production/` folders, log every request, and record each asset's seconds used in `production/CREDITS.md` and every number, date and claim in `production/FACTS.md`.
+
+## Adaptation decisions
+
+- Composite each window as a masked `Container` (a rectangle or a sheared parallelogram) holding a graded `Sprite` or video texture; apply the duotone ink-to-paper grade with one `ColorMatrixFilter` shared by every window, photograph and document.
+- Stand in for the segmentation-and-paper-border cut-out technique with flat `Graphics` silhouettes carrying a paper-coloured outline stroke; the signature tower stacks them with a simple eased camera climb tied to the floor counter.
+- Drive every slam, wipe and flash from one beat-grid timing function (a `bar(n, beat)`-equivalent in `timing.ts`), shared by the diagonal bands, the type blocks and the cuts, so the whole poster cuts on the same grid.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates material, layout and motion, not evidence. Replace its stand-ins with the real footage, photographs and documents described above, never with generated imagery. The gallery preview uses illustrative silhouettes, not real archive photographs, labelled as such. 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; 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.
+
+- [styles/kino-montage/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/kino-montage/STYLE.md)
+- [styles/kino-montage/demo/index.html](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/kino-montage/demo/index.html)

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-news-package/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: animaguru-news-package
+description: Build Broadcast News Package 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
+---
+
+# Broadcast News Package
+
+A television newsroom's on-air package built entirely in code: a sting that becomes the channel bug, a rundown that opens and closes the bulletin, a lower-third strap that never leaves the frame, and full-frame graphics that carry the facts. It is a documentary & broadcast style; it can run as pure graphics over real data, with footage optional. 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#news-package). Fold missing visual questions into the shared interview:
+
+- How many stories, and which graphics does each need (a split-flap board, a threshold chart, an explainer map, a spec card, a quote card)?
+- Does the user have their own brand (name, plate colour, voice), or should one be invented for this film?
+
+## Use real evidence
+
+Every on-screen number and sentence comes from an official source first; ask the user for their own data, pictures or a recorded voice before anything else (see the [production recipe](references/recipe.md)). Draw charts from real series only; tag a line `SCHEMATIC` when only a few numbers are known. A generated illustrative plate is a last resort, always tagged `ILLUSTRATION` while visible, and never stands in for the event, a place or a person. Keep `production/FACTS.md` (claim, URL, quoted wording) and `production/CREDITS.md`, delivered with the film.
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container or Filters skills. Read `animaguru` before generating assets: generation can supply an anchor voice, music or an illustrative plate, never the facts themselves. Discover current models and estimates, respect the user's budget, and reuse completed media. Essential straps, datelines and numbers belong in authored canvas content.
+
+- One package system throughout: a brand plate, a tab, a paper strap, ink cards, mono datelines, stamps — viewers read the system before the words.
+- The strap never leaves the frame from the first story to the recap; its tab changes category with a flash; the sting becomes the bug by flying into the corner.
+- The package travels with its picture: under a wipe, draw the strap, tab, source line and corner tag per side of the wipe, never once on top of everything, so the chrome never lags the cut.
+
+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; 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 strap/tab/source-line sync under every wipe, schematic-vs-data labelling, source-line length limits, every claim against `FACTS.md`, and illustration tagging on any generated plate. 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-news-package/references/recipe.md

@@ -0,0 +1,26 @@
+# Broadcast News Package production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `news-package`. 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 -- news-package`, 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.
+
+## Evidence and sources
+
+The company's or institution's own page, the exchange's own data, or a government statistics portal for every number (log the claim and quoted wording). For pictures, ask in order: the user's own images first; generated illustrative plates only if the user wants them, tagged `ILLUSTRATION` for as long as visible and never standing in for the event, a place in the news or a person; failing that, Wikimedia Commons (CC0, public domain or CC BY only), U.S. federal agencies (NASA, NOAA, NARA, USGS — public domain), Internet Archive (public domain, CC0 or CC BY items; U.S. works before 1931 are public domain), or abstract backgrounds drawn in code. Record every asset in `production/CREDITS.md` and every claim in `production/FACTS.md`.
+
+## Adaptation decisions
+
+- Build the brand plate as one `Graphics` parallelogram reused for the sting, the bug, the desk front and the end card, driven by a single position/scale tween rather than four separate assets.
+- Build the split-flap board as two `Container`s clipped to top and bottom halves, cross-fading the old and new tile faces on the flip; drive the threshold chart's line head and bars from one shared series.
+- Draw the strap, tab, source line and corner tag inside each wipe's own clip (one state per side of the transition), never as a single overlay drawn once on top of everything, so the package never lags the picture by a frame.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates material, layout and motion, not evidence. Replace its stand-ins with the real data, pictures or footage described above, never with unlabelled generated imagery. The gallery preview runs the package graphics end to end with no footage, illustrative throughout and labelled as such. 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; 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.
+
+- [styles/news-package/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/news-package/STYLE.md)
+- [styles/news-package/demo/main.js](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/news-package/demo/main.js)

package/skills/animaguru-newsreel/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: animaguru-newsreel
+description: Build 1920s Newsreel 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
+---
+
+# 1920s Newsreel
+
+A sound newsreel of the late 1920s cut from real archive material: a searchlight-and-globe ident with a brass fanfare, a newspaper spinning into the lens, a fast announcer and a hot band, all inside one silver-graded projector gate. It is a documentary & broadcast style: real archive film, photographs, print or recordings carry the picture; only the packaging is drawn. 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#newsreel). Fold missing visual questions into the shared interview:
+
+- Which archive film, photographs, print or recordings do you have, or should be found, and what is the one place-and-story arc?
+- What is the ident's fictional name, and which native transitions (iris, wipe, flip) fit the story's turns?
+
+## Use real evidence
+
+Ask the user for their own archive film, photographs, print or recordings first; otherwise find licence-clean sources (see the [production recipe](references/recipe.md)). Never generate "archive" pictures: only the ident, cards, maps and end card are drawn, and the footage and print must be real. Keep `production/FACTS.md` (each on-screen or spoken claim, its source URL and quoted wording) and `production/CREDITS.md` (every asset's source, author and licence), and deliver both with the film. CC BY-SA or "no known restrictions" are not a clear licence: name them to the user and ask before using them.
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Filters, Mesh, Graphics, Text or Assets skills. Read `animaguru` before generating assets: generation can supply music or narration, never the archive footage itself. Discover current models and estimates, respect the user's budget, and reuse completed media. Essential place cards and subtitles belong in authored canvas content, never baked into the picture.
+
+- One silver grade and projected gate (1.37:1, rounded corners, black outside) sits over every real shot; flicker, gate weave and scratches belong to the picture layer only, never to type.
+- The ident, spinning paper, map spread, place cards and end card are the only generated elements; draw them with Graphics and Text, never as a stand-in for archive imagery.
+- Cuts and landings ride a hot-band beat grid; use the style's own fixed transitions (iris, diagonal wipe, flip, venetian blinds, clock wipe) once each, never a cross-dissolve between stories.
+
+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; 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 the gate mask at every corner, grade consistency across clips (one level set per clip, never per frame), place-card reading time, subtitle one-line limits, and every date or claim against `FACTS.md`. 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-newsreel/references/recipe.md

@@ -0,0 +1,26 @@
+# 1920s Newsreel production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `newsreel`. 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 -- newsreel`, 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.
+
+## Evidence and sources
+
+U.S. National Archives (films, often via Internet Archive "FedFlix" copies; federal works are public domain; Universal Newsreel 1929–1967 is in NARA too), Internet Archive (check each item's licence field and provenance; skip YouTube mirrors or "restored/AI enhanced" versions), Wikimedia Commons (PD-US-expired, PD-US-no-notice, PD-USGov, CC0 or CC BY only; not CC BY-SA or "no known restrictions"), Library of Congress, print published in the US before 1931 (newspapers, magazines, books on archive.org/HathiTrust/Commons, public domain), and sound recordings published before 1926 (public domain in the US). Download into the film's `public/` or `production/` folders, log every request, and record each asset in `production/CREDITS.md` and each claim in `production/FACTS.md`.
+
+## Adaptation decisions
+
+- Composite the gate as a `Container` clipped to a rounded-rectangle mask; apply the silver grade with a `ColorMatrixFilter` (greyscale, contrast, warm multiply/screen tint) plus a small custom filter or seeded `Graphics` noise for flicker, gate weave and scratches, applied to the picture layer only.
+- Build the ident (searchlights, globe, title lettering) and the spinning-paper headline with `Graphics` and `Text` in OFL faces; animate the paper's slam with a scale/rotation tween that decays into a landing beat, never as "archive" imagery.
+- Keep subtitles, place cards and the end card on an unfiltered type layer above the gate, so type never weaves or flickers with the picture; drive every cut and landing from one beat-grid timing function.
+
+The study is silent, original procedural art with illustrative values, labelled as such; it demonstrates material, layout and motion, not evidence. Replace its stand-ins with the real archive film, photographs, print or recordings described above, never with generated imagery. The gallery preview shows only the code-drawn packaging (the ident, the spinning headline, a place card and an iris), with no footage standing in for real archive film. 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; 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.
+
+- [styles/newsreel/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/newsreel/STYLE.md)
+- [styles/newsreel/demo/index.html](https://github.com/lemomo-ai/lemo-opuscar/blob/77ee8318df779b0736d7de0abe24387e51023735/styles/newsreel/demo/index.html)

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.

package/skills/animaguru-synthwave-y2k/references/recipe.md

@@ -0,0 +1,29 @@
+# Synthwave & Y2K production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `synthwave-y2k`. 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 -- synthwave-y2k`, 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
+
+The look needs no media: the grid, sun, mountains, palms, chrome type, windows and tape damage are all drawn. Generated media fits around it, never in place of editable type: a generated synthwave track, a narration, or a painted sky plate behind the code-drawn grid. Fonts must be OFL or bundled with the system that renders the film; record each in `production/CREDITS.md` with its licence. Do not reproduce real operating system interfaces, logos, startup sounds or cursors from commercial products; invent the desktop, its file names and its colours.
+
+## Adaptation decisions
+
+- Draw the floor grid as a `Mesh` or a full-screen `Filter` that intersects each pixel's ray with the ground plane (`z = eyeHeight · focal / (y − horizon)`), measures the distance to the nearest world-space line in screen pixels and fades lines into their average once a cell is under about 4 px. Scroll by adding camera travel to world `z`, not by moving sprites.
+- Keep emissive parts (grid, horizon line, sun, crests, neon script, title outline) in one container rendered to a `RenderTexture`. Blur two copies (`BlurFilter` of about 4 and, at quarter resolution, about 30) and add them with `blendMode: "add"`; mask the emission under solid objects (palms, chrome face, windows) before blurring, so glow wraps their edges instead of washing over them.
+- Build the chrome title once as a texture: stepped extrusion copies, a `FillGradient` face with a hard dark band at its middle, a thin light stroke for the bevel. Animate the slam by scaling that texture (average a few sub-frame scales for motion blur) and run the shine as a masked gradient sprite clipped to the face.
+- Write the VHS chain as one custom `Filter` on the stage: per-row horizontal offsets from a hash of row and absolute time, YIQ chroma blur and delay (or an RGB split), luma noise, a moving tracking band, bottom-row skew and every-other-row darkening. Feed it a `glitch` uniform from a cue table so tears happen on purpose. Draw the on-screen display after the filter's damage stage, before scanlines.
+- Quantise the scene clock for stepped passages (`Math.floor(t * 15) / 15`) and map a hit's next two frames to earlier scene times for the reverse stutter; the tape noise keeps reading the true time.
+- Drive windows and the cursor from one cue table: pop (overshoot spring), move, press, drag outline, release, click (button down, ripple) and collapse (scale Y to a line, then X to a point).
+
+The study is silent, original procedural art. It demonstrates material, transforms and layout rather than any real product or operating system. 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 reference; 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/10-synthwave.md](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/prompts/10-synthwave.md)
+- [demos/10-synthwave/index.html](https://github.com/Vincentwei1021/mg-styles-15/blob/49052d80bfaf9fa8412cc9710530e5e95a3b8d8c/demos/10-synthwave/index.html)