JavaScript-Animation (jeder Frame in Code gezeichnet)

Was macht JavaScript-Animation (jeder Frame in Code gezeichnet)?

Erstelle kurze Animationsfilme, bei denen jedes Pixel berechnet wird: keine Bilder, keine Schriftarten zum Laden, keine Bibliotheken. Eine HTML-Datei enthält das gesamte Werk; ein Headless-Browser sucht es Frame für Frame in ein MP4.

Modell

Erstellt und getestet mit Claude Opus 5.5; die Zeichenqualität hängt stark vom Modell ab. Die unten stehende Selbstprüfung benötigt Bildeingabe: Wenn das aktuelle Modell keine Bilder sehen kann, teile dies dem Benutzer mit und behandle die visuelle Überprüfung als nicht durchgeführt. Andere Modelle sind ungetestet; wenn das Ergebnis grob aussieht, sage, dass ein stärkeres Modell wahrscheinlich hilft, anstatt zu behaupten, es sei das bestmögliche.

Standardablauf: Nicht anhalten, um zu fragen

Führe direkt durch. Wähle sinnvolle Standardwerte und erwähne Alternativen bei der Auslieferung. Frage vor dem Start nur, wenn es überhaupt kein Thema gibt (z. B. „mach eine Animation“, sonst nichts).

1. Lies die Aufgabenstellung. Leite die Form (Geschichte, Erklärfilm, Gedicht, Loop, interaktive Seite), die Länge (Standard 15-20 s; länger nur, wenn das Thema nicht in dieser Zeit erzählt werden kann) und das Seitenverhältnis (Standard 1920x1080) aus dem ab, was der Benutzer gesagt hat. Bildschirmtext ist in der Sprache, in der der Benutzer die Aufgabenstellung geschrieben hat; mache ihn nur zweisprachig, wenn der Benutzer darum bittet oder das Publikum eindeutig gemischt ist. references/forms.md enthält eine kurze Struktur für jede Form.
2. Plane den Look und den Sound aus dem Thema und dem Publikum in eigenen Worten: Was der Film ist, wie er aussieht und klingt, und warum das zu diesem Thema und diesem Publikum passt. Es gibt keine auszufüllende Liste; references/techniques.md enthält Zutaten, und die Werte des Starters sind Platzhalter, kein Hausstil. Verwende niemals den Look oder Sound eines vorherigen Stücks standardmäßig: Zwei verschiedene Themen sollten nicht gleich aussehen oder klingen. Wenn der Benutzer auf das Stück einer anderen Person verweist („wie dieses virale“), übernimm seine Techniken, niemals seine Charaktere, Geschichte oder Kompositionen.
3. Beat-Raster, Storyboard und Blocking als Daten (references/storyboard.md). Zuerst Tempo und Abschnitte; dann eine Shot-Liste mit einem Tempo, das zur Form passt (Tempotabelle in references/storyboard.md; jeder Shot mit Bildausschnitt, Kamerabewegung, Aktion, dem Beat, auf den er fällt, seinem Ton, seinem Übergang); dann das Blocking (für eine Geschichte oder einen Erklärfilm die Spuren einer kontinuierlichen Welt). Diese gehen als BPM, SECTIONS, SHOTS, EVENTS in die Seite ein: Die Szenen, die Kamera und der Soundtrack lesen sie alle, sodass Bild und Ton konstruktionsbedingt übereinstimmen. Überprüfe bei einer Geschichte oder einem Erklärfilm die Logik: Jeder Beat wird durch den vorherigen verursacht, die Metapher ist im Bild sichtbar.
4. Baue aus templates/starter.html. Sie ist bereits storyboard-gesteuert: eine Welt, gezeichnet in Weltkoordinaten, mit withCamera pro Shot, claim() für jedes Textstück und jedes Schlüsselobjekt. Ersetze die Platzhalter-Palette und die Demo-Welt. Behalte den Vertrag: draw(frame) ist eine reine Funktion der Frame-Nummer. Verwende rng(seed) / hash2(), niemals Math.random oder Date.
5. Selbstprüfung, dann Rendern (nächster Abschnitt). Korrigiere und prüfe erneut, bis alles sauber ist.
6. Ausliefern: das MP4 und das HTML (es läuft live im Browser; Klicken startet den Ton). Biete dann in ein oder zwei Zeilen an, was geändert werden kann: ein anderer Look, KI-Musik statt synthetisierter Musik, andere Länge.

Für Musik verwende das soundtrack-Skill (Standard: synthetisiert in der Seite mit Web Audio, kein Schlüssel nötig).

Selbstprüfung (der Agent führt sie durch; der Benutzer sieht sie nie)

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # ein Frame pro Sekunde, an Schnitten vorbei
node scripts/render.mjs piece.html shot --stills 90,300,610   # bestimmte Momente
node scripts/render.mjs piece.html piece.mp4                  # vollständiges Rendern (+ Soundtrack, falls die Seite einen hat)
node scripts/asset-audit.mjs piece.html                       # beweist Null-Asset: exit 1, wenn etwas geladen oder eingebettet ist
node scripts/layout-check.mjs piece.html                      # Text kollidiert mit Text oder überschreitet ein beanspruchtes Objekt
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # Schnitte auf dem Beat, kein Schreck

Dann zwei Durchgänge per Auge, beide in references/qc.md:

1. Storyboard-Konformität: ein Standbild am Handlungs-Beat jedes Shots, gelesen gegen seine Zeile (ist der Akteur dort, wo das Blocking es sagt, und tut er das, was die Zeile sagt?).
2. Regie-Durchgang: das Kontaktblatt mit 2 Frames pro Sekunde (--sheet .5), bewertet auf Tempo zur Form, Bildausschnitt-Vielfalt, tote Frames, ob jede Aktion ihren Ton hat und ob der Look zum Publikum passt. Mache mindestens zwei Runden. Rendere Standbilder der Frames, die du änderst, anstatt jedes Mal den gesamten Film neu zu rendern.

Nur wenn ausgelöst

Wann	Tun
Ein Charakter erscheint in mehr als einer Szene	Vor den Szenen den Charakter allein rendern (Ausdrücke + Posen) und selbst gegen references/character.md prüfen. Charaktere legen Ankerpunkte frei (Mund, Hände), damit Requisiten an ihnen befestigt werden können.
Der Benutzer hat Fotos von echten Menschen, Haustieren oder Orten bereitgestellt	Den Charakter aus den Fotos mit der Extraktionsmethode in references/character.md bauen. Fotos bleiben lokal: Sie niemals hochladen oder in etwas Veröffentlichtes einfügen.
Es ist ein Stück mit echten Personen und der Benutzer ist anwesend	Bei der Auslieferung (nicht vorher) anbieten, Fotos von Schlüssel-Requisiten oder Personen zu verwenden, um es persönlicher zu machen.
Text oder eine Sprechblase folgt einem sich bewegenden Charakter	Platziere ihn mit placeFree(w, h, [above, right, left, below]), damit er allem ausweicht, was bereits beansprucht ist.
Bildschirmtext ist nicht lateinisch (Chinesisch, Japanisch…)	Einen CJK-Schriftstapel verwenden; jedes Zeichen überprüfen (monospace-Schriftarten tauschen fehlende Zeichen stillschweigend aus, z. B. wurde ≈ zu =).
Die Seite wird als Webseite veröffentlicht	Das HTML ausliefern; die Live-Vorschau-Schleife und den Click-to-Play-Audio beibehalten.

Regeln, die die häufigen Fehler verhindern

• Reine Funktion der Zeit. Kein requestAnimationFrame-Zustand, keine CSS-Animationen, keine akkumulierte Physik: Berechne jeden Frame aus t allein, oder das Rendern und die Vorschau widersprechen sich.
• Eine handgezeichnete Linie siedet, sie zittert nicht. Wenn ein Film LOOK.wobble setzt, ändere den Wobble-Seed alle 4 Frames (LOOK.boil: 4), nicht jeden Frame. Jeder Frame liest sich als Rauschen; ~7,5 Änderungen pro Sekunde lesen sich als handgezeichnet.
• Abgerundete Formen für Körper. Baue Figuren aus Ellipsen und abgerundeten Rechtecken. Rohe Polygone mit wenigen Punkten lesen sich als Schilder (eine fünfeckige Hand, ein kastenförmiger Rumpf).
• Wähle den Winkel, der die Pose lesbar macht. Ein langer Körper mit stummeligen Gliedmaßen von der Seite liest sich als Raupe; dieselbe Pose von vorne (verkürzt) liest sich als Baby auf dem Bauch.
• Zeichne von hinten nach vorne, explizit. Hinteres Haar, dann Körper, dann Hals, dann Gesicht, dann vorderes Haar. Die meisten Fehler „etwas bedeckt das Gesicht“ sind Zeichenreihenfolge.
• Treffe Punkte an Schnitten und Aktionen. Jeder Schnitt und jede sichtbare Aktion ist in EVENTS/CUES; der Soundtrack landet auf ihnen (siehe soundtrack).
• Text kollidiert nie. Beanspruche jede Textbox und jedes Schlüsselobjekt; layout-check muss CLEAN ausgeben. Eine Beschriftung, die einen Monitorrand oder ein Gesicht überlappt, wirkt nachlässig, und Augen auf einem Kontaktblatt übersehen es.

Dateien

• templates/starter.html: Zeichenbibliothek (Tinte, Illustration, flache/Blueprint-Primitive, Beschriftungen, Papier, gefilterte Ebenen), withCamera, claim/placeFree, und ein storyboard-gesteuertes Zwei-Shot-Skelett.
• scripts/render.mjs: MP4 / Standbilder / Kontaktblatt. window.CUES und window.SCORE sind optional: Bei einem vollständigen Rendern schreibt es <out>.cues.json und multiplexed den SCORE-Soundtrack (kein SCORE = stummes MP4). Benötigt eine gerade Leinwandgröße.
• scripts/asset-audit.mjs: statischer Scan + Live-Netzwerkprüfung auf alles Geladene oder Eingebettete.
• scripts/layout-check.mjs: liest window.LAYOUT über den gesamten Film und listet Textkollisionen mit ihren Zeitpunkten auf.
• references/storyboard.md: Beat-Raster, Shot-Liste, Blocking, Kontinuität und Geschichtslogik.
• references/techniques.md: getestete Zeichentechniken (Tinte, Spot-Farbdruck, Einlinien-Gravur, Wörter als Formen, Marker-Füllungen, Illustrationsformen).
• references/forms.md: Strukturnotizen pro Form.
• references/character.md: nur wenn es einen Charakter gibt.
• references/qc.md: die Selbstprüfungsliste.

Anforderungen: Node 18+, ffmpeg, Chrome (oder npx playwright install chromium) und npm i playwright-core in dem Ordner, von dem aus du die Skripte ausführst (dein Projekt, nicht der Skill-Ordner).