line-art-animation skill
A skill and TypeScript library for live SVG scenes in an ink style: figures walk, react to clicks and the day turns to night
- 599 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent installs npm dependencies and runs a dev server, headless Chrome and ffmpeg on your machine.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/line-art-animationDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent installs npm dependencies and runs a dev server, headless Chrome and ffmpeg on your machine.
This is third-party code. Review the repository files before installing.
What it does
The line-art-animation skill teaches Claude to build animated illustrations drawn with a thin pen on paper. The agent copies the `lib/` folder into the project: four dependency-free modules for drawing primitives, a gait solver, springs and pendulums, and a time-of-day palette. SKILL.md sets the order of work. The agent first pins the style, then draws one figure or one corner of the scene and waits for approval. Only then does it build the rest and check the motion frame by frame at zoom. The repository has two examples: a man with a briefcase in about 150 lines and a Japanese street with a canal, villagers on schedules and a dozen interactions. The `scripts/capture.ts` script records the scene through headless Chrome frame by frame, and ffmpeg turns the frames into a video.
Who it is for. Frontend developers and designers who want hand-drawn animation on a site or in a video without After Effects or Lottie.
Good fit when
- A landing page needs a living illustration: a street, a cafe or a park where people walk and react to the pointer.
- There is a short clip of a character's walk, and the animation has to match it with measured timing.
- An illustrated scene needs a day and night cycle with lit windows and a shifting palette.
- A finished component has to be exported to a 1080p video with the same result on any machine.
Not a fit when
- You need interface animation: buttons, transitions, loaders.
- The project requires Lottie files for a mobile app.
- The style is far from a thin line on paper, for example 3D graphics.
Example request
Make a line art animation of a bakery at dawn: a baker carrying trays, steam from the oven, a cat in the window.Limitations
Installation is described only for Claude Code: the repository is cloned into the skills folder. The examples and scripts need Node 22.18 or newer, and the build uses Vite and TypeScript. Video export needs a local Chrome or Chromium and ffmpeg, and the browser path is set with the `CHROME` variable. Components are written in plain DOM and SVG, with no ready wrappers for React or Vue. The skill sticks to one thin-line style, so other drawing manners are out of scope.
How to disable. Delete the `~/.claude/skills/line-art-animation` folder or its copy in the project's `.claude/skills/`.
FAQ
Do line-art-animation components need a framework?
No, components are built in plain DOM and SVG. Development uses Vite and TypeScript, and their configs sit in the repository root.
How do I get a video from a scene?
Run `npm run dev`, then `scripts/capture.ts` with the scene URL, frame count and size. The script records frames through headless Chrome, and ffmpeg joins them into an MP4.
Why does the walking look natural?
The `gait()` function solves the legs: the planted foot slides back at travel speed, and hip height depends on where the legs can reach. The skill forbids free sine waves for bobbing.
Can the animation copy a clip someone else made?
Yes, there is `scripts/clip.ts` and the `references/matching.md` guide for that. The script measures loop length and foot positions in a chosen region, and an overlay mode checks the drawing against the clip.
How does a scene move from day to night?
The `palette()` function returns sky, paper and ink colours for any time of day, and `applyPalette()` recolours the whole drawing. At night the lines turn pale on indigo, while windows and lanterns glow.
Discussion
No questions or reviews yet.
Related
SkillsA skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
A Claude skill that turns the name of an object into an isometric drawing in one HTML file with working buttons
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A skill that draws a UI component as an Apple-style sheet with spacing, radii and layers, plus a short film from it.
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
A skill that turns copy, a style brief and sound into coherent code animation: storyboard, style choice, Remotion and review.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| line-art-animation (this card) | no | 599 | |
| Lottie Skill (Diffusion Studio) | no | 5,738 | generates Lottie files from text; here live SVG code with a gait solver and pointer reactions |
| AI Animation Skills | no | 1,775 | single-file HTML animations for slides and diagrams; here hand-drawn characters and scenes in one ink style |
README in short
The README shows the village scene by day and night, lists what the repository contains and gives a code sample with walking legs. Separate sections cover running the examples, rendering video and measuring a reference clip.
README badge
Original SKILL.md
--- name: line-art-animation description: Build animated line-art components in SVG and TypeScript — thin ink lines on paper, people and animals that walk, run, cycle and react, scenes with wind, lit windows and a day/night cycle, exported to video if needed. Use this whenever someone asks for a line art (or ink, pen, doodle, hand-drawn) animation, an animated illustration or scene component, little characters doing everyday things, a living street/village/shop/park, a day-night cycle illustration, "make it like this clip" for a drawn animation, or a video of such a component — even if they never say "SVG" or "line art". --- # Line-art animation Animated illustration components: everything is drawn with one thin pen on paper, built live in SVG from TypeScript, so it stays crisp at any size, responds to the pointer, and can be stepped frame by frame for checking or video export. This skill ships a small library (`lib/`), two examples (`examples/walker`, a single figure in ~150 lines; `examples/village`, a full scene) and tools (`scripts/`). Read the example that's closest to the request before writing anything. ## Workflow 1. **Pin the look** before anything moves. Read `references/style.md`. Decide the pen weight, paper colour, figure proportions and the one or two flat accent colours. 2. **Set up the project.** Copy `lib/` into the project (it's four dependency-free `.ts` files) and use Vite + TypeScript (`package.json`, `tsconfig.json` and `vite.config.ts` in this repo show the setup). Components are plain DOM/SVG — no framework needed. 3. **Build one figure or one corner first** and show it (screenshot or a short clip, next to the reference if there is one). Get a yes before building the rest.