A Claude skill draws walking ink figures live in a webpage

A coding agent can now draw a small animated scene straight into a web page. Figures walk, a river moves, windows light up at dusk, and the pointer can push them. The project is a Claude skill called line-art-animation. It reached 605 stars on 13 November 2026, three days after its first commit.

The project is JDhruv14/line-art-animation on GitHub. The licence is MIT. The repository was created on 10 November 2026. GitHub reports 605 stars and 96 forks, read from the API today. It carries one commit.

What the skill does

The repository is a Claude skill and a small TypeScript library in one place. A user with Claude Code clones the folder into .claude/skills/line-art-animation. The user then asks the agent for a scene. The README gives three sample requests. One is a bakery at dawn with a baker and a cat in the window. Another is a looping component that matches a reference clip the user attaches. The third is a 30 second day-to-night render at 1080p. Claude reads SKILL.md, then copies four TypeScript files into the project. The agent shows one figure for the user to approve first. Then it builds the rest.

Every drawing is live SVG. A figure keeps its edges sharp at any size. The pointer can push a figure or change the light.

The four pieces of the library

The lib/ folder has four TypeScript modules. ink.ts holds the drawing primitives, so lines look like ink on paper. gait.ts solves a walk or a run from two foot positions and a speed. motion.ts gives springs, pendulums and wind, so hair and skirts move in reply to a gust. daynight.ts holds a palette that runs from morning to night and picks the shadow colour from the time. The author says each module has no outside dependency.

The examples/walker/ folder shows one figure in about 150 lines. A man with a briefcase walks across the card. A click makes him tip his hat. The examples/village/ folder shows a full scene. The village has a street of Japanese machiya houses, a tea house and a bath house by a canal. There are villagers on schedules, a cat, birds and a boatman. Windows light up at dusk and reflect on the water. The README lists about a dozen interactions in the scene.

The scripts/ folder has two tools. One captures frames for video in a fixed order, so the same prompt gives the same frames each time. The other measures a reference clip so the agent can match the walk speed and the timing.

The browser draws every frame from the agent's code

Most AI art on a page today is a single picture or a prerendered MP4. A picture does not react. A video file is heavier and starts slow. This skill reads a prompt and writes code that the browser draws each frame. The agent is the whole pipeline. The author did not publish a before and after measurement for file size or load time.

The skill works with Claude Code. The README does not mention Codex or Cursor. A team on a different coding agent would need to port the skill file by hand.

Source

JDhruv14/line-art-animation on GitHub.