Vídeo · Tendencia
Renderiza un vídeo de Claude a MP4 con HyperFrames: guía probada
Las publicaciones de esta semana sobre vídeos hechos con Claude Opus 5.5 suelen nombrar un renderizador como HyperFrames o Remotion: Claude escribe el vídeo como código y el renderizador lo convierte en un MP4. HyperFrames es un renderizador de código abierto de HeyGen. El 28 de septiembre de 2026, HyperFrames estaba entre las búsquedas relacionadas con Remotion que más rápido crecían en la vista de 90 días de Google Trends.
Lo probamos como lo usaría un pequeño negocio. El 28 de septiembre de 2026, una sesión de Claude Code con Opus 5.5 recibió el mismo encargo del Reel del café que usamos en claude.ai, además de la línea de comandos de HyperFrames. Ciyo no ejecuta Claude Opus 5.5; la foto salió de Ciyo y todo lo demás se ejecutó en un MacBook.
Qué hace HyperFrames
HyperFrames lee una página HTML cuyos elementos llevan atributos de tiempo, la reproduce fotograma a fotograma en Chrome sin interfaz y codifica los fotogramas en MP4 con ffmpeg. Como cada fotograma se calcula a partir de la página en lugar de grabarse en tiempo real, el mismo archivo da siempre el mismo vídeo.
El proyecto es de código abierto con licencia Apache 2.0. Su repositorio de GitHub es de marzo de 2026 y la versión 0.8.81 salió el 27 de septiembre de 2026. Ofrece un plugin para Claude Code y una herramienta de línea de comandos; usamos la línea de comandos con npx, así que no se instaló nada de forma global.
| Aspecto | claude.ai | Claude Code + HyperFrames |
|---|---|---|
| Quién renderiza | El propio script de Claude en el entorno aislado del chat | HyperFrames en tu ordenador |
| Qué te quedas | El MP4 | El MP4 y una composición HTML editable |
| Cambiar una línea | Vuelves a pedirlo; lo renderiza de nuevo | Editas el HTML y renderizas otra vez |
| Mismo archivo, mismo vídeo | No probado | Sí: idéntico byte a byte en nuestra prueba |
El encargo y la foto
Hicimos la foto de producto en Ciyo en 2K, lo que dio 1440 × 2560 píxeles, más que los 1080 × 1920 que necesita el Reel. Después le dimos a Claude Code el mismo encargo del café que habíamos enviado en claude.ai, con una instrucción extra: usar la línea de comandos de HyperFrames y aprender su formato con su propia documentación.
Usa la CLI de HyperFrames mediante npx -y hyperframes@0.8.81. Aprende el formato de composición con npx -y hyperframes@0.8.81 docs (data-attributes, compositions, gsap, rendering). No instales skills, plugins ni nada de forma global, y no publiques nada. Entrega el vídeo final como fernhollow-reel-hyperframes.mp4.Lo que hizo Claude, paso a paso
Todo el trabajo llevó 5 minutos y 44 segundos. Opus leyó la documentación, creó la estructura de un proyecto con init y escribió un único archivo HTML con cuatro pistas: la foto, el titular, la oferta y la tarjeta final. Cada una es un elemento con un tiempo de inicio y una duración, y GSAP anima lo que ocurre dentro.
Antes de renderizar, ejecutó el comando check de HyperFrames, que no encontró errores y dio cuatro avisos sobre la estructura, y sacó imágenes fijas con snapshot en momentos elegidos. En esas imágenes, el precio se superponía a la parte superior del vaso, así que movió el punto de anclaje del zoom e hizo el título más pequeño. También quitó un estilo de mayúsculas que había convertido "New for autumn" en mayúsculas, para mantener el texto exactamente como estaba escrito.
El renderizado, medido
El comando render tardó 59 segundos en un MacBook Pro con chip M1 Max. El MP4 mide 1080 × 1920 a 30 fotogramas por segundo, con 450 fotogramas, 15.0 segundos y 16.4 MB, sin pista de audio. Las cinco líneas de texto son exactas.
Después renderizamos el mismo proyecto una segunda vez. Tardó 28 segundos, y el archivo era idéntico byte a byte: la misma suma de comprobación SHA-256 y 450 de 450 fotogramas iguales. Eso es lo que hace útil el vídeo basado en código para un negocio. Cuando cambias un precio, solo cambia ese precio.
El renderizador no arregla el diseño
HyperFrames hace que el renderizado sea exacto; no mejora el diseño. Este Reel tenía los mismos hábitos que el que hizo Opus en claude.ai. El fotograma inicial no tiene texto, la primera línea aparece con un fundido desde los 0.5 segundos y la tarjeta final pone una capa oscura sobre la foto, así que el vaso baja a un brillo de unos 43 sobre 255.
La buena noticia es que cada arreglo es una pequeña edición en un solo archivo. Pide a Claude el nombre en el primer fotograma y un producto luminoso en la tarjeta final, y vuelve a renderizar en menos de un minuto.
Lo que debes saber antes de empezar
HyperFrames necesita Node 22, Chrome y ffmpeg en tu ordenador; su comando doctor los comprueba. El proyecto cargó GSAP desde una CDN y dos fuentes desde Google Fonts, y usó una fuente del sistema de macOS, así que un renderizado en otro ordenador puede verse distinto si no usas su opción de Docker. La línea de comandos también envía telemetría de uso anónima, que puedes desactivar con hyperframes telemetry disable.
| Comando | Qué hizo |
|---|---|
| npx hyperframes docs | Mostró el formato de composición |
| npx hyperframes init | Creó los archivos del proyecto |
| npx hyperframes check | Encontró problemas de maquetación y de contraste antes de renderizar |
| npx hyperframes snapshot | Renderizó imágenes fijas en momentos elegidos |
| npx hyperframes render | Escribió el MP4 |
HyperFrames y Claude
¿Qué es HyperFrames?
Una herramienta de código abierto de HeyGen que renderiza animaciones de HTML, CSS y JavaScript a MP4 o WebM, fotograma a fotograma, en Chrome sin interfaz.
¿Lo necesito para hacer un vídeo con Claude?
En claude.ai no: allí Opus 5.5 renderizó un MP4 con su propio script. En Claude Code, en tu ordenador, un renderizador como HyperFrames convierte el HTML en vídeo y mantiene editable el código fuente.
¿Cuánto tarda un renderizado?
Nuestro Reel de 15 segundos a 1080 × 1920 tardó 59 segundos la primera vez y 28 segundos la segunda en un MacBook Pro con M1 Max.
¿Ejecuta Ciyo HyperFrames u Opus 5.5?
No. Ciyo creó la foto de producto. Opus 5.5 y HyperFrames se ejecutaron en Claude Code en un ordenador local.
Empieza con una foto que merezca la pena animar
Genera la imagen fija del producto en Ciyo en 2K y deja que el código construya el movimiento a su alrededor.