🎯 Qué es HyperFrames
HyperFrames es un framework open-source que transforma páginas HTML animadas en archivos MP4, frame por frame, con precisión total. Repositorio oficial: heygen-com/hyperframes en GitHub.
HyperFrames trata el navegador como una cámara de cine. Cada frame del video es una captura exacta del DOM en el instante t — sin codec de pantalla, sin pérdida de antialiasing, sin flickering.
El resultado es un MP4 con calidad de renderizado de navegador: fuentes perfectas, SVG vectorial, sombras y degradados sin degradación.
- ✓ Framework de código abierto (MIT), gratis para siempre
- ✓ Funciona 100% local: sin cuenta, sin clave de API
- ✓ Salida determinista: mismo HTML → mismo MP4
- ✓ Se integra con cualquier librería JS: GSAP, Three.js, D3
- ✗ No es un grabador de pantalla (no captura apps externos)
- ✗ No es un editor de video no lineal (sin timeline GUI)
- ✗ No depende de un servicio en la nube
- ✗ No usa IA generativa para imágenes o voces
npx hyperframes.🔄 HTML → MP4
Cómo una página HTML animada con GSAP se convierte en un video MP4 renderizado cuadro a cuadro: el corazón de HyperFrames.
Un archivo index.html define cada escena con HTML/CSS. Las animaciones se codifican en GSAP dentro de una función anim() que recibe t (tiempo en segundos).
Para cada frame, HyperFrames llama a anim(t) en el navegador, espera a que el DOM se estabilice y toma una captura PNG de alta resolución. A 30 fps, son 30 capturas por segundo de video.
Los PNG se pasan a FFmpeg, que los codifica en H.264 con el audio WAV generado por Kokoro TTS — y produce el MP4 final con narración sincronizada.
El video resultante queda en renders/nome-16x9.mp4 o renders/nome-9x16.mp4, listo para subir a YouTube o Shorts.
La grabación de pantalla captura en tiempo real: si el CPU está lento, el video queda entrecortado. HyperFrames controla el tiempo virtualmente: no se pierde ningún frame, independientemente de la velocidad de la máquina.
🔊 TTS local con Kokoro
Narración PT-BR generada 100% en tu máquina, con la voz pf_dora, sin clave de API y sin depender de espeak-ng. Kokoro se encarga de la fonética del portugués.
La mayoría de los motores TTS de código abierto usa espeak-ng para fonemizar; y espeak-ng es notoriamente malo en portugués. Kokoro tiene su propio fonemizador PT-BR, que produce una voz más natural sin dependencias externas.
- ✓ Escribe el texto como si fuera hablado (desarrolla las siglas)
- ✓ Usa
--speed 0.98para una voz más natural - ✓ Mide cada WAV con ffprobe antes de montar
- ✓ Archivos de texto en
assets/txt/sN.txt
- ✗ No instales espeak-ng: Kokoro no lo usa y genera conflictos
- ✗ No uses una velocidad por encima de 1.05 (voz metálica)
- ✗ No olvides descargar el modelo en la 1.ª ejecución (~340 MB)
- ✗ No pongas siglas en mayúsculas sin expandirlas (ej.: "GSAP" → "ji-sap")
Además de pf_dora (femenina, opción predeterminada recomendada), hay pm_alex e pm_santa. La primera ejecución descarga automáticamente ~340 MB del modelo Kokoro.
💻 Todo local, sin API
HyperFrames funciona por completo en la máquina del usuario: sin nube, sin costo por render y sin enviar contenido a servidores externos.
Las herramientas SaaS de video (Synthesia, HeyGen, Pictory) cobran por minuto renderizado y procesan tus diapositivas y guiones en servidores de terceros. Con HyperFrames: costo cero por render y ningún contenido sale de tu máquina.
| Aspecto | HyperFrames | SaaS (Synthesia etc.) |
|---|---|---|
| Costo por video | R$ 0,00 | Plan mensual obligatorio |
| Privacidad del contenido | 100% local | Se sube a los servidores |
| Personalización visual | HTML/CSS ilimitado | Plantillas fijas |
| Clave de API | No hace falta | Obligatoria |
Si produces cursos con contenido sensible, código interno o metodologías propias, es esencial mantener todo local. Cada render se realiza sin necesidad de conexión a Internet.
📐 Dos formatos: 16:9 y 9:16
A partir del mismo proyecto HTML, HyperFrames genera videos para YouTube (1920×1080) y Shorts/Reels (1080×1920) con un solo flag de línea de comandos.
El generador build-index.mjs acepta el flag --vertical. Cuando se pasa, reescribe el index.html en 1080×1920 y HyperFrames renderiza el MP4 vertical — sin duplicar código de escena.
node build-index.mjs (sin flag)node build-index.mjs --verticalUsa --quality draft primero para revisar rápidamente fotogramas individuales. Solo después ejecuta --quality high para el MP4 final; ahorra tiempo en las iteraciones.
🧭 Cuándo usar HyperFrames
Videos explicativos, tutoriales técnicos, onboarding de productos: cualquier situación en la que quieras tener control total sobre lo visual y costo cero por render.
- ✓ Crear videos explicativos de código o conceptos técnicos
- ✓ Producir tutoriales paso a paso con animaciones precisas
- ✓ Crear el onboarding de un producto con un diseño de marca propia
- ✓ Necesitas 16:9 Y 9:16 del mismo contenido
- ✓ Querer costo cero incluso en producción de alto volumen
- ✗ Necesitas capturar interacciones reales de aplicaciones
- ✗ El video requiere una cámara para talking head (avatar realista)
- ✗ Edición no lineal compleja (Adobe Premiere / DaVinci)
- ✗ Sin Node.js disponible en el entorno
Diapositivas animadas con código, diagramas y narración local. La misma calidad cada vez, sin variaciones de plataforma.
Videos de bienvenida y recorridos de funciones con el diseño dark premium de la marca, sin depender de diseñadores ni de SaaS.
Teaser de producto en 9:16 para Reels y 16:9 para YouTube — generados del mismo HTML en minutos.
Si puedes describir el video como "diapositivas con animaciones + narración", HyperFrames es la herramienta adecuada. Si necesitas una cámara en vivo o capturar una app, usa screencast.
📋 Resumen del Módulo 2.1
- ✓ HyperFrames es open-source, local, MIT — sin costo por render
- ✓ Stack: Chrome headless captura los frames + FFmpeg codifica el MP4
- ✓ HTML + GSAP → función
anim(t)→ frames → MP4 - ✓ TTS Kokoro:
pf_dora --speed 0.98, sin espeak-ng, sin clave - ✓ 16:9 (1920×1080) y 9:16 (1080×1920) del mismo proyecto
- ✓ Ideal para videos explicativos, tutoriales y onboarding con diseño propio
npx hyperframes init.