No necesitas After Effects. Necesitas saber describir lo que quieres
HyperFrames convierte un archivo HTML en un vídeo MP4. No es una metáfora: escribes la composición en HTML, CSS y animaciones, y el framework la renderiza fotograma a fotograma. Aquí está entero — qué es, qué se puede hacer de verdad, cómo se ejecuta con Claude Code paso a paso, los templates que usamos y tres vídeos de prueba que salieron de aquí.
Qué es HyperFrames
Un framework open source de HeyGen (Apache 2.0) que convierte HTML, CSS y animaciones seekables en vídeo MP4 determinista. No es el "vídeo de Claude": Claude escribe, HyperFrames renderiza.
Qué se puede hacer
3D con Three.js, shaders, HTML dentro de canvas, mapas y gráficos de datos, tipografía cinética, overlays sociales, salida en 4K y HDR. Todo verificado en el showcase oficial.
Cómo se hace
El flujo real con Claude Code: la skill que enruta, los comandos exactos, el Studio visual en el navegador, y las reglas del contrato que no puedes saltarte.
Templates y trampas
Cuatro plantillas copiables sacadas de un proyecto que ya renderizó, y las trampas honestas que nos costaron tiempo. Y tres vídeos de prueba que lo demuestran.
hyperframes)Escribir HTML en lugar de mover fotogramas
Durante años, hacer un vídeo de marca decente significaba una de dos cosas: aprender After Effects o pagar a alguien que lo supiera. La herramienta era la barrera.
Yo no soy motion designer. No sé mover keyframes en una línea de tiempo de After Effects, y no tengo intención de aprenderlo. Pero sí sé describir con precisión lo que quiero que pase en pantalla: un cubo que sube, un contador que cuenta, un cursor que arrastra un clip y pulsa "Export".
Resulta que eso, hoy, es suficiente. Con HyperFrames el vídeo deja de ser un archivo binario que abres en un editor y pasa a ser un archivo HTML que escribes. Y si es HTML, Claude Code lo escribe conmigo.
Este artículo es la guía completa de ese flujo. Lo he montado de verdad —hay vídeos reales que salieron exactamente así— y lo he contrastado con la documentación oficial de HeyGen para no prometerte nada que no se pueda renderizar. Donde algo es una capacidad del showcase oficial, lo enlazo. Donde algo nos costó sangre, te lo cuento sin adornos.
No va de "mira qué fácil". Va de enseñar, hasta el último comando, lo que se puede construir describiendo lo que quieres. Porque la barrera ya no es la herramienta.
Qué es HyperFrames (y qué no es)
Un framework open source de HeyGen que convierte HTML en vídeo. Su propia definición cabe en una línea.
HyperFrames es un framework open source publicado por HeyGen bajo licencia Apache 2.0. Su tagline oficial lo resume sin rodeos: "Write HTML. Render video. Built for agents." —escribe HTML, renderiza vídeo, hecho para agentes.
Por debajo, la mecánica es la que promete: defines el vídeo como un archivo HTML con atributos de tiempo, y la animación la mueve una librería como GSAP, CSS, Lottie o Three.js. El sistema previsualiza la composición en un navegador y luego la renderiza haciendo que un Chrome headless capture cada fotograma en orden, mientras FFmpeg codifica el vídeo y mezcla el audio. Mismo input, mismo output, siempre: es determinista.
cd my-video
npx hyperframes preview
npx hyperframes render
Init crea el proyecto, preview lo abre en el navegador, render lo convierte en MP4. El paquete vive en npm como hyperframes. El código está en github.com/heygen-com/hyperframes.
Lo que NO es
Aclaro esto porque genera confusión constante: Anthropic no tiene un generador de vídeo. Claude no "hace vídeos". Lo que hace Claude es escribir el HTML de la composición. Quien lo convierte en MP4 es HyperFrames, que es de HeyGen. Cuando en este artículo digo "vídeo hecho con Claude", me refiero a ese reparto: Claude escribe, HyperFrames renderiza. Ni magia ni un botón secreto. Un framework open source y un modelo que sabe escribir código.
Si sabes que el vídeo final es "solo" HTML abierto en un Chrome sin ventana y fotografiado frame a frame, entiendes casi todo lo demás: por qué tiene que ser determinista, por qué las fuentes hay que empaquetarlas, y por qué lo que se ve en tu navegador es exactamente lo que sale en el MP4.
Qué se puede hacer de verdad
Esta es la parte que alucina. Todo lo que sigue está documentado en el showcase oficial de HeyGen. No es lo que imagino que se podría hacer: es lo que ya está hecho.
El showcase oficial reúne piezas de producción que combinan estas técnicas. Estas son las capacidades que aparecen documentadas, resumidas por familias:
Three.js con modelos reales
Renderizado 3D con modelos GLTF de dispositivos (iPhone, MacBook) y contenido HTML proyectado sobre la pantalla del propio 3D. Escenas, cámaras y luces, dentro del vídeo.
Transiciones y efectos WebGL
Más de veinte transiciones documentadas: aberración cromática, glitch, distorsión, lentes, iris, disoluciones. Efectos de imagen que en un editor tradicional serían plugins de pago.
HTML dentro de canvas
DOM vivo renderizado como textura de GPU, con efectos de shader encima. Una interfaz de verdad, animándose y deformándose como material de vídeo.
Data-viz animada
Mapas coropléticos, globos, gráficos de barras y líneas al estilo editorial, proyecciones D3. Contar una cifra con un gráfico que se dibuja solo.
Texto cinético
Rellenos con textura (mármol, metal, lava), glow de neón, glitch RGB, resaltado karaoke palabra a palabra, scramble de caracteres. La letra como protagonista.
UI social y lower-thirds
Plantillas de tarjetas de Instagram, TikTok, X, Spotify; notificaciones estilo macOS/iOS; rótulos inferiores de televisión; tickers de noticias. Todo como composición.
4K, HDR y formatos
Salida en MP4, MOV y WebM, secuencias GIF/PNG, HDR10 y supersampling a 4K desde una composición 1080p. Calidad de entrega, no de maqueta.
Studio visual + variables
Editor visual con línea de tiempo en vivo, variables para parametrizar plantillas, importación desde Figma con tokens de marca. Editar sin abrir el código.
Para que no sea una lista abstracta, el showcase incluye cinco piezas de producción que puedes ver funcionando: el Launch Video de HyperFrames (CSS, GSAP, Lottie, transiciones de shader, Three.js, footage, captions y voz), la demo Website to HyperFrames (captura de una web convertida en vídeo por agentes), el Timeline Editor Launch, el Texture Launch (tipografía con textura y shaders) y VFX x HeyGen (Three.js + HTML-in-canvas + UI). Están enlazadas en el showcase.
Solo listo lo que aparece en el showcase o en la documentación oficial. No te digo que HyperFrames "puede hacer cualquier cosa": te digo qué he visto renderizado. Lo que aún no he probado, no lo prometo. En la sección de trampas te cuento incluso lo que NO renderiza en local.
Cómo se ejecuta con Claude Code
Aquí va el paso a paso real, sin saltarme nada. Estos son los comandos exactos que usan mis proyectos, no una versión idealizada.
HyperFrames trae sus propias skills para Claude Code. Eso cambia el flujo: no le pides a Claude "hazme un vídeo" a pelo. El punto de entrada es una skill que actúa de router.
1 · La skill que enruta
Todo empieza en la skill /hyperframes. Confirma qué quieres hacer y te manda al workflow adecuado: /motion-graphics para una pieza corta (normalmente menos de 10 s), /general-video para algo multiescena o más largo, /product-launch-video si partes de una web, y algunos más. Después, antes de escribir una línea de composición, se lee /hyperframes-core, que es el contrato: las reglas de la sección siguiente.
El router hace el trabajo aburrido: instala la skill del workflow, confirma el brief y evita que empieces a escribir composición sin el contrato delante.
2 · Los comandos del proyecto
Dentro de un proyecto ya creado, estos son los cuatro comandos que uso. Los saco literales de mi proyecto hyperframes-showcase:
# arranca el Studio de previsualización (servidor, déjalo vivo en segundo plano)
npm run dev
# lint + runtime + layout + motion + contraste, todo en uno
npm run check
# renderiza a MP4
npm run render
# publica y te da un enlace compartible
npm run publishDos detalles que importan de verdad:
npm run deves un servidor, no un comando de una sola vez. Levanta el Studio en localhost:3002: una línea de tiempo visual en el navegador donde ajustas tiempos y previsualizas sin tocar el HTML. Hay que dejarlo corriendo en segundo plano.- La versión del CLI va clavada por proyecto. Mis scripts fijan
hyperframes@0.7.62exacto. ¿Por qué? Para que el proyecto vuelva a renderizar idéntico dentro de semanas, aunque el CLI haya avanzado. El determinismo también aplica a la herramienta.
3 · La verificación no es opcional
Después de crear o editar cualquier composición, se corre npm run check antes de dar nada por bueno. Valida lint, ejecución, layout, motion y —esto me encanta— contraste AA. Si el texto no se lee sobre el fondo, el check lo caza y falla. Es lo que me obliga a que el vídeo no solo funcione, sino que se lea.
Las reglas del contrato
Son cuatro y no se negocian. Saltárselas es la causa del 90 % de las composiciones que "no funcionan".
El contrato de HyperFrames (lo que /hyperframes-core te obliga a leer) se reduce a esto:
- Cada elemento con tiempo lleva tres atributos:
data-start,data-durationydata-track-index. Definen cuándo entra, cuánto dura y en qué pista vive. - Y lleva
class="clip". El framework usa esa clase para controlar la visibilidad. Sin ella, el elemento no aparece cuando debe. - La línea de tiempo va pausada y registrada en
window.__timelines["id"]. El motor de render la controla desde ahí: la "rebobina" a cada instante para fotografiar el fotograma exacto. - Solo lógica determinista. Nada de
Date.now(), nada deMath.random(), ninguna petición de red durante el render. Si el resultado puede cambiar entre dos ejecuciones, rompe el determinismo.
Ese último punto es el que más se subestima. Un vídeo que usa Math.random() para colocar partículas se verá distinto en cada render, y el fotograma capturado no coincidirá con lo que animaste. Todo lo aleatorio o dependiente del reloj hay que sustituirlo por algo calculado. En la práctica: partículas colocadas por fórmula, no por azar.
Cuatro templates para copiar
Todo lo que sigue está sacado de un proyecto que ya renderizó — el vídeo horizontal del final. No es pseudocódigo: es lo que hay en el archivo.
Template 1 · Una composición mínima
El esqueleto irreducible: un elemento con tiempo, la clase clip, y la línea de tiempo pausada y registrada. Si entiendes esto, entiendes el resto.
<div id="escena" class="clip"
data-start="0" data-duration="9" data-track-index="0">
<h1 id="titulo">Hola</h1>
</div>
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.fromTo('#titulo',
{ opacity: 0, y: 30 },
{ opacity: 1, y: 0, duration: 0.9, ease: 'power2.out' }, 1.1);
window.__timelines['showcase'] = tl; // pausada y registrada
</script>Template 2 · Un contador que cuenta (seek-safe)
El truco de los números que suben. La clave: se anima un objeto { v: 0 } y en cada onUpdate se escribe el textContent. Así el número es correcto en cualquier fotograma, aunque el render salte a mitad. Es el método oficial para valores que cambian.
const o = { v: 0 };
tl.to(o, {
v: 6917, duration: 1.5, ease: 'power3.out',
onUpdate: () => {
const e = document.querySelector('#n3');
if (e) e.textContent = Math.round(o.v).toLocaleString('es-ES');
}
}, 35.6);Template 3 · El driver 3D de Three.js
Este es el patrón que hace que el 3D renderice en headless. En lugar de dejar que Three.js anime solo con su reloj (que rompería el determinismo), la propia línea de tiempo dirige el 3D: se anima un proxy { t: 0 } y en cada onUpdate se llama a la función de render con ese instante exacto.
// la función de render dibuja la escena en el instante t
window.__renderGL = function (t) {
for (const m of boxes) {
const h = Math.sin(m.userData.d * 0.85 - t * 2.2) * 1.15 + 1.35;
m.scale.y = Math.max(0.08, h);
}
renderer.render(scene, camera);
};
// la timeline mueve un proxy {t} y llama a __renderGL en cada frame
const gl = { t: 0 };
tl.to(gl, { t: 9, duration: 9, ease: 'none',
onUpdate: () => window.__renderGL(gl.t) }, 0);Al vendorizar Three.js hay que copiar dos archivos: three.module.js y three.core.js. El module solo reexporta del core; si copias solo uno, el otro da 404 y el 3D no aparece. Nos costó un rato entenderlo.
Template 4 · Un cursor que "usa" una interfaz
Para mostrar cómo se edita algo, recreas la UI en HTML y mueves un cursor SVG por encima: se desplaza, arrastra un clip, pulsa un botón con su ripple. Todo es GSAP moviendo posiciones. Este fragmento arrastra un clip y el playhead a la vez, y hace el click de "Export".
// arrastra el clip [warm] y el playhead a la vez
tl.to('#cursor', { x: 760, y: 780, duration: 1.1, ease: 'power1.inOut' }, 22.6);
tl.to('#dragclip', { x: 120, duration: 1.1, ease: 'power1.inOut' }, 22.6);
tl.to('#playhead', { x: 120, duration: 1.1, ease: 'power1.inOut' }, 22.6);
// click en Export: encoge, vuelve, y lanza el ripple
tl.to('#stexport', { scale: 0.9, duration: 0.12 }, 26.5);
tl.to('#stexport', { scale: 1, duration: 0.25, ease: 'back.out(3)' }, 26.62);
tl.fromTo('#ripple',
{ opacity: 0.9, scale: 0.3 },
{ opacity: 0, scale: 3.4, duration: 0.7, ease: 'power2.out' }, 26.5);Fíjate en que todo se anima con x, y, scale y opacity — nunca con left o top. Animar posición con transform es lo que mantiene el movimiento suave y lo que el linter exige. Cambiar left/top lo marca como error.
Las trampas honestas
Esta sección es la que no vas a encontrar en el material de marketing. Todo esto nos costó tiempo de verdad. Te lo ahorro.
- Las fuentes hay que empaquetarlas, sí o sí. Inter o JetBrains Mono no están en la máquina de render, y el determinismo prohíbe ir a buscarlas a la red. Hay que descargar los
.woff2a una carpeta del proyecto y referenciarlos en local. Si no, el vídeo sale con otra tipografía. - GSAP hay que vendorizarlo. El starter lo carga desde un CDN; en render eso es una petición de red. Se copia a
vendor/gsap.min.jsy se sirve local. - El vidrio líquido por GPU NO renderiza en el headless estándar. Los efectos tipo liquid glass (TypeGPU) necesitan un navegador especial, como Brave o Chrome Canary. Para 3D, la ruta fiable es Three.js, que sí renderiza en el headless normal.
- Los cambios de texto tienen que ser seek-safe. Un contador con
onUpdatevale (Template 2). Pero cambiar un texto de golpe con un.call()de GSAP no: si el render salta a ese punto, el cambio no se dispara. La solución es hacer un crossfade de opacidad entre dos elementos. - El fondo a pantalla completa va en un hijo, no en el elemento raíz. Si pones el fondo full-screen en el root, sale negro. Va en un hijo con
position:absolute; inset:0. - La música y los assets con derechos no se tocan. Para generar audio hace falta autenticarse en HeyGen (eso lo hace la persona dueña de la cuenta, no la IA) o usar un modelo local. Nunca música con derechos.
Porque un artículo que solo enseña lo bonito es publicidad, no una guía. La mitad del valor de haber montado estos vídeos de verdad es saber exactamente dónde tropiezas. Si te ahorro estas seis, has ganado la tarde.
Los vídeos que montamos
No hay mejor prueba que enseñarlos. Estos salieron del flujo que acabas de leer, con los templates de arriba.
El primero es la pieza estrella: un vídeo horizontal donde se ve el 3D de Three.js, un cursor editando el Studio y los contadores contando. Es exactamente lo que muestran los templates 3 y 4.
El segundo es vertical, de un proyecto de fondo (una serie sobre voz IA), y lleva audio: dos voces IA debatiendo. Sirve para ver el vídeo con pista de sonido, mezclada en el mismo render.
Estos vídeos salieron de verdad del flujo que acabas de leer, renderizados en local con HyperFrames. Nada de lo que cuento arriba depende de que los veas: todo el flujo y los templates son reproducibles por tu cuenta con el CLI oficial.
Preguntas frecuentes
Las que me hacen cada vez que enseño uno de estos vídeos.
¿Necesito After Effects o un editor de vídeo?
No. El vídeo se escribe como un archivo HTML con CSS, media y animaciones seekables. El framework lo abre en un Chrome headless, captura cada fotograma en orden y FFmpeg lo codifica a MP4. No hay línea de tiempo propietaria: hay HTML.
¿HyperFrames es gratis?
Es open source con licencia Apache 2.0, publicado por HeyGen. El paquete se instala desde npm como hyperframes. Renderizar en tu máquina no cuesta nada; existe además un render en la nube de HeyGen como opción alojada.
¿Corre en mi Mac?
Sí. El render local usa Chrome headless y FFmpeg. La mayoría de técnicas (CSS, GSAP, Lottie, Three.js) renderizan en ese headless. Hay excepciones que necesitan un navegador especial, como los efectos de vidrio líquido por GPU (TypeGPU), que requieren Brave o Chrome Canary.
¿Esto es el generador de vídeo de Claude o de Anthropic?
No. Anthropic no tiene un generador de vídeo. Claude genera el HTML de la composición; HyperFrames, que es de HeyGen, es quien lo renderiza a MP4. Cuando alguien dice "vídeo hecho con Claude" en este contexto, se refiere a este flujo: Claude escribe, HyperFrames renderiza.
¿Qué NO se puede hacer?
Nada que rompa el determinismo: sin Date.now(), sin Math.random(), sin peticiones de red durante el render. Los efectos de vidrio líquido por GPU no renderizan en el headless estándar. Y la música o los assets con derechos no se pueden usar sin licencia; para generar audio hace falta autenticarse en HeyGen o usar un modelo local.
¿Puedo editar el vídeo sin tocar código?
Sí. Al levantar el servidor de previsualización, HyperFrames abre un Studio en el navegador (localhost:3002) con la línea de tiempo visual. Ahí se ajustan tiempos y se previsualiza sin editar el HTML a mano.
La barrera ya no es la herramienta. Es saber lo que quieres.
Durante años, el vídeo de marca fue un cuello de botella: o dominabas un editor complejo, o dependías de alguien que lo hiciera. HyperFrames mueve esa barrera de sitio. Si sabes describir con precisión lo que tiene que pasar en pantalla, puedes construirlo escribiendo — y Claude Code escribe contigo.
Yo aprendo haciendo, y comparto lo que aprendo porque a alguien le ahorrará las mismas tardes que me ahorró a mí. Si montas algo con esto, cuéntamelo. Me encantará verlo.
Cada semana, desde las trincheras
Casos reales, errores documentados y lo que funciona de verdad en IA aplicada a negocio.
Sin teoría. Sin hype. Desde producción.
Contacto
¿Quieres montar algo así y no sabes por dónde empezar?
Si tienes una idea de vídeo, una web que convertir en pieza, o simplemente quieres entender cómo encaja esto en tu operativa, hablemos.
Escríbeme directo. Sin formularios. Sin intermediarios.
Si tienes proyecto, dame contexto. Si no encajamos, te lo digo.