nzl153/paint-video-skill

Handgezeichnete Animationskurzfilme

Die gesamte Pipeline: Jeder Frame ist eine reine Funktion von t (in Sekunden), die mit Pinselstrichen gezeichnet wird (Tuschelinien, flächige Füllungen, Aquarellverläufe, Schraffuren). Headless Chrome rendert die Frames parallel als Bilder, ffmpeg setzt sie dann zu MP4 zusammen. Ausnahmen sind Fluid- und Sandanimationen: Sie haben framesübergreifende Simulationszustände und können nur sequenziell von Anfang an gerendert werden. Kein einziges Bild im Video ist KI-generiert, alles ist mit Code gezeichnet.

Acht Engines:

Stil	Engine	Startpunkt
Aquarell, Tusche (Schraffur für lokale Druckoptik)	p5.js + p5.brush, Geschwindigkeit variiert stark mit der Komplexität der Kamera	ClaudeAnimationBase (MIT)
Kreide, Bilderbuch, Bildergeschichte	Reiner 2D Canvas, 10–50 ms pro Frame	crayon-kit/ in diesem Repository, siehe crayon.md
Schattenspiel, Silhouette, Bühne	Reiner 2D Canvas, 2–10 ms pro Frame, Gong und Trommel per Code synthetisiert	piying-kit/ in diesem Repository, siehe piying.md
Farbige Tusche-Kampfszenen (Wushan-Wuxing-Stil)	Reiner 2D Canvas, 20–100 ms pro Frame	inkfight-kit/ in diesem Repository, siehe wushan.md
Wissenschaftliche Erklärvideos (Diagramme, Untertitel, Voiceover)	Reiner 2D Canvas, 60–130 ms pro Frame, Soundeffekte per Code synthetisiert, Voiceover mit edge-tts	explainer-kit/ in diesem Repository, siehe explainer.md
Druckgraphik-Serie (Siebdruck, Kupferstich, Cyanotypie, Raster, usw.)	SVG, ca. 1 s pro Frame, Multiparallel-Rendering; Musik mit Tone.js und echten Instrumenten-Samples	prints-kit/ in diesem Repository, siehe prints.md, music.md
Fließende Tinten-MVs (notengesteuert, abstrakt)	WebGL2 stabiles Fluid, ca. 65 ms pro Frame, nur sequenzielles Rendering	fluid-kit/ in diesem Repository, siehe fluid.md
Sandanimation (Leuchtkasten, ein Bild verwischt zum nächsten)	WebGL2 Höhenfeld, ab ca. 90 ms pro Frame, nur sequenzielles Rendering	sand-kit/ in diesem Repository, siehe sand.md
Heftkritzeleien (Kugelschreiber, Buntstift, fotografiertes Papier)	Reiner 2D Canvas, ganze Seite vorgerendert als Textur, 2–10 ms pro Frame	doodle-kit/ in diesem Repository, siehe doodle.md
Punkt-Montage (Stilwechsel nahtlos)	Node + @napi-rs/canvas direkt Frames ausgeben, kein Browser	montage-kit/ in diesem Repository, siehe montage.md

Referenzwerk: PDoomVideo, ein zweieinhalbminütiges MV, generiert von Claude in Claude Code. Dieses Repository hat keine Lizenz – nur zum Lernen, nicht zur Veröffentlichung des Codes. ClaudeAnimationBase ist die später vom selben Autor veröffentlichte MIT-Basis.

Umgebung

• Dieser Skill stammt aus dem Repository paint-video-skill. Die darin erwähnten Ordner crayon-kit/, piying-kit/, inkfight-kit/, explainer-kit/, prints-kit/, fluid-kit/, sand-kit/, doodle-kit/, montage-kit/, examples/, tools/ befinden sich in diesem Repository, nicht im Skill-Verzeichnis; falls lokal nicht vorhanden, den Benutzer fragen, wo das Repository geklont ist, oder ein neues Klon erstellen.
• Node 22.12 oder höher, Chrome oder Chromium (falls nicht gefunden, render.mjs mit --chrome=<Pfad> oder Umgebungsvariable CHROME_PATH setzen), ffmpeg im PATH.
• Für Untertitel-Werkzeuge wird Python 3 mit numpy und Pillow benötigt.
• npm install lädt und führt Drittanbieter-Code aus – vorher den Benutzer fragen. Bei neuen Projekten das bereits installierte Vorlagenverzeichnis inklusive node_modules kopieren, um erneute Installation zu vermeiden.

Arbeitsschritte (Aquarell/Tusche)

1. Basis kopieren in ein neues Projektverzeichnis, dabei out, docs, .git ausschließen. Unter Windows: robocopy <Basis> <NeuesVerzeichnis> /E /XD out docs .git /XJ (Exit-Code 1 bedeutet Erfolg).
2. Zuerst die ANIMATION_GUIDE.md im neuen Verzeichnis vollständig lesen. Dort stehen alle Regeln und APIs: paint(), inkLine(), Kamera, Übergänge, alle Parameter von clawd() – hier nicht wiederholt.
3. Zuerst STORYBOARD.md schreiben, dem Benutzer zeigen, dann Code schreiben. Format laut Guide: Ein-Satz-Zusammenfassung, Welt & Farbpalette, durchgehendes Motiv, emotionale Arc, Zeitplan der „Lesepunkte