ai-video-render

ai-video-render: Code-Animation rendern

Wann verwenden

film.json existiert und der Stil ist ausgewählt. Dieser Skill verwandelt das Storyboard in Bilder: eine Render-Seite, Frame-Aufnahmen und ein stummes Video. Hier findet keine Voiceover-Arbeit statt.

Der Determinismus-Vertrag (nicht verhandelbar)

• Jedes Bild ist eine reine Funktion der Zeit: window.render(t) zeichnet den Frame eines beliebigen Moments. Kein requestAnimationFrame, kein setTimeout, kein CSS-Übergang, kein gespeicherter Zustand zwischen Frames für den Export.
• Alle Zufallsprozesse verwenden feste Seeds. Verwenden Sie niemals eine ungeseedete Zufallsquelle oder eine echte Uhr im Render-Pfad.
• Setzen Sie den Canvas-Zustand zu Beginn jedes Frames zurück.
• Die Seite legt window.seek(t), window.render(t) und window.ready = true nach dem ersten erfolgreichen Render offen.
• Derselbe Zeitstempel, zweimal gerendert, muss denselben Frame erzeugen. Überprüfen Sie dies mit scripts/determinism-check.js vor einem vollständigen Render.

1. Stil auswählen (Benutzer wählt, harte Sperre)

Empfehlen Sie 1 Stil plus 2 verschiedene Alternativen mit visuellen Unterschieden, Gründen und Grenzen in style-options.md. Warten Sie auf die Auswahl durch den Benutzer. „Einfach ausführen“ ist keine Berechtigung zur Auswahl.

Stilkataloge (holen Sie sie selbst von der Quelle; Prompt-Dateien und Demo-Quellen sind nicht in diesem Repository):

• Flat-Flussdiagramm, handschriftliche Notizen, Retro-Zeitung, Retro-Papierschnitt, surreale Collage, 3D-Cartoon, schwarzer Hintergrund Tech (7 Sets, dashi-animationstyle).
• 15 MG-Stile: flache Vektorgrafik, Strichzeichnung, isometrisches 2.5D, 3D-Render, Form-Morph, Sticker-Erklärvideo, Cyberpunk HUD, Collage, Aurora-Glas, Bauhaus, Synthwave, Pixel-Art, flüssige Bewegung, frame-by-frame Line Boil, verschiedene Untertitel.
• 36 Kunststil-Rezepte (huashu-art-motion) und lemo-opuscar-Stile: Impasto-Öl, Aquarell, chinesische Tuschemalerei, Ukiyo-e, Whiteboard-Erklärvideo.

Regeln für die Stilverwendung:

• Ein Film verwendet einen Stil, ein Thema und höchstens zwei Animationsgrammatiken.
• Lernen Sie die Methode aus dem Prompt oder Demo eines Stils, dann gestalten Sie den Inhalt für das neue Thema neu. Kopieren Sie niemals die Komposition, Figuren oder Assets eines Demos in den Film.
• Wenn ein Stil-Prompt sagt: „Ändern Sie keine charakteristischen Merkmale“, ändern Sie nur den kreativen Seed (Geschichte, Marke, Kopie, Palette) oder die Ausgabe (z. B. vertikal 1080×1920, Dauer).
• Verwenden Sie keine Blau-Lila-Verläufe, dunkelvioletten Sternenhimmel oder Neon-Cyan-Lila (wirkt als offensichtlicher KI-Geschmack), es sei denn, der Benutzer bittet ausdrücklich darum.
• Code zeichnet niemals ein realistisches menschliches Gesicht. Verwenden Sie KI-generiertes Filmmaterial nur für Green-Screen-Charakteraufnahmen, die in codebasierte Szenen eingefügt werden; ohne Bildgenerierungsfähigkeit zeigen Sie nur Hände und Rücken.

2. Einstellung für Einstellung aufbauen

• Schreiben Sie die Render-Seite aus templates/render-page.html und templates/render.js. Standardmäßig 1920×1080 (vertikal: 1080×1920 mit neu angeordneter Komposition und Untertiteln, niemals ein skalierter horizontaler Frame).
• Bauen Sie eine Einstellung nach der anderen auf. Rendern Sie 3 Standbilder pro Einstellung (Anfang, Mitte, Ende) und prüfen Sie Textüberlauf, Überlappungen, Objektgröße und Bildschirmdauer. Korrigieren Sie die Einstellung, bevor Sie fortfahren.
• Bei Filmen über 30 Sekunden rendern Sie zuerst eine niedrig aufgelöste Probe ohne Bewegungsunschärfe, bestätigen Sie diese, dann rendern Sie die Vollversion.
• Der 3D-Render-Stil ist die Ausnahme: Bilder in Blender rendern, Wörter und Körnung auf der Webseite hinzufügen.

3. Rendern und montieren

• Headless Chrome erfasst einen Screenshot pro Frame bei der Bildrate des Films. Montieren mit ffmpeg (H.264, CRF 16). Lassen Sie die Tonspur hier draußen; Voiceover wird im nächsten Skill gemischt.
• Behalten Sie eine Timeline für Ton und Bild: Schnitte und Schlüsselaktionen sitzen auf dem Beat-Raster oder der Voiceover-Timeline.
• Überprüfen mit ffprobe: H.264, 1920×1080 (oder 1080×1920), 30 fps, Frame-Anzahl entspricht film.json-Dauer mal fps.

Ausgabevertrag

• render-page.html + render.js (die Render-Seite des Films).
• frames/ (Frame-Aufnahmen).
• film.mp4 (stummes Bild).
• render-report.md (Auflösung, fps, Frame-Anzahl, Ergebnis der Determinismus-Prüfung).

Regeln

• Eine Prüfung, die nicht durchgeführt wurde, wird als „nicht durchgeführt“ aufgeführt. Geben Sie niemals an, dass ein Render eine Prüfung bestanden hat, die nicht stattfand.
• Präsentieren Sie keine HTML-Seite, eine stumme Zwischendatei oder einen Prompt als fertigen Film.
• Referenzbilder gehören dem Benutzer selbst oder sind lizenziert; der fertige Film enthält niemals das Originalbild.