claude-animation-skills

# claude-animation-skills

Renders short reel animations on your own computer from a one-line prompt, through six Claude Code skills, for creators who have no footage.

Made by artemnovitckii on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: This project is a set of six Claude Code skills that make short animations for reels with no footage. You type a slash command and a one-line idea. Claude writes a spec, renders the video on your computer and marks Instagram's safe area for you to check.

Who it suits: It suits creators and small brands who post reels and have no footage to start from. Claude writes the spec and runs the render, so you work from prompts.

```table
Industry | Who uses it | How they use it | Example
Social media | Reel creators | Make a line graph that draws itself while a number counts up | Zero to 100K followers in 9 months
Travel and fitness | Coaches and local guides | Draw a route on a 3D map with a countdown to arrival | Home to the gym, 2.8 km
Tech and hardware | Reviewers and product marketers | Pull a phone apart on screen with a label on each part | My phone, every part labelled
Education | Explainer channels | Turn a question into a cartoon reel with captions and a voiceover | Why did pirates wear eye patches?
```

Anyone who wants to edit real footage, or who works on Windows, can skip it.

Where to use it: Everything starts inside Claude Code, where each skill is a slash command.

- Claude Code: each skill shows up as a command such as /graph or /map-route
- Claude Code plugin: the same skills are packaged as a plugin, with commands namespaced like /animation-skills:graph
- Your computer: macOS or Linux with ffmpeg, Node.js and Python does the rendering
- Instagram reels: the video is vertical, and a contact sheet marks the safe area

```table
Use case | Who | What they get back
Follower growth graph | Creators | A line that draws itself, with one big number counting up
Route reel | Local guides | A 3D map route with a pin drop, countdown ETA and destination card
Phone teardown | Tech reviewers | A 3D exploded view with a leader line and label on each part
Cartoon explainer | Explainer channels | A 3D or stick-figure reel with captions timed to your voiceover
```

How to set it up: You need a Mac or a Linux machine and a few tools installed first.

- macOS or Linux
- Node.js 18+, Python 3.9+ and ffmpeg
- Claude Code, to run the skills
- About 1 GB of voice models, downloaded once, for /stick-figure and /zach-d-films only

1. Install ffmpeg and Node.js if you do not have them.
2. Clone the project's GitHub repository into a folder called claude-animation-skills in your home directory.
3. Run the install script from that folder. It links each skill into your Claude Code skills folder and runs a one-time setup.
4. For /stick-figure and /zach-d-films, run the install script again with the voice option.
5. To update later, pull the newest files and run the install script again.

Install the tools if you need them:

```bash
brew install ffmpeg node
```

Run the installer from the project folder:

```bash
cd ~/claude-animation-skills && ./install.sh
```

Add the voice models for the two engine skills:

```bash
./install.sh --voice
```

Update later with this line:

```bash
git pull && ./install.sh
```

Or add the plugin from inside Claude Code:

```text
/plugin marketplace add artemnovitckii/claude-animation-skills
/plugin install animation-skills@claude-animation-skills
```

How to use it: Open Claude Code in any folder and type a slash command followed by your idea.

```text
/graph 0 to 100K followers in 9 months: 1.2K, 2.1K, 3.4K, 5K, 9K, 24K, 51K, 78K, 100K
/map-route home to the gym, 2.8 km, 9 minutes
/stick-figure why did pirates wear eye patches?
```

The four quick skills work from a small JSON spec. Claude writes it, runs the skill's build script, and you get a 1080x1920 MP4 at 30 fps plus a contact sheet. The 3D ones take about 1.5 minutes.

/stick-figure and /zach-d-films make full reels. Claude copies an example project, drafts the script with you, syncs each caption to the voiceover and renders it.

```table
Tool | What it does
/zach-d-films | Makes a cartoon what-if explainer in 3D, with slow-motion impacts and captions timed to your voiceover
/stick-figure | Makes a stick-figure explainer reel with whip transitions and short captions, plus code-made music and sound effects
/minimalistic-graphics | Draws black-and-white line art, with one white dot climbing hairline steps
/map-route | Draws a 3D map route with a pin drop, countdown ETA and destination card
/breakdown | Pulls a 3D phone apart layer by layer and labels every part
/graph | Draws a minimal line graph with one big number counting up
```

Example: You type "/graph followers going from 0 to 100K in 9 months" and add a list of numbers, one for each point. Claude writes the spec and runs the build. You get a vertical MP4 where a line draws itself and a big number counts up to 100K, plus a contact sheet.

For newcomers and experts: If you are new to this, start with /graph. Give it a short idea and a few numbers. The 2D skills render in about 10 seconds, so it is a quick first try.

Under the hood, each quick skill fills an HTML template from a JSON spec. The template uses GSAP for 2D motion or three.js for 3D, and a Python build script has HyperFrames render it to MP4. The two engines ship their own canvas or three.js code, voice and timing tools, and a finished example to copy. The trade-off is time, since each one needs a working session and not a single command.

```flow
You type a slash command in Claude Code
Claude writes a JSON spec
build.py fills an HTML template
HyperFrames renders the MP4
A contact sheet marks the safe area
```

Good to know:

- Platform: it needs macOS or Linux, with Node.js 18+, Python 3.9+ and ffmpeg
- No API key: the free voice and word timings for the two engine skills run on your computer
- Fetched at setup: three.js, GSAP, Playwright and the voice models are downloaded, not shipped in the project
- Plugin route: it exists, but the git clone route is the one tested end to end
- Time: the two engine skills need a working session, while the quick ones finish in seconds or minutes
- License: MIT

## On GitHub, 6 November 2026

- Stars: 417
- Forks: 53
- Open issues and pull requests: 2
- Language: JavaScript
- License: see the repository
- Topics: animation, claude-code, claude-skills, hyperframes, reels, threejs

## Links

- Code: https://github.com/artemnovitckii/claude-animation-skills
- Website: https://novitckii.com/resources/animation-skills/
- Releases: https://github.com/artemnovitckii/claude-animation-skills/releases
- Issues: https://github.com/artemnovitckii/claude-animation-skills/issues
- Star history: https://www.star-history.com/#artemnovitckii/claude-animation-skills&Date

## Get the code

```
git clone https://github.com/artemnovitckii/claude-animation-skills.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  7 KB