A living ink street on your site: the little people's feet don't slide, and windows light up at night

Look at any cartoon an AI threw together in a minute. The little guy walks, but his feet seem to skate on ice. His body bobs up and down like a fishing float.

Here's what's going on. Motion is usually drawn with a sine wave: back and forth, up and down. The feet have no idea they're standing on the ground.

On November 10, a skill called line-art-animation came out for Claude Code. It does the opposite: it doesn't animate the walk, it solves it. The planted foot slides back at exactly the walking speed. So on screen it stays put, like a real one.

The idea in one line: a living street drawn in ink, right on your website. People walk by, a cat naps, and at night the windows light up.

Where the trick is

The skill is instructions for the agent plus a small TypeScript library. Inside are four files with no dependencies:

• ink.ts — the pen. An arm or a leg is two open lines that don't close at the end. That's where the "drawn by hand" feel comes from.
• gait.ts — the walk. The heel lifts before the toe, the hips rise over each step and dip when both feet are down.
• motion.ts — springs and pendulums. A scarf, a bag and a lantern swing on their own.
• daynight.ts — time of day. By day, dark lines on warm paper; at night, pale lines on indigo.

Everything is drawn as live SVG. So the picture stays sharp on any screen and reacts to the mouse.

The skill also lists why this kind of work got rejected. For example: never build the whole cast at once. The agent first shows you one little figure and waits for your "yes". Otherwise you get the same generic AI mush.

What you'll learn

• Adding a skill to an agent. One folder, and Claude Code can do something new.
• SVG and TypeScript. How to draw with code and move what you drew.
• Grown-up animation. How solving motion differs from "wiggle it with a sine".
• Splitting the task. One piece first, then the rest.

A ready starter prompt

You need Node 22.18 or newer. Put the skill into Claude Code's skills folder:

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

Open Claude Code in an empty project folder and give it the task:

The weak prompt gets you a pretty but lifeless GIF. The strong one sets the place, the characters, the reactions and the check. And the key part is "first only the baker". That's the rule the whole skill is built on.

What you end up with

You open the page. A thin line, warm paper. The baker strides toward the shop, and his apron opens with every step.

Move the mouse — the sign trembles and the steam drifts sideways. Click the cat — it stretches. Drag the sun below the horizon: the paper darkens to indigo, and the bakery windows light up.

Look at the author's example to see the bar. It's a Japanese street by a canal: villagers walk on schedules, a boatman rows, birds take off when you click.

Want a social post? The skill includes frame-by-frame capture. A script records the page and ffmpeg stitches a 1920 by 1080 clip. You get 30 seconds from morning to night.

And it doesn't have to be a bakery. Your courtyard. Your office. The street you grew up on.

Honest limits

This is a long agent run. It draws, checks and redoes — and that costs tokens.

Video needs ffmpeg on your computer. The page itself works in the browser without it.

The repo is one day old. It's MIT licensed, but things may change. If the example doesn't start, ask the agent to read the error.

What makes a little figure come alive isn't a pretty line. It's that its foot knows where the ground is.

Source: line-art-animation — a Claude Code skill for ink animations in SVG (GitHub)