HyperFrames vs Remotion: 8 vídeos, 32 ejecuciones de Claude Code

HyperFrames es el framework de código abierto de HeyGen para convertir HTML en vídeo, pensado para agentes de IA. Se hizo público en marzo de 2026 y el 12 de noviembre ya sumaba 83,246 estrellas en GitHub, frente a las 72,708 de Remotion (HyperFrames en GitHub, Remotion en GitHub). Los dos hacen lo mismo: abren una página en un navegador headless, capturan cada fotograma y codifican un vídeo. Si vas a dejar uno de ellos en manos de un agente de IA, ¿cuál hace mejores vídeos?

La comparativa de la propia HeyGen pasó un único vídeo de lanzamiento por cada uno, una sola vez (HyperFrames vs Remotion). Nosotros queríamos saber de dónde salen realmente las diferencias, así que le dimos a Claude Code ocho encargos de vídeo distintos en cada framework, los tipos de vídeo que más se hacen, y después le pedimos un cambio realista en cada uno: 32 ejecuciones con Claude Opus 5.5. Revisamos cada vídeo fotograma a fotograma y lo sometimos a un juicio a ciegas en ambos órdenes.

Aviso: iArt está construido sobre Remotion, así que no somos neutrales. Publicamos todos los prompts para que puedas repetir la prueba.

Cómo lo probamos

• Agente: Claude Code 2.1.322 con Claude Opus 5.5, el modelo que usó HeyGen en su propia comparativa. Sin más instrucciones que cada prompt.
• Remotion 4.0.542: un proyecto vacío creado con npx create-video --blank --skills, que instala los skills oficiales de Remotion para agentes.
• HyperFrames 0.9.33: una carpeta vacía con los skills oficiales de HeyGen, instalados con npx skills add heygen-com/hyperframes.
• Ocho encargos elegidos entre lo que más se hace con motion graphics con IA: tipografía cinética, una animación de logo a partir de un archivo SVG, un gráfico de datos, una demo de interfaz de producto, un vídeo explicativo de un mecanismo, un rótulo inferior (lower third) transparente para OBS, un mapa de ruta y un vídeo de mensajes de texto. Todos los prompts terminaban con "Render the final MP4 to out.mp4 in this folder. Don't ask me questions; make the choices yourself."
• Un seguimiento por encargo en la misma sesión, cada uno con un cambio realista distinto, y en todos se pedía al agente que conservara el primer archivo:
  • Tipografía cinética: acento en #2B5BFF, 2 s más corto
  • Animación de logo desde un SVG: vertical 1080×1920
  • Gráfico de barras animado: dos valores cambiados
  • Demo de interfaz de producto: modo oscuro, texto de tarea nuevo
  • Cómo funciona una bomba de calor: añadir una escena de cierre
  • Rótulo inferior transparente (OBS): nombre, cargo y color nuevos
  • Mapa de ruta, de Lisboa a Berlín: añadir Praga y actualizar la distancia
  • Vídeo de mensajes de texto (9:16): estilo WhatsApp, un mensaje más
• Comprobaciones: resolución, duración y códec de cada archivo; el canal alfa de las dos superposiciones WebM; si las ediciones dejaron intactos los primeros archivos; todos los fotogramas en hojas de contactos; y un juez a ciegas (Gemini, que solo recibía el prompt, "video A" y "video B"), ejecutado dos veces por pareja con el orden invertido. Una victoria solo cuenta si ambos órdenes coinciden.
• Máquina: MacBook con Apple M3 y 16 GB, con un FFmpeg funcional en el path. Cada pareja se ejecutó a la vez para que ambas tuvieran la misma carga. Nada se editó a mano.

Resultados

Tiempo real transcurrido hasta que existía el MP4. Las 32 ejecuciones generaron archivos con el tamaño y la duración pedidos; las 8 ediciones de cada lado hicieron exactamente lo que se pidió, y ninguna tocó el archivo original.

Los 8 encargos, lado a lado

Cada encargo muestra el prompt exacto, las dos primeras versiones y nuestro veredicto; después, el seguimiento y cómo lo resolvió cada lado.

1. Tipografía cinética

Make a 12-second 1920x1080 kinetic typography video for the line "Ship small. Ship often. Learn fast." Each phrase gets its own distinct motion, and the video ends holding the full line on screen for at least two seconds. Dark background, one accent colour. No voice.

Los dos agentes dieron a cada frase su propia escena antes de montar la línea completa. HyperFrames usó un tipo más grande y su "often." con eco se lee mejor; la versión de Remotion tiene un fotograma totalmente en blanco entre frases. Juez a ciegas: HyperFrames en ambos órdenes. Nuestro veredicto: HyperFrames, por poco.

Seguimiento:

Change the accent colour to electric blue #2B5BFF and make the whole video 2 seconds faster (10 seconds total), keeping the final hold. Render to out-edit.mp4 and keep out.mp4 as it is.

Los dos cambiaron el color al azul exacto y recortaron el vídeo a 10 segundos sin perder la pausa final.

2. Animación de logo desde un SVG

Make an 8-second 1920x1080 logo reveal for a fictional coffee brand using the logo in logo.svg in this folder. Use the logo's own paths (don't redraw or replace it); the mark draws or assembles itself, then the wordmark appears, and the finished logo holds for at least 2 seconds. Warm, premium feel. No voice.

Los dos usaron los trazados del propio SVG: el círculo se dibuja, le siguen las ondas y luego llega el logotipo. Los dos se inventaron además un eslogan bajo el logo que nadie pidió. Juez a ciegas: dividido entre los dos órdenes. Nuestro veredicto: empate.

Seguimiento:

Make a vertical 1080x1920 version for Instagram Stories. Same reveal, re-laid out for the tall frame. Render to out-edit.mp4 and keep out.mp4 as it is.

Aquí sí hubo diferencia. El agente de Remotion recompuso el logo para el formato alto, con el símbolo encima del logotipo. El agente de HyperFrames mantuvo el logo horizontal y lo encogió, dejando casi todo el encuadre vacío.

3. Gráfico de barras animado

Make a 15-second 1920x1080 animated bar chart titled "Daily screen time by age (demo data)". Exact values in hours: 13–17: 8.5, 18–24: 7.2, 25–34: 6.1, 35–44: 5.0, 45–54: 4.3, 55+: 3.4. Bars grow in one after another, each value counts up as its bar grows, and the finished chart holds for at least three seconds. Clean, light, editorial style. No voice.

Los dos son exactos. El gráfico de Remotion es correcto y sobrio. El de HyperFrames destaca la barra de 13–17, pone el resto en gris y añade una anotación ("Teens log 2.5× the daily screen time of the 55+ group", correcta: 8.5 ÷ 3.4) y una línea de fuente, nada de lo cual pedía el prompt. Juez a ciegas: HyperFrames en ambos órdenes. Nuestro veredicto: HyperFrames.

Seguimiento:

The data changed: 25–34 is now 6.6 and 55+ is now 2.9. Update the chart and render to out-edit.mp4. Keep out.mp4 as it is.

Los dos actualizaron los dos valores. HyperFrames recalculó además su propia anotación a 2.9×.

4. Demo de interfaz de producto

Make a 15-second 1920x1080 product micro-demo for a fictional to-do app called Tally. Show the app window; a cursor clicks "Add task", types "Send invoice", presses enter, then checks the task off. The list then shows an "All done for today" state with a small confetti burst. Clean light UI, realistic cursor movement. No voice.

Mismo diseño, mismo recorrido del cursor, mismo confeti. El texto de HyperFrames aguanta mejor en tamaños pequeños, y añadió una tarjeta final con un eslogan ("Count it done.") que no estaba en el prompt; Remotion se funde a negro sobre la lista terminada. Juez a ciegas: HyperFrames en ambos órdenes. Nuestro veredicto: empate.

Seguimiento:

Make it dark mode, and change the task text to "Book flights". Render to out-edit.mp4 and keep out.mp4 as it is.

Los dos pasaron a modo oscuro y escribieron "Book flights".

5. Cómo funciona una bomba de calor

Make a 20-second 1920x1080 explainer animation of how a heat pump heats a house in winter. Show the outdoor unit pulling heat from cold outside air, the refrigerant loop carrying it indoors (compressor makes it hot, it releases heat inside, expansion valve cools it again), and the warm room. Label the four parts: evaporator, compressor, condenser, expansion valve. Keep it clear and diagrammatic, flat style, cold blues outside and warm oranges inside. The flow of heat must be easy to follow. No voice.

Los dos etiquetaron las cuatro piezas y dejaron el flujo de calor fácil de seguir. Remotion mete más texto pequeño; HyperFrames usa un tipo más grande, una idea por paso, y cierra con "It doesn't make heat. It moves heat inside." Juez a ciegas: HyperFrames en ambos órdenes. Nuestro veredicto: HyperFrames.

Seguimiento:

Add one final 4-second scene with the line "Up to 3× more heat than the electricity it uses" and render the full video to out-edit.mp4. Keep out.mp4 as it is.

Los dos añadieron la escena de cierre. Remotion usó un icono y dos etiquetas; HyperFrames dibujó un bloque de electricidad frente a tres bloques de calor.

6. Rótulo inferior transparente (OBS)

Make a 6-second animated lower third for a livestream: name "Maya Chen", title "Head of Product, Northwind". It slides in, holds, and slides out. It must have a truly transparent background so I can put it over my camera in OBS: render it as a WebM with an alpha channel to out.webm (VP9, yuva420p). 1920x1080, positioned in the lower left. Also render an MP4 preview of it over a mid-grey background to out.mp4. No voice.

Aquí se muestran sobre el fondo gris de la vista previa. Los dos son casi idénticos, y ambos archivos WebM tienen un canal alfa real: el 96% de los píxeles totalmente transparentes y la barra totalmente opaca. Juez a ciegas: HyperFrames en ambos órdenes, alegando que Remotion no tenía animación de salida, lo cual es falso: se desvanece y se repliega. Nuestro veredicto: empate.

Seguimiento:

Change the name to "Daniel Okafor" and the title to "Founder, Riverline", and make the accent colour green #19C37D. Render out-edit.webm (transparent) and out-edit.mp4 (grey preview). Keep the originals.

Los dos cambiaron el nombre, el cargo y el color de acento, tanto en el WebM transparente como en la vista previa.

7. Mapa de ruta, de Lisboa a Berlín

Make a 15-second 1920x1080 travel route map animation, Vox / documentary style: a stylised map of western Europe, and a route that draws itself Lisbon → Madrid → Paris → Amsterdam → Berlin, with each city dot and label popping in as the line reaches it, a gentle camera follow along the route, and a small counter of kilometres travelled. Muted paper map colours, one bold route colour. No voice.

Los dos dibujaron la geografía real de Europa, hicieron aparecer cada ciudad cuando la línea llegaba a ella y terminaron en los mismos 3,055 km. HyperFrames añade los nombres de los países y una distancia bajo cada ciudad; la cámara de Remotion sigue la línea más de cerca. Juez a ciegas: HyperFrames en ambos órdenes. Nuestro veredicto: casi un empate.

Seguimiento:

Add Prague as a final stop after Berlin and update the kilometre counter. Render to out-edit.mp4 and keep out.mp4 as it is.

Los dos añadieron Praga y actualizaron el contador a 3,405 km.

8. Vídeo de mensajes de texto (9:16)

Make a 15-second vertical 1080x1920 text-message conversation video, iMessage style, between "Sam" and "Alex". Messages appear one at a time with a typing indicator before each reply: Sam: "did you finish the deck?" / Alex: "almost 😅" / Alex: "20 min" / Sam: "client call is in 10" / Alex: "…" / Alex: "ok 5 min". Realistic phone chat UI, readable on a phone, end holding the full chat for 2 seconds. No voice.

Prácticamente el mismo chat. HyperFrames escribe el mensaje de Sam en la barra de entrada antes de enviarlo. Los dos dejaron las burbujas pequeñas para una pantalla de móvil. Juez a ciegas: dividido. Nuestro veredicto: empate.

Seguimiento:

Switch it to a WhatsApp-style look (green outgoing bubbles, beige patterned background) and add one final message from Sam: "🙏". Render to out-edit.mp4 and keep out.mp4 as it is.

Los dos cambiaron al estilo WhatsApp y añadieron el 🙏.

Hallazgo 1: con el mismo modelo, los vídeos convergen

Al repasar los ocho encargos, lo primero que llama la atención es lo mucho que se parecen. Los dos dibujaron la geografía real de Europa y calcularon los mismos 3,055 km para la ruta. Los dos construyeron la app de tareas con el mismo diseño, el mismo recorrido del cursor y el mismo confeti. Los dos rótulos inferiores salieron del mismo tamaño, en la misma esquina y con un canal alfa real. El framework decide cómo escribe el agente el vídeo, no lo que imagina.

Coincide con lo que vimos en una ronda anterior de esta prueba con Claude Sonnet 5.5. Allí la diferencia en tipografía cinética era grande: el agente de Remotion apiló tres líneas de texto en una esquina. Con Opus, los dos agentes dieron a cada frase su propia escena. El modelo cerró casi toda la brecha antes de que el framework llegara a importar.

Hallazgo 2: Remotion es más rápido porque Claude ya lo conoce

Remotion terminó antes siete de las ocho primeras versiones, y los totales fueron 25.9 minutos frente a 39.7, con 96 pasos del agente frente a 176. El renderizado no es la razón. Los registros de las sesiones muestran adónde se va el tiempo:

• El agente de Remotion abrió el skill oficial de Remotion en 1 de 8 sesiones. Remotion existe desde 2020 y Claude lo escribe de memoria.
• El agente de HyperFrames cargó el skill de HyperFrames en 8 de 8 sesiones y leyó sus archivos de referencia 15 veces más. HyperFrames tiene ocho meses; el agente tiene que aprenderlo cada vez.
• Además ejecutó más del doble de comandos de shell (154 frente a 69), sobre todo los propios de HyperFrames: init, check, lint y snapshot.

Los dos agentes revisaron sus propios fotogramas con una frecuencia parecida (48 y 47 lecturas de imagen), así que el tiempo extra no es control de calidad extra. Es de esperar que la diferencia se reduzca a medida que los modelos nuevos aprendan HyperFrames.

Hallazgo 3: la ventaja de HyperFrames es una guía de diseño

El gráfico de barras (encargo 3) muestra de dónde salió la preferencia del juez a ciegas. El gráfico de Remotion es correcto y sobrio. El de HyperFrames destaca en naranja la barra de 13–17, pone el resto en gris y añade una anotación ("Teens log 2.5× the daily screen time of the 55+ group", que es correcta: 8.5 ÷ 3.4) y una pequeña línea de fuente. Nada de eso estaba en el prompt. Está en el skill de HyperFrames, casi palabra por palabra:

Highlight one series, grey the rest.
Build a chart in reading order: the frame and axis, a reference line,
then the data drawing in, then one annotation on the point that matters.
Real data only, from the source, rounded the same way everywhere,
with a small source line on screen.

De la referencia de datos de HyperFrames.

El skill se lee como la guía de estilo de un motion designer, con reglas para gráficos, tipografía cinética, mapas y ritmo. Los skills oficiales de Remotion son una referencia técnica: cómo montar un proyecto, renderizar, añadir subtítulos o usar librerías de mapas. Así que la diferencia de calidad es una diferencia de prompt. Si usas Remotion, pon las reglas de diseño en tu prompt o en las instrucciones de tu proyecto y obtendrás el mismo comportamiento sin los pasos extra. Lo mismo pasó con la tipografía cinética, donde la regla de HyperFrames es "3–7 English words per scene" (referencia de film).

Hallazgo 4: los dos editan con precisión; Remotion recompone mejor

Todas las ediciones funcionaron en ambos lados: datos nuevos, colores nuevos, una parada más, un modo oscuro, una nueva escena de cierre, y los dos conservaron intacto el archivo original. La única diferencia real fue la composición. Cuando se pidió una versión vertical de la animación del logo (encargo 2), el agente de Remotion colocó el símbolo encima del logotipo para el formato alto; el agente de HyperFrames encogió el logo horizontal y dejó medio encuadre vacío.

Otra cosa que hicieron los dos: añadir texto que nadie pidió. Las dos animaciones de logo se inventaron un eslogan bajo el logotipo, y la demo de interfaz de HyperFrames terminó con una tarjeta de marca con eslogan. Si las palabras importan, termina tu prompt con "No other text."

Con qué te quedas al final

No tienes que elegir un único modelo de temporización

La gran baza de HyperFrames es el modelo de búsqueda (seeking): escribes una timeline de GSAP normal y el renderizador la lleva a cada fotograma. Puedes hacer lo mismo dentro de Remotion: crea la timeline en pausa y fija su tiempo a partir del fotograma actual.

const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const ref = useRef(null);
  const tl = useRef(null);
  useLayoutEffect(() => {
    tl.current = gsap.timeline({ paused: true })
      .from(ref.current, { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" });
  }, []);
  useLayoutEffect(() => { tl.current?.totalTime(frame / fps); }, [frame, fps]);
  return <h1 ref={ref}>Ship small.</h1>;
};

Así renderiza iArt: el agente escribe timelines de GSAP, Remotion controla el reloj, la vista previa y la exportación, y las instrucciones de nuestro agente llevan las reglas de diseño. Esa es la verdadera lección de esta prueba: el renderizador importa menos que lo que le dices al agente.

¿Cuál deberías usar?

Límites de esta prueba

Ocho encargos, una ejecución por framework en cada uno, un modelo y una máquina. Una sola ejecución dice poco de un encargo concreto; lo que contamos es el patrón de los ocho. El juez a ciegas es un modelo de IA y se equivocó al menos una vez (dijo que el rótulo inferior de Remotion no tenía animación de salida, y sí la tiene), así que ponemos nuestro propio veredicto fotograma a fotograma a su lado. Probamos ambos con Claude Code y sus herramientas de línea de comandos, no con HyperFrames Studio, Remotion Studio ni ninguno de sus renderizadores en la nube. Todos los prompts están arriba, así que puedes repetirla.

FAQ

¿Es HyperFrames mejor que Remotion?

Para un agente de IA que trabaja solo, HyperFrames produjo vídeos algo más pulidos en nuestra prueba: un juez a ciegas lo prefirió en 6 de 8 encargos y nunca prefirió Remotion de forma consistente. Remotion terminó todos los encargos menos uno más rápido y con cerca de la mitad de pasos del agente. La mayor parte de la diferencia de calidad viene de la guía de diseño de HyperFrames, que también puedes darle a un agente de Remotion.

¿Por qué Claude Code es más lento con HyperFrames?

HyperFrames es nuevo, así que el agente carga su skill y lee su documentación en cada sesión; en nuestras ejecuciones lo hizo en los 8 encargos, mientras que el skill de Remotion solo lo abrió en 1 de 8 y escribió con lo que ya sabía. Las comprobaciones de línea de comandos de HyperFrames añaden más pasos antes de cada renderizado.

¿Puedo usar GSAP con Remotion?

Sí. Crea una timeline de GSAP en pausa y fija su tiempo a partir del fotograma actual de Remotion en cada renderizado. Es el modelo de búsqueda (seeking) que usa HyperFrames, dentro de Remotion. iArt renderiza sus animaciones así.

¿Pueden los dos renderizar vídeo transparente para OBS?

Sí. En nuestra prueba los dos generaron un WebM VP9 con un canal alfa real: el 96% de los píxeles totalmente transparentes y el rótulo inferior opaco, comprobado fotograma a fotograma.

¿Remotion es gratis?

Remotion es gratis para particulares, empresas con ánimo de lucro de hasta tres empleados y organizaciones sin ánimo de lucro; las empresas más grandes necesitan una licencia de empresa de pago. HyperFrames es de código abierto bajo Apache 2.0.

¿HyperFrames necesita tener FFmpeg instalado?

Sí, su herramienta de línea de comandos necesita Node.js 22 o posterior y FFmpeg, salvo que uses el renderizado alojado de HeyGen. Remotion incluye su propio FFmpeg dentro del renderizador desde la versión 4.0.

¿Puedo hacer estos vídeos sin configurar ninguno de los dos frameworks?

Sí. iArt es un agente de vídeo alojado construido sobre Remotion y GSAP: describe el vídeo con tus palabras y él lo escribe, lo renderiza y lo exporta, sin instalaciones, versiones de Node ni FFmpeg que gestionar.