Animated line art in SVG and TypeScript

このスキルについて

Line-art Animation is an MIT-licensed Claude skill and small TypeScript library by Dhruv Jaradi. It guides an Agent through setting a consistent pen-and-paper style, building one figure or scene corner first, solving believable walks with gait(), adding springs and pendulums for attached motion, composing interactive scenes, and checking motion frame by frame. The repository includes dependency-free modules for ink primitives, gait, motion and day-night palettes, plus walker and village examples and scripts for deterministic browser capture and reference-clip measurement.

おすすめする理由

A documentation-led workflow with a small dependency-free drawing and motion library. The upstream examples show the intended visual language; output quality still depends on the agent, browser and rendering tools used.

役立つこと

• Create a small animated SVG figure or an illustrated street, shop, park or village scene.
• Add walking, running, cycling, wind, hanging props, reactions and a day-night cycle while keeping the hand-inked style consistent.
• Capture a deterministic frame sequence for a video or measure a reference clip before matching its timing and poses.

A style-first animation workflow

1. Pin the visual language

   Choose pen weight, warm paper, figure proportions and one or two flat accent colours before adding motion.

2. Build one figure or corner

   Copy the dependency-free lib/ modules, make one good figure or scene corner, and inspect it before expanding the scene.

3. Solve motion and compose the scene

   Use gait() for planted feet and believable walks or runs, spring() and pendulum() for attached motion, and the scene and day-night guidance for layers, lights and reactions.

What the included library covers

ink.ts provides SVG pen, shape, blot, limb, joint, shoe and placement helpers; gait.ts provides walk, shuffle and run presets; motion.ts provides springs, pendulums, wind and keyed sequences; daynight.ts provides a palette and night tinting. The walker and village examples demonstrate a single reactive figure and a richer scene with scheduled people, lights, reflections and pointer-driven wind.

README and examplesUpstream SKILL.md

Check motion before delivery

The upstream verification guide calls for npm run typecheck and npm run build, exact stepping with ?debug and window.__step(), zoomed frame strips for moving parts, interaction checks, a day-night sweep and a foreground frame-rate check. For video, scripts/capture.ts advances a debug page by exact frame intervals before ffmpeg encoding.

Verification guideVideo capture guide

About the supplied cover

The cover is Dhruv Jaradi's upstream night scene from media/night.png. It is an author-provided example of the day-night line-art treatment, not a new output generated or tested by SkillHey.

Author-provided night example

使う前に

• The upstream workflow expects Node.js 22.18 or newer, TypeScript and Vite. Copy the repository's lib/ modules into the target project and use a browser that can run the SVG component.
• Video export uses a local Chrome or Chromium for capture and ffmpeg to encode the captured frames. These tools are not bundled by the Skill.