anim-skill · End-to-End Animation

Ein Thema rein, ein Film raus. Die Grafiken werden vollständig per Code Frame für Frame gezeichnet (Remotion + React), ohne Materialbibliotheken, generative Videomodelle oder externe Bilder.

Stile sind Plugins, Sprachmotoren sind Plugins, der Ablauf ist fest. Ein neuer Stil ändert den Ablauf nicht, ein Wechsel der Sprach-Engine ebenfalls nicht.

Wann verwenden

"Erstelle mir einen Erklärfilm zu X"
"Wandle dieses Dokument / dieses Unterrichtsmaterial in ein Video um"
"Füge eine Voice-Over-Erklärung zu diesem Film hinzu"
"Erstelle eine neue Version im Stil X"
"Prüfe diesen Film auf Flackern / leere Szenen"

Nicht geeignet für: benötigte reale Aufnahmen, eine sprechende Person, 3D-Rendering (dafür ist Blender zuständig).

Eingabe: Zwei Modi, zuerst bestimmen

Modus	Auslöser	Zusätzlicher Schritt
A · Themenbasiert	Der Benutzer gibt nur ein Stichwort oder einen Satz an	Zuerst Recherche (Fakten, Zahlen, häufige Fehler), dann ins Design
B · Dokumentenbasiert	Der Benutzer hat ein Themendokument (Lehrplan, White Paper, PPT-Entwurf) mitgegeben	Zuerst Verfeinerung und Korrektur (Daten ergänzen, Begriffe vereinheitlichen, nicht visualisierbare Absätze kennzeichnen), dann ins Design

Nach der Bestimmung erst wiederholen, dann loslegen: Ich arbeite im Modus A/B, mache N Sekunden, in Stil X, für Publikum Y. Bei zwei dieser vier Punkten unsicher – nachfragen, nicht raten.

Sechs Phasen (Reihenfolge zwingend)

0 PREFLIGHT → 1 Inhalt → 2 Storyboard → 3 Bau → 4 Sprachaufnahme → 5 Abnahme & Auslieferung
                                    ↑                ↓
                                    └── Nacharbeit ←──────┘

0 · PREFLIGHT (einmalig, 2 Minuten)

node <skill>/scripts/preflight.mjs

Überprüft node / npm / ffmpeg / Browser; zeigt verfügbare Sprach-Engine auf dem Rechner an. Fehlt etwas, sofort klarstellen, nicht erst beim Rendern entdecken.

1 · Inhalt (A Recherche / B Verfeinerung)

Ergebnis: research.md – ein Satz These, 3–6 stützende Fakten, Zahlen und Quellen, muss vermiedene Fehlaussagen, Bekanntes/Unbekanntes des Publikums.

Modus A: Hauptsächlich recherchieren. Jede Zahl braucht eine Quelle. Falls nicht auffindbar, mit „noch zu bestätigen" markieren. Kein Erfinden.
Modus B: Am Original festhalten, nur ergänzen, nicht ändern. Sätze, die nicht visualisierbar sind, markieren (Animation kann nur Handlungen, Vergleiche, Veränderungen darstellen).

2 · Storyboard

Ergebnis: plan.md (Format siehe references/storyboard.md): Pro Einstellung eine Zeile – Frame-Bereich, Bildbeschreibung, Bewegungsprimitiv, Untertitel.

Harte Kriterien (bei Nichterfüllung neu schreiben):

Jede Einstellung hat ein Hauptmotiv, das mindestens 1/3 der Inhaltshöhe einnimmt (Grafik ≥170px, großer Text ≥96px und ganze Zeile ≥300px)
Das Hauptmotiv tritt im ersten oder zweiten Takt auf
Nur drei Größen: Hauptmotiv ≥170 / Nebenmotiv 60–110 / Erläuterung 22–30
Mindestens ein Highlight-Moment im Film (These, Hauptmotiv-Auftritt, Schlusspunkt – drei Optionen). Keine unnötigen Dekorationen als Platzhalter.

3 · Bau

node <skill>/scripts/scaffold.mjs <Projektverzeichnis> --title "Titel" --style <Stil-ID>

Gemäß Stil-Brief (styles/index.json) die Datei src/scenes/*.tsx schreiben, mit <Series> verbinden.

Eiserne Regeln (Verstoß zerstört das Rendering):

Alles von useCurrentFrame() ableiten. Math.random(), Date.now(), setState-Zähler verboten. Zufall muss deterministisch: hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453).
Jeder interpolate()-Aufruf muss {extrapolateLeft:'clamp', extrapolateRight:'clamp'} haben. Fehlt eines, fliegen Frames außerhalb des Bereichs.
CSS transition / animation / @keyframes verboten. Nur interpolate und spring für Animationen.
Keine externen Materialien oder schweren Abhängigkeiten (three.js / GSAP / Bilder). SVG und CSS-Gradienten verwenden.
Maximal 12 SVG-Blasen-Primitive pro Frame, höchstens 15 filter: blur()-Elemente, sonst wird das Rendern zehnmal langsamer.

4 · Sprachaufnahme (optional)

node <skill>/scripts/srt.mjs <Projektverzeichnis>            # Erzeugt SRT aus Storyboard
python <skill>/scripts/narrate.py <video> --provider edge|volc --voice <ID>

Ohne Sprachaufnahme auslieferbar (z. B. für den Unterricht, wo der Lehrer spricht).
Mit Sprachaufnahme zuerst SRT erstellen, dann mischen. Zeitachse aus gerenderten Frame-Nummern, nicht geschätzt.
Engine ist Plugin – Details siehe references/voice.md.

5 · Abnahme & Auslieferung

python <skill>/scripts/qc.py <video>          # Leere Szenen / Hauptgröße
python <skill>/scripts/qc_flicker.py <video>  # Flackern / harte Schnitte

Zwei harte Metriken (siehe references/qc.md):

Leere Szene: Größtes Objekt im Inhaltsbereich <110px für >45 Frames → Fehler; <80px → Blockade
Flackern: Helligkeitsabweichung vom lokalen Median um >6 (0/1-Sprung) → Fehler

Auslieferungspaket: <slug>.mp4, <slug>.srt, plan.md, research.md, src/ (bearbeitbares Projekt), README.md (Änderungen, Neurendern).

Stil-Plugins

styles/index.json enthält 15 Stile. Jeder ist eine ausführbare Brief (Hintergrundfarbe, Tintenfarben, Farben, Linienbreite, Zittern, Glühen, Textur, Schriftart, Charakter, Lesbarkeit bei Projektion, geeignet für welchen Zweck).

Aufruf: --style neon / --style paper / --style crayon …

Neuen Stil hinzufügen: Einfach einen Eintrag in index.json + eine Brief in styles/ ablegen. Keine Änderung am Ablauf, Skript oder Templates nötig. Siehe references/styles.md für das Erweiterungsvertrag.

Auswahl-Tipp: Zuerst nach „Lesbarkeit bei Projektion" filtern (kann die hintere Reihe noch lesen?), dann nach „Charakter". Papier-/Wachsmalstifte-Stile für Kleinkinder, Neon-/Minimal-Stil für schlecht ausgeleuchtete Räume.

Sprach-Plugins

Zwei integrierte:

Provider	Kosten	Benötigt	Bemerkungen
`edge`	Kostenlos	Keine	Microsoft Azure Neural Voice, eher vorlesend
`volc`	0,0003 Yuan/Zeichen	APPID + API Key	Douyin-Stimme, fast menschlich; neuer Account hat kostenloses Guthaben

Neuen Engine hinzufügen: synthesize(text, voice) -> mp3 bytes implementieren und in scripts/tts/<provider>.py registrieren. narrate.py muss nicht geändert werden. Siehe references/voice.md.

Selbstcheck vor Auslieferung (Punkt für Punkt abhaken)

remotion render Exit-Code 0, ffprobe Frame-Anzahl = Design-Frame-Anzahl
qc.py hat keine Blockaden; qc_flicker.py keine Spitzen außer harten Kapitelschnitten
Alle interpolate mit clamp (grep -c "interpolate(" = grep -c "extrapolateLeft")
Kein Math.random / Date.now / CSS animation
Untertitel stimmen mit Bild überein (3 Takte stichprobenartig prüfen)
Chinesische Schriftarten auf dem Rechner vorhanden (sonst erscheinen Kästchen)

Kurzreferenz

node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/my-film --title "Titel" --style paper --seconds 20
cd videos/my-film && npm install
node <skill>/scripts/render.mjs . main out/my-film.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/my-film.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/my-film-volc.mp4

Details in references/: pipeline.md (jede Phase ausführlich), storyboard.md (Storyboard-Vorlage), styles.md (Stil-Verzeichnis und -Erweiterung), voice.md (Sprach-Erweiterung), qc.md (Abnahmekriterien), render-env.md (Umgebungsfallen: Windows-Sandbox, TEMP, Browser-Pfad, ffmpeg-Parameter).

anim-skill · End-to-End Animation Generation (für Deutsch)

Was ist anim-skill · End-to-End Animation Generation (für Deutsch)?

In Ihrer bevorzugten KI fragen

Dokumentation