lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill intermedio claude-codecodexcursorhtmlvídeo

HyperFrames: renderiza composiciones web como vídeo

Produce vídeos repetibles con HTML, CSS y una línea de tiempo que puedes revisar y renderizar desde la terminal.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: crea un proyecto

Comprueba node --version, git --version, npm --version, npx --version y ffmpeg -version antes de inicializar. Necesitas Node.js ≥22.20.0: aunque HyperFrames declara ≥22, su actualizador de skills llama a npx skills add, y el paquete skills exige ≥22.20.0 y usa Git.

npx hyperframes init my-video
cd my-video

Paso 2: instala las skills principales

npx hyperframes skills update

Paso 3: revisa y renderiza

npx hyperframes preview
npx hyperframes render

init crea la composición inicial en my-video/index.html; comprueba que existe y úsala para esta primera prueba. preview mantiene un servidor abierto: usa otra terminal en my-video para render, o detén la vista previa con Ctrl+C antes de reutilizar la terminal. El resultado es el MP4 cuya ruta imprime la CLI. Sigue el README para editar la composición después de comprobar la inicial.

Comprobación

Abre la vista previa y revisa distintos instantes. Reproduce el MP4 generado para comprobar encuadre, sincronía y audio.

Si algo falla

Si el render cambia entre ejecuciones, revisa que las animaciones sean deterministas y los medios estén disponibles. Si una skill está desactualizada, usa la orden de actualización documentada.

ver en .md ¿Prefieres el recurso entero?

Qué es

HyperFrames es un framework abierto de HeyGen para convertir composiciones web en vídeos MP4. Incluye una CLI, un catálogo de componentes y skills para agentes de programación.

Para qué te sirve

  • Cuando necesitas repetir un vídeo de producto con textos diferentes.
  • Cuando quieres revisar una composición en el navegador antes de exportar.
  • Cuando una pieza requiere combinar tipografía, audio y material de vídeo.

Cómo funciona

Los atributos de la composición indican dimensiones, duración y pistas. Las animaciones deben poder buscar un instante concreto para que el render sea determinista. La CLI inicializa el proyecto, abre una vista previa y genera el MP4. Las skills guían al agente para trabajar con ese contrato.

Antes de empezar

Prepara una carpeta de proyecto con Node.js ≥22.20.0, Git, npm/npx y FFmpeg disponibles. HyperFrames declara Node ≥22, pero esta receta también ejecuta el instalador de skills, cuyo mínimo es ≥22.20.0 y que usa Git. Los servicios externos para generar voz, imágenes o vídeo tienen sus propias cuentas y costes.

Límites y alternativas

Una página con animaciones arbitrarias puede no ser determinista al renderizar cada fotograma. Revisa las fuentes y licencias de los medios y reproduce el resultado exportado. Remotion es una alternativa para composiciones basadas en React.

Recursos