Agentic Motion Graphics — Development skill for Claude Code

🎬 Agentic Motion Graphics (Code-to-Video Pipeline)

**Autonomous studio-grade motion graphics and programmatic video generation for Claude Opus 5.5, Claude Code, and autonomous AI agents.** *Inspired by Moritz Kremb's viral workflow: "Opus 5.5 solved motion graphics".*

[](LICENSE) [](https://github.com/heygen-com/hyperframes) [](https://greensock.com/gsap/) [](https://github.com/openai/whisper)

📖 **[点击查看 5 大商业视频案例实录与截图分析文档 →](./docs/case_study.md)**

---

💡 The Core Philosophy: "Videos are Code, Not Edited Footage"

Traditional AI video generation relies heavily on diffusion models (Runway, Pika, Sora, Kling), which suffer from text hallucinations, erratic camera warping, impossible brand consistency, and the inability to tweak a single frame without rerolling the entire video.

**Agentic Motion Graphics** inverts this paradigm:

1. The Agent never opens a video editor (No Premiere, After Effects, or CapCut).
2. Deterministic Code Canvas: Every frame is defined in standard Web technologies (HTML5, CSS3, SVG, GSAP).
3. Audio is the Master Clock: Voiceover narration is synthesized, cleaned, and transcribed with word-level millisecond timestamps (via Whisper).
4. Programmatic Audio Synthesis: Music beds and UI sound effects (whooshes, pops, risers) are synthesized via Python algorithms locked to a 120 BPM grid.
5. Headless Frame-by-Frame Rendering: HeyGen's open-source HyperFrames CLI drives headless Chromium to render pixel-perfect, artifact-free MP4s at 1080p/4K.

---

🚀 The 6-Step Universal Pipeline

flowchart LR
    A["1. 信源调研
(Extract & Contact Sheet)"] --> B["2. 场景脚本拆解
(scripts/script.json)"]
    B --> C