yuv-video-director

¿Qué hace yuv-video-director?

El director de video de YUV.AI. Tú (el agente) decides qué necesita cada beat, lo enrutas al motor correcto, lo compones todo en una composición de HyperFrames, lo envuelves en la marca YUV.AI Neon Phoenix, lo auto-verificas y lo renderizas a MP4. Este skill es el enrutador + las implementaciones de referencia funcionales; carga un archivo de referencia solo cuando ese motor esté en juego.

Fuente de verdad de diseño: el skill yuv-design-system (modo Neon — rosa #FF1464, cian #00E5FF, negro intenso/blanco, Anton+Inter+JetBrains Mono, motivo de fénix de red neuronal). Su forma en video es frame.md — consulta references/frame-md.md. Plantilla incluida: assets/FRAME.md. Colócala en la raíz del proyecto; HyperFrames la leerá.

La única ley (lo decide todo)

HyperFrames renderiza buscando cada fotograma en Chrome headless → FFmpeg (frameIndex = floor(t·fps), misma entrada → misma salida). Por lo tanto, cada elemento visual es de uno de dos tipos:

Patrón	Se ejecuta…	Motores	Regla
Adaptador en vivo buscable	dentro del render, impulsado al tiempo t por fotograma	GSAP, Lottie (window.__hfLottie), Three.js, un canvas impulsado por un proxy GSAP onUpdate	debe ser impulsado por reloj — sin Date.now(), Math.random() (usa una mulberry32 con semilla), setTimeout, ni .play()
Activo pre-renderizado	offline, genera un archivo, importado como clip	ManimCE (Python→MP4/alpha), audio TTS, eliminación de fondo	renderiza primero, luego colócalo como un clip <video>/asset

Si se puede buscar por tiempo, es un adaptador. Si no, es un activo pre-renderizado. Manim es siempre un clip pre-renderizado — tiene su propio motor de renderizado y se ejecuta en Python; nunca puede ser un adaptador en vivo.

Enruta cada beat a un motor

"explica X como un TEASER/promo (FOMO, cliffhanger, rápido)"              → references/teaser-explainer.md (la fórmula)
"explica un concepto / matemáticas / red neuronal / algoritmo / entrenamiento"  → ManimCE   (clip pre-renderizado — dividido en BURSTS para teasers)
"movimiento de marca: sting de logo · revelación de estadística · pop de icono · pulso"        → Lottie    (en vivo, lottie-web)
"subtítulos cinéticos · títulos · revelaciones · transiciones · llamadas de datos"  → GSAP      (en vivo)  ← predeterminado
"3D / espacial"                                                       → Three.js  (en vivo)   (NO se usa Babylon)
hable → subtítulos                                                    → transcribir + aprobar webapp (ver skill video-edit)
sin locución proporcionada                                                → TTS (Kokoro: npx hyperframes tts)
colores / fuentes / motivos de marca                                        → frame.md  (recogido al inicio)

GSAP es el predeterminado confiable para texto/movimiento. Recurre a Lottie para gráficos de marca diseñados, a Manim para explicar una idea.

Flujo de trabajo

1. Planifica los beats. Arco narrativo + qué motor necesita cada beat. Elige 16:9 y/o 9:16.
2. Configura la marca. Asegúrate de que FRAME.md esté en la raíz del proyecto (copia assets/FRAME.md). Todos los colores/fuentes/motivos provienen de él — nunca inventes. Tres elementos imprescindibles de la marca en cada video (consulta references/brand-kit.md + references/cinematic.md): el logo real del fénix (assets/logo-phoenix.png) en la revelación y la tarjeta final, un Lottie destacado real (genera uno — assets/lottie-burst-generator.py), y la tarjeta final con enlaces (logo + "LET'S FLY HIGH" + el conjunto completo de enlaces + CTA). Para el ritmo de teaser/redes sociales consulta references/editing.md; para cortes psicológicos/de suspenso/FOMO consulta references/cinematic.md.
3. Pre-renderiza primero los beats de activos (para que existan como clips):
   • Manim → references/manim.md + assets/manim-scene-template.py. Renderiza py -m manim render -qh --fps 30 scene.py SceneName, copia el MP4 en assets/.
   • Subtítulos/TTS → reutiliza el skill video-edit (transcribir → webapp de aprobación → sincronizar) y npx hyperframes tts.
4. Andamia + compón. npx hyperframes init <slug> --non-interactive. Escribe index.html (el skill hyperframes es el contrato). Usa:
   • el fondo buscable de campo de red neuronal → assets/neural-net-field.js
   • Lottie a la manera de la marca → references/lottie.md + assets/neural-pulse.json
   • el render Manim como un clip <video class="clip" muted playsinline> en el cuerpo
   • entradas GSAP por escena, una transición flash neón en cada límite, desvanecimiento solo en la escena final
   • para el ritmo de teaser / redes sociales (cortes rápidos y duros, golpes de palabra cinéticos, un montaje de gancho, stabs de glitch/cromática) → references/editing.md — córtalo como un productor, no como una presentación de diapositivas
5. Auto-verificación (compuertas). references/gates.md: npx hyperframes lint (0 errores) → validate (0 errores de consola, WCAG AA) → renderizar → revisar 5 fotogramas clave en la línea de tiempo. Corregir → re-ejecutar. Lottie DEBE ser verificado con captura de pantalla (la trampa Skottie-vs-lottie-web).
6. Renderizar. npx hyperframes render --fps 30 --output renders/<nombre>_FINAL.mp4. Para vertical, clona con un diseño de 1080×1920 (consulta video-edit).

Prerrequisitos (verificar primero; degradar gracefulmente)

Consulta references/prereqs.md. Se necesita Node 22+, FFmpeg, Python 3.11+ con pip (Manim/subtítulos). En esta máquina: el Python real es py → C:\Python313 (el python simple es el venv de Hermes SIN pip — no lo uses). ManimCE se instala con py -m pip install manim (no se necesita LaTeX si usas Text()/MarkupText, no Tex/MathTex). Si Manim no está disponible → salta los beats matemáticos u ofrece instalarlo; nunca falles todo el video de forma irreversible.

Lo que incluye este skill (implementaciones de referencia que lintan + renderizan)

Archivo	Qué es
assets/FRAME.md	Especificación de fotograma de video YUV.AI Neon Phoenix (renombrado del pack Coral de HeyGen)
assets/neural-net-field.js	Fondo de canvas de fénix de red neuronal determinista y buscable
assets/neural-pulse.json	Lottie Bodymovin creado a mano (se renderiza en lottie-web, no solo en Skottie)
assets/gen_content_lotties.py	Generador de 6 Lotties de CONTENIDO de nivel de producción (colapso-WhatsApp, haz-decodificador, ojo-lector, héroe-línea-fantasma, extracción-orbital, fuego-cerebral) — transparentes, persistentes+continuos, verificados con lottie-web
assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json	Los 6 Lotties de contenido generados, listos para usar
assets/manim-scene-template.py	Plantilla de escena ManimCE, estilo de marca neón, solo texto (sin LaTeX)
assets/what_is_nn.py	Escena ManimCE "Qué es una red neuronal" (neurona → red → entrenamiento, 34.5s)
assets/Anton-Regular.woff2	Anton local (el renderizador no lo resuelve automáticamente; declara @font-face)
references/composition-pattern.md	El patrón index.html completo de múltiples motores (campo + Lottie + clip Manim + GSAP + flash)
references/teaser-explainer.md	La fórmula del teaser-explainer cinematográfico: golpes de apertura en frío → BURSTS Manim → enfrentamiento → montaje FOMO → cliffhanger; beats Lottie transparentes sincronizados con el contenido; la solución seek-modulo; sintetizador de música de teaser

Skills complementarios

hyperframes (contrato de composición — invocar siempre al escribir), hyperframes-cli, lottie, video-edit (webapp de transcripción y aprobación), yuv-design-system (marca). Este skill los orquesta.