uttamongithb/editorial-reel-video

Habilidad de Concepto y Video Reel Editorial

Esta habilidad enseña a los agentes a producir videos explicativos técnicos y educativos de alto retención y virales para CUALQUIER tema (p.ej., ruteo Onion de Tor, redes, bases de datos, arquitectura de sistemas, Git, IA) siguiendo estrictamente el ritmo objetivo (p.ej., reels de 60 segundos) con ricas transiciones de escena, mapeo de expresión vocal, recortes de presentador y animaciones técnicas continuas.

---

1. Principios Clave y Requisitos de Producción

A. Ritmo Estricto y Duración (La Regla de los 60 Segundos)

• Si un guion designa marcas de tiempo de escena (p.ej., 0–7 seg, 7–16 seg, 16–27 seg, 27–42 seg, 42–50 seg, 50–60 seg), el agente DEBE hacer cumplir las duraciones objetivo exactas.
• Las velocidades predeterminadas de TTS suelen ser demasiado lentas (~110 PPM). El generador debe escalar la velocidad de reproducción de audio usando FFmpeg atempo (preservando el tono) para alcanzar la velocidad viral del reel (160–180 PPM) y ajustarse al tiempo de ejecución exacto de 60 segundos designado.

B. Ejecución TTS del Agente y Estándares de Expresión Vocal (Plan de Retención Viral)

Los agentes equipados con motores TTS integrados (p.ej., Edge-TTS, ElevenLabs, Azure Speech, OpenAI) NO DEBEN usar configuraciones planas/monótonas predeterminadas. El TTS predeterminado (110–120 PPM) pierde a los espectadores de formato corto en los primeros 2 segundos. El agente debe inyectar parámetros de ritmo viral:

• Velocidad y Cadencia: Aplicar velocidad de reel viral (160–180 PPM o rate: +15% a +20%).
• Tono e Inflexión: Inyectar excursiones de tono expresivas (pitch: +4Hz a +8Hz) en preguntas y ganchos.
• Micro-Pausas: Insertar pausas tácticas de 100–180 ms (<break time="180ms"/>) justo antes de palabras clave (p.ej., antes de "sobres adolescentes!").
• Mapeo de Etiquetas de Expresión:
  • [curioso]: Apertura rápida (170 PPM), elevación interrogativa al final (pitch: +8%), intriga conspirativa.
  • [explicando]: Mesurado (155–165 PPM), articulación nítida, pausas de 60 ms antes de términos técnicos.
  • [dramático]: Ritmo más lento (145 PPM), caída del tono a voz de pecho (-5%), énfasis staccato contundente.
  • [seguro]: Corte dinámico (165 PPM), tono de pecho resonante, elevación terminal ascendente.
  • [emocionado]: Alta velocidad (180 PPM), elevación del tono (+10%), golpe rítmico agudo en sustantivos.
  • [juguetón] / [riendo]: Corte conversacional (165 PPM), risita audible / sonrisa al respirar, tono burlón.
• Subtítulos Palabra por Palabra: Extraer marcas de tiempo de palabras del TTS para potenciar resaltados de palabras bailarinas (resplandor amarillo .word-active #FFE600) en el chip inferior.
• Plan Maestro de Audio:
  • Voz en off nivelada a -16 LUFS con loudnorm=I=-16:TP=-1.5:LRA=7.
  • Cama musical instrumental con volumen 0.15 (= -29 LUFS, exactamente 13 LU por debajo de la voz). Sin sidechain ducking (la brecha de 13 LU es el duck).
  • Bus de Efectos de Sonido (ganancia 0.20): pop.wav en cada corte de escena (ganancia 0.50), riser.wav 0.3 seg antes de grandes giros de escena (ganancia 0.28), click.wav en aterrizajes de elementos UI (ganancia 0.40), chime.wav en revelaciones (ganancia 0.38), notify.wav en CTA (ganancia 0.35).
  • Exportación Maestra: -14 LUFS integrados, Pico Verdadero <= -1.0 dBTP.
  • Consultar references/voice_audio_and_cutout_guide.md para fragmentos SSML completos y configuraciones específicas del motor.

C. Arquitectura de Recorte de Presentador (Ancla 5)

Cada escena presenta un recorte de personaje presentador expresivo anclado en la parte inferior derecha (top: 63.4%, x: 20.7% desde la derecha, recortado por el borde del encuadre a la altura de la cintura, sentado debajo del chip). Las poses se mapean directamente a las etiquetas de expresión vocal:

• [curioso] ➔ p1_shrug.png (palmas levantadas, ojos abiertos, sonrisa emocionada)
• [frustrado] ➔ p2_facepalm.png (palma en la frente, mueca)
• [seguro] ➔ p3_present.png (brazos abiertos, pose de ¡tachán!, sonrisa orgullosa)
• [explicando] ➔ p4_chin.png (toque de barbilla, media sonrisa astuta, pose de enseñanza)
• [analogía] / [recordando] ➔ p5_memory.png (rascándose la cabeza, pequeño ¡ajá!)
• [emocionado] / [números] ➔ p6_thumbs.png (grandes pulgares arriba, sonrisa enorme y emocionada)
• [juguetón] / [riendo] / [cta] ➔ p7_cta.png (señalando al espectador, sonrisa burlona)
• [dramático] / [mirada] ➔ p8_point.png (dedo apuntando directamente fuera de pantalla)
• [revelación] ➔ p9_idea.png (dedo de bombilla hacia arriba, ojos abiertos)
• Consultar references/voice_audio_and_cutout_guide.md para indicaciones completas de generación de imágenes e instrucciones de alpha matting.

D. Transiciones de Escena Dinámicas (Sin Cortes Rígidos)

Cada transición de escena debe usar una transición de movimiento activa:

• Wipe Sesgado de Doble Banda (wipe.html): Barrido angular característico de -11deg con fondo de campo entrante + franja de borde de acento de 120 px, alternando dirección horizontal (flip: 0 vs flip: 1).
• Zoom de Cámara: Transición de zoom dentro de nodos de red o capas de arquitectura (scale: 0.85 -> 1.0).
• Destello Glitch de Terminal: Destello cromático rápido al entrar en entornos de código/terminal.
• Consultar references/v7_layout_and_transitions_guide.md para la geometría completa y especificaciones de la línea de tiempo de GSAP.

E. Animaciones Continuas Específicas del Tema

Nunca mostrar diagramas estáticos. Todos los componentes visuales deben presentar movimiento continuo y reactivo:

• Enrutamiento de Paquetes y Decapado de Capas: En explicaciones de Tor y redes, mostrar paquetes animados viajando físicamente a través de nodos, eliminando capas de cifrado (capa Guardia Verde, capa Media Amarilla, capa de Salida Roja) a medida que avanzan.
• Iluminación Reactiva de Nodos: Los nodos brillan, pulsan y alternan insignias de estado (ESPERANDO → ACTIVO → DESCIFRADO) a medida que los paquetes los atraviesan.
• Ventanas de Terminal Interactivas: Ejecución de comandos de escritura en vivo, registros de circuito en tiempo real y cursores de bloque parpadeantes.

F. Sistema de Tipografía Editorial Suiza

• Estrictamente alineado a la izquierda con márgenes limpios.
• Jerarquía de 3 niveles: Kicker con espaciado amplio (#), título apilado masivo y píldoras de pancarta de palabras clave rectangulares de alto contraste ([...]).
• Animaciones de deslizamiento hacia arriba enmascaradas (overflow: hidden).
• Cero adornos florales. Barra de encabezado técnico superior minimalista y limpia.

---

2. Inicio Rápido: De Guion de Voz a Video

Siempre que el usuario proporcione un guion formateado con expresiones:

[GANCHO — 0–7 seg | Curioso + misterioso]
[curioso] "Bhai, ¿alguna vez has pensado cómo oculta Tor Browser tu identidad? ¡Tú abres un sitio web, pero tu solicitud no va directamente al sitio!"

[SELECCIÓN DE RUTA — 7–16 seg | Emocionado + explicativo]
[explicando] "En lugar de eso, Tor selecciona tres computadoras de su red — Nodo Guardia, Nodo Medio y Nodo de Salida. ¡Y estos tres juntos forman tu ruta secreta!"

El agente ejecuta el pipeline:

# 1. Analizar secciones, extraer expresiones, mapear poses del presentador
python scripts/process_vo.py

# 2. Validar el diseño contra las 7 Leyes y escribir tokens
python scripts/prepare.py

# 3. Ensamblar escenas y compilar index.html maestro
python scripts/build_index.py

# 4. Renderizar fotogramas deterministas a 30 FPS
python scripts/render_video.py

# 5. Mezclar VO (-16 LUFS) con cama musical (-29 LUFS) y SFX, y multiplexar
python scripts/mix_audio.py
python scripts/qc.py

---

3. La Arquitectura de Producción V7: Diseños y Transiciones

La habilidad adopta el Pipeline de Reel V7 probado en producción (PARAMS.json -> prepare.py -> new_scene.py -> build_index.py -> mix_audio.py -> qc.py):

A. Las Siete Leyes del Diseño y el Movimiento

1. Una Cuadrícula de Anclaje, Fija en la Parte Inferior:
   • Ancla 1 (Kicker): Etiqueta de categoría/contexto en Y = 0.0667 con guión de acento <i></i>.
   • Ancla 2 (Hero): Palabra de impacto condensada (1–3 palabras) en Anton en Y = 0.1006.
   • Ancla 3 (Cuerpo de Prueba): Tarjeta de prueba dinámica (A: card-led), odómetro (B: stat-led) o declaración de 2 líneas (C: type-led) en Y = 0.3010.
   • Ancla 4 (El Chip): Cápsula de oración hablada en Y = 0.5875 con punto de acento <b></b>. Nunca se mueve entre escenas.
   • Ancla 5 (El Presentador): Personaje recortado por el borde del encuadre en Y = 0.6340 con resplandor de halo adaptativo (#sX-glow). Nunca se mueve entre escenas.
2. El Hero es una Palabra, El Chip es la Línea, La Tarjeta es el Detalle:
   • Hero: 1–3 palabras (Anton, 17–25% del ancho del encuadre, altura de línea 0.88).
   • Chip: 3–6 palabras (la línea que lee un espectador móvil en silencio).
   • Tarjeta: La prueba concreta (lista de archivos, diff de palabras clave, terminal, progreso de carga, medidor de puntuación).
3. Ciclo de Color de Seis Campos:
   • acento → fondo → tinta → secundario → terciario → cuaternario. Dos escenas consecutivas no pueden compartir un fondo.
4. Prueba, No Decoración:
   • Cada tarjeta debe mostrar una prueba real (4–6 filas o maqueta que ocupe ≥ 55% de la tarjeta). Si no hay prueba, usar type-led (Ancla 3C) y omitir la tarjeta.
5. El Fotograma 0 es un Póster (data-cover="1"):
   • La Escena 1 se compone en t = 0.0s: kicker, hero, tarjeta y presentador ya visibles. El chip aterriza en 0.65s. Cero fotogramas de introducción vacíos.
6. Movimiento Solo con Transformación y Aterrizaje Temprano:
   • Las entradas aterrizan en el primer tercio de cada beat (0.24s – 0.34s, power3.out). Nunca hacer tween de contenido de texto o innerHTML.
   • Las escenas largas presentan un sutil desplazamiento continuo (tl.to("#sX-hero", { y: -14, duration: 0.7 })) para mantener la vida visual.
7. Sonido como Puntuación:
   • SFX procedimentales (pop en cada corte, click/key en filas de UI, chime en revelaciones, notify en CTA). Masterizado a -14 LUFS y <= -1 dBTP.

B. La Transición de Wipe Sesgado de Doble Banda (wipe.html)

• Geometría: Barrido angular de doble banda sesgado a -11deg (transform: skewX(-11deg)).
• Estructura: #w-main (el color de fondo de la escena entrante) + #w-edge (franja de acento de 120 px).
• Alternancia de Dirección: Voltea horizontalmente en cada escena (flip: 0 de izquierda a derecha, flip: 1 de derecha a izquierda).
• Programación: Se dispara automáticamente 0.36s antes de cada corte por build_index.py, con la duración escalada adaptativamente (0.34s – 0.62s) para ajustarse a la longitud de la escena.

---

4. Referencias y Documentación

• references/voice_audio_and_cutout_guide.md: Dirección vocal para expresiones, objetivos maestros de LUFS, mezcla de cama musical y el sistema de recorte de presentador de 9 poses.
• references/v7_layout_and_transitions_guide.md: La especificación de diseño matemático completa, fórmulas de derivación de tokens y mecánica de transición de wipe sesgado.
• references/animation_and_transitions_guide.md: Catálogo de física de transiciones, recetas de paquetes de decapado de capas y reglas de escalado de tempo de audio.
• references/design_system.md: Colores CSS exactos, fuentes, alturas de línea y zonas seguras.
• references/concept_animation_guide.md: Cómo diseñar animaciones para Tor, bases de datos, IA, Git, redes y diseño de sistemas.