YUV.Video-Direktor

yuv-video-director

Der Dirigent für YUV.AI-Videos. Du (der Agent) entscheidest, was jeder Beat braucht, leitest ihn an die richtige Engine weiter, komponierst alles in eine HyperFrames-Komposition, verpackst sie im YUV.AI Neon Phoenix-Brand, überprüfst dich selbst (Self-Verify) und renderst das MP4. Dieses Skill ist der Router + die funktionierenden Referenzimplementierungen; lade eine Referenzdatei nur, wenn diese Engine im Spiel ist.

Design-Quelle der Wahrheit: das yuv-design-system-Skill (Neon-Modus – Pink #FF1464, Cyan #00E5FF, Tiefschwarz/Weiß, Anton+Inter+JetBrains Mono, Neural-Net-Phoenix-Motiv). Die Videoform davon ist frame.md – siehe references/frame-md.md. Gebündelte Vorlage: assets/FRAME.md. Lege sie ins Projekt-Root; HyperFrames liest sie aus.

Das eine Gesetz (entscheidet alles)

HyperFrames rendert, indem es jeden Frame in headless Chrome sucht → FFmpeg (frameIndex = floor(t·fps), gleiche Eingabe → gleiche Ausgabe). Daher ist jedes visuelle Element von einer von zwei Arten:

Typ	Läuft…	Engines	Regel
Live seekable Adapter	innerhalb des Renderings, gesteuert zur Zeit t pro Frame	GSAP, Lottie (window.__hfLottie), Three.js, eine Canvas, gesteuert durch einen GSAP-Proxy onUpdate	muss taktgesteuert sein – kein Date.now(), Math.random() (verwende einen mulberry32-Seed), setTimeout oder .play()
Vorgerendertes Asset	offline, gibt eine Datei aus, wird als Clip importiert	ManimCE (Python→MP4/Alpha), TTS-Audio, Hintergrundentfernung	zuerst rendern, dann als <video>/Asset-Clip einbinden

Wenn es suchbar (seekbar) gemacht werden kann, ist es ein Adapter. Wenn nicht, dann vorrendern. Manim ist immer ein vorgerenderter Clip – es hat seinen eigenen Renderer und läuft in Python; es kann niemals ein Live-Adapter sein.

Leite jeden Beat an eine Engine weiter

"Erklär X als TEASER/Promo (FOMO, Cliffhanger, schnell)"              → references/teaser-explainer.md (die Formel)
"Erklär ein Konzept / Mathe / neuronales Netz / Algorithmus / Training" → ManimCE   (vorgerenderter Clip – in BURSTS für Teaser schneiden)
"Markenmotion: Logo-Sting · Statistik-Enthüllung · Icon-Pop · Puls"    → Lottie    (live, lottie-web)
"Kinetische Untertitel · Titel · Enthüllungen · Übergänge · Daten-Callouts" → GSAP (live)  ← Standard
"3D / räumlich"                                                         → Three.js  (live)   (Babylon wird nicht verwendet)
Sprache → Untertitel                                                    → Transkribieren + Genehmigen-WebApp (siehe video-edit-Skill)
kein Voiceover vorhanden                                                → TTS (Kokoro: npx hyperframes tts)
Brand-Farben / Schriftarten / Motive                                     → frame.md  (wird vorne übernommen)

GSAP ist der zuverlässige Standard für Text/Bewegung. Greife zu Lottie für designte markierte Grafiken, zu Manim für das Erklären einer Idee.

Workflow

1. Plane die Beats. Erzählbogen + welche Engine jeder Beat benötigt. Wähle 16:9 und/oder 9:16.
2. Setze das Brand. Stelle sicher, dass FRAME.md im Projekt-Root liegt (kopiere assets/FRAME.md). Alle Farben/Schriftarten/Motive stammen daraus – nie erfinden. Drei Brand-Muss-Elemente in jedem Video (siehe references/brand-kit.md + references/cinematic.md): das echte Phönix-Logo (assets/logo-phoenix.png) bei der Enthüllung und Endkarte, eine echte hervorgehobene Lottie (generiere eine – assets/lottie-burst-generator.py) und die Link-Endkarte (Logo + „LET'S FLY HIGH“ + das vollständige Link-Set + CTA). Für Teaser/Social-Rhythmus siehe references/editing.md; für psychologische/Cliffhanger/FOMO-Schnitte siehe references/cinematic.md.
3. Rendere zuerst die Asset-Beads vor (damit sie als Clips existieren):
   • Manim → references/manim.md + assets/manim-scene-template.py. Rendere py -m manim render -qh --fps 30 scene.py SceneName, kopiere das MP4 nach assets/.
   • Untertitel/TTS → verwende das video-edit-Skill (transkribieren → Genehmigen-WebApp → synchronisieren) und npx hyperframes tts.
4. Scaffold + Composing. npx hyperframes init <slug> --non-interactive. Schreibe index.html (das hyperframes-Skill ist der Vertrag). Verwende:
   • den suchbaren neuralen Netz-Hintergrund → assets/neural-net-field.js
   • Lottie auf die Brand-Art → references/lottie.md + assets/neural-pulse.json
   • das Manim-Render als <video class="clip" muted playsinline>-Body-Clip
   • GSAP-Entrances pro Szene, einen Neon-Flash-Übergang an jeder Grenze, nur die letzte Szene ausgeblendet
   • für Teaser / Social-Rhythmus (schnelle harte Schnitte, kinetische Wort-Schläge, ein Hook-Montage, Glitch/Chromatik-Staccato) → references/editing.md – schneide wie ein Produzent, nicht wie eine Diashow
5. Self-Verify (Gates). references/gates.md: npx hyperframes lint (0 Fehler) → validate (0 Konsolenfehler, WCAG AA) → rendern → stichprobenartig 5 Frames über die Timeline prüfen. Korrigieren → erneut ausführen. Lottie MUSS per Screenshot verifiziert werden (die Skottie-vs-lottie-web-Falle).
6. Rendern. npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. Für vertikales Format mit einem 1080×1920-Layout klonen (siehe video-edit).

Voraussetzungen (zuerst prüfen; graziös degradieren)

Siehe references/prereqs.md. Benötigt Node 22+, FFmpeg, Python 3.11+ mit pip (Manim/Untertitel). Auf diesem Rechner: echtes Python ist py → C:\Python313 (das bloße python ist Hermes' venv OHNE pip – nicht verwenden). ManimCE installiert via py -m pip install manim (kein LaTeX nötig, wenn du mit Text()/MarkupText und nicht Tex/MathTex arbeitest). Falls Manim nicht verfügbar ist → überspringe Mathe-Beads oder biete Installation an; unterbrich nie das gesamte Video mit einem harten Fehler.

Was dieses Skill bündelt (Referenzimplementierungen, die linten + rendern)

Datei	Was es ist
assets/FRAME.md	YUV.AI Neon Phoenix Video-Frame-Spezifikation (umbrandet vom HeyGen Coral Pack)
assets/neural-net-field.js	Deterministischer, suchbarer Neural-Net-Phoenix-Canvas-Hintergrund
assets/neural-pulse.json	Handgeschriebene Bodymovin Lottie (rendert in lottie-web, nicht nur in Skottie)
assets/gen_content_lotties.py	Generator für 6 produktionsreife CONTENT-Lotties (WhatsApp-Collapse, Decode-Beam, Eye-Read, Ghost-Line-Hero, Orb-Extract, Brain-Fire) – transparent, persistent+durchgehend, lottie-web-verifiziert
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json	Die 6 generierten Content-Lotties, bereit zum Einfügen
assets/manim-scene-template.py	ManimCE-Szenenvorlage, Neon-Brand-Styling, nur Text (kein LaTeX)
assets/what_is_nn.py	„Was ist ein neuronales Netz“ ManimCE-Szene (Neuron → Netzwerk → Training, 34.5s)
assets/Anton-Regular.woff2	Lokales Anton (der Renderer löst es nicht automatisch auf; deklariere @font-face)
references/composition-pattern.md	Das vollständige Multi-Engine index.html-Muster (Field + Lottie + Manim-Clip + GSAP + Flash)
references/teaser-explainer.md	Die kinematische Teaser-Explainer-Formel: Cold-Open-Schläge → Manim-BURSTS → Face-Off → FOMO-Montage → Cliffhanger; inhalts-synchronisierte transparente Lottie-Beads; der Seek-Modulo-Fix; Teaser-Musik-Synth

Begleit-Skills

hyperframes (Kompositionsvertrag – immer aufrufen beim Erstellen), hyperframes-cli, lottie, video-edit (Transkribieren + Genehmigen-WebApp), yuv-design-system (Brand). Dieses Skill orchestriert sie.