Line Art Motion

---
name: line-art-motion
description: "Turn one reference drawing (line art, logo, sketch) into a faithful, animated, interactive SVG page with video exports: centerline trace, part map, occlusion silhouette, deterministic physics-driven motion, hover layer, proofs, Pages publish."
user-invocable: true
when_to_use: "Use when the owner supplies a still drawing/image to animate (404 pages, hero illustrations, mascots, logo reveals) and wants it faithful to the reference. Not for recreating a reference video (use motion-video-recreation)."
category: frontend
keywords: [line-art, centerline-trace, svg-animation, draw-on, flight-controller, physics-motion, occlusion, hover-interaction, virtual-clock]
license: MIT
metadata:
  author: design-os
  version: "1.0.0"
---

# Line art to motion

**Read [the pipeline](../../docs/pipelines/line-art-to-motion-pipeline.md) before work.** It defines the stages, the artifact and gate of each stage, and the pitfalls already paid for. The worked case is `plans/cases/drone-404-svg-animation.md` (PR #6).

## Start
`node scripts/new-line-art-case.mjs <case> --source raster` creates the case files and prints the next commands (`--source flipbook` is experimental: its only trial case was rejected). Every script then takes `--case <case>`.

## Preconditions
1. Activate `skills/product-designer/SKILL.md` and `es-designer` before any UI or motion code.
2. Record the owner's fidelity target, deliverables and motion *feel* in `plans/<case>.md` before tracing.
3. Keep the reference in `research/<case>/`, and give the case a parts file shaped like `research/drone-404/drone-parts.json`.

## Non-negotiables
- Geometry comes from pixels (`scripts/trace-line-art-centerline.py`, `scripts/build-line-art-geometry.mjs`), never from hand-typed paths.
- The rest pose equals the reference: every deformation is multiplied by the part's activity.
- One pure time function feeds the page, `window.__seekToTime`, the Motion IR and the exporter. Live interaction is a separate layer that is never exported.
- Weighted motion uses a controller or springs (ζ 0.65–0.8), tuned from a plotted profile. GSAP is not the fix for "rigid".
- Evidence is regenerated by one exporter run after the last edit (stale proofs cleared, MP4 contact sheet decoded from the encoded file). A passing gate is not visual acceptance; the owner decides that.