# animate: a Claude Code skill that renders motion graphics from a canvas, not from a timeline

> animate produces short videos procedurally, drawing every frame into a canvas and rendering the result to MP4 with a headless browser and ffmpeg. Its real design is the approval ladder: story, look and storyboard are signed off before the expensive build runs.

**cth9191/animate** — Procedural animation in any style for Claude Code: short single-file canvas videos with story, look and storyboard check-ins. 7 built-in styles or one matched from your references, your own music (beat-mapped), real product screenshots, every format from one piece.

- Repository: https://github.com/cth9191/animate
- Stars: 931 · Forks: 132
- Language: JavaScript
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/cth9191-animate

## Every frame is drawn, so the video is a program

animate is a Claude Code skill that makes short animated videos entirely in code. One canvas is drawn and scored procedurally, deterministic frame by frame, and the result is rendered to MP4 with a headless browser and ffmpeg. The output the README describes is a self-contained index.html assembled from the piece, the kit and the style.

Determinism is the load-bearing word. The kit is built on seeded randomness, and the tools include a frame-hash check that verifies a kit change left a piece pixel-identical. That check only makes sense if the rendering is deterministic, so the design intent is clear: a piece is code, it can be re-rendered, and a change to the shared kit can be proven not to have moved a frame.

The motion itself is described in closed form. The kit provides cameras, a renderer with shape-morph transitions where the old world closes in on one object, it morphs into the next world's counterpart and the new world opens out of it, and optional motion blur for the smooth styles. The craft notes in craft.md are collected lessons, such as the sustained pad setting a section's loudness rather than the plucks, and the rule that cameras put a world point on a screen point.

The formats are laid out rather than cropped. 9:16, 1:1, 4:5 and 16:9 each get their own layout for the shape, and the storyboard, the frames and the export all work from the same piece.

## Three cheap approvals come before the expensive build

The workflow is the part that makes this more than a prompt. The skill asks a handful of questions first, then asks for approval on three things before it spends time animating.

The intake collects the subject, the formats, the voice, the look, the hero, your music and your product, and shows the style gallery. From there the ladder runs: a story check with the chosen format and a numbered beat table whose facts are web-checked, where you approve or change the beats. A look check with two to four full-size style frames, and for a new look side-by-side comparisons against your references, where you give a thumbs up per frame. Then a storyboard with every beat as a key frame, with sound and the transition into the next, where you thumbs up or down by panel number.

Only after that comes the build, which animates the approved panels, renders and reviews. The delivery step then reports measured checks rather than adjectives: cuts on the beat grid, story arc loudness, hero anchoring, the loudest moment after the silence, and narration pace. Notes on those checks feed a revision run.

The ordering is the point. Each approval is on something cheaper to change than the thing after it, so a wrong look is caught on a still frame rather than on a finished video.

## A style is a plug-in, and seven come in the box

The style system is the plugin boundary. A style supplies the drawing kit, while the story grammar, the timing, the sound, the renderer and the tools stay the same. A piece picks one in its piece.json with a line such as "style": "riso".

The seven built-in styles are cut paper with torn paper, drop shadows, crayon, patterns and characters with faces; crosshatch with sketchy ink that boils on 2s and hatch and pencil shading; riso as a three-ink risograph print with halftone screens at their own angles, overprints and misregistration; sketchbook with graphite, one accent colour and hand lettering; math as a manim-style explainer on a black stage with axes, graphs and colour-coded variables; pixel, drawn at the true resolution and upscaled nearest-neighbour with a bitmap font; and isometric line art with constant hairlines and one dark accent.

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

The eighth slot is your own look. You give the skill references, a video, stills or a web page, and it follows a procedure: measure the palette, line weight, texture, motion and cut rhythm, draw one or two matched frames next to your references using tools/compare.mjs, ask for your thumbs up, then save it as styles/<name>/ in your project so every later piece can use it. The README stresses that reference media stays on your machine.

## The tools do the assembling, the measuring and the checking

The toolset in tools/ is where the engineering sits. Build assembles one self-contained index.html from the piece, the kit and the style. There are test tiles, stills, a storyboard tool, and export, which goes frames to WAV and stems to MP4.

Review is the interesting one. It produces contact sheets and the measured checks, including text that is cut off or overlapping, and loudness. A tool that can tell you a caption overruns its box is doing something a video editor does not, because in a canvas render the text is measured by the same code that draws it.

Compare puts a reference next to a frame, there is a reference measurer, a gallery, and the frame-hash check described earlier.

You do not have to drive any of this by hand, but you can. The skill exposes its tools as scripts:

```bash
SKILL=~/.claude/skills/animate            # or the plugin's install path
node $SKILL/tools/build.mjs pieces/my-piece
node $SKILL/tools/tile.mjs pieces/my-piece tile.png 24 48 96
node $SKILL/tools/still.mjs pieces/my-piece 2.5,9,14 frames.png --scale 0.5
node $SKILL/tools/storyboard.mjs pieces/my-piece
node $SKILL/tools/beats.mjs piece
```

Tiles, stills at chosen timestamps and a storyboard are all produced directly, which is the same output the approval steps show you. Pieces live in your project under pieces/<name>/.

## The music you own drives the cuts, and your product is the subject

Two inputs come from you rather than the skill, and both change the output substantially.

The first is music. You give it a track and it maps the beats, meaning the tempo, the bars, the big hits and the drops, then cuts on the song's beats and puts the payoff on its loudest hit. If you have no track, it composes a score in code instead. The measured checks confirm the result by looking for cuts on the beat grid and for the loudest moment following the silence, which is the same structural rule the story grammar states: silence before the payoff and loudest on it.

The second is your product. It screenshots your site, or takes your logo files, and animates the real screens inside the chosen style. For a product explainer this removes the placeholder rectangle problem entirely, since the pixels are the actual interface.

The voice-over path is the most intricate of the three. The skill writes the script, gets one take per line from the ElevenLabs connector in Claude, or uses your own recording, and then hears when every word is spoken, locally with faster-whisper, and times the picture to the words. Re-takes re-time the picture automatically, so a line recorded a second time does not require re-editing the cut points by hand.

## Installing means Playwright, Chromium and ffmpeg

The requirements are listed plainly: Claude Code, Node 18+, Playwright with Chromium, and ffmpeg on your PATH. Fonts are local system fonts with fallbacks for Windows, macOS and Linux. Voice-overs need Python with faster-whisper for word timing and, optionally, the ElevenLabs connector in Claude under Settings and Connectors.

The browser is installed with:

```bash
npm i -g playwright && npx playwright install chromium
```

The skill itself installs as a plugin:

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

Or you can copy the skill folder by hand from plugins/animate/skills/animate/ into ~/.claude/skills/animate/.

Once installed, the commands are one line each, and they show what the skill is actually for:

```
/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/
/animate a 20s launch reel for https://my-product.com, cut to ./audio/song.mp3, vertical and square
/animate a narrated 45s explainer of how DNS works, math style, 16:9, voice from ElevenLabs
```

Note the shape of every one of these. A length, a subject, a style, and optionally references, a URL, an audio file or a voice source. The grammar directory holds eight short-form formats, such as a history told as a chronology joined by shape morphs and a mission cut on the beat.

## Where animate is the wrong tool

The first wrong fit is a designer who wants control over individual frames. This is a code generator with a style system and a set of grammars. The unit of authorship is the piece and the style, and the frames are an output of the program, not something you nudge by hand. If your workflow depends on art direction at the frame level, this produces a starting point rather than a final cut.

The second wrong fit is a project without the runtime. A headless Chromium and ffmpeg are not optional here, because the render path is browser plus ffmpeg, and the word timing path additionally needs Python and faster-whisper. On a locked down machine that is a real dependency list, and the failure mode when something is missing is a build that stops rather than degrades.

The third is the one the README flags itself: a WebGL motion-design style with ray-marched 3D, sub-frame motion blur and bloom is still coming. The export and review tools already run WebGL pieces on the GPU and warn when only software rendering is available, so the plumbing exists, but that style is not in the box yet.

The fourth is scale. Parallel builds exist, splitting one scene file per agent for long pieces and joining them in the build, but the pieces are short-form by design, with eight grammars written for short videos. A long-form documentary is not what this is built for.

There is also a licensing point to settle yourself. The project is MIT licensed with the LICENSE file at the root of the repository, but the animation it produces may embed your own product screens, your logo files or your music, and those rights are yours to clear.

## Conclusion

animate fits a team that needs short explainer or product videos produced reproducibly in code, with a music track it already owns and a look it can point at with reference images, and that is willing to review three times before rendering. It does not fit a designer who wants frame-by-frame control, and it does not fit a project without Playwright, Chromium and ffmpeg available. Before running it, decide which of the built-in styles you want or prepare references, because the look check is the approval step that costs the most to redo later.

## FAQ

### What is the animate Claude Code skill?

It is a Claude Code skill that produces short animated videos entirely in code, drawing one canvas procedurally and rendering the result to MP4 with a headless browser and ffmpeg. Output is a self-contained index.html built from the piece, the kit and the chosen style.

### How do I install the animate skill?

You need Claude Code, Node 18+, Playwright with Chromium and ffmpeg on your PATH, and you install the browser with npm i -g playwright && npx playwright install chromium. The skill installs as a plugin with /plugin marketplace add cth9191/animate and /plugin install animate@animate, or you copy plugins/animate/skills/animate/ into ~/.claude/skills/animate/.

### Which styles does animate ship with?

Seven: cut paper, crosshatch, riso, sketchbook, math, pixel and isometric. A style is a plug-in that supplies the drawing kit while the grammar, timing, sound and tools stay fixed, and you can add your own look from references and save it under styles/<name>/ in your project.

### Can animate use my own music and voice?

Yes. Given a track it maps the beats, cuts on them and puts the payoff on the loudest hit, or it composes a score in code. For voice it writes the script, takes one recording per line from the ElevenLabs connector or your own take, and times the picture to the spoken words using faster-whisper, with re-takes re-timing automatically.

### What does animate check before delivering a video?

The delivery step reports measured checks rather than impressions: cuts on the beat grid, story arc loudness, hero anchoring, the loudest moment after the silence, and narration pace. The review tools also flag text that is cut off or overlapping.

## Sources

- [cth9191/animate on GitHub](https://github.com/cth9191/animate)
- [Issues](https://github.com/cth9191/animate/issues)
- [License: MIT](https://github.com/cth9191/animate/blob/main/LICENSE)
- [README](https://github.com/cth9191/animate/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/cth9191-animate