Was ist line-art-animation?
line-art-animation sind zwei Dinge in einem Repository. Der Skill (SKILL.md und sechs Referenzleitfäden) erklärt Claude, wie man animierte Strichzeichnungen im Browser baut: die Bibliothek ins Projekt kopieren, eine Figur zur Freigabe zeigen und die Bewegung dann Bild für Bild prüfen. Die Bibliothek besteht aus vier abhängigkeitsfreien TypeScript-Modulen: ink.ts für Federstrich-Grundformen, gait.ts für einen Geh- und Lauf-Solver, motion.ts für Federn, Pendel und Wind und daynight.ts für eine Farbpalette nach Tageszeit.
Zwei Beispiele liegen bei: ein Spaziergänger in etwa 150 Zeilen, der beim Anklicken den Hut lüftet, und eine japanische Kanalstraße mit Bewohnern nach Zeitplan, einer Katze, Vögeln, einem Bootsmann und etwa einem Dutzend Interaktionen. Ein Capture-Skript steuert Headless-Chrome Bild für Bild, und FFmpeg macht aus den Bildern ein Video. Weitere Skripte vermessen einen Referenzclip, damit du sein Timing treffen kannst.
Das Repository steht unter MIT, braucht für die Beispiele Node 22.18 oder neuer und wurde am 10. November 2026 als einzelner Commit veröffentlicht.
Lohnt sich line-art-animation?
Die meisten Animations-Skills geben dem Modell einen Styleguide und hoffen. Dieser gibt ihm eine physikalische Antwort. Der Gang-Solver berechnet die Beine, statt sie mit Keyframes zu animieren: Der aufgesetzte Fuß gleitet genau mit Laufgeschwindigkeit nach hinten, der schwingende Fuß folgt einer Bahn mit minimalem Ruck, die Ferse hebt vor den Zehen ab, und die Hüfthöhe ergibt sich aus der Reichweite der Beine, sodass sich der Körper bei jedem Schritt hebt. Mäntel und Kimonos werden um die Knie gezeichnet und öffnen sich mit dem Schritt. Deshalb wirken die Beispiele getuscht statt interpoliert.
Auch die Arbeitsweise stimmt. Claude soll eine Figur zur Freigabe zeigen, bevor die Szene entsteht, und die Bewegung Bild für Bild prüfen, bevor es übergibt. Die Videoaufnahme rückt die Szene pro Screenshot um genau ein Bild weiter, ein 30-Sekunden-Render in 1080p wird auf einem langsamen Laptop also genauso wie auf einem schnellen, und die Doku erklärt, warum Social-Media-Clips nach Zeit neu abgetastet werden müssen, da die meisten eine variable Bildrate haben.
Der Haken: Das ist ein einziger Commit vom 10. November 2026, vier Tage vor dieser Rezension, mit 727 Sternen und 118 Forks und ohne Historie, an der sich die Pflege messen ließe. Es gibt kein npm-Paket; der Skill kopiert lib/ in dein Projekt, Korrekturen im Original erreichen dich also nicht. Und er kann nur einen Stil, Tusche auf Papier mit Tag-Nacht-Wechsel. Für Motion Graphics, Produkt-Promos oder alles, was keine Strichfigur ist, passen Motionmaxxing oder Bang Motion besser.
Unser Fazit: Ein Frontend-Entwickler, der eine lebendige Illustration auf einer Landingpage will, eine laufende Figur oder ein Städtchen in der Dämmerung, kommt damit an einem Nachmittag weiter als mit einer allgemeinen Animationsbibliothek. Behandle lib/ als Code, der jetzt dir gehört.
Wo es sich lohnt
Ein Frontend-Entwickler in einem kleinen Designstudio
Eine laufende Tuschefigur in den Header einer Portfolio-Seite setzen, die auf Klicks reagiert
Den Skill nach ~/.claude/skills klonen, Claude um die Figur bitten und die erste Pose freigeben. Das Walker-Beispiel zeigt das Muster in etwa 150 Zeilen; die Kosten sind dein Claude-Tarif.
Die Webentwicklerin einer Bäckerei
Eine Morgenszene mit Bäcker und Ofen als Schleife für die Startseite des Ladens bauen
Die Szene mit Tag-Nacht-Wechsel anfragen; daynight.ts färbt Tusche und Papier nach Tageszeit um und lässt nachts die Fenster leuchten. Sie läuft live im Browser als SVG und bleibt auf jedem Bildschirm scharf.
Ein Motion Designer, der ein Referenzvideo des Kunden nachbauen soll
Einen Gehzyklus aus einem Social-Clip als Strichzeichnung nachbauen und als 1080p-Video exportieren
Mit clip.ts Schleifenlänge und Fußpositionen messen, Claude den Gang angleichen lassen, dann mit dem Capture-Skript 900 Bilder aufnehmen und mit FFmpeg kodieren.
Bevor du dich festlegst
- Einrichtung
- Das Repository per git clone nach ~/.claude/skills/line-art-animation oder in den Ordner .claude/skills eines Projekts holen; npm install und npm run dev zeigen die Beispiele mit Node 22.18 oder neuer.
- Integrationen
- Claude Code über den Skill; Vite für die Beispiele; Headless-Chrome über das DevTools-Protokoll und FFmpeg für Videos.
- Daten und Datenschutz
- Alles läuft lokal; deinen Rechner verlässt nur, was du an Claude schickst, einschließlich angehängter Referenzclips.
- Grenzen
- Figuren werden in einem festen Raum von etwa 95 Einheiten Höhe gezeichnet; ein Tuschestil; die Aufnahme braucht lokal Chrome oder Chromium; kein veröffentlichtes Paket und keine Releases.
Was gut ist
- Gang-Solver liefert aufgesetzte Füße und natürliches Wippen ohne Keyframes
- Bibliothek aus vier TypeScript-Modulen ohne Laufzeitabhängigkeiten
- Freigabe einer Figur, bevor die ganze Szene gebaut wird
- Deterministische Bildaufnahme für wiederholbare Video-Renders
- Werkzeuge, um das Timing eines Referenzclips zu treffen
Was nicht
- Einzelner Commit, zum Zeitpunkt der Rezension vier Tage alt
- Nur ein Stil: Tusche-Strichzeichnung
- Kein Paket; kopierter Code erhält keine Korrekturen aus dem Original
- Video-Rendering braucht lokal Chrome und FFmpeg
Am besten für
Frontend-Entwickler und Designer mit Claude Code, die interaktive, handgezeichnet wirkende SVG-Figuren oder Szenen auf einer Webseite wollen.
Alternativen zu line-art-animation
line-art-animation: häufige Fragen
- Lohnt sich line-art-animation?
- Ein seltener Animations-Skill mit echter Technik darunter, vor allem dem Gang-Solver, aber vier Tage alt und für einen einzigen Look gebaut. Wir bewerten es mit 3.6 von 5.
- Was kostet line-art-animation?
- Kostenlos unter MIT. Der Skill kostet, was dein Claude-Tarif kostet; für Videos brauchst du lokal Chrome und FFmpeg.
- Welche Nachteile hat line-art-animation?
- Einzelner Commit, zum Zeitpunkt der Rezension vier Tage alt; Nur ein Stil: Tusche-Strichzeichnung; Kein Paket; kopierter Code erhält keine Korrekturen aus dem Original; Video-Rendering braucht lokal Chrome und FFmpeg.
- Für wen eignet sich line-art-animation?
- Frontend-Entwickler und Designer mit Claude Code, die interaktive, handgezeichnet wirkende SVG-Figuren oder Szenen auf einer Webseite wollen.
- Ist line-art-animation sicher für Firmendaten?
- Alles läuft lokal; deinen Rechner verlässt nur, was du an Claude schickst, einschließlich angehängter Referenzclips.
- Was sind die besten Alternativen zu line-art-animation?
- Die nächsten Alternativen, die wir getestet haben, sind motionmaxxing, Bang Motion und reanimate.
Antworten geprüft am 14. Nov. 2026.