@docyrus/animaguru 0.6.0

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

@@ -0,0 +1,23 @@
+# Glass Mosaic production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `glass-mosaic`. 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 -- glass-mosaic`, 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
+
+- Store tiles as stable semantic pieces with shared edges; fixed-pane and loose-tile variants have different motion rules.
+- Use authored lighting masks and projected tilts in the 2.5D treatment. Physical refraction and arbitrary thick-tile orbit remain deferred.
+- Preserve hue and seam readability as light changes. Tile motion must expose prepared gaps/backing rather than inventing hidden imagery.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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.
+
+- [styles/stained-glass/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/stained-glass/STYLE.md)
+- [styles/stained-glass/demo/glass.js](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/stained-glass/demo/glass.js)
+- [prompts/zeezomb-726206.md](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/3d54892e2ae5b0e8d337171e6508bba4cec01ab8/prompts/zeezomb-726206.md)

package/skills/animaguru-halftone-editorial/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: animaguru-halftone-editorial
+description: Build Halftone Editorial visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+---
+
+# Halftone Editorial
+
+Bold editorial type, dot shading, graphic cutouts and stamps arranged with a strong information hierarchy. 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#halftone-editorial). Fold missing visual questions into the shared interview:
+
+- Should the finish feel like a newspaper, magazine or comic?
+- Which type, texture level and accent palette fit the brand?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Assets or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text and exact numerical geometry belong in authored canvas content.
+
+- Choose dot density from tone rather than applying uniform dots over every subject. Keep dot cells fixed in material coordinates.
+- Separate headline entrance, reading hold and exit; a stamp can punctuate a point without hiding it.
+- Line boil belongs on selected artwork, not on essential type. Case-file, trial and exhibit framing are optional story choices.
+
+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 readable dots and headlines at phone size; stamp occlusion and completed reading holds. 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-halftone-editorial/references/recipe.md

@@ -0,0 +1,23 @@
+# Halftone Editorial production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `halftone-editorial`. 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 -- halftone-editorial`, 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
+
+- Choose dot density from tone rather than applying uniform dots over every subject. Keep dot cells fixed in material coordinates.
+- Separate headline entrance, reading hold and exit; a stamp can punctuate a point without hiding it.
+- Line boil belongs on selected artwork, not on essential type. Case-file, trial and exhibit framing are optional story choices.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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.
+
+- [styles/halftone-dossier/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/halftone-dossier/STYLE.md)
+- [styles/halftone-dossier/demo/index.html](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/halftone-dossier/demo/index.html)
+- [prompts/madpencil-753990.md](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/3d54892e2ae5b0e8d337171e6508bba4cec01ab8/prompts/madpencil-753990.md)

package/skills/animaguru-holographic-scan/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: animaguru-holographic-scan
+description: Build Holographic Scan visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+---
+
+# Holographic Scan
+
+Luminous projected geometry, traveling scans and accurate part callouts with restrained depth and local explosions. 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#holographic-scan). Fold missing visual questions into the shared interview:
+
+- Which parts, views and specifications should be shown?
+- What hue and scan intensity suit the brand?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Assets or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text and exact numerical geometry belong in authored canvas content.
+
+- Build a simple part model with vertices, edges, anchors and assembly axes; project all of it through one camera function.
+- Compute target boxes from projected part bounds and attach leaders to the part, not a guessed screen position. Scan visibility comes from geometry and scan position.
+- Depth fade and restrained glow aid hierarchy; scrambling must resolve before reading. A futuristic scan never substantiates an unverified specification.
+
+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 bracket and leader accuracy through turn/zoom; bloom restraint, legibility and verified values. 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-holographic-scan/references/recipe.md

@@ -0,0 +1,22 @@
+# Holographic Scan production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `holographic-scan`. 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 -- holographic-scan`, 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
+
+- Build a simple part model with vertices, edges, anchors and assembly axes; project all of it through one camera function.
+- Compute target boxes from projected part bounds and attach leaders to the part, not a guessed screen position. Scan visibility comes from geometry and scan position.
+- Depth fade and restrained glow aid hierarchy; scrambling must resolve before reading. A futuristic scan never substantiates an unverified specification.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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.
+
+- [styles/hologram-hud/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/hologram-hud/STYLE.md)
+- [styles/hologram-hud/demo/engine/holo.js](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/hologram-hud/demo/engine/holo.js)

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

@@ -0,0 +1,36 @@
+---
+name: animaguru-interface-motion
+description: Animate supplied screens or conceptual interfaces with accurate cursor targets, focus treatments and state transitions. Use for the Interface Motion visual style in an AnimaGuru video workspace.
+---
+
+# Interface Motion
+
+Turn interface surfaces into clear animated compositions. The Explainer, Advertisement or General Video brief supplies the story and product claims; this style defines screen treatment, focus and motion.
+
+## Establish the direction
+
+Follow the sibling `animaguru-video` category → style → quick interview flow for new films. Reuse supplied choices and briefs; honor an explicit request to skip the interview. Share [the style preview](https://animaguru.com/animation-styles#interface-motion). Include missing visual questions in the shared interview:
+
+- Are the screens actual product screenshots/recordings, or should the film use a conceptual interface?
+- Which states, controls and interactions matter, and what approved copy describes them?
+- Should screens fill the composition or sit in a restrained frame? What cursor, zoom and callout treatment suits the brand?
+
+## Design and build
+
+- Read `pixijs`, assets, container and text guidance. Inspect supplied screenshots at their native dimensions. Record each state's source and intended action before building transitions. A screenshot proves its visible state, not an unseen interaction or product capability.
+- Read [screen mapping](references/screen-mapping.md) for coordinate and capture rules. Store verified control bounds, cursor targets, crops and callout anchors in `production/` so they can be reviewed.
+- Move the cursor toward the actual target, pause for recognition, show the interaction, then reveal its resulting state. Use a next screenshot or an authored state transition only when the outcome is supported. Identify invented interfaces as conceptual in the film or surrounding context as appropriate.
+- Parent the screen, target markers and interaction effects to the same transformed container. If callouts stay in screen space, derive their anchors through the same transform. Limit zoom by source resolution and legibility; obtain better source images when enlargement becomes soft.
+- Place callouts beside the relevant control, keeping the control, pointer and important UI copy unobstructed. Recalculate placement for aspect-ratio or language changes.
+- Use focus masks, cropped detail views, restrained pans and state-to-state matches. Device frames and cursor effects are optional treatments selected through the brief.
+- Recreate simple conceptual components in PixiJS for editable labels and state transitions. AnimaGuru can provide supporting assets or narration; do not generate fake screenshots of a real product and present them as actual UI.
+- Ensure screenshots and recordings are approved for inclusion. Redact private information before placing media in `public/assets/`, which is included in HTML5 exports.
+- Register real screens, cursor intervals and callouts in the resource timeline. Keep interactions deterministic; playback demonstrates the recorded sequence rather than calling a live application.
+
+## Review and completion
+
+Follow `animaguru-video` for audio and export. Inspect the frame immediately before and after every click; verify the target, focus mask and resulting state. Check callouts at mobile size and replay/backward seeking. Deliver the source-to-canvas coordinate map, readable screen assets and working HTML5 film; export MP4 when requested.
+
+## Additional visual treatments
+
+Read [the material and motion variants](references/variants.md) when the brief calls for a specialized treatment. Choose the relevant recipe without imposing its example story.

package/skills/animaguru-interface-motion/references/screen-mapping.md

@@ -0,0 +1,16 @@
+# Screen mapping
+
+Record a map for each screen: source path, intrinsic width/height, displayed crop, placement, scale, control bounds, target center, resulting state and callout text. Coordinates must name their space: intrinsic screenshot pixels, crop-local pixels or film pixels.
+
+For an unrotated crop whose intrinsic top-left is `(cropX, cropY)`, a uniform scale `s` and film placement `(left, top)`, the target is:
+
+```
+filmX = left + (sourceX - cropX) * s
+filmY = top  + (sourceY - cropY) * s
+```
+
+Account for letterboxing when fitting an image into a frame. CSS dimensions and device pixel ratio are not intrinsic screenshot coordinates. A normalized target `(u, v)` maps to `(u * sourceWidth, v * sourceHeight)` before cropping and projection. For rotated or nested containers use the actual scene transform; do not manually duplicate only some of its operations.
+
+Inspect the target over the screenshot at output resolution. Save its control bounds as well as the click point to make the target easy to audit. When cropping or panning changes, verify the target remains visible and inside its control. Derive click ripples and focus masks from the same target data.
+
+For recordings, await decoded frames on seek as required by the shared capture API. Use the recording's actual cursor or an authored replacement consistently. Hide duplicate cursors. Keep every screen and annotation inside the Pixi canvas so both HTML5 and MP4 show the same sequence.

package/skills/animaguru-interface-motion/references/variants.md

@@ -0,0 +1,17 @@
+# Interface motion variants
+
+Choose one coherent treatment from the brief; these are visual/motion recipes, not mandatory stories. They apply to Explainer, Advertisement and General Video.
+
+## Continuous component morph
+
+Represent each UI state with the same semantic outer component. Evaluate size, radius and position from absolute time; use closed-form springs with explicit start states. Give incoming/outgoing content separate masks and time windows so copy cannot overlap. A stretched tab indicator can use independently timed edges while a drag derives value from the cursor position.
+
+## Mascot in the interface
+
+Use an original mascot and measured Pixi layout anchors. Its feet, eye target and cursor interaction follow the actual screen component geometry. Preserve real labels and show supported resulting states; a mascot does not justify inventing product features.
+
+## Liquid-glass accents
+
+Treat refraction/displacement as an optional bounded render-texture effect over prepared content. Keep essential UI copy sharp, describe the 2D effect accurately, and budget texture size. Do not introduce true-3D claims or flatten an entire screen through blur.
+
+Use the bundled absolute-time helpers in `src/studies/timing.ts` where appropriate. Keep actual resources and cues in the timeline, then inspect cold seeks, full-speed motion and exported frames. The shared video skill governs interviews, generation scope and delivery.

package/skills/animaguru-isometric-worlds/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-isometric-worlds
+description: Build dimensional isometric scenes with assembling objects, connected stations and controlled depth. Use for the Isometric Worlds visual style in an AnimaGuru video workspace.
+---
+
+# Isometric Worlds
+
+Compose a small dimensional world using a consistent parallel projection. Objects, architecture, machines or abstract blocks can all carry the user's message. Story and audience come from the Explainer, Advertisement or General Video brief.
+
+## Establish the direction
+
+Follow the sibling `animaguru-video` category → style → quick interview flow for new films. Reuse supplied choices and briefs; honor an explicit request to skip the interview. Share [the style preview](https://animaguru.com/animation-styles#isometric-worlds). Add missing visual choices to the shared interview:
+
+- Abstract blocks, miniature environments, product components, or supplied illustrations?
+- Flat geometric surfaces or textured illustration? What palette and level of detail?
+- Is the camera largely fixed, or should it travel across connected areas?
+
+## Design and build
+
+- Read `pixijs`, graphics and scene-container guidance. Define a common world grid and projection before positioning assets. A useful basis is screenX = originX + (x − y) × tileWidth / 2 and screenY = originY + (x + y) × tileHeight / 2 − z × heightScale. Choose the ratio for the desired projection and use it throughout.
+- Author simple blocks, platforms and paths in graphics. AnimaGuru `vector` or `painted` assets can supply more detailed objects with a clearly specified matching view. There is no dedicated isometric preset in the current catalog; inspect available styles and reference imports rather than inventing a style ID.
+- Maintain the same visible faces, vanishing directions and lighting across assets. Place object pivots at ground contact points. Labels normally remain screen-aligned for legibility.
+- Plan occlusion from the world coordinates. Sorting by ground depth is a useful starting point; wide overlapping objects may need separate front/back layers or explicit ordering. A single sprite cannot resolve every interpenetration correctly.
+- Animate blocks rising, components assembling, paths revealing and markers travelling between anchors. Keep a marker attached to the projected path as the camera moves. Hold the receiving element when a connection reaches it.
+- Use scaled or translated scene containers for controlled camera travel. Full camera orbits require additional views or a 3D approach and should not be promised from one flat illustration.
+- Reserve readable space for labels and cues. Detail should survive the target viewing size. Use anchored contact shadows when they clarify depth.
+- Drive all world positions, camera motion, depth decisions and connector progress from the absolute timeline; register real scene resources and intervals.
+
+## Review and completion
+
+Use `animaguru-video` for audio, records and exports. Check every connection, ground contact, occlusion and camera extreme. Inspect each assembled state at mobile size and verify labels never obscure the event they explain. Deliver a consistent projection, readable motion and the working HTML5 film; export MP4 when requested.
+
+## Additional visual treatments
+
+Read [the material and motion variants](references/variants.md) when the brief calls for a specialized treatment. Choose the relevant recipe without imposing its example story.

package/skills/animaguru-isometric-worlds/references/variants.md

@@ -0,0 +1,17 @@
+# Cutaways and focus/context
+
+Choose one coherent treatment from the brief; these are visual/motion recipes, not mandatory stories. They apply to Explainer, Advertisement and General Video.
+
+## Cut line before opening
+
+Represent the removable skin separately from the interior. Draw the cut boundary, move the skin along its normal, then reveal a hatched rim. Parts, camera and callout anchors share a single projection.
+
+## Tracked inset and emphasis
+
+A leader grows from a known part anchor before an inset opens. Retain context with selective desaturation instead of blurring everything except the subject. Composite objects need ordered depth groups; overhangs may require explicit depth bias.
+
+## Geometry review
+
+Check outward face orientation, painter sorting and valid interior coverage. A supposedly solid moving object should not become transparent merely to avoid occlusion. Keep quantities and diagram conventions grounded in the source.
+
+Use the bundled absolute-time helpers in `src/studies/timing.ts` where appropriate. Keep actual resources and cues in the timeline, then inspect cold seeks, full-speed motion and exported frames. The shared video skill governs interviews, generation scope and delivery.

package/skills/animaguru-kinetic-typography/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-kinetic-typography
+description: Build type-led animated videos with phrase choreography, editable text, and speech or music synchronization. Use for the Kinetic Typography visual style in an AnimaGuru video workspace.
+---
+
+# Kinetic Typography
+
+Make typography carry the image, hierarchy and movement. This style works with Explainer, Advertisement and General Video briefs; the user's subject, audience and message determine the story.
+
+## Establish the direction
+
+Follow the sibling `animaguru-video` skill's category → style → quick interview flow before a new production. Reuse explicit choices and completed briefs; honor a request to skip the interview. Share [the style preview](https://animaguru.com/animation-styles#kinetic-typography). Include these unanswered visual questions in the shared interview:
+
+- Should motion follow an existing voice recording, newly generated narration, music, or silent reading?
+- Which typeface, brand colors and level of energy should lead the film? Which words deserve emphasis?
+- Should the composition feel editorial and restrained, bold and poster-like, or playful and expressive?
+
+## Design and build
+
+- Read the installed `pixijs` router and text skill. Keep words as editable text, with locally bundled licensed fonts and glyph coverage for each language. Wait for fonts before measuring or capturing.
+- Group copy into readable phrases. Choose a few distinct emphasis levels through weight, scale, color or placement. Let key words hold long enough to read; do not make every word compete for attention.
+- Use a consistent motion vocabulary: masked phrase reveals, aligned slides, tracking changes, scale emphasis, and layout changes that preserve a visual anchor. Select techniques to suit the brief rather than applying every effect.
+- Measure final text and wrap by language and output dimensions. Store each phrase's final layout before animating it. Avoid animating font size and rebuilding text textures every frame; transform containers or individual prebuilt glyphs instead. Preserve kerning and joined scripts when splitting text.
+- If recorded speech exists, obtain and verify phrase/word timings from the actual recording. A transcript or TTS text alone does not provide alignment. Save cue times with text, language and audio source in `production/`; flag estimated timing until checked by listening.
+- If speech does not exist, choose deliberate reading holds or musical beats. Do not imply word-level audio synchronization for silent or unaligned material.
+- Use AnimaGuru for authorized speech, music or supporting texture assets when helpful; read its sibling skill and current catalog first. Typography and geometric accents can be authored directly.
+- Evaluate animation from absolute film time. A backwards seek must restore the same word visibility, emphasis and layout as linear playback. Track phrases and accents in `src/film-resources.ts`.
+
+## Review and completion
+
+Follow `animaguru-video` for the player, records, audio mix and exports. Check longest phrases, transitions, multilingual glyphs, contrast and phone-size legibility. For speech-led word highlighting, target alignment within two output frames and verify against the recording; report any remaining timing uncertainty. Inspect phrase entrances, reading holds and exits, not only attractive stills. Deliver the agreed film with editable localized copy, verified cues and the working HTML5 player; export MP4 when requested.
+
+## Additional visual treatments
+
+Read [the material and motion variants](references/variants.md) when the brief calls for a specialized treatment. Choose the relevant recipe without imposing its example story.

package/skills/animaguru-kinetic-typography/references/variants.md

@@ -0,0 +1,17 @@
+# Typography variants
+
+Choose one coherent treatment from the brief; these are visual/motion recipes, not mandatory stories. They apply to Explainer, Advertisement and General Video.
+
+## Swiss editorial
+
+Build a modular grid and optical hierarchy with one disciplined type system and controlled accent. Snap arrivals to chosen cues using deliberate easing; lines may draw linearly. Grid modules should give words mass, not divide the frame into dozens of tiny labels.
+
+## Structural letterforms
+
+Use actual glyph paths for words that become supports, apertures or surfaces. Keep counters and recognizable forms intact. Unrelated paths need matched edges or occluded handoffs; do not interpolate arbitrary vertices and claim a clean word morph.
+
+## Impact poster and lyric treatment
+
+Use concise word groups, deliberate print offsets and matched masks. A poster impact is an option, not a fixed manifesto. Lyrics align to the actual vocal phrases; speech should remain readable before it becomes geometry. Distinguish phrase cues from musical downbeats.
+
+Use the bundled absolute-time helpers in `src/studies/timing.ts` where appropriate. Keep actual resources and cues in the timeline, then inspect cold seeks, full-speed motion and exported frames. The shared video skill governs interviews, generation scope and delivery.

package/skills/animaguru-miniature-diorama/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: animaguru-miniature-diorama
+description: Build Miniature Diorama visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+---
+
+# Miniature Diorama
+
+Small constructed worlds seen from an elevated angle, with coherent scale, layered focus and controlled miniature activity. 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#miniature-diorama). Fold missing visual questions into the shared interview:
+
+- Should the miniature be photographic or faceted?
+- Which camera range and time-lapse behavior do you want?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Assets or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text and exact numerical geometry belong in authored canvas content.
+
+- Choose an elevated constrained view and consistent scale units. Use prepared depth planes and clearance-aware framing.
+- The 2.5D example has projected geometry and selective plane focus. Free orbit, physical depth of field, real changing shadows and traffic simulation remain deferred.
+- If activity is time-lapsed, sample it separately from camera movement. Keep the focus region tied to the subject rather than a fixed decorative blur stripe.
+
+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 scale, subject visibility and focus placement; foreground occlusion, depth order and camera extremes. 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-miniature-diorama/references/recipe.md

@@ -0,0 +1,23 @@
+# Miniature Diorama production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `miniature-diorama`. 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 -- miniature-diorama`, 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
+
+- Choose an elevated constrained view and consistent scale units. Use prepared depth planes and clearance-aware framing.
+- The 2.5D example has projected geometry and selective plane focus. Free orbit, physical depth of field, real changing shadows and traffic simulation remain deferred.
+- If activity is time-lapsed, sample it separately from camera movement. Keep the focus region tied to the subject rather than a fixed decorative blur stripe.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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.
+
+- [styles/tilt-shift/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/tilt-shift/STYLE.md)
+- [styles/tilt-shift/demo/post.js](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/tilt-shift/demo/post.js)
+- [styles/lowpoly-island/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/lowpoly-island/STYLE.md)

package/skills/animaguru-painterly-depth-animation/SKILL.md

@@ -0,0 +1,35 @@
+---
+name: animaguru-painterly-depth-animation
+description: Build layered animated scenes from painterly artwork, textured planes and atmospheric depth. Use for the Painterly Depth Animation visual style in an AnimaGuru video workspace.
+---
+
+# Painterly Depth Animation
+
+Bring brush-textured artwork into motion through composed depth, atmosphere and selected performances. The user's Explainer, Advertisement or General Video brief determines subject, emotional tone and story; this style supports many settings and audiences.
+
+## Establish the direction
+
+Follow the sibling `animaguru-video` category → style → quick interview flow for new films. Reuse supplied choices and completed briefs; honor an explicit request to skip the interview. Share [the style preview](https://animaguru.com/animation-styles#painterly-depth-animation). Include missing visual choices in the shared interview:
+
+- What painting medium and references fit the film: gouache, watercolor, textured digital paint or another treatment?
+- What palette, lighting and atmosphere support the brief?
+- Should scenes feel like moving illustrations, a travelling layered environment, or character performances within painted settings?
+
+## Design and build
+
+- Read `animaguru` and inspect its current `painted` style and asset models. Available image tools can create supporting layers when appropriate. Specify consistent brush scale, lighting, perspective and palette across generated or supplied art.
+- Plan foreground, subject, middle and distant planes before asset generation. Request or create enough overscan for the intended camera movement. A single finished painting does not contain the background hidden behind a removed subject; prepare that missing area before moving layers apart.
+- Read `pixijs`, assets, container and sprite guidance. Build a depth stack with clear overlap and transform origins. Keep brush texture attached to its surface; global moving noise is not a substitute for painted material.
+- Derive camera offset and per-plane parallax from absolute time. Choose motion amplitude from the available overscan, not arbitrary speed. Confirm that layer edges and transparent holes never become visible.
+- Use restrained shape deformation only where the material supports it, such as foliage or fabric. Rigid objects should retain their form. Generated performance clips can supply organic movement; preserve character identity and match their paint treatment to the scene.
+- Build atmospheric depth with value, color temperature, haze and selective softness. Avoid blurring the entire image or washing out text. Keep any grain stable and proportionate to the viewing size.
+- Reveal scenes through foreground occlusion, brush-like masks, changing light or a composed cut. Texture reveals should expose a complete composition rather than obscure the message throughout the scene.
+- Keep important text editable in the canvas, with quiet areas or backing shapes for legibility. Record every actual plane, performance and audio resource in the shared timeline.
+
+## Review and completion
+
+Follow `animaguru-video` for production records, audio and exports. Inspect camera extremes, disoccluded areas, edge halos, texture scale and lighting consistency. Check full-speed playback for texture swimming and arbitrary seeks for stable atmospherics. Deliver prepared local layers, intentional depth motion and the working HTML5 film; export MP4 when requested.
+
+## Additional visual treatments
+
+Read [the material and motion variants](references/variants.md) when the brief calls for a specialized treatment. Choose the relevant recipe without imposing its example story.

package/skills/animaguru-painterly-depth-animation/references/variants.md

@@ -0,0 +1,17 @@
+# Painting material recipes
+
+Choose one coherent treatment from the brief; these are visual/motion recipes, not mandatory stories. They apply to Explainer, Advertisement and General Video.
+
+## Watercolor and ink wash
+
+Prepare stroke geometry or masks with pressure, wetness and dry edges. Coverage multiplies onto paper; reveal structure before detail. Cache completed objects and keep dry-brush gaps stable along normalized stroke length. A moving painting and a procedural stroke engine are different production choices.
+
+## Crayon and wax resist
+
+Anchor paper tooth to the page, with wax coverage or hatching in surface space. A white-wax reserve appears as a wash passes over it. Restrict line boil to intended drawn content and keep camera/light motion smooth.
+
+## Impasto and pen/wash
+
+For thick-paint effects, use value-planned shapes and strokes with consistent raking light; prepared texture relief is a 2D approximation. For pen/wash, ink arrives in stroke order and pigment blooms through a seeded arrival mask; wash edges follow actual silhouettes, not bounding rectangles.
+
+Use the bundled absolute-time helpers in `src/studies/timing.ts` where appropriate. Keep actual resources and cues in the timeline, then inspect cold seeks, full-speed motion and exported frames. The shared video skill governs interviews, generation scope and delivery.

package/skills/animaguru-paper-popup/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: animaguru-paper-popup
+description: Build Paper Pop-up visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+---
+
+# Paper Pop-up
+
+Hinged cardstock pieces, visible fronts and backs, fold mechanisms and layered paper stages in constrained perspective. 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#paper-popup). Fold missing visual questions into the shared interview:
+
+- What kind of paper mechanism fits: page, package, card or stage?
+- Which viewing angle and amount of depth do you want?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Assets or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text and exact numerical geometry belong in authored canvas content.
+
+- Prepare the front, back, hinge line and hidden area of every folding piece. Keep material texture attached during the fold.
+- Use Pixi meshes or projected vertices for a constrained 2.5D mechanism; real curling pages, free camera travel and physical cast shadows remain deferred.
+- Fold pieces in an order that preserves their clearance. Rigid paper may hinge and flex along authored folds; it should not behave like rubber.
+
+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 hinge attachment, backs and edge-on states; layer clearance and fold order at transition boundaries. 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-paper-popup/references/recipe.md

@@ -0,0 +1,22 @@
+# Paper Pop-up production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `paper-popup`. 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 -- paper-popup`, 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
+
+- Prepare the front, back, hinge line and hidden area of every folding piece. Keep material texture attached during the fold.
+- Use Pixi meshes or projected vertices for a constrained 2.5D mechanism; real curling pages, free camera travel and physical cast shadows remain deferred.
+- Fold pieces in an order that preserves their clearance. Rigid paper may hinge and flex along authored folds; it should not behave like rubber.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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.
+
+- [styles/paper-popup/STYLE.md](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/paper-popup/STYLE.md)
+- [styles/paper-popup/demo/book.js](https://github.com/lemomo-ai/lemo-opuscar/blob/b65efe6ea393fdc71212898ea4c57c754cfefa46/styles/paper-popup/demo/book.js)

package/skills/animaguru-photo-footage-editorial/SKILL.md

@@ -0,0 +1,29 @@
+---
+name: animaguru-photo-footage-editorial
+description: Build Photo & Footage Editorial visuals and motion in an AnimaGuru PixiJS video workspace. Use when this visual style is chosen for an explainer, advertisement or general video.
+---
+
+# Photo & Footage Editorial
+
+Purposeful media frames, filmstrips and contact-sheet layouts with selective focus and continuous framing relationships. 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#photo-footage-editorial). Fold missing visual questions into the shared interview:
+
+- Which real media is available and what must stay inside each crop?
+- Should the edit feel calm, rhythmic or tightly cut?
+
+## Build the look and movement
+
+Read `pixijs` and the relevant Graphics, Text, Container, Assets or Mesh skills. Read `animaguru` before generating assets; discover current models and estimates, respect the user's budget, and reuse completed media. Essential text and exact numerical geometry belong in authored canvas content.
+
+- Use local supplied or generated media and one crop model for thumbnail-to-hero transitions. Important faces, product labels and controls guide crop choices.
+- Await decoded video frames before resolving renderFrame. Large image sequences are optional and can make HTML5 packages impractical.
+- Use a timeline trim/source-time contract for footage, not an independent live video clock. The bundled study uses original illustrated cards as stand-ins; replace them with real media for a real-product film.
+
+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 crop safety, decoded frame correctness and audio choice; nested-path/iframe playback and total export size. 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-photo-footage-editorial/references/recipe.md

@@ -0,0 +1,23 @@
+# Photo & Footage Editorial production recipe
+
+The workspace includes an executable original study in `src/studies/scenes.ts`, selected with `photo-footage-editorial`. 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 -- photo-footage-editorial`, 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
+
+- Use local supplied or generated media and one crop model for thumbnail-to-hero transitions. Important faces, product labels and controls guide crop choices.
+- Await decoded video frames before resolving renderFrame. Large image sequences are optional and can make HTML5 packages impractical.
+- Use a timeline trim/source-time contract for footage, not an independent live video clock. The bundled study uses original illustrated cards as stand-ins; replace them with real media for a real-product film.
+
+The study is silent, original procedural art. Photographic studies use illustrated media cards and product studies use an illustrative object; replace these with actual supplied/generated assets for production. It demonstrates material, transforms and layout rather than proving real product claims. 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/twoclipping-000267.md](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/3d54892e2ae5b0e8d337171e6508bba4cec01ab8/prompts/twoclipping-000267.md)
+- [prompts/twoclipping-496100.md](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/3d54892e2ae5b0e8d337171e6508bba4cec01ab8/prompts/twoclipping-496100.md)
+- [prompts/bilimfili1-459762.md](https://github.com/yihui-dev/awesome-opus5-5-videos/blob/3d54892e2ae5b0e8d337171e6508bba4cec01ab8/prompts/bilimfili1-459762.md)

package/skills/animaguru-pixel-art-animation/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: animaguru-pixel-art-animation
+description: Build animated videos using crisp pixel assets, limited palettes, sprite timing and tile-based scenes. Use for the Pixel Art Animation visual style in an AnimaGuru video workspace.
+---
+
+# Pixel Art Animation
+
+Create a deliberate pixel grid and movement language. The user's Explainer, Advertisement or General Video brief supplies the story, mood and audience; retro game references are optional.
+
+## Establish the direction
+
+Follow the sibling `animaguru-video` category → style → quick interview flow before new production. Reuse supplied choices and briefs; honor an explicit request to skip the interview. Share [the style preview](https://animaguru.com/animation-styles#pixel-art-animation). Include missing visual choices in the shared interview:
+
+- What pixel density, palette and reference era or contemporary treatment fit the project?
+- Which characters, objects, environments or interface elements are needed?
+- Should movement be tightly stepped or smoother while preserving crisp pixels? Should text be pixel-styled or clean editorial type?
+
+## Design and build
+
+- Read `animaguru` and use its current `pixel` style for generated artwork when useful. Keep subject scale, outline thickness and palette consistent across assets. An image that merely resembles pixels may still contain inconsistent cell sizes; inspect the actual result.
+- Read `pixijs`, assets, sprite and text guidance. Choose a logical scene resolution from the delivery dimensions and desired pixel size. Prefer integer enlargement in the final export; plan padding or composition if dimensions do not divide cleanly.
+- Use nearest-neighbor texture sampling for pixel assets. Preserve that choice on spritesheet textures, render textures and any intermediate buffers. Avoid smoothing at one hidden compositing step.
+- Quantize positions in logical coordinates, including camera transforms. Applying rounded sprite positions while a parent moves fractionally still causes shimmer. Make deliberate exceptions for typography or effects only when the brief supports them.
+- Use pixel-aligned masks and transitions. Arbitrary rotation, skew and noninteger scale change the pixel grid; use authored directional frames or deliberate grid-snapped transformations when crispness matters.
+- Set sprite pose cadence independently of the delivery fps. Compute the selected pose from absolute time; respect holds, event timing and loop boundaries. Do not advance animated sprites on a separate uncontrolled ticker during export.
+- Use local bitmap fonts or an appropriately rendered font with sufficient glyph coverage. Keep labels readable at phone size and reconsider dense wording instead of shrinking it into noise.
+- Treat palette cycling, tile reveals and pixel wipes as optional transition tools. Seed particles once, snap them to the grid and keep visual noise subordinate to the subject.
+- Register actual spritesheets, backgrounds, text and effects in the resource timeline. Keep essential words and numbers authored rather than baked into generated artwork.
+
+## Review and completion
+
+Follow `animaguru-video` for audio and export. Inspect at 100% and integer magnification for blurred edges, inconsistent pixel size, atlas bleed and camera shimmer. Play full motion and test loops plus arbitrary seeks. Deliver coherent pixel assets, explicit logical/output dimensions and a working HTML5 film; export MP4 when requested.
+
+## Additional visual treatments
+
+Read [the material and motion variants](references/variants.md) when the brief calls for a specialized treatment. Choose the relevant recipe without imposing its example story.