Claude Code / Animation skills
6 animation skills,
made in Claude.
Type /map-route home to the gym and get a finished animation back. No footage, no After Effects, no Blender. Claude writes it, renders it on your own computer and checks it for Instagram. Free and open source.
From the reel: here are all 6, the prompt for each one, and how to install them in a few minutes.
By Artem Novitckii · November 1, 2026
6 skills · MIT licensed · Runs on your Mac or Linux box
/zach-d-films
/stick-figure
/minimalistic-graphics
/map-route
/breakdown
/graphInstall in a few minutes.
You need Claude Code, ffmpeg, Node and Python 3.9 or newer. No API keys. Run this in your terminal:
brew install ffmpeg node
git clone https://github.com/artemnovitckii/claude-animation-skills.git ~/claude-animation-skills
cd ~/claude-animation-skills && ./install.shinstall.sh links the six skills into ~/.claude/skills/ so they show up as /graph, /map-route and the rest, then runs the one-time setup: three.js, Playwright, GSAP and HyperFrames.
The two explainers, /stick-figure and /zach-d-films, also need a free voice and word timings that run on your computer. That's about 1 GB of models, downloaded once:
cd ~/claude-animation-skills && ./install.sh --voiceOr as a Claude Code plugin
/plugin marketplace add artemnovitckii/claude-animation-skills
/plugin install animation-skills@claude-animation-skillsPlugin skills are namespaced, so you type /animation-skills:graph. The git clone above is the route I've tested end to end.
The 6 skills.
Every clip below came out of these skills. Under each one is the prompt I used in the reel.
/zach-d-films
A 3D cartoon “what if” explainer
A full short in the style of 3D cartoon explainers: a question, what people think, a twist, examples and a payoff. The people, armour, weapons, textures and effects are all built in code with three.js, with no 3D models or Blender.
- Comes with a finished 29-second example (“Could ancient armour stop a bullet?”) to build new ones from.
- Slow-motion impacts, sparks, a red force ripple and captions timed to your voiceover word by word.
- Use your own voice, or the free built-in one.
Time: A working session with Claude. About 0.5 s a frame to render on a Mac.
/zach-d-films Could ancient armour stop an arrow?/stick-figure
A stick-figure explainer reel
A bright cartoon world with stick people, big expressive faces, whip transitions and 1 to 2 word captions. Even the music and sound effects are made in code, and everything is timed to the voice.
- Comes with a finished 37-second example (“Why did pirates wear eye patches?”).
- Claude writes the script with you, checks the facts, then animates it shot by shot.
- Free built-in voice, your own recording, or ElevenLabs.
Time: A working session with Claude. A minute or two to render a 40-second reel.
/stick-figure Why did pirates wear eye patches?/minimalistic-graphics
Black-and-white line art
Pure black, thin white outlines and one moving dot. Steps rise, the dot hops up them, and at the top an orbit draws around it while a second line of text swaps in.
- One or two quiet lowercase lines on top.
- 3 to 7 steps, white on black or black on white.
- Made for ideas about habits, patience and compounding.
Time: About 10 seconds to render.
/minimalistic-graphics Every step feels small until you look back/map-route
A 3D map route
A clean white 3D city with parks and a river. The route draws itself while the camera rides along, the pin drops with a bounce, and the camera pulls back to show the whole trip.
- An ETA card that counts down to “Arrived”.
- A destination card with the minutes and the distance, in km or miles.
- Your own place names and route colour.
Time: About 1.5 minutes to render.
/map-route Home to the gym, 2.8 km/breakdown
A 3D exploded view
A phone floats on a dark backdrop and comes apart layer by layer: glass, screen, frame, board and battery, back. Each part gets a leader line and a label.
- Write the labels straight or as a joke.
- Your own lock-screen time, date and accent colour.
- Claude can rebuild the layers for another flat object, like a tablet or a card wallet.
Time: About 1.5 minutes to render.
/breakdown My phone, every part labelled/graph
A minimal line graph
A smooth line draws itself and one big number counts up with its tip, then lands on the final value. Black on white or white on black, with nothing else on it.
- Your real numbers, one per point.
- Any unit: followers, dollars, kilos, percent.
- No callouts and no growth chips, just the number and the line.
Time: About 10 seconds to render.
/graph 0 to 100K followers in 9 monthsHow it works.
Each skill is a set of instructions Claude follows plus a small renderer. You only talk to Claude.
- You ask in plain words, like the prompts under each skill.
- For the quick four, Claude writes a small spec: your numbers, places, labels or lines. For the two explainers, it writes the script with you and plans the shots.
- It renders on your computer: 1080x1920 at 30 fps, with HyperFrames, three.js and headless Chrome.
- It checks a contact sheet with Instagram's safe area marked, and fixes anything that would sit under the buttons.
Make your own.
The quick skills are one HTML template and a spec. New ones are easy to add.
skills/<name>/SKILL.md what Claude follows: steps, the spec, taste rules
skills/<name>/template.html the animation (GSAP, or three.js for 3D)
skills/<name>/build.py spec -> HyperFrames -> mp4
skills/stick-figure/engine/ canvas engine + the pirate reel as a template
skills/zach-d-films/engine/ three.js engine + the armour short as an exampleCopy skills/graph, change its template and run ./install.sh again. Or ask Claude: “make me a new skill in this repo that animates X, built like /graph.”
Get all 6 animation skills
Unlock the install line, all 6 skills and their prompts, plus every other resource in the library. Free, one email a week, unsubscribe anytime.