Animate: short animated videos drawn entirely in code

Type /animate a 45-second history of the bicycle, cut paper and Claude produces a video with its own synthesized score, built from one <canvas> with no image, audio or video files. Randomness is seeded, so the same piece renders the same way twice. GitHub user cth9191 publishes the skill under the MIT license. Anthropic doesn't publish it. If skills are new to you, read what Claude skills are.

Three approvals before any animation

The first rule in the SKILL.md is that nothing gets animated until you approve the storyboard, because a wrong story or look costs a full build. So the run stops three times:

• Story check. A format, a one-line idea and a numbered beat table, with every on-screen fact checked by web search and listed with its source.
• Look check. Two to four full-size frames in the chosen style.
• Storyboard. Every beat as a key frame. You give thumbs up or down by panel number.

After the render, a review script measures the result: cuts against the beat grid, text that's cut off, overlapping or hidden under a phone's interface, and loudness. Claude reports those numbers along with the weakest shot.

Styles

Seven ship with it: cut paper, crosshatch ink, riso print, sketchbook, a manim-style math look, pixel art and isometric line art. Or hand it references, such as a video, stills or a web page. It measures their palette, line weight, texture, motion and cut rhythm, draws one or two matched frames beside them for your approval, and saves the result as a style in your project. Reference media stays on your machine, and the skill is told never to copy its code or name its artist unless you ask.

It can also time the picture to a voice-over, cut to a music track you supply, animate screenshots of your own site, and lay out 9:16, 1:1, 4:5 and 16:9 versions of one piece without cropping.

How to install it

You need Node 18 or newer, Playwright with Chromium, and ffmpeg on your PATH:

npm i -g playwright && npx playwright install chromium

Then, inside Claude Code:

/plugin marketplace add cth9191/animate
/plugin install animate@animate

Or copy plugins/animate/skills/animate/ to ~/.claude/skills/animate/ by hand. For voice-overs, Python with faster-whisper times each spoken word; without it, word times are estimated.

Example request

/animate a [length, e.g. 45-second] explainer of [topic, e.g. how DNS works] for [audience], in the [math | cut paper | riso] style, [9:16 and 16:9]. Narrated, with a voice from ElevenLabs.

Pieces land in your project under pieces/<name>/. Open the built index.html in a browser to preview one before export.

Limits

• Voice costs credits. Through the ElevenLabs connector a take costs about one credit per character, and the skill states the total before the full run.
• Some styles are thinly tested. By the SKILL.md's own count, cut paper and crosshatch have carried full pieces, four styles come from one or two pieces plus a demo, and isometric has only its demo.
• It can't hear the score. Claude is told to say what it hasn't verified, and listening to the music is one of those things.
• Claude Code only. The README lists no other agent.
• No 3D style yet. A WebGL motion-design style is listed as coming.

When to use it

Use it for an explainer, a short history or a launch reel when you want a consistent drawn look without stock footage or an AI video generator. For video built from HTML with measured text size and contrast, try Video Director. To rebuild a specific animation you've seen in your own code, use Reanimate.