cth9191/animate

Animate – Procedural video creation for Claude Code

What it is – A Claude Code skill that lets you generate short, stylised animated videos entirely from code. You interact via a chat‑like prompt, answer a few questions, and the system builds a deterministic, frame‑by‑frame animation, renders it with a headless browser, and outputs an MP4.

How it works – The workflow is split into five steps:

1. Intake – you tell the system the subject, desired format, voice, style (one of the built‑in looks or a custom reference you provide).
2. Story check – a beat table is generated and you approve or edit it.
3. Look check – the chosen style produces a few full‑size key frames for you to thumbs‑up.
4. Storyboard – every beat becomes a key frame with sound and transitions; you can approve each panel.
5. Build & delivery – the approved panels are animated, rendered to MP4, and a set of measured quality checks (beat cuts, loudness, hero anchoring, etc.) is presented for final tweaks.

Built‑in styles – eight plug‑in style folders ship with the repo, each providing a drawing kit:

• cut paper, crosshatch, riso, sketchbook, math (Manim‑like), pixel, isometric and a slot for a custom look derived from reference media.

Custom style creation – supply a video, stills, or a web page; the tool analyses palette, line weight, texture and rhythm, generates 1‑2 matched frames for approval, then saves the new style under styles/<name>/ for reuse.

Core components

• Story grammar (grammar/): eight short‑form templates (history, mission, etc.) that dictate structure, colour semantics and pacing.
• Kit (kit/): seeded randomness, camera helpers, a renderer that draws through style hooks, a storyboard engine, a synthesiser, and loudness handling for phone playback.
• Tools (tools/):
  • build.mjs – assembles a self‑contained index.html from the piece, kit and style.
  • export.mjs – turns frames into WAV + stems and then MP4 via ffmpeg.
  • voice.mjs – generates a script, records (ElevenLabs or local mic), aligns words with timestamps using faster‑whisper.
  • beats.mjs, compare.mjs, measure/refs.mjs, etc., for audio‑beat mapping, reference comparison and quality checks.
• Craft rules (craft.md) – practical tips collected while building the system.
• Voice‑over & music – automatic script writing, optional ElevenLabs TTS, local recording, and beat‑synchronised scoring (or you can supply your own track).
• Product integration – screenshots of your website or logo can be inserted into the animation.
• Multi‑format output – 9:16, 1:1, 4:5 and 16:9 are generated automatically.
• Parallel builds – large pieces are split into scene files processed by separate agents and then stitched together.

Future work – a WebGL‑based motion‑design style with ray‑marching, sub‑frame blur and bloom is planned; the existing export pipeline already supports GPU rendering.

Installation – Requires Claude Code, Node 18+, Playwright with Chromium, and ffmpeg. Install Playwright (npm i -g playwright && npx playwright install chromium) then add the skill via Claude’s plugin manager or copy the folder into ~/.claude/skills/animate/.

Typical usage – From a Claude chat you can type commands such as:

/animate a 45‑second history of the bicycle, cut paper
/animate how a hash map works, in the math style
/animate a short about our API in the style of these screenshots: ./refs/

The generated piece appears under pieces/<name>/; you can also run the low‑level tools manually.

License – MIT.

---

Animate is a genuine open‑source project that sits at the intersection of generative AI (script writing, voice synthesis, beat detection) and procedural graphics, providing a turnkey way to produce stylised explainer videos from code.