What is line-art-animation?
line-art-animation is two things in one repository. The skill (SKILL.md and six reference guides) tells Claude how to build animated line drawings in the browser: copy the library into your project, show one figure for approval, then check the motion frame by frame. The library is four dependency-free TypeScript modules: ink.ts for pen-stroke drawing primitives, gait.ts for a walk and run solver, motion.ts for springs, pendulums and wind, and daynight.ts for a time-of-day colour palette.
Two examples come with it: a walker of about 150 lines who tips his hat when clicked, and a Japanese canal street with villagers on schedules, a cat, birds, a boatman and about a dozen interactions. A capture script drives headless Chrome one frame at a time, and FFmpeg turns the frames into video. Further scripts measure a reference clip so you can match its timing.
The repository is MIT licensed, needs Node 22.18 or newer for the examples and was published as a single commit on 10 November 2026.
Is line-art-animation worth it?
Most animation skills hand the model a style guide and hope. This one hands it a physics answer. The gait solver works the legs out rather than keyframing them: the planted foot slides back at exactly the travel speed, the swinging foot follows a minimum-jerk path, the heel lifts before the toe, and hip height comes from what the legs can reach, so the body rises over each step. Coats and kimonos are drawn around the knees, so they open with the stride. That is why the examples look inked rather than tweened.
The working method is sound too. Claude is told to show one figure for approval before building the scene and to verify motion frame by frame before handing over. Video capture advances the scene by exactly one frame per screenshot, so a 30-second 1080p render comes out the same on a slow laptop as on a fast one, and the docs explain why social clips must be resampled by time, since most are variable frame rate.
The catch: this is one commit from 10 November 2026, four days before this review, with 727 stars and 118 forks and no history to judge upkeep by. There is no npm package; the skill copies lib/ into your project, so fixes upstream do not reach you. And it does one style, ink on paper with a day-night cycle. For motion graphics, product promos or anything not drawn as a line figure, Motionmaxxing or Bang Motion fit better.
Our take: a front-end developer who wants a living illustration on a landing page, a walking figure or a small town at dusk, will get further in an afternoon with this than with a general animation library. Treat lib/ as code you now own.
Where it earns its place
A front-end developer at a small design studio
Put a walking ink figure in a portfolio site header that reacts to clicks
Clone the skill into ~/.claude/skills, ask Claude for the figure and approve the first pose. The walker example shows the pattern in about 150 lines; the cost is your Claude plan.
A bakery owner's web developer
Make a looping dawn scene of a baker and an oven for the shop's homepage
Ask for the scene with a day-night cycle; daynight.ts recolours ink and paper by time of day and lights windows at night. It runs live in the browser as SVG, so it stays sharp on any screen.
A motion designer matching a client's reference reel
Rebuild a walk cycle from a social clip in line art and export a 1080p video
Use clip.ts to measure the loop length and foot positions, have Claude match the gait, then capture 900 frames with the capture script and encode with FFmpeg.
Before you commit
- Setup
- git clone the repository into ~/.claude/skills/line-art-animation, or into a project's .claude/skills folder; npm install and npm run dev to see the examples on Node 22.18 or newer.
- Integrations
- Claude Code via the skill; Vite for the examples; headless Chrome over the DevTools protocol and FFmpeg for video.
- Data and privacy
- Everything runs locally; the only data that leaves your machine is what you send to Claude, including any reference clip you attach.
- Limits
- Figures are drawn in a fixed space about 95 units tall; one ink style; capture needs a local Chrome or Chromium; no published package or releases.
What’s good
- Gait solver produces planted feet and natural body bob without keyframes
- Library is four TypeScript modules with no runtime dependencies
- Approval step on one figure before the full scene is built
- Deterministic frame capture gives repeatable video renders
- Tools for matching the timing of a reference clip
What’s not
- Single commit, four days old at review
- One visual style: ink line art
- No package; copied code does not receive upstream fixes
- Video rendering needs local Chrome and FFmpeg
Best for
Front-end developers and designers using Claude Code who want interactive, hand-drawn-looking SVG figures or scenes on a web page.
line-art-animation alternatives
line-art-animation: common questions
- Is line-art-animation worth it?
- A rare animation skill with real engineering under it, the gait solver above all, but four days old and built for one look. We rate it 3.6 out of 5.
- How much does line-art-animation cost?
- Free under MIT. Using the skill costs whatever your Claude plan costs; rendering video needs a local Chrome and FFmpeg.
- What are the downsides of line-art-animation?
- Single commit, four days old at review; one visual style: ink line art; no package; copied code does not receive upstream fixes; video rendering needs local Chrome and FFmpeg.
- Who is line-art-animation best for?
- Front-end developers and designers using Claude Code who want interactive, hand-drawn-looking SVG figures or scenes on a web page.
- Is line-art-animation safe for company data?
- Everything runs locally; the only data that leaves your machine is what you send to Claude, including any reference clip you attach.
- What are the best line-art-animation alternatives?
- The closest alternatives we have reviewed are motionmaxxing, Bang Motion and reanimate.
Answers checked Nov 14, 2026.