{"id":"5ad9d2c0-cfb0-4258-b044-4fd2fad8420e","slug":"mograph","kind":"skill","name":"mograph","summary":"A Claude skill + plugin that makes cinematic, music-synced motion-graphics explainer films for technical ideas, rendered frame by frame to 60 fps MP4.","owner":"Atharva2628","repoUrl":"https://github.com/Atharva2628/mograph","license":"MIT","licenseTier":"permissive","trust":"community","stars":1,"match":null,"fewStars":true,"format":"skill","createdAt":"2026-10-13T03:07:16.000Z","addedAt":"2026-10-21T11:47:06.487Z","logoUrl":"https://avatars.githubusercontent.com/u/85646821?u=ac357500f1c48fb54ad292ffee0fedb4ed618931&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","developer-tools"],"tags":["claude-code","explainer-video","isometric","motion-graphics"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-21T12:39:13.609Z","sample":false,"url":"https://conduits.dev/tools/mograph","language":"JavaScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"<h1 align=\"center\">mograph</h1>\n\n<p align=\"center\"><b>A Claude skill that makes cinematic, music-synced motion-graphics films about technical things.</b><br>Patents, engines, products and pitches, in a crafted isometric look, rendered frame-by-frame to 60 fps MP4.</p>\n\n<p align=\"center\">\n  <a href=\"https://code.claude.com/docs/en/skills\"><img src=\"https://img.shields.io/badge/Claude_Code-skill_%2B_plugin-1b1b19?style=flat-square&logo=claude&logoColor=white\" alt=\"Claude Code skill and plugin\"></a>\n  <a href=\"https://agentskills.io\"><img src=\"https://img.shields.io/badge/Agent_Skills-compatible-1b1b19?style=flat-square\" alt=\"Agent Skills compatible\"></a>\n  <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-1b1b19?style=flat-square\" alt=\"MIT license\"></a>\n  <a href=\"#requirements\"><img src=\"https://img.shields.io/badge/output-1080p60_MP4-1b1b19?style=flat-square\" alt=\"1080p60 MP4\"></a>\n</p>\n\n<p align=\"center\">\n  <img src=\".github/assets/frame-02.jpg\" width=\"49%\" alt=\"Air defense: a missile truck on a dark terrain block under a cyan radar dome; a callout reads BOOSTER HUNG and a banner reads BOOSTER FAILED TO SEPARATE.\">\n  <img src=\".github/assets/frame-08.jpg\" width=\"49%\" alt=\"A single-stage capsule with a US flag decal climbing over the curve of the Earth, beside BEAT THE TYRANNY OF THE ROCKET EQUATION and a live altitude readout.\">\n</p>\n\n<p align=\"center\"><sub>From <code>examples/vase-film</code>, a 3-minute investor film for US 12,173,671 B2, made with this skill.</sub></p>\n\n## The film\n\n<p align=\"center\">\n  <a href=\"examples/vase-film/video/VASE-Propulsion-US12173671.mp4\"><img src=\".github/assets/teaser.gif\" width=\"80%\" alt=\"A 20-second teaser of the VASE Propulsion film: the hook, a launch failure, the logo reveal, the gas column, liftoff, the climb to orbit, the terrain-weaving missile and the end card.\"></a>\n</p>\n\n<p align=\"center\"><sub><a href=\"examples/vase-film/video/VASE-Propulsion-US12173671.mp4\"><b>▶ Watch the full film</b></a> (3:09, with sound; the teaser above is 20 s and silent). Every frame was drawn in code with this skill's kit.</sub></p>\n\n---\n\nAsk Claude for an explainer film and mograph has it work like a motion designer. First it finds the truth (the claims, the numbers, the real events with real dates). Next it maps the song you give it: the silences, quiet stretches, drops and kicks. Then it hangs a story on that structure: the shock on the energetic intro, the explanation on the quiet part, the reveal on the drop, the countdown on the breakdown, and the end card held through the final silence.\n\nEvery frame is drawn in code by one isometric renderer, so a rocket, a desk lamp and a mountain range all share the same camera and shading. Scenes switch worlds to fit what they show: bright commercial skies, black-ops night vision, dark tactical terrain, paper engineering figures, a warm desk for the founder's story. A headless Chrome seeks the page one frame at a time and pipes it into ffmpeg with a continuous soundtrack and synthesized sound effects.\n\n## Quick start\n\n```sh\nnpx skills add Atharva2628/mograph -g -a claude-code\n```\n\nOr as a Claude Code plugin:\n\n```text\n/plugin marketplace add Atharva2628/mograph\n/plugin install mograph@mograph\n```\n\nThen, in Claude Code:\n\n```text\n/mograph make a 90-second investor film for my patent, set to track.mp3\n```\n\n## Gallery\n\n<table>\n  <tr>\n    <td><img src=\".github/assets/frame-01.jpg\" alt=\"A white two-stage rocket climbing through cel-shaded clouds; a red banner reads SECOND STAGE FAILED TO IGNITE and a blinking callout reads NO IGNITION.\"></td>\n    <td><img src=\".github/assets/frame-03.jpg\" alt=\"A warm isometric desk with a notebook sketch, a lamp, a mug and books, beside the line I WAS 16 WHEN I SKETCHED MY FIRST ROCKET NOZZLE.\"></td>\n  </tr>\n  <tr>\n    <td><img src=\".github/assets/frame-04.jpg\" alt=\"An aerospike contour drawn in red sweeping 360 degrees around a dashed axis into a bell, on a test stand, beside the line MY FIRST IDEA: A BELL-AEROSPIKE HYBRID.\"></td>\n    <td><img src=\".github/assets/frame-05.jpg\" alt=\"The VASE Propulsion mark, an upside-down vase with an orange spike through it, revealed on a dark background.\"></td>\n  </tr>\n  <tr>\n    <td><img src=\".github/assets/frame-06.jpg\" alt=\"An embedded interactive patent figure zoomed into the main inlets, beside the heading MAIN INLETS 106 to VORTEX 114 with highlighted keywords.\"></td>\n    <td><img src=\".github/assets/frame-07.jpg\" alt=\"Two live copies of the patent figure side by side, sea level and 64 km, with THICK AIR and THIN AIR explanations between them.\"></td>\n  </tr>\n  <tr>\n    <td><img src=\".github/assets/frame-09.jpg\" alt=\"A missile weaving through a dark contour-lined mountain range under red radar domes, beside a panel reading HARDER TO DETECT.\"></td>\n    <td><img src=\".github/assets/frame-10.jpg\" alt=\"The end card: the VASE Propulsion lockup, ONE ENGINE. ONE STAGE. ANY ALTITUDE., licensing chips and the dark patent figure.\"></td>\n  </tr>\n</table>\n\n## What it makes\n\n- **Full films** from 20 seconds to several minutes, 1920×1080 at 60 fps, with a music-only cut alongside.\n- **Worlds per scene:** `sky`, `tac`, `nv`, `paper`, `warm` themes with matching HUDs.\n- **Dense isometric models:**\n  - **Vehicles:** rigid-part vehicles that separate, tumble and land.\n  - **Places:** launch complexes, trucks, submarines in cut-away seas, desks and props.\n  - **Terrain:** blocks with contour lines and cut-away strata.\n- **Effects:** fluffy cel-shaded explosions with halftone and misregistered print layers, cel flames with shock diamonds, smoke trails, impact frames and dot wipes.\n- **Words that read:** headlines that pop, narration that types with `*keyword*` highlighting, failure banners and callouts placed where the eye already is.\n- **Live figures:** embed your own interactive figure as an iframe, drive its API frame by frame, and zoom into its parts.\n- **Sound:** a song map, pitch-kept stretching only across silences, and synthesized effects with ducking. It never chops the music.\n\n## How it works\n\n1. `scripts/analyze_music.py` maps the song.\n2. You (Claude) storyboard on that map, budgeting reading time per line.\n3. You write one function per scene in `film.js`, using `kit/` (`core.js`, `models.js`, `fx.js`). `kit/host.js` runs the page.\n4. `scripts/render.mjs --stills … --sheet` renders contact sheets for review after every act; `scripts/smooth.mjs` checks that flying things don't jitter.\n5. `scripts/score.py` builds the soundtrack; `scripts/sfx.py` adds the effects.\n6. `scripts/render.mjs --out film.mp4 --audio final.wav` renders the film.\n\nThe full method is in [SKILL.md](SKILL.md). The lessons behind it, from five rounds of real feedback, are in [references/lessons.md](references/lessons.md).\n\n## Examples\n\n| Example | What it shows | Runs with |\n|---|---|---|\n| [`examples/demo`](examples/demo) | 24 s: a hook, a failure shot, an explainer, a silence, a liftoff on the drop, a terrain weave, an end card | nothing: the beat is generated |\n| [`examples/vase-film`](examples/vase-film) | the 3:09 VASE Propulsion film, with an embedded live patent figure ([watch it](examples/vase-film/video/VASE-Propulsion-US12173671.mp4)) | your own soundtrack |\n\n```sh\nnpm install\nnpm run demo:beat\nnpm run demo:stills\npython3 scripts/score.py --in examples/demo/beat.wav --out examples/demo/score.wav --end 24 --stretch 0:12.2:0.9\npython3 scripts/sfx.py --score examples/demo/score.wav --cues examples/demo/cues.json --out examples/demo/final.wav\nnpm run demo:render\n```\n\n## Requirements\n\n- Node 18+ and `npm install` (one dependency: `playwright-core`)\n- A Chrome or Chromium (`npx playwright install chromium`, or set `CHROME=/path/to/chrome`)\n- ffmpeg on PATH\n- Python 3 with `numpy` and `scipy`\n- Optional: [Rubber Band](https://breakfastquay.com/rubberband/) (`brew install rubberband`) for clean pitch-kept stretching\n\n## Limits\n\n- The skill can't listen. It verifies levels, joins and durations numerically and asks you to listen through the joins.\n- Rendering is real time or slower: a 3-minute film takes 10–20 minutes at 1080p60.\n- Models are stylized and isometric. Numbers on screen come from your sources, and anything invented is labelled illustrative.\n\n## License\n\nMIT. The example film's subject matter, brand and patent figure belong to their owner and are included to show the method.\n"}