Mi primera película de marca en código me tomó unas 2 horas para 30 segundos de video (cifra reconstruida, no medida). La cuarta, 40 minutos medidos. Lo que cambió, en mi caso, no fue el modelo ni mi paciencia: fue que dejé de hacer a mano lo que HyperFrames ya sabe hacer bien y puse revisiones automáticas donde fallaba siempre lo mismo.
Este es el primer "repo de la semana": un repositorio que uso de verdad, con lo que medí y lo que me mordió. HyperFrames es un proyecto de HeyGen con licencia Apache 2.0 que convierte una página HTML animada en un MP4. Aquí el repo: github.com/heygen-com/hyperframes. Lo que sigue lo escribo con mis palabras y con mis números, no con los suyos.
Qué hace en realidad
Piensa en un video como una página web que se mueve. Escribes HTML y CSS para lo que se ve, una librería de animación para cuándo y cómo se mueve, y HyperFrames hace una cosa que parece pequeña y no lo es: recorre esa página cuadro por cuadro, le toma una foto a cada instante y las junta en un MP4. Como la página se mueve por tiempo y no por reloj, el cuadro 300 es siempre el mismo cuadro 300. Eso se llama render determinista, y es lo que permite que un agente de código revise su propio trabajo: si cambia una línea, solo cambia lo que esa línea toca.
Para una agencia como la mía eso se traduce en algo concreto. Un video de lanzamiento, un explicador o una intro deja de ser un proyecto en un editor y pasa a ser una carpeta de texto: cambiar el nombre de un cliente, un color o una frase es editar una línea y volver a renderizar. No hay una línea de tiempo que se desarma cuando mueves una cosa.
El repo trae además skills, que son instrucciones que tu agente lee antes de escribir. Con npx skills add heygen-com/hyperframes el agente aprende cómo se estructura una composición, qué se puede animar y qué no. El comando de trabajo diario es npx hyperframes, con subcomandos para crear, revisar, ver y renderizar. Pide Node 22 o más y ffmpeg.
Fuentes: repositorio de HyperFrames (HeyGen), licencia Apache 2.0; su ficha en el catálogo de Prompt13
Dato para no engañarte: HeyGen ofrece render y autoría hospedados. El framework es abierto y corre en tu máquina. Yo no uso lo hospedado.
Tu primer video, paso a paso
Este es el ciclo que sigo cada vez, en el orden en que importa. Cada paso es una acción y casi todos son comandos del propio repo:
- Crear la carpeta: npx hyperframes init mi-video. Trae plantillas de partida. El comando es el mismo para ti que para un agente.
- Escribir la composición en HTML. Aquí es donde trabaja el agente, con las skills ya cargadas.
- Revisar la estructura con lint. En mi uso avisa de piezas sin identificador, capas que se pisan en el tiempo y animaciones sin registrar.
- Revisar lo visual con inspect. En mi uso recorre el tiempo de la página y avisa si un texto se sale de su caja o del cuadro.
- Verlo con preview antes de gastar tiempo en el render final.
- Renderizar con render. Solo aquí sale el MP4.
La regla que me ahorra más tiempo: lint e inspect antes de preview, siempre. Cuando el agente se equivoca, casi nunca es en la idea. Es un texto que se sale de la pantalla en el vertical o dos capas peleando por el mismo segundo, y esos dos comandos lo ven en segundos, sin renderizar.
Cuatro videos míos, medidos
Empecé el 29 de septiembre con una película de 30 segundos para SVDIGINET: 11 escenas en HTML, animadas con GSAP y con una escena 3D en three.js, en horizontal y en vertical. Las versiones eran HyperFrames 0.6.22, GSAP 3.15.0 y three 0.186.1, fijadas en local para que el resultado no cambie con una actualización. Después convertí lo que aprendí en un repo propio, motion-forge, con una línea de comandos y revisiones automáticas.
| Video | Duración | Tiempo de reloj | Qué pasó |
|---|---|---|---|
| Película 1, marca SVDIGINET | 30 s | unas 117 min (reconstruidas) | Seis agentes en paralelo, revisión a mano. El tiempo sale de las marcas de los archivos, no de un reloj, y lo discuto yo mismo. |
| Película 2, recorte | 18 s | 38 min | Salió rápido y era el entregable equivocado: yo quería ajustar el reel anterior, no uno nuevo. |
| Película 3, lanzamiento del perfil de Google | no anotada | 35 min | Primera corrida limpia medida: 32 min la primera versión, con una ronda de crítica, y 3 min la segunda. Versión en español. |
| Película 4, video para un cliente | no anotada | 40 min | Hecha con brag-slim. 17 de 17 revisiones automáticas, una ronda de crítica, que encontró un destello cuando el conteo de estrellas llegaba a 3.3. |
La cuenta que más me importa: de 117 a unos 35 minutos son 82 minutos menos por película, con la salvedad de que la primera cifra es reconstruida y son películas distintas. Y hay otra trampa en esa cuenta, que la película 2 muestra: bajar de 117 a 38 no sirve si hiciste el video que no era. Por eso el primer paso de mi skill ahora es decidir si es una película nueva o un ajuste a una existente.
Hay un cuarto uso que no es película. El 9 de octubre publiqué el primer episodio de una serie de videos "Top N" hecha de puro texto: voz generada en local, subtítulos medidos y escenas en HTML. El episodio completo toma unos 30 minutos de reloj, más 5 minutos por cada repo adicional que mencionas. Se publicó en YouTube y como Short vertical. La misma técnica, otro ritmo.
Cinco trampas que me comí
HyperFrames hace lo que dice. Lo que no avisa es dónde se rompe tu composición sin hacer ruido. Estas cinco me costaron tiempo real, y varias están hoy convertidas en revisiones automáticas de motion-forge:
| Trampa | Qué se ve | Qué hago ahora |
|---|---|---|
| Fuentes que no cargan | El texto sale en Helvetica sin ningún error | Declaro la fuente local en la página raíz; una revisión lo comprueba |
| El color más oscuro se aclara o se apaga | Mi negro #0A0A0A sale como #050808 en la escena 3D | Canvas transparente: dejo que el fondo lo ponga el HTML |
| Escenas enlazadas con atajos | inspect no puede leerlas | Uso check, que sí las lee |
| Reglas que el lint prohíbe | Tipo de letra dentro de la escena y animar posición con left o top | Tipo de letra solo en la raíz; animo con transformaciones |
| Dos páginas raíz | La herramienta solo admite un index.html raíz | Una sola raíz; las escenas viven en archivos aparte |
node(--version)
v22.23.1
ffmpeg(-version)
ffmpeg version 7.1.1
npx(hyperframes --version)
0.8.154
Por qué no seguí con Remotion
Antes de HyperFrames usé Remotion, que escribe videos con React. Hice con él un video de prueba de 10 segundos (se exportó el 14 de septiembre) y una promo, y después lo dejé. No anoté el motivo ese día, así que no te voy a inventar uno. Lo que sí dejé escrito es esto:
| HyperFrames | Remotion | |
|---|---|---|
| Cómo se escribe | HTML, CSS y una librería de animación | React |
| Licencia | Apache 2.0 | Licencia de empresa para uso comercial |
| Mi lectura: pensado para | Que un agente lo escriba y lo revise | Equipos que ya viven en React |
| Mis notas | Del 14 de agosto al 13 de octubre. Activo | Del 12 de julio al 13 de octubre. Dejado de usar |
Mi lectura, que es mía y no la medí: para un agente de código, HTML es más fácil de escribir bien que un componente de React, porque hay menos que acordarse.
Lo que no he medido
Esto es lo que todavía no sé:
- Si el audio suena bien. Lo generé por código y ninguna persona lo ha oído en las películas de marca.
- Si el render es idéntico bit a bit. Mis pruebas de determinismo no dieron bit exacto en todas las escenas.
- Cuánto cuesta una marca nueva: mis recetas están afinadas a un color y un logo, y cambiar de marca pide medir otra vez.
- Cuánto tarda alguien que no sea yo. Mis 35 a 40 minutos incluyen que ya tengo la caja de herramientas armada.
- Qué pasa cuando HyperFrames sube de versión. Hoy npx me trae la 0.8.154 y mi primera película usó la 0.6.22: por eso fijo versiones.
Pruébalo en tu Mac
Antes de enamorarte de la idea, comprueba que tu máquina aguanta. Pega esto en Claude Code. No renderiza ni instala nada global:
Antes de tocar nada, dime si este Mac puede renderizar un video con HyperFrames: versión de Node (necesita 22 o más), si ffmpeg está instalado y si `npx hyperframes doctor` pasa. Después crea una carpeta de prueba con `npx hyperframes init prueba`, corre lint e inspect y dime qué dijeron. No renderices todavía y no instales nada global.
Si pasa, el siguiente paso es el ciclo de arriba con una plantilla en blanco y una frase tuya. Si quieres ver cómo pienso las sesiones largas con agentes, lee lo que me cuestan mis sesiones. Y si este formato te sirve, el próximo repo lo elijo igual: uno que uso, con mis números.
