AgentMotion

AgentMotion — Einheitliches Framework für reine Code-Videogenerierung

Verwandle "einen Satz Wunsch" in ein vollständig aus Code gerendertes MP4. Dieser Skill ist die Orchestrierungsschicht: Er wählt das Backend, den Stil, führt durch den Workflow und die Qualitätskontrolle; das spezifische Zeichnungswissen findest du in references/ und styles/.

Kerninvariante (für alle Backends gemeinsam)

Jeder Frame ist eine reine Funktion der Frame-Nummer: frame = f(t). Verwende kein Math.random() (nutze Seed-basiertes Rauschen), kein Date.now(), keinen rAF-akkumulierten Zustand. Nur so sind deterministisches Rendering, parallele Frame-Ausgabe und Frame-für-Frame-Selbstprüfung möglich. Wird dies verletzt, stimmen Rendering und Vorschau nicht überein.

Schritt 1: Backend wählen (Entscheidungsbaum)

Szenario	Backend	Referenz
Kurzfilm (≤60s), kein externes Material, Illustration/Handzeichnung/stilisiert	Einzelnes HTML-Canvas	references/backends.md §1
Datengesteuert, Batch-Personalisierung (ein Video pro Datensatz), eingebrannte Untertitel/Sprache, 3D/Chart-Komponenten-Ökosystem	React + Remotion	references/backends.md §2
Interaktive Animation, die direkt im Browser abgespielt werden soll (kein MP4 benötigt)	Einzelnes HTML, Ausgabe von HTML statt Rendering	references/backends.md §3

Bei Unsicherheit wähle das Canvas-Backend: geringste Abhängigkeiten, Agent schreibt es am ehesten auf Anhieb korrekt.

Schritt 2: Stil wählen

Siehe styles/recipes.md (15 kommerzielle Stil-Rezepte: Farbpaletten / Kerntechniken / Bewegungsgesetze / Fallstricke). Kann der Nutzer keinen Stil nennen, lass ihn wählen oder empfehle basierend auf dem Thema; standardmäßig werden für zwei verschiedene Videos nicht dieselbe Optik und Musik wiederverwendet.

Schritt 3: Standard-Workflow (nicht zwischendurch nachfragen)

1. Aufgabe erfassen: Aus der Nutzereingabe den Videotyp ableiten (Geschichte/Erklärung/Countdown/Schleife/Datenvideo), Länge (Standard 15–20s), Seitenverhältnis (Standard 1920×1080; Daten-Sharing-Videos 1080×1920). Die Untertitelsprache folgt der Nutzereingabe.
2. Storyboard: Zuerst BPM und Abschnittsdaten festlegen (SECTIONS/SHOTS/EVENTS). Bild und Musik lesen dieselben Zeitdaten, dadurch sind sie von Natur aus synchron (references/storyboard.md).
3. Grundgerüst bauen: Aus templates/starter.html kopieren (Canvas-Backend), Farbpalette und Weltzeichnung ersetzen. Vertrag einhalten: Die Seite exponiert window.C2V = { fps, frames, width, height, draw(frame) }, draw ist eine reine Funktion.
4. Selbstprüfung vor Rendering (Reihenfolge einhalten):

node scripts/render.mjs film.html sheet.jpg --sheet 1          # 1 Frame/s als Kontaktbogen, stepping off cuts
node scripts/render.mjs film.html still.png --stills 0,90,300  # Standbilder zu bestimmten Zeitpunkten
node scripts/env-check.mjs                                      # Umgebungscheck
node scripts/render.mjs film.html out.mp4 --audio music.mp3     # Vollrendering (optional mit Musik)
node scripts/probe.mjs out.mp4 1920x1080 30                     # Codierungsparameter validieren

5. Zwei Durchgänge visuelle Prüfung (references/qc.md): ① Storyboard-Konformität – Frames an den Aktionsschlägen jedes Shots extrahieren und mit den Storyboard-Zeilen abgleichen; ② Regie-Durchgang – Kontaktbogen betrachten, Rhythmus / Einstellungsvielfalt / tote Frames / ob jede Aktion einen Ton hat bewerten. Mindestens zwei Durchgänge, ändere nur den betroffenen Frame und rendere ihn neu.
6. Auslieferung: MP4 + HTML (HTML kann direkt im Browser abgespielt werden). Am Ende ein bis zwei Sätze mit änderbaren Aspekten: Stil wechseln, Musik wechseln, Länge anpassen.

Rendering und Validierung mit Remotion-Backend erfolgen über npx remotion still → Sichtprüfung → npx remotion render (siehe references/backends.md §2).

Regeln gegen Fehlschläge (häufigste Fehlerursachen)

• Reine Funktion. Jede Zustandsakkumulation führt zu falschen Frames beim parallelen Rendern.
• Handgezeichnete Linien sollen "brodeln", nicht "zittern": Wobble-Seed alle 4 Frames wechseln (≈7,5 Mal/s); ein Wechsel pro Frame wirkt wie Rauschen.
• Körper mit Ellipsen und abgerundeten Rechtecken: Zu viele Polygone wirken wie Verkehrsschilder.
• Zeichenreihenfolge explizit von hinten nach vorne: Meist ist "Gesicht verdeckt" ein Zeichenreihenfolge-Problem.
• Text niemals kollidieren: Textblöcken und Schlüsselobjekten Platzhalter (Claims) zuweisen, vor der Auslieferung Frame für Frame das Layout prüfen.
• Schnitt- und Aktionspunkte auf den Beat legen, Lautstärkesprünge ≤+6 dB, sonst wirken sie wie Schreckmomente (references/audio.md).

Dateistruktur

Datei	Inhalt
scripts/render.mjs	Deterministischer Rendering-Kern: MP4 / Standbilder / Kontaktbogen, Multi-Worker-Parallelisierung
scripts/env-check.mjs / probe.mjs	Umgebungscheck / MP4-Codierungsvalidierung
templates/starter.html	Frame=f(t)-Grundgerüst: Vertrag, Seed-Rauschen, Easing, Kamera, Beat
styles/recipes.md	15 Code-Rezepte für kommerzielle Stile
references/*.md	Workflow / Storyboard / Techniken / Qualitätskontrolle / Musik / Backend-Auswahl
examples/hello-drop.html	Minimales, sofort ausführbares Beispiel

Abhängigkeiten

Node 18+, ffmpeg (im PATH), Chrome oder Edge; npm i playwright-core (im deinem Projektverzeichnis installieren, nicht in diesem Skill-Verzeichnis).