Repolode
Submit
cth9191

cth9191/animate

A Claude Code skill that turns a prompt into a short procedural canvas animation, rendered to MP4 with a headless browser and ffmpeg.

View on GitHub
Stars
828
Forks
120
Open issues
1
Last commit
14 days ago

What is it?

Animate is a Claude Code skill for making short explainer videos, histories and small stories entirely in code. Each piece is a single self-contained HTML canvas that is drawn and scored procedurally, so frames are deterministic and can be rendered to MP4 with Playwright and ffmpeg.

The skill includes seven built-in styles, including cut paper, riso print, pixel and isometric, and can match a new look from user-supplied reference images or videos. Users can supply their own music, which is beat-mapped to the cuts, or real product screenshots that are animated inside the chosen style.

Before animating, the workflow asks the user to approve the story beats, a few full-size style frames and a storyboard. Output can be exported in 9:16, 1:1, 4:5 and 16:9 layouts, each laid out for its shape rather than cropped.

Key features

  • 01Seven built-in drawing styles plus custom styles matched from reference media.
  • 02Deterministic frame-by-frame rendering to MP4 via headless Chromium and ffmpeg.
  • 03Beat-mapped cuts when you supply your own music track.
  • 04Optional voice-over with word timing checked by faster-whisper.
  • 05Real product screenshots captured from a URL and animated inside a style.
  • 06Export to vertical, square, 4:5 and widescreen formats from one piece.

Use cases

  • Making a short explainer video about a technical concept, such as a data structure or a network protocol.
  • Producing a historical timeline or short story animation in a chosen visual style.
  • Creating a vertical or square launch clip for a product from its own screenshots and music.
  • Generating animated content in code without hand-drawing frames or using a video editor.

Quick start

  1. 1

    Install Playwright and Chromium

    npm i -g playwright && npx playwright install chromium
  2. 2

    Add the plugin marketplace in Claude Code

    /plugin marketplace add cth9191/animate
  3. 3

    Install the animate plugin in Claude Code

    /plugin install animate@animate
  4. 4

    Ask Claude Code for an animation

    /animate a 45-second history of the bicycle, cut paper

Things to know

  • Requires Claude Code, Node 18+, Playwright with Chromium, and ffmpeg on your PATH.
  • Voice-overs need Python with faster-whisper, and the ElevenLabs connector is optional for the voice.
  • The WebGL motion-design style is listed as coming and is not yet available.

Topics

#claude-code#procedural-animation#canvas#motion-graphics#explainer-video#generative-art#video-rendering#animation#claude-code-plugin#claude-code-skill

FAQ

What is animate?
A Claude Code skill that turns a prompt into a short procedural canvas animation, rendered to MP4 with a headless browser and ffmpeg. Animate is a Claude Code skill for making short explainer videos, histories and small stories entirely in code. Each piece is a single self-contained HTML canvas that is drawn and scored procedurally, so frames are deterministic and can be rendered to MP4 with Playwright and ffmpeg.
Is animate free to use? What license does it have?
animate is open source under the MIT license. Check the license terms before using it in commercial products.
Is animate still maintained?
Actively maintained. The last commit to animate was on Oct 5, 2026.
What can I use animate for?
Making a short explainer video about a technical concept, such as a data structure or a network protocol. Producing a historical timeline or short story animation in a chosen visual style. Creating a vertical or square launch clip for a product from its own screenshots and music. Generating animated content in code without hand-drawing frames or using a video editor.
How do I install animate?
Install Playwright and Chromium: npm i -g playwright && npx playwright install chromium Add the plugin marketplace in Claude Code: /plugin marketplace add cth9191/animate Install the animate plugin in Claude Code: /plugin install animate@animate Ask Claude Code for an animation: /animate a 45-second history of the bicycle, cut paper
Where can I get animate?
The source code and installation instructions are on GitHub: https://github.com/cth9191/animate

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects