Not in the top 1,000 by GitHub stars

buildwithhanif/claude-animation-skill

Hand-drawn 2D animation written as code: detail bible, a detailed ant rig, brush/watercolour pen, frame-matched recreation loop, synthesised sound. Node canvas + ffmpeg.

Claude Code Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`plugins/claude-animation/skills/claude-animation/SKILL.md`

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → 4ddb8c80fdec

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 4ddb8c80fdec96dc9f55d4b9bdee60bde6f0134b

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/buildwithhanif/claude-animation-skill.git .hotskills/buildwithhanif-claude-animation-skill && git -C .hotskills/buildwithhanif-claude-animation-skill checkout --detach 4ddb8c80fdec96dc9f55d4b9bdee60bde6f0134b
# Copy each selected skill directory from .hotskills/buildwithhanif-claude-animation-skill into .claude/skills/<skill-name>/

131GitHub stars

Not availablestars in 7 days

1skill in this repository

0commits in 30 days

Heat

Insufficient history

Not enough history yet to measure heat. It appears after a few days of data.

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

claude-animation plugins/claude-animation/skills/claude-animation

How it works

claude-animation

When your agent uses it

Make short hand-drawn 2D animations entirely in JavaScript — storybook / textured-editorial illustration (paper grain, hatching, blue construction guides, glossy insect characters, nest cross-sections) and brush-ink + watercolour explainers — rendered frame-exact with node canvas and ffmpeg, with synthesised sound. Use for "bikin animasi", "animate this story", "hand-drawn animation", "storybook animation", "JS animation", "line drawing animation", "animasi semut", kids' story or science explainer animations. Not for UI micro-interactions, slide decks, or talking-head video editing.

What it loads into context

Frontmatter

138 tokens

Always available to the agent

SKILL.md

2,202 tokens

When the skill is activated

Reference documents

9,342 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Read first
The library (`lib/`)
The loop
Hard rules
Quick start

Scripts executed separately

lib/colony.mjs
lib/core.mjs
lib/film.mjs
lib/fx.mjs
lib/lowpoly.mjs
lib/nature.mjs
lib/pen.mjs
lib/rigs/ant.mjs
lib/rigs/bean.mjs
lib/rigs/bug.mjs
lib/rigs/chibi.mjs
lib/rigs/critter.mjs
lib/textures.mjs
package.json
scripts/ambient.mjs
scripts/chiptune.mjs
scripts/music.mjs
scripts/rig-sheet.mjs
scripts/sound.mjs
templates/film-template.mjs

Files

../../../../.claude-plugin/marketplace.jsonasset983 bytes
../../../../.claude-plugin/marketplace.jsonasset983 bytes
../../.claude-plugin/plugin.jsonasset640 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
SKILL.mdcore8,018 bytes
lib/colony.mjsruns9,188 bytes
lib/core.mjsruns10,461 bytes
lib/film.mjsruns7,248 bytes
lib/fx.mjsruns9,047 bytes
lib/lowpoly.mjsruns7,220 bytes
lib/nature.mjsruns5,512 bytes
lib/pen.mjsruns9,055 bytes
lib/rigs/ant.mjsruns16,165 bytes
lib/rigs/bean.mjsruns9,244 bytes
lib/rigs/bug.mjsruns5,105 bytes
lib/rigs/chibi.mjsruns11,888 bytes
lib/rigs/critter.mjsruns7,098 bytes
lib/textures.mjsruns9,047 bytes
package.jsonruns298 bytes
references/characters.mddoc6,351 bytes
references/detail.mddoc7,190 bytes
references/motion.mddoc4,450 bytes
references/prior-art.mddoc2,416 bytes
references/sound.mddoc2,292 bytes
references/styles.mddoc4,162 bytes
references/traps.mddoc2,465 bytes
references/workflow.mddoc2,263 bytes
scripts/ambient.mjsruns3,138 bytes
scripts/chiptune.mjsruns6,969 bytes
scripts/music.mjsruns5,998 bytes
scripts/rig-sheet.mjsruns1,411 bytes
scripts/sound.mjsruns7,914 bytes
templates/beat-sheet.mddoc1,776 bytes
templates/film-template.mjsruns2,631 bytes

Read SKILL.md


# claude-animation

**Frame-exact, hand-drawn-looking 2D animation written as code.** A film is a pure function
`frame(ctx, t)`; the library draws the look (brush, pencil, watercolour, grain, hatching), the rigs act
(a detailed ant, a bean-bodied cast), and the harness renders, previews and checks it.

Every rule below is something that went wrong on a real film — a 59 s brush-ink + watercolour history
recap and a set of storybook insect films — and took a render to find.

## Read first

| I need to… | Go to |
|---|---|
| Make an original animation from a brief | `references/workflow.md` → `templates/beat-sheet.md` → `templates/film-template.mjs` |

View the complete source on GitHub

Skills included

claude-animation

Repository facts

License: MIT
Created: Sep 23, 2026
Last pushed: Sep 23, 2026
Forks: 20
Open issues: 0
Project activity: Active

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 7, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 8 notes

.claude-plugin/marketplace.json:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
plugins/claude-animation/skills/claude-animation/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
12 network referencesin 2 files: .claude-plugin/marketplace.json:3 plugins/claude-animation/.claude-plugin/plugin.json:4
No hidden or obfuscated text
No instruction overrides
20 executable scriptsin 20 files: claude-animation/lib/colony.mjs:1 claude-animation/lib/core.mjs:1 claude-animation/lib/film.mjs:1 and 17 more
No access to secrets
No requests to vote in Hot

Show all 32 signals by file

`.claude-plugin/marketplace.json`

Network accessline 3

"description": "Hand-drawn 2D animation written as code: textured-editorial and brush-watercolour looks, a detailed ant rig, an ant colony kit, synthesised sound.",   "version": "1.0.0",   "owner": { "name": "Hanif", "url": "https://github.

Network accessline 4

"version": "1.0.0",   "owner": { "name": "Hanif", "url": "https://github.com/buildwithhanif" },   "plugins": [

Network accessline 5

"owner": { "name": "Hanif", "url": "https://github.com/buildwithhanif" },

Network accessline 12

"keywords": ["animation", "2d", "hand-drawn", "canvas", "javascript", "storybook", "illustration", "ffmpeg", "colony"],       "license": "MIT",       "homepage": "https://github.com/buildwithhanif/claude-animation-skill",

Network accessline 13

"license": "MIT",       "homepage": "https://github.com/buildwithhanif/claude-animation-skill",       "repository": "https://github.com/buildwithhanif/claude-animation-skill"

Network accessline 14

"homepage": "https://github.com/buildwithhanif/claude-animation-skill",

Network accessline 15

"repository": "https://github.com/buildwithhanif/claude-animation-skill"

`plugins/claude-animation/.claude-plugin/plugin.json`

Network accessline 4

"description": "Hand-drawn 2D animation written as code. Textured-editorial and brush-watercolour looks, a detailed poseable ant, an ant colony kit, a render harness with sheet/strip/verify, and synthesised sound.",   "version": "1.0.0",

Network accessline 5

"version": "1.0.0",   "author": { "name": "Hanif", "url": "https://github.com/buildwithhanif" },   "homepage": "https://github.com/buildwithhanif/claude-animation-skill",

Network accessline 6

"author": { "name": "Hanif", "url": "https://github.com/buildwithhanif" },

Network accessline 7

"homepage": "https://github.com/buildwithhanif/claude-animation-skill",

Network accessline 8

"repository": "https://github.com/buildwithhanif/claude-animation-skill",

`plugins/claude-animation/skills/claude-animation/lib/colony.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/core.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/film.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/fx.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/lowpoly.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/nature.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/pen.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/rigs/ant.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/rigs/bean.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/rigs/bug.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/rigs/chibi.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/rigs/critter.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/lib/textures.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/package.json`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/scripts/ambient.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/scripts/chiptune.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/scripts/music.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/scripts/rig-sheet.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/scripts/sound.mjs`

Executable scriptline 1
```
Executable file
```

`plugins/claude-animation/skills/claude-animation/templates/film-template.mjs`

Executable scriptline 1
```
Executable file
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 20 facts

Executable script in a comment of a file that runsclaude-animation/lib/colony.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/core.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/film.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/fx.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/lowpoly.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/nature.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/pen.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/rigs/ant.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/rigs/bean.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/rigs/bug.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/rigs/chibi.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/rigs/critter.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/lib/textures.mjs:1Low confidence
Executable script in code of a file that runsclaude-animation/package.json:1High confidence
Executable script in a comment of a file that runsclaude-animation/scripts/ambient.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/scripts/chiptune.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/scripts/music.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/scripts/rig-sheet.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/scripts/sound.mjs:1Low confidence
Executable script in a comment of a file that runsclaude-animation/templates/film-template.mjs:1Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md plugins/claude-animation/skills/claude-animation/SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md plugins/claude-animation/skills/claude-animation/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md plugins/claude-animation/skills/claude-animation/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md plugins/claude-animation/skills/claude-animation/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md plugins/claude-animation/skills/claude-animation/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

buildwithhanif/claude-animation-skill

History

plugins/claude-animation/skills/claude-animation/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

claude-animation

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

.claude-plugin/marketplace.json

plugins/claude-animation/.claude-plugin/plugin.json

plugins/claude-animation/skills/claude-animation/lib/colony.mjs

plugins/claude-animation/skills/claude-animation/lib/core.mjs

plugins/claude-animation/skills/claude-animation/lib/film.mjs

plugins/claude-animation/skills/claude-animation/lib/fx.mjs

plugins/claude-animation/skills/claude-animation/lib/lowpoly.mjs

plugins/claude-animation/skills/claude-animation/lib/nature.mjs

plugins/claude-animation/skills/claude-animation/lib/pen.mjs

plugins/claude-animation/skills/claude-animation/lib/rigs/ant.mjs

plugins/claude-animation/skills/claude-animation/lib/rigs/bean.mjs

plugins/claude-animation/skills/claude-animation/lib/rigs/bug.mjs

plugins/claude-animation/skills/claude-animation/lib/rigs/chibi.mjs

plugins/claude-animation/skills/claude-animation/lib/rigs/critter.mjs

plugins/claude-animation/skills/claude-animation/lib/textures.mjs

plugins/claude-animation/skills/claude-animation/package.json

plugins/claude-animation/skills/claude-animation/scripts/ambient.mjs

plugins/claude-animation/skills/claude-animation/scripts/chiptune.mjs

plugins/claude-animation/skills/claude-animation/scripts/music.mjs

plugins/claude-animation/skills/claude-animation/scripts/rig-sheet.mjs

plugins/claude-animation/skills/claude-animation/scripts/sound.mjs

plugins/claude-animation/skills/claude-animation/templates/film-template.mjs