JDhruv14/line-art-animation

What it does

This repository provides two things for animated line-art: a Claude skill that guides an AI assistant through building such components, and a dependency-free TypeScript library for drawing them by hand. Figures are rendered as open pen strokes in SVG, so they stay sharp at any scale and can respond to pointer input. The included examples range from a single briefcase-carrying walker to a full street scene with villagers, a cat, birds, a boatman, lit windows and a day-night cycle.

Quick start

To install the Claude skill for a project, clone it into a project-level skills folder:

mkdir -p .claude/skills
git clone https://github.com/JDhruv14/line-art-animation .claude/skills/line-art-animation

Then ask Claude for the animation you want, such as a dawn bakery scene with a baker and steam. The skill describes a workflow where Claude reads SKILL.md, copies lib/ into the project, shows one figure for approval, and checks motion frame by frame.

To run the bundled examples instead, use Node 22.18 or newer:

npm install
npm run dev

Open http://localhost:5173 and view the village scene. Drag the sun or moon to change time, move the pointer for wind, and click the people, windows, lanterns, cat, birds or water. URL flags like ?start=0.9, ?tau=0.5, ?day=30 and ?debug control the starting time, pin time, day length and manual stepping. The walker example shows the minimal figure setup, and the village demo shows the full scene.

Using the library

The library modules live in lib/: ink.ts for drawing primitives, gait.ts for leg solving, motion.ts for springs, pendulums and wind, and daynight.ts for a time-of-day palette. gait() computes a walk rather than keyframing it, keeping planted feet sliding at travel speed and deriving hip height from the planted leg reach; the README includes a complete legs-only program that imports these modules and animates with run(). palette(τ) returns sky, paper and ink colors for any time of day, and applyPalette() recolors the whole drawing.

Rendering video

After starting the dev server, the capture script drives headless Chrome over the DevTools protocol, advancing exactly one frame per screenshot so capture is independent of machine speed. It needs a local Chrome or Chromium (or $CHROME) and ffmpeg. The README gives the exact scripts/capture.ts command against the village URL and an ffmpeg command to assemble PNG frames into an MP4. A separate scripts/clip.ts can measure a reference clip's loop period or dark blobs per frame for matching motion.

Constraints

Node 22.18 or newer is required to run the examples. Video capture requires Chrome or Chromium plus ffmpeg. The library is dependency-free and written in TypeScript with strict typechecking for lib/ and the walker example. The project does not expose prebuilt npm packages; the library is used by copying modules into a project, as the Claude skill does. Licensing is MIT.

HotRepo's take

Recorded on the 2026-11-10 new-project list, the repository gained 105 stars and 10 forks in roughly nine and a half hours after its first tracked snapshot, with no GitHub all-language daily rank recorded. That is a short single-snapshot observation from launch day, not a trend. What stands out technically is the split between a Claude skill for guided scene construction and a small, self-contained TypeScript core whose walk solver makes the figures move plausibly; the bundled village scene demonstrates that combination rather than describing it.