ZardLi1115/zedclaw

HyperFrames

HTML es la fuente de verdad para el video. Una composición es un archivo HTML con atributos data-* para temporización, una línea de tiempo GSAP para 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 videos explicativos matemáticos/geométricos (ecuaciones, estilo 3B1B). Usa hyperframes para motion graphics, videos de personas hablando con subtítulos, recorridos de productos, superposiciones para redes sociales, transiciones con shaders, y cualquier cosa impulsada por video/audio real.

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 narrado con subtítulos (TTS + subtítulos sincronizados con la forma de onda)
• Visuales reactivos al audio (sincronización de ritmo, barras de espectro, brillo pulsante)
• Transiciones entre escenas (fundido, barrido, deformación de shader, flash a través de blanco)
• Superposiciones para redes sociales (estilo Instagram/TikTok/YouTube)
• Pipeline de sitio web a video (captura una URL, produce un promocional)
• Cualquier animación HTML/CSS/JS que deba renderizarse de forma determinista a un archivo de video

No uses esta habilidad para:

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

Referencia Rápida

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

Banderas de renderizado: --quality borrador|estándar|alta · --fps 24|30|60 · --format mp4|webm · --docker (reproducible) · --strict.

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

Configuración (una vez)

bash "$(dirname "$(find ~/.zedclaw/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 (muestra instrucciones de corrección si no).
2. Instala la CLI hyperframes globalmente (npm install -g hyperframes@>=0.4.2).
3. Precarga chrome-headless-shell a través de Puppeteer — requerido para renderizado de mejor 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. Planifica 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 de movimiento (explosivo / cinematográfico / fluido / técnico)
• Fotograma héroe — 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 (BLOQUEO DURO). Antes de escribir CUALQUIER composición HTML, 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 saltó). Verifica en orden:

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

2. ¿El usuario nombró un estilo? (ej. "Pulso Suizo", "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 trazar su paleta y tipografía de vuelta a DESIGN.md o a una dirección explícita del usuario.

2. Prepara

npx hyperframes init mi-video --non-interactive

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

3. Diseño antes de la animación

Escribe el HTML+CSS estático para el fotograma héroe 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 héroe se vea bien, agrega entradas con gsap.from() (anima hacia la posición CSS) y salidas con gsap.to() (anima desde ella).

Consulta references/composition.md para el esquema completo de atributos de datos y reglas de composición.

4. Anima con GSAP

Cada composición debe:

• Registrar su línea de tiempo: window.__timelines["<id-composición>"] = tl
• Iniciar en pausa: gsap.timeline({ paused: true }) — el reproductor controla la reproducción
• Usar valores repeat finitos (no repeat: -1 — rompe el motor de captura). Calcula: repeat: Math.ceil(duración / duraciónCiclo) - 1.
• Ser determinista — sin Math.random(), Date.now() o lógica de reloj de pared. Usa un PRNG con semilla si necesitas pseudoaleatoriedad.
• Construirse sincrónicamente — 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 (tweens, eases, stagger, líneas de tiempo).

5. Transiciones entre escenas

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

1. Siempre usa una transición entre escenas — sin cortes abruptos.
2. Siempre usa 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-transición> para instalar transiciones de shader (flash-through-white, liquid-wipe, etc.). Lista completa: npx hyperframes add --list.

6. Audio, subtítulos, TTS, visuales reactivos 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 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 configuración regional del fonemizador; usa --lang solo para sobrescribir. La fonemización en idiomas no ingleses requiere espeak-ng instalado en el sistema.
• Subtítulos: npx hyperframes transcribe narration.wav → transcripción a nivel de palabra. Elige un estilo según el tono de la transcripción (hype / corporativo / tutorial / storytelling / social — consulta la tabla en references/features.md). Regla de idioma: nunca uses modelos whisper .en a menos que el audio esté confirmado en inglés — .en traduce audio no inglés en lugar de transcribirlo. Cada grupo de subtítulos DEBE tener una eliminación forzada tl.set(el, { opacity: 0, visibility: "hidden" }, group.end) después de su tween de salida — de lo contrario, los grupos se filtran visibles a los posteriores.
• Visuales reactivos al audio: extrae previamente las bandas de audio (bajos / medios / agudos) y muéstralas por fotograma dentro de la línea de tiempo con un bucle for de tl.call(draw, [], f / fps) — un solo tween largo NO reacciona al audio. Asigna bajos → scale (pulso), agudos → textShadow/boxShadow (brillo), amplitud general → opacity/y/backgroundColor. Evita clichés de barras de ecualizador — deja que el contenido guíe lo visual y el audio impulse su comportamiento.
• Resaltado estilo marcador: los efectos de resaltado, círculo, explosión, garabato, contorno para énfasis de texto son CSS+GSAP deterministas — consulta references/features.md#marker-highlighting. Totalmente buscables, sin filtros SVG animados.
• Transiciones de escena: cada composición de múltiples escenas DEBE usar transiciones (sin cortes abruptos). Elige entre primitivas CSS (deslizamiento push, fundido cruzado 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#transitions. No mezcles transiciones CSS y de shader en la misma composición.

7. Lint, validar, inspeccionar, previsualizar, renderizar

npx hyperframes lint              # detecta falta de data-composition-id, 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 visual de diseño — desbordamiento, elementos fuera del fotograma, texto oculto
npx hyperframes preview           # previsualización en navegador en vivo
npx hyperframes render --quality borrador --output draft.mp4    # iteración rápida
npx hyperframes render --quality alta --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 inferiores a 4.5:1 (o 3:1 para texto grande). hyperframes inspect es el complemento 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 da 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 → renderizar → entregar.

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 agotan el tiempo. 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 de repeticiones finito.
• gsap.set() en elementos de clip que entran más tarde — el elemento no existe al cargar la página. Usa tl.set(selector, vars, timePosition) dentro de la línea de tiempo, en o después de data-start del clip.
• <br> dentro del texto del contenido — los saltos forzados no conocen el ancho de la fuente renderizada, por lo que el salto natural + <br> provoca doble salto. Usa max-width para que el texto se envuelva naturalmente. Excepción: títulos de visualización cortos donde cada palabra está deliberadamente en su propia línea.
• Animar visibility o display — GSAP no puede animar estos. Usa autoAlpha (maneja tanto visibilidad como opacidad).
• Llamar a video.play() o audio.play() — el framework posee la reproducción. Nunca llames a estos 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 cargar 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 a través de data-composition-src usan <template>.
• Usar video para audio — siempre <video> silenciado + <audio> separado.

Verificación

Antes y después de renderizar:

1. Lint + validación + inspección pasan: npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect (lint detecta problemas estructurales, validate detecta contraste, inspect 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 tween, línea de tiempo ASCII Gantt, detección de stagger, 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 una. 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 de datos, contrato de línea de tiempo, reglas no negociables, reglas de tipografía/activos
• cli.md — todos los comandos 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 (tweens, eases, stagger, líneas de tiempo, matchMedia)
• features.md — subtítulos, TTS, reactivo al audio, resaltado de marcador, transiciones (cargar 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