Kingly-Agency/deadzone

HyperFrames

El HTML es la fuente de verdad para el video. Una composición es un archivo HTML con atributos data-* para la temporización, una línea de tiempo GSAP para la animación y CSS para la apariencia. El motor HyperFrames captura la página fotograma a fotograma y la codifica a MP4/WebM con FFmpeg.

Complemento de manim-video: Usa manim-video para explicadores matemáticos/geométricos (ecuaciones, estilo 3B1B). Usa hyperframes para gráficos en movimiento, videos con narración y subtítulos, recorridos de productos, superposiciones para redes sociales, transiciones con shaders y cualquier cosa impulsada por medios de video/audio reales.

Cuándo Usarlo

• El usuario pide un video renderizado a partir de texto, un guion o un sitio web
• Tarjetas de título animadas, tercios inferiores o intros tipográficas
• Video de narración con subtítulos (TTS + subtítulos sincronizados con la forma de onda)
• Visuales reactivas al audio (sincronización de ritmo, barras de espectro, brillo pulsante)
• Transiciones entre escenas (encadenado, barrido, deformación de shader, fundido a blanco)
• Superposiciones para redes sociales (estilo Instagram/TikTok/YouTube)
• Flujo de trabajo de sitio web a video (capturar una URL, producir un promocional)
• Cualquier animación HTML/CSS/JS que deba renderizarse de manera determinista a un archivo de video

No uses esta habilidad para:

• Animaciones de matemáticas/ecuaciones puras (→ manim-video)
• Generación de imágenes o memes (→ meme-generation, modelos de imagen)
• Videoconferencias en vivo o transmisión en directo

Referencia Rápida

npx hyperframes init my-video               # crear un proyecto
cd my-video
npx hyperframes lint                        # validar antes de previsualizar/renderizar
npx hyperframes preview                     # previsualización en navegador con recarga en vivo (puerto 3002)
npx hyperframes render --output final.mp4   # renderizar a MP4
npx hyperframes doctor                      # diagnosticar problemas del entorno

Banderas de renderizado: --quality draft|standard|high · --fps 24|30|60 · --format mp4|webm · --docker (reproducible) · --strict.

Referencia completa de la CLI: references/cli.md.

Configuración (única vez)

bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

El script:

1. Verifica que Node.js >= 22 y FFmpeg estén instalados (imprime instrucciones de corrección si no).
2. Instala la CLI de hyperframes globalmente (npm install -g hyperframes@>=0.4.2).
3. Precarga chrome-headless-shell a través de Puppeteer — requerido para renderizado de máxima calidad mediante la ruta de captura HeadlessExperimental.beginFrame de Chrome.
4. Ejecuta npx hyperframes doctor e informa el resultado.

Consulta references/troubleshooting.md si la configuración falla.

Procedimiento

1. Planificar antes de escribir HTML

Antes de tocar código, articula a alto nivel:

• Qué — arco narrativo, momentos clave, latidos emocionales
• Estructura — composiciones, pistas (video/audio/superposiciones), duraciones
• Identidad visual — colores, fuentes, carácter del movimiento (explosivo / cinematográfico / fluido / técnico)
• Fotograma clave — para cada escena, el momento en que la mayoría de los elementos son visibles simultáneamente. Este es el diseño estático que construirás primero.

Puerta de Identidad Visual (PUERTA DURA). Antes de escribir CUALQUIER HTML de composición, se debe definir una identidad visual. NO escribas composiciones con colores predeterminados o genéricos (#333, #3b82f6, Roboto son señales de que este paso se omitió). Verifica en orden:

1. ¿DESIGN.md en la raíz del proyecto? → Usa sus colores, fuentes, reglas de movimiento y restricciones "Qué NO Hacer".

2. ¿El usuario nombró un estilo? (ej. "Swiss Pulse", "oscuro y tecnológico", "marca de lujo") → Genera un DESIGN.md mínimo con ## Prompt de Estilo, ## Colores (3-5 hex con roles), ## Tipografía (1-2 familias), ## Qué NO Hacer (3-5 antipatrones).

3. ¿Ninguno de los anteriores? → Haz 3 preguntas antes de escribir cualquier HTML:

   • ¿Estado de ánimo? (explosivo / cinematográfico / fluido / técnico / caótico / cálido)
   • ¿Lienzo claro u oscuro?
   • ¿Algún color de marca, fuente o referencia visual?

   Luego genera un DESIGN.md a partir de las respuestas. Cada composición debe rastrear su paleta y tipografía hasta DESIGN.md o una dirección explícita del usuario.

2. Andamiar

npx hyperframes init my-video --non-interactive

Plantillas: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph. Pasa --example <nombre> para elegir una, --video clip.mp4 o --audio track.mp3 para sembrar con medios.

3. Diseño antes de animación

Escribe el HTML+CSS estático del fotograma clave primero — aún sin GSAP. El contenedor .scene-content debe llenar la escena (width:100%; height:100%; padding:Npx) con display:flex + gap. Usa padding para empujar el contenido hacia adentro — nunca uses position: absolute; top: Npx en un contenedor de contenido (el contenido se desborda cuando es más alto que el espacio restante).

Solo después de que el fotograma clave se vea bien, agrega entradas gsap.from() (anima hacia la posición CSS) y salidas gsap.to() (anima desde ella).

Consulta references/composition.md para obtener el esquema completo de atributos data-* y las reglas de composición.

4. Animar con GSAP

Cada composición debe:

• Registrar su línea de tiempo: window.__timelines["<id-de-composición>"] = tl
• Iniciar pausada: gsap.timeline({ paused: true }) — el reproductor controla la reproducción
• Usar valores finitos de repeat (sin repeat: -1 — rompe el motor de captura). Calcula: repeat: Math.ceil(duración / cicloDuración) - 1.
• Ser determinista — sin Math.random(), Date.now() o lógica de reloj de pared. Usa un PRNG con semilla si necesitas pseudoaleatoriedad.
• Construirse de forma síncrona — sin async/await, setTimeout o Promesas alrededor de la construcción de la línea de tiempo.

Consulta references/gsap.md para la API central de GSAP (interpolaciones, suavizados, escalonamiento, líneas de tiempo).

5. Transiciones entre escenas

Las composiciones de múltiples escenas requieren transiciones. Reglas:

1. Usa siempre una transición entre escenas — sin cortes bruscos.
2. Usa siempre animaciones de entrada en cada elemento de la escena (gsap.from(...)).
3. Nunca uses animaciones de salida excepto en la escena final — la transición ES la salida.
4. La escena final puede desvanecerse.

Usa npx hyperframes add <nombre-de-transición> para instalar transiciones de shader (flash-through-white, liquid-wipe, etc.). Lista completa: npx hyperframes add --list.

6. Audio, subtítulos, TTS, reactividad al audio, resaltado

• Audio: siempre un elemento <audio> separado (el video es muted playsinline).
• TTS: npx hyperframes tts "Texto del guion" --voice af_nova --output narration.wav. Lista de voces con --list. La primera letra del ID de voz codifica el idioma (a/b=inglés, e=español, f=francés, j=japonés, z=mandarín, etc.) — la CLI infiere automáticamente la localización del fonemizador; pasa --lang solo para anular. La fonemización no inglesa requiere espeak-ng instalado a nivel de sistema.
• Subtítulos: npx hyperframes transcribe narration.wav → transcripción a nivel de palabra. Elige el estilo según el tono de la transcripción (hype / corporativo / tutorial / narrativo / social — consulta la tabla en references/features.md). Regla de idioma: nunca uses modelos .en de whisper a menos que el audio sea inglés confirmado — .en traduce audio no inglés en lugar de transcribirlo. Cada grupo de subtítulos DEBE tener un tl.set(el, { opacity: 0, visibility: "hidden" }, group.end) de eliminación después de su interpolación de salida; de lo contrario, los grupos se filtran visibles hacia los posteriores.
• Visuales reactivas al audio: extrae previamente las bandas de audio (bajos / medios / agudos) y muestra por fotograma dentro de la línea de tiempo con un bucle for de tl.call(draw, [], f / fps) — una sola interpolación larga NO reacciona al audio. Asigna bajos → scale (pulso), agudos → textShadow/boxShadow (brillo), amplitud general → opacity/y/backgroundColor. Evita los clichés de barras de ecualizador — deja que el contenido guíe lo visual, y el audio conduzca su comportamiento.
• Resaltado tipo marcador: los efectos de resaltado, círculo, ráfaga, garabato y bosquejo para énfasis de texto son CSS+GSAP deterministas — consulta references/features.md#resaltado-marcador. Completamente buscable, sin filtros SVG animados.
• Transiciones de escena: cada composición de múltiples escenas DEBE usar transiciones (sin cortes bruscos). Elige entre primitivas CSS (deslizamiento de empuje, encadenado borroso, zoom a través, bloques escalonados) o transiciones de shader (flash-through-white, liquid-wipe, cross-warp-morph, chromatic-split, etc.) mediante npx hyperframes add. Las tablas de estado de ánimo y energía están en references/features.md#transiciones. No mezcles transiciones CSS y de shader en la misma composición.

7. Lint, validar, inspeccionar, previsualizar, renderizar

npx hyperframes lint              # detecta data-composition-id faltantes, pistas superpuestas, líneas de tiempo no registradas
npx hyperframes validate          # auditoría de contraste WCAG en 5 marcas de tiempo
npx hyperframes inspect           # auditoría de diseño visual — desbordamiento, elementos fuera del fotograma, texto oculto
npx hyperframes preview           # previsualización en navegador en vivo
npx hyperframes render --quality draft --output draft.mp4    # iteración rápida
npx hyperframes render --quality high --output final.mp4     # entrega final

hyperframes validate muestrea los píxeles de fondo detrás de cada elemento de texto y advierte sobre relaciones de contraste por debajo de 4.5:1 (o 3:1 para texto grande). hyperframes inspect es el compañero del diseño: ejecuta la página en múltiples marcas de tiempo y señala problemas que un lint estático no puede ver (un subtítulo que se envuelve más allá del área segura solo a los 4.5s, una tarjeta que se desborda cuando su título es la variante más larga, un elemento que termina detrás de un shader de transición). Ejecuta inspect especialmente en composiciones con globos de diálogo, tarjetas, subtítulos o tipografía ajustada.

8. Sitio web a video (si el usuario proporciona una URL)

Usa el flujo de trabajo de 7 pasos de captura a video en references/website-to-video.md: captura → DESIGN.md → SCRIPT.md → storyboard → composición → renderizado → entrega.

Errores Comunes

• HeadlessExperimental.beginFrame' wasn't found — Chromium 147+ eliminó este protocolo. Asegúrate de estar en hyperframes@>=0.4.2 (detecta automáticamente y recurre al modo de captura de pantalla). Vía de escape: export PRODUCER_FORCE_SCREENSHOT=true. Consulta hyperframes#294 y references/troubleshooting.md.
• Chrome del sistema (no chrome-headless-shell) — los renderizados se cuelgan durante 120s y luego expiran. Ejecuta npx puppeteer browsers install chrome-headless-shell (setup.sh lo hace). hyperframes doctor informa qué binario se usará.
• repeat: -1 en cualquier lugar — rompe el motor de captura. Siempre calcula un recuento finito de repeticiones.
• gsap.set() en elementos de clip que entran más tarde — el elemento no existe en la carga de la página. Usa tl.set(selector, vars, timePosition) dentro de la línea de tiempo en su lugar, en o después del data-start del clip.
• <br> dentro del texto de contenido — los saltos forzados no conocen el ancho de la fuente renderizada, por lo que el ajuste natural + <br> provoca dobles saltos. Usa max-width para dejar que el texto se ajuste. Excepción: títulos cortos donde cada palabra está deliberadamente en su propia línea.
• Animar visibility o display — GSAP no puede interpolar estos. Usa autoAlpha (maneja tanto visibilidad como opacidad).
• Llamar a video.play() o audio.play() — el framework posee la reproducción. Nunca los llames tú mismo.
• Construir líneas de tiempo de forma asíncrona — el motor de captura lee window.__timelines de forma síncrona después de la carga de la página. Nunca envuelvas la construcción de la línea de tiempo en async, setTimeout o una Promesa.
• index.html independiente envuelto en <template> — oculta todo el contenido del navegador. Solo las subcomposiciones cargadas mediante data-composition-src usan <template>.
• Usar video para audio — siempre <video> silenciado + <audio> separado.

Verificación

Antes y después del renderizado:

1. Pasar lint + validar + inspeccionar: npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect (lint detecta problemas estructurales, validar detecta contraste, inspeccionar detecta problemas de diseño visual / desbordamiento — consulta troubleshooting.md si aparecen advertencias).
2. Coreografía de animación — para composiciones nuevas o cambios significativos de animación, ejecuta el mapa de animación. npx hyperframes init copia los scripts de la habilidad en el proyecto, por lo que la ruta es local al proyecto:

   node skills/hyperframes/scripts/animation-map.mjs <directorio-composición> \
     --out <directorio-composición>/.hyperframes/anim-map
   

   Genera un único animation-map.json con resúmenes por interpolación, línea de tiempo ASCII Gantt, detección de escalonamiento, zonas muertas (>1s sin animación), ciclos de vida de elementos y banderas (offscreen, collision, invisible, paced-fast <0.2s, paced-slow >2s). Escanea resúmenes y banderas — corrige o justifica cada uno. Omite en ediciones pequeñas.
3. El archivo existe + no es cero: ls -lh final.mp4.
4. La duración coincide con data-duration: ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4.
5. Verificación visual: extrae un fotograma de la mitad de la composición: ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png.
6. Audio presente si se espera: ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1.

Si hyperframes render falla, ejecuta npx hyperframes doctor y adjunta su salida al informar.

Referencias

• composition.md — atributos data, contrato de línea de tiempo, reglas no negociables, reglas de tipografía/activos
• cli.md — cada comando de la CLI (init, capture, lint, validate, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, benchmark)
• gsap.md — API central de GSAP para HyperFrames (interpolaciones, suavizados, escalonamiento, líneas de tiempo, matchMedia)
• features.md — subtítulos, TTS, reactividad al audio, resaltado marcador, transiciones (carga bajo demanda)
• website-to-video.md — flujo de trabajo de 7 pasos de captura a video
• troubleshooting.md — solución de OpenClaw, variables de entorno, errores comunes de renderizado