git:20261022.3e8ec15 to git:20261024.ae6bc46

6 added, 5 removed. Audit A to A.

---

name: mografy

description: Develop Mografy, plan storyboards, create and export Canvas animations, and compress oversized exported videos with the bundled Python helper. Use for Mografy repository work, scene projects with mografy.json, storyboards, and smaller video files for sharing.

---

# Mografy

Calibration note from the maintainer's current experience: Claude's workflow is more fully calibrated. Codex may adapt its motion-design approach to the brief and rendered results while following the shared scene contract.

For scene work, read the project's `mografy.json`, configured scene entry, imported local modules, and relevant assets before making changes. If the project has `style.md`, read it first: it records the project's design and motion decisions and takes precedence over this Skill's default design guidance, though never over the scene contract (see Project style in the scene-authoring reference). For a requested 9:16 video, create a native portrait scene (1080 × 1920), respect any saved `aspectRatio`, and plan vertical layout and social safe margins. The main preview follows the scene; orientation icons and Fit belong only to export. Read the scene-authoring reference for the full contract. Tailor the work to that project's visual language and brief.

- Before editing a scene, read [references/scene-authoring.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/scene-authoring.md) for the complete runtime, drawing, validation, review, and export contract.

- In Codex, before creating an animation or redesigning its motion, read [references/codex-motion-design.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/codex-motion-design.md) for visual concepts, causal choreography, rhythm, continuity, and separate design review. For a small local fix, apply only the relevant guidance. Claude keeps the existing shared workflow and skips this Codex supplement.

- For a storyboard or a new animation that needs shot planning, read [references/storyboard.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/storyboard.md). Codex uses image generation; Claude uses Artifacts when available, with an explicit local HTML fallback in Claude Code.

- When creating an animation, choosing storyboard motifs, or reusing examples, read [references/built-in-components.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/built-in-components.md) for the sixteen scene components and [references/intro.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/intro.md) for the existing twelve-second intro. Inspect the relevant original scene code before adapting it.

- - For a film-style sequence built from stills or key art (camera moves, transitions such as sakura petal wipes, atmosphere), read [references/camera-transitions.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/camera-transitions.md) and add the optional `cinema.ts` extra to the project.

- - For Chinese or Japanese copy, vertical text (tategaki), or CJK line breaking, read [references/cjk-typography.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/cjk-typography.md) and add the optional `cjk.ts` extra and CJK fonts to the project.

- - For real 3D (objects that turn and catch light, product or device models, orbiting cameras, depth), read [references/three-d.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/three-d.md) and add the optional `three.ts` extra and Three.js bundle to the project.

- - When the film needs music and the user has no track, or asks for music that fits the film, read [references/music.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/music.md): write the film's context as `music.json` cues and generate a matching score with the optional `score.py` extra.

+ - For a film-style sequence built from stills or key art (camera moves, transitions such as sakura petal wipes, atmosphere), read [references/camera-transitions.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/camera-transitions.md) and add the optional `cinema.ts` extra with `mografy add cinema <project>`.

+ - For Chinese or Japanese copy, vertical text (tategaki), or CJK line breaking, read [references/cjk-typography.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/cjk-typography.md) and add the optional `cjk.ts` extra and CJK fonts with `mografy add cjk <project>`.

+ - For real 3D (objects that turn and catch light, product or device models, orbiting cameras, depth), read [references/three-d.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/three-d.md) and add the optional `three.ts` extra and Three.js bundle with `mografy add three <project>`.

+ - When the film needs music and the user has no track, or asks for music that fits the film, read [references/music.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/music.md): write the film's context as `music.json` cues and generate a matching score with the optional `score.py` extra (`mografy add music <project>`).

+ - For a film made from a real app's screens (product demo or launch ad, feature explainer or tutorial, what's-new short, mobile app preview, social cut-down, landing-page loop), or when the user asks to redraw a UI, simplify it, or film only the interactions (重繪、介面簡化、只拍操作細節), read [references/product-walkthrough.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/product-walkthrough.md) and add the optional `walkthrough.ts` extra with `mografy add walkthrough <project>`.

- When the user asks for slides, a presentation (簡報), Present mode, or to mark shots, read [references/presentations.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/presentations.md): read the scene files and `mografy.json`, mark `meta.shots` with settled stop frames, then check and review the slides sheet.

- For new motion or animation polish, read [references/animation-principles.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/animation-principles.md) and apply the relevant principles.

- When an exported video is too large or the user asks to compress it, read [references/video-compression.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/video-compression.md) and run the bundled `scripts/compress-video.py` on the finished file. Preserve the original, check the reported size, and review the compressed result.

- When developing Mografy itself, read [references/project.md](https://github.com/zz41354899/mografy/blob/main/.agents/skills/mografy/references/project.md) for the GitHub sources and required checks. Inspect the current checkout's local files before editing.

- Animation content belongs only in scene modules, never in `mografy.json`. Render synchronously from absolute `time`, resolved params, and prepared assets; do not use GSAP, SVG scene layers, resvg, clocks, or previous-frame state. Scene code executes only in the browser. Write plans and prompts in English; preserve supplied copy unless translation is requested.

+ Animation content belongs only in scene modules, never in `mografy.json`. Build motion from the helpers in `@mografy/runtime` (`at`, `win`, `spring`, `springs`, `settle`, `tempoGrid`, `roundRect`, `surface`, `riseWords`, `blurWords`, the `ctx.draw` gradients) instead of re-implementing curves, springs and text reveals in each project. Render synchronously from absolute `time`, resolved params, and prepared assets; do not use GSAP, SVG scene layers, resvg, clocks, or previous-frame state. Scene code executes only in the browser. Write plans and prompts in English; preserve supplied copy unless translation is requested.

For scene changes, run `mografy check [project]`, then `mografy review [project]` and inspect the generated PNGs before delivery. A generated storyboard is a concept reference; validate the actual scene separately. Export with `mografy export [project] --format mp4|webm|lottie|svga` when requested.