🎯 Qué es HyperFrames
HyperFrames es un framework open-source que transforma páginas HTML animadas en archivos MP4, fotograma a fotograma, con precisión total. Repositorio oficial: heygen-com/hyperframes en GitHub.
HyperFrames trata el navegador como una cámara de cine. Cada fotograma 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 gradientes sin degradación.
- ✓ Framework de código abierto (MIT), gratis para siempre
- ✓ Funciona 100% local: sin cuenta ni clave de API
- ✓ Salida determinista: mismo HTML → mismo MP4
- ✓ Se integra con cualquier lib JS: GSAP, Three.js, D3
- ✗ No es un grabador de pantalla (no captura apps externas)
- ✗ 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 por 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 browser, espera a que el DOM se estabilice y activa una captura de pantalla PNG de alta resolución. A 30 fps, son 30 capturas de pantalla 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 en 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 usan 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 superior a 1.05 (voz metálica)
- ✗ No olvides descargar el modelo en la 1.ª ejecución (~340 MB)
- ✗ No pongas siglas en mayúsculas sin desarrollarlas (p. ej., "GSAP" → "ji-sap")
Además de pf_dora (femenina, recomendada por defecto), hay pm_alex e pm_santa. La primera ejecución descarga automáticamente ~340 MB del modelo Kokoro.
💻 Todo local, sin API
HyperFrames se ejecuta 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 sus diapositivas y guiones se procesan en servidores de terceros. Con HyperFrames: costo cero por renderizado 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 | Sube a 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, mantener todo en local es esencial. Cada render se realiza sin necesidad de conectarse a internet.
📐 Dos formatos: 16:9 y 9:16
A partir del mismo proyecto HTML, HyperFrames genera versiones 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 el código de la escena.
node build-index.mjs (sin flag)node build-index.mjs --verticalUsa --quality draft primero para revisar rápidamente los 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 control total sobre lo visual y costo cero por render.
- ✓ Crear videos explicativos sobre 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 propio
- ✓ Necesitas 16:9 y 9:16 del mismo contenido
- ✓ Querer costo cero incluso en producción de gran volumen
- ✗ Necesitas capturar interacciones reales de aplicaciones
- ✗ El video requiere una cámara de 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 entre plataformas.
Videos de bienvenida y recorridos por funciones con el diseño premium oscuro 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 renderizado
- ✓ Stack: Chrome headless captura frames + FFmpeg codifica 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.