siyuanfeng636-cpu/agentic-motion-graphics

What is it?

Key features

• 01Builds each frame from HTML, CSS, SVG and GSAP timelines instead of generative video.
• 02Aligns narration to word-level timestamps with whisper.cpp or faster-whisper.
• 03Generates voiceover with OpenAI TTS or ElevenLabs and trims silences with ffmpeg.
• 04Synthesizes 120 BPM music beds and UI sound effects in Python.
• 05Runs lint, snapshot and headless render steps through the HyperFrames CLI.
• 06Packaged as a skill directory that Claude Code can discover automatically.

Use cases

• Producing product launch or feature announcement videos from a website or changelog.
• Turning a long technical article or paper into an animated explainer with narration.
• Converting long videos into captioned vertical clips with word-by-word subtitles.
• Animating static HTML or Markdown slides for talks.

Quick start

1. 1

   Install FFmpeg and Node.js 22+ (macOS example with Homebrew)

   brew install ffmpeg node
2. 2

   Generate the voiceover audio with the TTS script

   python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3
3. 3

   From templates/boilerplate, render the project to MP4 with HyperFrames

   npx hyperframes render --output dist/output.mp4 --fps 30

Things to know

• !The README's setup examples are macOS-focused (Homebrew), so other platforms need their own setup.
• !The TTS step needs an OpenAI or ElevenLabs API key, which is a paid service.
• !The pipeline has many dependencies, including Node.js 22+, FFmpeg, Whisper and Python audio tools.

Topics

FAQ

What is agentic-motion-graphics?

A Claude Code skill and Python pipeline that generates motion graphics videos from HTML, GSAP animations, TTS narration, and Whisper word-level timing. Agentic Motion Graphics is a skill for Claude Code and similar AI agents that produces videos as code rather than as generated footage. The agent writes a scene script, builds each frame with HTML, CSS, SVG and GSAP timelines, and renders the result to MP4 with the HyperFrames CLI in headless Chromium.

Is agentic-motion-graphics free to use? What license does it have?

agentic-motion-graphics is open source under the MIT license. Check the license terms before using it in commercial products.

Is agentic-motion-graphics still maintained?

Actively maintained. The last commit to agentic-motion-graphics was on Sep 25, 2026.

What can I use agentic-motion-graphics for?

Producing product launch or feature announcement videos from a website or changelog. Turning a long technical article or paper into an animated explainer with narration. Converting long videos into captioned vertical clips with word-by-word subtitles. Animating static HTML or Markdown slides for talks.

How do I install agentic-motion-graphics?

Install FFmpeg and Node.js 22+ (macOS example with Homebrew): brew install ffmpeg node Generate the voiceover audio with the TTS script: python3 scripts/tts_engine.py --text "Opus 5.5 solved motion graphics with code." --output audio/voiceover.mp3 From templates/boilerplate, render the project to MP4 with HyperFrames: npx hyperframes render --output dist/output.mp4 --fps 30

Where can I get agentic-motion-graphics?

The source code and installation instructions are on GitHub: https://github.com/siyuanfeng636-cpu/agentic-motion-graphics