JDhruv14/line-art-animation

Was macht line-art-animation?

Animierte Illustrationskomponenten: Alles wird mit einem dünnen Stift auf Papier gezeichnet, direkt in SVG aus TypeScript gebaut, sodass es bei jeder Größe gestochen scharf bleibt, auf Zeigereingaben reagiert und zur Überprüfung oder für den Videoexport Einzelbild für Einzelbild durchgegangen werden kann.

Diese Skill enthält eine kleine Bibliothek (lib/), zwei Beispiele (examples/walker, eine einzelne Figur in ~150 Zeilen; examples/village, eine vollständige Szene) und Werkzeuge (scripts/). Lies das Beispiel, das der Anfrage am nächsten kommt, bevor du etwas schreibst.

Wie diese Arbeit bewertet wird

Sie wird wie von einem Animator betrachtet: Einzelbild für Einzelbild, herangezoomt, im Vergleich zum Leben oder zu einer Referenz. Diese wurden in der Praxis alle abgelehnt, und jede hat eine Regel unten:

• Gänge, die auf einer Sinuswelle schaukeln, Füße, die gleiten, beschleunigte Gangarten, um in einen Zeitraffer zu passen
• Gliedmaßen, die als geschlossene Röhren gezeichnet sind; linealgerade Linien; starre Kleidung, die die Beine ignoriert
• ein ganzer Satz von Komponenten, der auf einmal gebaut wird und alle gleich aussehen ("KI-Einheitsbrei")
• Interaktionen, die sich wie UI anfühlen, statt dass die Welt reagiert
• eine Seite, deren Hintergrund sich mit der Szene ändert ("sieht aus wie ein Video, nicht wie eine Komponente")
• Wiederverwendung von Charakteren aus einem Referenzclip, wenn etwas Neues verlangt wird
• übrig gebliebene Requisiten, die niemand verlangt hat (sie baten darum, die Wäsche zu entfernen)

Arbeitsablauf

1. Das Aussehen festlegen, bevor sich etwas bewegt. Lies references/style.md. Entscheide die Strichstärke, Papierfarbe, Figurenproportionen und die ein oder zwei flachen Akzentfarben.
2. Das Projekt aufsetzen. Kopiere lib/ in das Projekt (es sind vier abhängigkeitsfreie .ts-Dateien) und verwende Vite + TypeScript (package.json, tsconfig.json und vite.config.ts in diesem Repository zeigen das Setup). Komponenten sind reines DOM/SVG — kein Framework nötig.
3. Zuerst eine Figur oder eine Ecke bauen und zeigen (Screenshot oder kurzen Clip, neben der Referenz, falls vorhanden). Hol dir ein Ja, bevor du den Rest baust. Ein kompletter Satz, der auf einmal gebaut wird, kommt generisch zurück; ein gutes Stück zeigt die Messlatte.
4. Bewegung erzeugen mit references/motion.md: gait() für Gehen und Rennen, spring() / pendulum() für alles Befestigte oder Hängende, Schlüsselposen mit curve() oder sequence() für Gesten. Eine Figur niemals mit freien Sinuswellen animieren.
5. Die Szene komponieren mit references/scenes.md: eine eigenständige Karte auf einem festen Seitenhintergrund, Ebenen, eine Tageszeit-Palette aus lib/daynight.ts, Lichter, Wind, Personen, die nach Zeitplan eintreffen, Interaktionen als Reaktionen.
6. Überprüfen mit references/verify.md, bevor du etwas zeigst: Typprüfung, ?debug-Schrittmodus, herangezoomte Einzelbildstreifen von jeder bewegten Sache, ausgelöste und schrittweise durchgegangene Interaktionen, 60 fps in einem echten Tab.
7. Wenn es einen Referenzclip zu treffen gibt, folge references/matching.md — messe Timing und Posen aus dem Clip, anstatt zu raten, und überprüfe mit einer Überlagerung.
8. Wenn sie ein Video wollen, folge references/video.md (deterministische Headless- Aufnahme mit scripts/capture.ts, dann ffmpeg).

Regeln, die es zum Funktionieren bringen

• Gliedmaßen sind zwei offene Striche. limb() zeichnet ein papiergefülltes Band zwischen zwei Strichlinien, die am fernen Ende kurz voreinander aufhören. Dies ist das Markenzeichen des Stils.
• Linien sind geschwungen. Gelenke sind abgerundet, Kanten biegen sich leicht, nichts ist linealgerade.
• Jede Figur in ihrem eigenen Raum zeichnen — ~95 Einheiten groß, Füße auf y = 120, +x zugewandt, stehend bei x = 40 — und mit place(g, x, y, dir, scale) platzieren. Proportionen, Strichstärke und die voreingestellten Gangarten setzen diesen Raum voraus.
• Kleidung wird um das Skelett herum gezeichnet. Löse die Beine (auch wenn sie verdeckt sind), dann zeichne den Mantel- oder Kimonosaum vom vorderen Knie und den Knöcheln aus, sodass sich der Stoff mit dem Schritt öffnet und schließt. Ärmel, Schals und Taschen schwingen an Federn.
• Füße stehen fest. Bewege einen Läufer um genau gait.speed × scale pro Sekunde und der Standfuß bleibt still auf dem Boden. Beschleunige keinen Gang, um ihn an eine komprimierte Uhr anzupassen; komprimiere stattdessen Ankünfte.
• Tusche ist currentColor, Papier ist .pp. Färbe die gesamte Zeichnung mit applyPalette() um (Tag: dunkle Tusche auf warmem Papier; Nacht: helle Tusche auf Indigo, warme Fenster). Flächige Gliedmaßenfüllungen müssen solid() verwenden, sonst gewinnt das Papier-CSS.
• Die Komponente ist eine Karte. Die Seite darum ändert nie ihre Farbe.
• Interaktionen sind Reaktionen der Welt: eine Person verbeugt sich oder lüftet den Hut, eine Katze wacht auf und streckt sich, eine Laterne schwingt, Vögel stieben auseinander, ein Fisch springt. Zeigerbewegung ist Wind. Keine Knöpfe innerhalb der Szene; eine einzige schwache Hinweislinie reicht.
• Neu bedeutet neu. Wenn die Vorgabe "wie dieses, aber neu" lautet, behalte Medium, Stift, Proportionen und Timing-Gefühl bei; erfinde die Charaktere, Aktivitäten und Requisiten.

Bibliothek auf einen Blick

Modul	was es dir gibt
lib/ink.ts	pen shape blot paint limb solid joint hang curve shoe place toScene inkDefs run
lib/gait.ts	`gait({ kind: 'walk'
lib/motion.ts	spring pendulum pointerWind sequence seeded wobble ease minJerk …
lib/daynight.ts	palette(τ) → Himmel, Papier, Tusche, lamp, night, sunset; applyPalette nightTint

run(draw) steuert alles mit draw(t, dt). Zwei URL-Flags sind zur Überprüfung wichtig: ?t=1.25 friert die Zeit ein; ?debug deaktiviert rAF und macht window.__step(seconds) für exaktes Schritt-für-Schritt-Vorgehen verfügbar (Hintergrund- und Headless-Tabs drosseln rAF, also immer im Debug-Modus überprüfen).

Skripte

• scripts/capture.ts <url?debug> <outDir> <frames> <fps> [w] [h] [setupJs] [frameJs] — deterministische PNG-Einzelbilder aus Headless Chrome
• scripts/clip.ts period|blobs … — Schleifenlänge einer Region; Erkennung dunkler Kleckse pro Einzelbild
• scripts/frames.sh <clip> x y w h outDir — mit Gitternetz überlagerte Einzelbilder zum Ablesen von Posen aus einem Clip

Alle laufen mit Node ≥ 22.18 (TypeScript wird nativ entfernt) plus ffmpeg; capture.ts findet ein lokales Chrome/Chromium oder verwendet $CHROME.