Animate — procedural animation in any style, for Claude Code

A Claude Code skill that makes short animated videos entirely in code: one <canvas>, drawn and scored procedurally, deterministic frame by frame, rendered to MP4 with a headless browser and ffmpeg. Explainers, histories, little stories — in one of the built-in styles, or in a new look matched from your own references.

The built-in styles, each a frame from its demo piece: cut paper, crosshatch ink, riso print, sketchbook, math, pixel, isometric — and the eighth slot: any other look, made from your references.

How it works

The skill walks you through a few questions, then makes you approve three cheap things before it spends time animating:

step	what you see	you decide
0. Intake	a handful of questions (subject, formats, voice, the look, hero, your music, your product) and the style gallery	answers, a style, or your references
1. Story check	the format it picked and a numbered beat table, facts web-checked	approve / change beats
2. Look check	2–4 full-size style frames (for a new look: side-by-side comparisons with your references)	thumbs up per frame
3. Storyboard	every beat as a key frame, with sound and the transition into the next	thumbs up/down by panel number
4. Build	— (animate the approved panels, render, review)	—
5. Delivery	the video plus measured checks: cuts on the beat grid, story arc loudness, hero anchoring, the loudest moment after the silence, narration pace	notes → a revision run

Styles

A style is a plug-in: the story grammar, timing, sound, renderer and tools stay the same; the style supplies the drawing kit. A piece picks one in its piece.json ("style": "riso").

style	the look
cut paper	torn paper, drop shadows, crayon, patterns, characters with faces
crosshatch	sketchy ink that boils on 2s, hatch and pencil shading, warm paper and navy "inside the machine" worlds
riso	a three-ink risograph print: halftone screens at their own angles, overprints, misregistration
sketchbook	graphite and one accent colour on a sketchbook page, hand lettering
math	a manim-style math explainer: black stage, axes and graphs, colour-coded variables, smooth easing
pixel	low-resolution eras: drawn at the true resolution, upscaled nearest-neighbour, a bitmap font
isometric	precise isometric line art: constant hairlines, white faces hiding what's behind, rounded slabs, one dark accent; light or dark ground

Your own look: give the skill references (a video, stills, a web page) and it follows a procedure — measure the palette, line weight, texture, motion and cut rhythm; draw 1–2 matched frames next to your references (tools/compare.mjs); ask for your thumbs up; save it as styles/<name>/ in your project so every later piece can use it. Reference media stays on your machine.

Each style folder has a STYLE.md (its rules, palette, motion habits and a frame checklist), a kit.js, a sample.png and a small demo/ piece.

What's baked in