whaleyxbt/claude-motion

What it solves

Coding agents often struggle with the "taste" and precision required for high-quality motion design. While they can learn APIs, they typically lack the ability to ensure smooth easing, synchronize sound to visuals, or verify that frames are visually correct before finalizing a render. This toolkit provides the design rules, a self-review mechanism, and a sound engine to enable agents to create professional-grade motion graphics and simulations.

How it works

The toolkit integrates with agents (like Claude Code or Cursor) using a set of "skills" and a structured pipeline:

• Design Rules: It provides specific numerical guidelines for easing curves, spring presets, and timing (e.g., specific bezier curves for entrances) rather than vague instructions.
• Self-Review Loop: Since agents cannot watch video, the system renders a "contact sheet" (a grid of timestamped frames). The agent analyzes these frames to check for collisions, clipping, and readability, fixing errors before the final render.
• Sound Engine: A pure Python-based synthesizer generates sound effects (clicks, whooshes, risers) via a cue sheet, ensuring audio is perfectly synced to the visual timeline.
• Web Simulation Pipeline: For complex simulations (like 3D scenes using three.js), it renders a single HTML page frame-by-frame using headless Chromium and ffmpeg to ensure a constant 60 fps output regardless of render speed.
• Unified Timeline: A JSON file maps every "beat" to a timestamp, which is used by the scenes, the sound engine, and the review loop to keep everything synchronized.

Who it’s for

Developers and designers using AI coding agents to automate the creation of motion graphics, promotional videos, and technical simulations without needing manual tools like After Effects.

Highlights

• Frame-Exact Capture: Renders web simulations to 60 fps MP4s using Playwright and ffmpeg.
• Automated Visual QA: Enables agents to perform quality assurance by reviewing contact sheets of their own work.
• Procedural Audio: A custom Python sound engine that generates mastered audio without needing external samples.
• Beat-Synced Timing: A beats.py tool that analyzes track tempo to align simulations with the music.