yuv-video-director

Que fait yuv-video-director ?

Le chef d'orchestre des vidéos YUV.AI. Vous (l'agent) décidez ce dont chaque séquence a besoin, l'acheminez vers le moteur approprié, composez le tout en une seule composition HyperFrames, l'enveloppez dans la charte graphique YUV.AI Neon Phoenix, auto-vérifiez et rendez le MP4. Cette compétence est le routeur + les implémentations de référence de travail ; chargez un fichier de référence uniquement lorsque ce moteur est utilisé.

Source de vérité du design : la compétence yuv-design-system (mode Neon — rose #FF1464, cyan #00E5FF, noir riche/blanc, Anton+Inter+JetBrains Mono, motif phénix réseau de neurones). Sa forme vidéo est frame.md — voir references/frame-md.md. Modèle fourni : assets/FRAME.md. Déposez-le à la racine du projet ; HyperFrames le lit.

La loi unique (décide tout)

HyperFrames effectue le rendu en cherchant chaque image dans Chrome sans tête → FFmpeg (frameIndex = floor(t·fps), même entrée → même sortie). Ainsi, chaque visuel est d'un des deux types suivants :

Modèle	S'exécute…	Moteurs	Règle
Adaptateur direct synchronisable	à l'intérieur du rendu, piloté par le temps t par image	GSAP, Lottie (window.__hfLottie), Three.js, un canvas piloté par un proxy GSAP onUpdate	doit être piloté par horloge — pas de Date.now(), Math.random() (utilisez un mulberry32 avec germe), setTimeout, ou .play()
Élément pré-rendu	hors ligne, produit un fichier, importé comme un clip	ManimCE (Python→MP4/alpha), audio TTS, suppression d'arrière-plan	effectuez d'abord le rendu, puis intégrez-le comme un clip <video>/asset

Si cela peut être synchronisé, c'est un adaptateur. Sinon, pré-rendez-le. Manim est toujours un clip pré-rendu — il a son propre moteur de rendu et s'exécute en Python ; il ne peut jamais être un adaptateur direct.

Acheminer chaque séquence vers un moteur

"expliquer X en TEASER/promo (FOMO, cliffhanger, rapide)"              → references/teaser-explainer.md (la formule)
"expliquer un concept / des maths / un réseau de neurones / un algo / un apprentissage"  → ManimCE   (clip pré-rendu — découpé en BURST pour les teasers)
"mouvement de marque : logo sting · révélation de statistique · icône pop · pulsation"        → Lottie    (direct, lottie-web)
"sous-titres cinétiques · titres · révélations · transitions · appels de données"  → GSAP      (direct)  ← par défaut
"3D / spatial"                                                       → Three.js  (direct)   (Babylon PAS utilisé)
paroles → sous-titres                                                    → transcrire + approuver webapp (voir compétence video-edit)
pas de voix off fournie                                                → TTS (Kokoro : npx hyperframes tts)
couleurs / polices / motifs de la marque                                        → frame.md  (pris en charge au début)

GSAP est la valeur par défaut fiable pour le texte/mouvement. Utilisez Lottie pour les graphiques de marque conçus, Manim pour expliquer une idée.

Flux de travail

1. Planifiez les séquences. Arc narratif + moteur nécessaire pour chaque séquence. Choisissez 16:9 et/ou 9:16.
2. Définissez la marque. Assurez-vous que FRAME.md se trouve à la racine du projet (copiez assets/FRAME.md). Toutes les couleurs/polices/motifs en proviennent — jamais inventés. Trois éléments de marque indispensables sur chaque vidéo (voir references/brand-kit.md + references/cinematic.md) : le vrai logo phénix (assets/logo-phoenix.png) lors de la révélation + carte de fin, une vraie Lottie vedette (générez-en une — assets/lottie-burst-generator.py), et la carte de fin avec liens (logo + « LET'S FLY HIGH » + la série complète de liens + CTA). Pour le rythme teaser/réseaux sociaux, voir references/editing.md ; pour les coupes psychologiques/cliffhanger/FOMO, voir references/cinematic.md.
3. Effectuez d'abord le rendu des séquences d'éléments (afin qu'elles existent en tant que clips) :
   • Manim → references/manim.md + assets/manim-scene-template.py. Effectuez le rendu avec py -m manim render -qh --fps 30 scene.py SceneName, copiez le MP4 dans assets/.
   • Sous-titres/TTS → réutilisez la compétence video-edit (transcrire → approuver webapp → synchroniser) et npx hyperframes tts.
4. Échafaudage + composition. npx hyperframes init <slug> --non-interactive. Rédigez index.html (la compétence hyperframes est le contrat). Utilisez :
   • l'arrière-plan champ de réseau de neurones synchronisable → assets/neural-net-field.js
   • Lottie selon la marque → references/lottie.md + assets/neural-pulse.json
   • le rendu Manim comme un clip corporel <video class="clip" muted playsinline>
   • les entrées GSAP par scène, une transition flash néon à chaque limite, fondu seulement sur la scène finale
   • pour le rythme teaser / réseaux sociaux (coupes dures rapides, frappes de mots cinétiques, montage d'accroche, attaques glitch/chromatiques) → references/editing.md — coupez comme un producteur, pas comme un diaporama
5. Auto-vérification (barrières). references/gates.md : npx hyperframes lint (0 erreurs) → validate (0 erreurs console, WCAG AA) → rendu → vérification ponctuelle de 5 images sur la timeline. Corrigez → réexécutez. Lottie DOIT être vérifié par capture d'écran (le piège Skottie vs lottie-web).
6. Rendu. npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. Pour le format vertical, clonez avec une mise en page 1080×1920 (voir video-edit).

Prérequis (vérifiez d'abord ; dégradez-vous gracieusement)

Voir references/prereqs.md. Nécessite Node 22+, FFmpeg, Python 3.11+ avec pip (Manim/sous-titres). Sur cette machine : le vrai Python est py → C:\Python313 (le simple python est l'environnement virtuel Hermes SANS pip — ne l'utilisez pas). ManimCE s'installe via py -m pip install manim (pas besoin de LaTeX si vous écrivez avec Text()/MarkupText, pas Tex/MathTex). Si Manim n'est pas disponible → sautez les séquences mathématiques ou proposez de l'installer ; n'échouez jamais durement la vidéo entière.

Ce que cette compétence fournit (implémentations de référence qui se lintent + se rendent)

Fichier	Ce que c'est
assets/FRAME.md	Spécification de trame vidéo YUV.AI Neon Phoenix (renommage du pack Coral de HeyGen)
assets/neural-net-field.js	Arrière-plan canvas déterministe et synchronisable de phénix réseau de neurones
assets/neural-pulse.json	Lottie Bodymovin écrit à la main (rendu dans lottie-web, pas seulement Skottie)
assets/gen_content_lotties.py	Générateur pour 6 Lotties CONTENU de qualité production (WhatsApp-collapse, decode-beam, eye-read, ghost-line hero, orb-extract, brain-fire) — transparentes, persistantes+continues, vérifiées lottie-web
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json	Les 6 Lotties contenu générées, prêtes à être intégrées
assets/manim-scene-template.py	Modèle de scène ManimCE, style néon de la marque, Texte uniquement (pas de LaTeX)
assets/what_is_nn.py	Scène ManimCE « Qu'est-ce qu'un réseau de neurones » (neurone → réseau → apprentissage, 34,5s)
assets/Anton-Regular.woff2	Police Anton locale (le rendu ne la résout pas automatiquement ; déclarez @font-face)
references/composition-pattern.md	Le modèle complet index.html multi-moteur (champ + Lottie + clip Manim + GSAP + flash)
references/teaser-explainer.md	La formule du teaser-explicateur cinématique : accroches à froid → BURSTS Manim → face-à-face → montage FOMO → cliffhanger ; temps Lottie transparents synchronisés au contenu ; correctif seek-modulo ; synthé musical de teaser

Compétences compagnes

hyperframes (contrat de composition — toujours invoquer lors de la rédaction), hyperframes-cli, lottie, video-edit (transcrire + approuver webapp), yuv-design-system (marque). Cette compétence les orchestre.