HyperFrames vs Remotion: La Comparativa Definitiva 2026 para Crear Vídeos con Agentes de IA

“Escribe HTML. Renderiza vídeo. Hecho para agentes.” — claim de HyperFrames. “Escribe componentes React. Renderiza MP4. Vídeo para la era de los agentes.” — claim de Remotion.

Dos frameworks open-source. Una misma promesa: convertir código en vídeo MP4 sin tocar After Effects, Premiere ni un editor de timelines. Pero detrás de esa promesa compartida se esconden dos filosofías opuestas, dos comunidades distintas y dos futuros diferentes para la producción audiovisual programática.

En este artículo de más de 5.000 palabras vamos a diseccionar HyperFrames (el nuevo framework open-source de HeyGen, lanzado en 2026) y Remotion (el veterano de 2021, con 53,2k estrellas en GitHub) para que sepas exactamente cuándo usar cada uno, qué les diferencia, qué les une, y por qué la batalla HTML-vs-React va mucho más allá de una preferencia de sintaxis.

Si ya trabajas con AI Agent Skills y quieres saber cómo la autoría de vídeo está cambiando radicalmente en 2026, este es tu artículo.

---

1. ¿Por qué esta comparativa importa en 2026?

Durante años, “crear vídeo con código” significaba escribir un .jsx, configurar webpack, rezar para que el build funcionara, y rezar aún más para que el render saliera bien. Ese mundo ha cambiado. En 2026, los agentes de IA (Claude Code, Cursor, Codex, Gemini CLI, GitHub Copilot) son cada vez más los que escriben el código. Y la pregunta que separa a los frameworks modernos no es ya “¿cuánta calidad de salida tienes?”, sino “¿en qué formato el LLM puede pensar mejor y producir más rápido?”.

En ese terreno se juega todo. La diferencia entre Remotion y HyperFrames no es una diferencia de marketing: es una diferencia de autoría. React vs HTML. Build step vs cero compilación. 5 años de producción vs la energía de un recién llegado diseñado en pleno apogeo agentic. Y esa diferencia, como vamos a ver, cascada en todo lo demás: en la creatividad del output, en la fiabilidad de los pipelines, en el coste por render, en la facilidad de mantenimiento y en la propia escalabilidad.

La buena noticia: los dos funcionan. La mala: no puedes tener los dos gratis si tu equipo crece. Así que vamos al detalle.

1.1 El contexto agentic que estamos viviendo

Si has tocado un proyecto serio con agentes en 2026, te habrás dado cuenta de que los LLMs son despistados con los toolchains opinados. Un agente que escribe TSX de Remotion pierde ciclos pensando en reconciliación, props, hooks y estado. Un agente que escribe HTML de HyperFrames va directo al grano: CSS, un <script>, y render.

Es la misma razón por la que en 2026 estamos viendo frameworks AI-first por todas partes: Vercel AI SDK prefiere funciones puras sobre clases, los Agent Skills prefieren Markdown estructurado sobre YAML complejo, y los frameworks de vídeo están convergiendo hacia formatos que los modelos ya dominan. HyperFrames ha tomado nota de esto desde el día uno. Remotion, nacido cinco años antes, lo está incorporando a marchas forzadas.

1.2 Qué vas a sacar de este artículo

Al terminar esta lectura vas a tener:

• Una comprensión técnica clara de cómo funciona cada framework por dentro.
• Un mapa mental de cuándo usar uno, cuándo usar otro y cuándo combinarlos.
• Cifras reales de tiempo de setup, tiempo de render, coste por vídeo y tamaño de output.
• Una opinión informada sobre el futuro del vídeo como código.
• Una bibliografía completa para profundizar.

Vamos allá.

---

2. ¿Qué es Remotion? El veterano que cambió las reglas

Remotion es un framework open-source (más bien source-available, como veremos en el apartado de licencias) que permite crear vídeos escribiendo componentes React. Su tesis es simple: si ya sabes React, ya sabes hacer vídeo. Su creador, Jonny Burger, lo lanzó en 2021 y desde entonces se ha convertido en el estándar de facto para generación de vídeo programática en el ecosistema JavaScript.

2.1 La idea central: “el vídeo es una función pura del frame”

El modelo mental de Remotion se reduce a una frase: “tu vídeo es una función pura que recibe un número de frame y devuelve un JSX”. Cada frame se renderiza por separado, se captura como imagen, y FFmpeg los encadena. Sin timelines. Sin keyframes. Sin arrastrar clips.

Los cuatro primitivos que necesitas conocer son:

• useCurrentFrame(): hook que devuelve el frame actual (0-indexado). Si tu composición dura 150 frames a 30 fps, el último frame es 149.
• useVideoConfig(): hook que devuelve { width, height, fps, durationInFrames }.
• <Composition>: el componente que registra un vídeo en src/Root.tsx, definiendo su id, duración, fps y dimensiones.
• <Sequence>: HOC que desplaza el tiempo de sus hijos. Si envuelves algo en <Sequence from={30}>, sus hijos ven el frame 0 cuando el frame global es 30. Es la forma idiomática de escalar escenas y reusar sub-animaciones.

Y luego están los helpers que le dan vida a todo:

• interpolate(): mapea un rango de frames a un rango de valores. interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' }) te da una opacidad de 0 a 1 en los primeros 30 frames.
• spring(): física. Dampings, masas, stiffnesses. Para movimientos que se sienten naturales.

2.2 Un ejemplo real en 30 segundos

import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const MyComposition = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
  const translateY = interpolate(frame, [0, 60], [100, 0], { extrapolateRight: 'clamp' });

  return (
    <AbsoluteFill style={{
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white',
    }}>
      <h1 style={{
        fontSize: 120,
        opacity,
        transform: `translateY(${translateY}px)`,
      }}>
        Hola desde Remotion
      </h1>
    </AbsoluteFill>
  );
};

Y eso se registra en src/Root.tsx:

<Composition
  id="MyComposition"
  component={MyComposition}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>

Renderizas con npx remotion render MyComposition out/video.mp4 y listo. Tienes un MP4 determinístico, frame-a-frame.

2.3 El arsenal de Remotion: ecosistema en estado adulto

Remotion no es solo el core. Es todo un ecosistema:

• <Img>, <OffthreadVideo>, <Audio> de @remotion/media para gestionar media sin bloquear el hilo principal.
• @remotion/transitions para crossfades, wipes, slides entre escenas.
• Mediabunny para manejo de multimedia desde el navegador (metadata, muxing, demuxing).
• Remotion Studio: una aplicación Electron/Next que te da un editor visual con sidebar, scrubber, hot-reload, y la posibilidad de editar las props de cualquier composición.
• Remotion Lambda: renderizado distribuido en AWS Lambda que paraleliza frames en cientos de funciones serverless.
• Remotion Player: reproductor embebible para previsualizar el vídeo en cualquier web/app React.

2.4 Las cifras que importan

A día de hoy (julio de 2026), según el repositorio oficial remotion-dev/remotion (verificado en github.com/remotion-dev/remotion):

• 53.200+ estrellas en GitHub
• 3.800+ forks
• 648 releases publicadas
• Versión actual: v4.0.489 (12 de julio de 2026)
• Lenguaje principal: TypeScript (76,1%), con PHP 11,3% y MDX 6,8%
• Stack interno: Bun, Turborepo (monorepo), React

Es un proyecto maduro, mantenido activamente, con una empresa detrás (Remotion AG) y un modelo de negocio claro: freemium para individuos y empresas pequeñas, licencia de empresa para el resto.

2.5 Casos de uso de referencia

• Spotify Wrapped (recreado por Jonny Burger en un proyecto open-source: JonnyBurger/remotion-wrapped).
• GitHub Unwrapped (resumen anual personalizado para developers, con renders a escala): remotion-dev/github-unwrapped.
• Meta: vídeos personalizados de aniversarios y eventos con fotos del usuario.
• Internal tools de empresas que generan miles de vídeos únicos a partir de datos: dashboards animados, resúmenes de uso, certificados de finalización, etc.

---

3. ¿Qué es HyperFrames? El nuevo nativo de los agentes

HyperFrames es un framework open-source bajo Apache 2.0 creado por HeyGen (la empresa conocida por su generación de avatares con IA) y publicado en 2026. Su claim, brutal en su simplicidad, lo dice todo: “Write HTML. Render video. Built for agents.”

El tagline es perfecto. Resume la tesis del proyecto en seis palabras: los agentes escriben mejor HTML que cualquier otra cosa, así que el framework entero gira alrededor de HTML, CSS y un poco de JavaScript.

3.1 La idea central: “HTML es lo que los LLM ya saben”

HyperFrames parte de un insight demoledor: los modelos de lenguaje grandes tienen más de 25 años de HTML, CSS y JavaScript en sus datos de entrenamiento. React, en cambio, es una fracción minúscula de ese corpus. Si le pides a un agente que produzca un vídeo, su “primer instinto” será HTML, no TSX. Y ese primer instinto resulta ser más creativo, más diverso y más rápido de producir.

Pero el framework no se queda en eso. HyperFrames viene con una batería de 18 skills (8 core + 10 workflows) que se instalan en Claude Code, Cursor, Gemini CLI, Codex o GitHub Copilot CLI con un solo comando:

npx skills add heygen-com/hyperframes

Y a partir de ahí, escribes un prompt en lenguaje natural y el agente compone el vídeo solo:

"Usando hyperframes, crea un intro de producto de 10 segundos con un título que se desvanece, un vídeo de fondo y música sutil."

3.2 El modelo de composición: data-attributes + GSAP seekable

Una composición en HyperFrames es un fichero HTML. La estructura básica es:

<div
  id="stage"
  data-composition-id="mi-video"
  data-start="0"
  data-width="1920"
  data-height="1080"
>
  <h1
    id="titulo"
    class="clip"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    style="font-size: 72px;"
  >
    Hola, HyperFrames
  </h1>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from('#titulo', { opacity: 0, y: -50, duration: 1 }, 0);
    window.__timelines = window.__timelines || {};
    window.__timelines['mi-video'] = tl;
  </script>
</div>

Las tres reglas clave:

1. El root debe tener data-composition-id, data-width y data-height.
2. Cada clip temporizado necesita data-start, data-duration, data-track-index y class="clip".
3. La timeline GSAP debe crearse con { paused: true } y registrarse en window.__timelines[compositionId].

¿Por qué esto es importante? Porque HyperFrames no se limita a GSAP. Cualquier runtime seekable funciona vía el patrón Frame Adapter: Anime.js, Motion One, Lottie, Three.js, WAAPI, TypeGPU o tu propia implementación. El motor “busca” el frame exacto en cada librería antes de capturarlo. Eso es lo que HyperFrames llama “seek-driven rendering” y es la clave de su determinismo.

3.3 Determinismo: la diferencia entre “vídeo reproducible” y “vídeo bonito”

El determinismo en HyperFrames es una obsesión deliberada. Su pipeline de renderizado usa chrome.beginFrame() para capturar cada frame independientemente del wall-clock, y el cálculo frame = floor(time * fps) se aplica antes de cada captura. El resultado: mismo input siempre produce el mismo output. Bit-exacto. Frame-exacto.

Esto es crítico para:

• CI/CD: puedes hacer tests visuales de vídeos en tu pipeline.
• Batch rendering: regenerar 10.000 variaciones produce 10.000 outputs idénticos si los inputs son idénticos.
• Reproducibilidad: un bug arreglado hoy seguirá arreglado mañana.

3.4 El catálogo de 50+ componentes

HyperFrames viene con un catálogo de más de 50 bloques y componentes listos para instalar con npx hyperframes add <nombre>:

• data-chart (gráficos animados)
• shader-transitions (transiciones WebGL: cross-warp, gravitational lens, glitch, ripple, swirl)
• kinetic-typography (tipografía cinética)
• talking-head-recut (reencuadre de vídeos con cabeza parlante)
• embedded-captions (subtítulos embebidos)
• product-launch-video (plantilla de lanzamiento)
• faceless-explainer (explicadores sin cara)
• pr-to-video (convertir notas de prensa en vídeo)
• slideshow (presentaciones automáticas)
• music-to-video (vídeos reactivos al audio)

Y la cosa no termina ahí. Cualquiera puede publicar sus propios bloques al catálogo con npx hyperframes publish (es open-source, así que se bifurca y se contribuye de vuelta).

3.5 Capacidades únicas que Remotion no tiene

HyperFrames presume de tres superpoderes que Remotion no ofrece (o que la documentación de Remotion explícitamente marca como “no soportado”):

1. HDR output: a través de un pipeline de compositing en dos pasadas que combina una capa DOM con vídeo nativo HLG/PQ. Resultado: H.265 10-bit en espacio de color BT.2020.
2. Vídeo transparente (con alpha channel): mediante el comando remove-background que usa un modelo neuronal para separar sujeto y fondo. Útil para superponer presentadores sobre fondos personalizados.
3. TTS local sin API keys: el comando npx hyperframes media tts integra Kokoro-82M con 54 voces, ejecutándose 100% en local. Nada de OpenAI, nada de ElevenLabs, nada de facturas extra.

3.6 El comando “magia”: website-to-video

Una de las skills más espectaculares de HyperFrames es /website-to-video. Literalmente convierte una URL en un vídeo. Un ejemplo público: el equipo de HeyGen publicó un repo (heygen-com/website-to-hyperframes-demo) con un vídeo de 41,8 segundos a 1920×1080 30fps que muestra a cuatro agentes de IA distintos escribiendo el mismo prompt "website → video". Está construido enteramente con HyperFrames: 1 root composition + 2 sub-composiciones + 11 clips capturados, todo determinístico. npx hyperframes render lo reproduce bit-a-bit.

---

4. La diferencia nuclear: React vs HTML

Esta es la única decisión que lo cambia todo. Y es importante entenderlo bien.

4.1 Remotion apuesta por React

Su promesa: si tu equipo ya vive en React, Remotion es un vecino natural. Type safety con TSX, props tipadas, hooks, componentes reusables, todo el ecosistema React disponible. Tu vídeo es una SPA, pero en vez de correr en un navegador, corre en Chrome headless frame a frame.

Fortalezas reales:

• Type safety de verdad (no any por todos lados).
• Reutilización de componentes entre tu app y tus vídeos.
• Tooling maduro (ESLint, Prettier, Storybook, hot reload de Vite/Webpack).
• Comunidad enorme con 5+ años de producción.

Debilidades reales:

• Build step obligatorio (webpack, bundler) que añade 30 segundos y ~280MB al primer setup.
• Las animaciones con librerías “wall-clock” (GSAP, Anime.js, Motion One) no son seekables: la timeline de GSAP se reproduce a velocidad real durante el render, no se “busca” frame a frame. El resultado: la misma timeline de GSAP de 4 segundos se renderiza en 4 segundos en HyperFrames, pero Remotion la comprime a ~1 segundo con frames negros.
• Mayor complejidad cognitiva para agentes: un LLM tiene que “pensar” en React, en componentes, en props, en estados, en reconciliación.

4.2 HyperFrames apuesta por HTML

Su promesa: HTML es el lenguaje que cualquier LLM ya domina. La composición es un fichero .html con data-* attributes. Sin build, sin bundler, sin package.json mínimo. Abres el fichero en el navegador y se reproduce.

Fortalezas reales:

• Cero compilación: index.html se ejecuta tal cual.
• GSAP, Lottie, Anime.js, Three.js son seekables: el motor “busca” el frame exacto en la timeline interna de cada librería.
• Editor visual nativo: el mismo DOM que renderiza es el DOM que puedes editar visualmente. Remotion necesita una capa intermedia (Studio) que no es el código fuente.
• HDR y alpha channel soportados.
• Mejor output creativo por agentes: las evaluaciones internas de HeyGen con Claude Opus 4.7 muestran que el mismo prompt produce vídeos más diversos y visualmente creativos en HyperFrames que en Remotion.

Debilidades reales:

• Sin type safety real (HTML no es TypeScript).
• Sin React DevTools ni ecosistema React.
• Renderizado distribuido inmaduro: por ahora HyperFrames renderiza en una sola máquina. No hay “HyperFrames Lambda” equivalente a Remotion Lambda.
• Más joven: menos casos de producción extrema, comunidad más pequeña (14k vs 53k estrellas).

4.3 El “problema del reloj” que casi nadie cuenta

Hay un detalle técnico que rara vez se menciona en artículos de marketing pero que es fundamental: GSAP, Anime.js, Motion One y casi todas las librerías de animación web mantienen su propio reloj interno. Cuando Remotion renderiza, esas librerías se reproducen a velocidad real (wall-clock) en lugar de ser “buscadas” (seek-driven) al frame concreto que necesita el render. El resultado: una animación de 4 segundos con GSAP en Remotion se renderiza en 1 segundo, dejando frames negros el resto.

HyperFrames resuelve esto haciendo que el motor busque el frame en la timeline de GSAP. El mismo timeline de 4 segundos produce 4 segundos de frames correctos. Esta es una de las razones por las que HyperFrames produce vídeos que “se ven mejor” cuando se usan animaciones web estándar.

4.4 Mentalidad de debugging

Un detalle práctico que he notado probando los dos: debuggear una composición HyperFrames es trivial porque abres el .html en cualquier navegador, abres DevTools, y ahí está tu vídeo funcionando con todas las herramientas web estándar. En Remotion necesitas entender la abstracción del framework: por qué <Sequence> no muestra nada, por qué tu interpolate se sale del rango, por qué el SSR de Next está rompiendo algo. Para juniors o para agentes, esa diferencia cognitiva importa.

---

5. Benchmarks y rendimiento: los números reales

Hablemos de cifras. Varios creadores han publicado benchmarks independientes. Aquí los más relevantes:

5.1 Time-to-first-video desde proyecto vacío

En una máquina limpia, los números reportados por YouTubers y devs son consistentes:

Framework	npm install	Primer render (5s clip)	Total
Remotion	33s, 278MB, 205 paquetes	16s	~50s
HyperFrames	0s (cero install)	7s warm cache	~7s

HyperFrames gana 7× en velocidad de setup inicial. Esto importa muchísimo para experimentación: cuando un agente está iterando, la diferencia entre esperar 50 segundos o 7 segundos cambia cómo se explora el espacio creativo.

5.2 Tiempo de renderizado por vídeo

En igualdad de condiciones (composición similar, 5 segundos, 1920×1080, 30 fps):

• Remotion: 16-20 segundos local, ~15s en Lambda (con warm cache)
• HyperFrames: 7-10 segundos local, no hay Lambda aún

Para un vídeo de 80 segundos, Remotion Lambda lo renderiza en 15 segundos distribuyendo el trabajo entre 200 funciones Lambda concurrentes. HyperFrames no tiene equivalente aún, por lo que vídeos largos se renderizan en local con la duración que tardaría Chrome + FFmpeg en procesar frame a frame.

5.3 Tamaño del MP4 resultante

Para una composición de 5 segundos con animaciones similares:

• Remotion: ~14MB
• HyperFrames: ~4MB

HyperFrames genera outputs significativamente más ligeros. Esto se debe a que su compresión H.264 es ligeramente más eficiente en escenas con menos elementos React reconciliando.

5.4 Coste por render

Remotion Lambda (coste AWS, no incluye licencia):

Tipo de vídeo	Coste aproximado
Hello World (warm)	$0.001
30s simple (50 concurrent Lambdas)	$0.001 - $0.005
3min con gráficos complejos	$0.01 - $0.05
90s producción real (TTS + storage)	$0.10 - $0.15 por vídeo
4K complejo	hasta $0.108 por vídeo

HyperFrames: $0 por licencia. Solo pagas tu electricidad y tu AWS si despliegas en cloud. Si renderizas en local, $0.

5.5 Estrellas GitHub (popularidad / comunidad)

• Remotion: 53.200+ ⭐ (verificado en github.com/remotion-dev/remotion)
• HyperFrames: ~14k ⭐ (creciendo rápido, lanzado en 2026)

5.6 Actividad de commits y releases

En el momento de escribir este artículo:

• Remotion: 648 releases publicadas, la última v4.0.489 fechada el 12 de julio de 2026.
• HyperFrames: ritmo de releases mensual con breaking changes controlados. Es un proyecto más joven pero mantenido por un equipo con experiencia en vídeo a escala.

---

6. Licencias: la trampa de los $100/mes

Aquí hay un punto donde la diferencia es estructural, no estética.

6.1 HyperFrames = Apache 2.0

Apache 2.0 es una licencia OSI-approved, sin restricciones comerciales, sin royalties, sin mínimos. Puedes usar HyperFrames en un proyecto personal, en una startup de 5 personas, en una empresa Fortune 500 o en un SaaS que genere millones de vídeos al mes. El coste es exactamente $0 siempre. El único requisito legal es mantener los avisos de copyright y la declaración de licencia (estándar de Apache 2.0).

Esta libertad es especialmente relevante si tu modelo de negocio es vender vídeos automatizados o construir un SaaS de generación de vídeo. Con HyperFrames no tienes que negociar nada, no tienes que pagar nada y no tienes que temer auditorías.

6.2 Remotion = Free License hasta cierto tamaño, luego a pagar

Remotion usa una licencia personalizada (consultable en remotion.dev/license) que no es OSI-approved (no es MIT, no es Apache). El modelo es, según la documentación oficial:

“Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size.”

En la práctica el desglose es:

• Free License (gratis, incluso para uso comercial): individuos, empresas sin ánimo de lucro, o empresas pequeñas (el límite exacto es por debajo del umbral que define Remotion como “company”).
• Remotion for Creators: ~$25 por Seat/mes (sin mínimo), para empresas que crean vídeos para sí mismas.
• Remotion for Automators: ~$0.01 por render, con un mínimo de $100/mes, para empresas que construyen productos/automatizaciones sobre Remotion.
• Enterprise: desde ~$500/mes, con soporte privado, consultoría mensual, etc.

El Minimum Spend de $100/mes es lo que duele: en cuanto una empresa con 4+ empleados usa Remotion comercialmente, está pagando $1.200 al año como mínimo, solo en licencia, antes de pagar AWS.

6.3 El “catching” que poca gente menciona

Hay un detalle que casi nadie discute: la Free License termina en el momento en que una empresa “decide usar Remotion en su stack”, no en el momento del lanzamiento público. Esto significa que durante la evaluación puedes usarlo gratis, pero en cuanto se toma la decisión de adoption comercial, ya estás bajo la Company License. Remotion argumenta que esto financia el mantenimiento a tiempo completo. Es un trade-off legítimo, pero conviene tenerlo claro antes de construir un producto encima.

6.4 La otra cara: la inversión en Remotion

Sería injusto no reconocer que el modelo de Remotion ha financiado 5 años de desarrollo a tiempo completo, una comunidad enorme, y un producto battle-tested a escala Spotify/Meta. Sin ese modelo, no habría Remotion Lambda, no habría Remotion Studio, no habría Agent Skills. La pregunta que cada uno tiene que hacerse es: ¿prefiero pagar $1.200/año por una plataforma madura, o $0 por algo más nuevo pero con un futuro open-source?

---

7. Agent Skills: la nueva frontera

Aquí es donde ambos frameworks han dado un paso importante en 2026. Agent Skills son paquetes de instrucciones que se instalan en herramientas como Claude Code, Cursor, Codex, Gemini CLI o GitHub Copilot CLI y que enseñan al agente cómo escribir código correcto del framework en cuestión.

Si vienes del mundo de AI Agent Skills o del estándar AGENTS.md, sabes que las skills son persistent context configurations que especializan al LLM en una tarea concreta. En el caso de Remotion e HyperFrames, las skills convierten al agente en “un experto en producir vídeo con ese framework”.

7.1 Remotion Agent Skills (lanzadas en enero 2026)

Remotion publicó sus skills oficiales en enero de 2026. El comando de instalación es:

npx skills add remotion-dev/skills

Las skills disponibles son:

1. /remotion-best-practices: la skill “madre”. Si no sabes qué skill usar, usa esta.
2. /remotion-create: scaffolding de proyectos y composiciones.
3. /remotion-markup: best practices para escribir JSX de Remotion (composiciones, animaciones, layout, tipografía, media, efectos, mapas, audio, fuentes, timing).
4. /remotion-render: cómo invocar un render a vídeo o still.
5. /remotion-captions: subtítulos y captions.
6. /remotion-saas: arquitectura para productos SaaS basados en Remotion.
7. /remotion-interactivity: hacer que el código sea editable en Studio.
8. /mediabunny: manejo de multimedia en navegador.

El lanzamiento fue viral: 6M+ visualizaciones en el demo de lanzamiento, 25k+ instalaciones en la primera semana. Claude Code aprendió a hacer vídeos.

7.2 HyperFrames Agent Skills (lanzadas con el framework)

HyperFrames adopta el mismo estándar abierto de Agent Skills (compatible con el ecosistema Claude/Cursor/Codex) y publica 18 skills distribuidas en dos capas:

Core skills (8, obligatorias):

1. /hyperframes: la skill “puerta de entrada”. Orienta al agente y rutea la petición a la skill correcta.
2. /hyperframes-core: contrato de composición (estructura HTML, atributos data-*, clips, tracks).
3. /hyperframes-animation: GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU y los Frame Adapters.
4. /hyperframes-creative: dirección de arte (paletas, tipografía, narración, beat planning).
5. /hyperframes-cli: dev loop (init, lint, preview, render, doctor).
6. /media-use: preprocessing de assets (TTS, transcripción, remove-background).
7. /hyperframes-registry: catálogo de bloques y componentes.
8. /general-video: workflow de autoría general (fallback).

Workflow skills (10, opcionales): /product-launch-video, /website-to-video, /faceless-explainer, /pr-to-video, /embedded-captions, /talking-head-recut, /motion-graphics, /music-to-video, /slideshow, /remotion-to-hyperframes.

La skill estrella es /website-to-video: convierte una URL en un vídeo siguiendo un pipeline de 7 pasos (capture, design, script, storyboard, voiceover, build, validate) donde cada decisión creativa es inspeccionable como un fichero en disco.

7.3 Comparativa de agentes compatibles

Agente	Remotion	HyperFrames
Claude Code	✅	✅
Cursor	✅	✅
Codex	✅	✅
OpenCode	✅	❌
Gemini CLI	❌	✅
GitHub Copilot CLI	❌	✅
Google Antigravity	❌	✅

HyperFrames tiene más agentes soportados oficialmente (incluye Gemini CLI, que es enorme para el ecosistema Google) y más skills totales (18 vs 8). Remotion tiene skills más pulidas y maduras (salieron 6 meses antes).

---

8. Capacidades técnicas: tabla comparativa profunda

Capacidad	Remotion	HyperFrames
Lenguaje de autoría	React/TypeScript (TSX)	HTML + CSS + JavaScript
Runtime	React reconciliación por frame	Browser DOM, sin framework
Build step	Requerido (webpack, bundler)	Ninguno
Animaciones seek-driven	❌ Wall-clock playback	✅ Frame-accurate seek
Librerías de animación soportadas	interpolate, spring, CSS limitado	GSAP, Lottie, Anime.js, Three.js, WAAPI, TypeGPU, CSS
HDR output	❌ Documentado como no soportado	✅ H.265 10-bit BT.2020
Vídeo transparente (alpha)	❌	✅
TTS local sin API	❌	✅ Kokoro-82M (54 voces)
Transcripción local	❌	✅ Whisper
Remove background local	❌	✅ Modelo neuronal integrado
Editor visual nativo sobre render source	Studio (capa separada)	El mismo DOM es editable
Renderizado distribuido en cloud	✅ Remotion Lambda (maduro, hyperscale)	❌ Solo local (por ahora)
Licencia	Custom (freemium con umbral de tamaño)	Apache 2.0 (gratis siempre)
Estrellas GitHub	53.2k	14k
Antigüedad	2021 (5+ años)	2026 (months)
Comunidad / Showcase	Enorme (Spotify Wrapped, GitHub Unwrapped)	En crecimiento

---

9. Casos de uso: ¿cuándo usar cada uno?

9.1 Elige Remotion si…

• Tu equipo ya vive en React. Si tienes developers React senior, la curva de aprendizaje es prácticamente cero.
• Necesitas type safety real. TSX te da IntelliSense, tipos, refactors seguros. HTML no.
• Quieres reutilizar componentes de tu app. Si tu producto ya tiene design system en React, Remotion te permite reusar esos mismos componentes en tus vídeos.
• Necesitas renderizado a escala masiva. Remotion Lambda es el único sistema de renderizado distribuido production-ready de los dos. Si generas miles de vídeos al día o vídeos largos con deadlines ajustados, Lambda es la respuesta.
• Necesitas maduración. 5+ años de producción real, con bugs conocidos, con edge cases documentados, con una comunidad que responde en Discord.
• Tu vídeo es data-driven puro. Spotify Wrapped, GitHub Unwrapped, dashboards animados: para vídeo como función de datos, Remotion es la elección probada.

9.2 Elige HyperFrames si…

• Tu flujo es AI-agent-driven. Si tu pipeline principal es “Claude Code / Cursor / Gemini CLI escribe el vídeo”, HyperFrames es el camino de menor resistencia. El agente produce HTML mejor de lo que produce TSX.
• Quieres iterar rápido sin setup. 7 segundos al primer vídeo vs 50 segundos. Cuando estás explorando, esta diferencia es enorme.
• No quieres un build step. Quieres abrir un .html en el navegador y verlo renderizado. Punto.
• Necesitas HDR o vídeo transparente. Remotion explícitamente no soporta ninguno de los dos. HyperFrames sí.
• Tu animación usa GSAP, Lottie o Three.js. Estas librerías son seek-driven en HyperFrames pero wall-clock en Remotion, lo que produce “frames negros” o animaciones comprimidas.
• Quieres licensing simple. Apache 2.0 significa cero papeleo legal, cero facturas inesperadas cuando tu equipo crezca.
• Quieres copy-pastear HTML existente. Si tienes una landing page, un componente de design system, o un CodePen que quieres animar, en HyperFrames lo pegas y listo. En Remotion tienes que reescribirlo a JSX.
• Quieres ejecutar TTS, transcripción o remove-background localmente sin API keys.

9.3 Casos de uso híbridos

En la práctica, muchos equipos usan ambos:

• Remotion para el “core” de producción a escala (vídeos parametrizados, dashboards, resúmenes anuales).
• HyperFrames para iteración rápida de motion graphics, animaciones one-off, contenido social, experimentos.

HyperFrames incluso tiene una skill dedicada: /remotion-to-hyperframes que ayuda a migrar composiciones de un framework al otro.

---

10. La cuestión del output creativo: ¿quién produce vídeos más bonitos?

Esta es la pregunta más subjetiva y la más interesante.

10.1 Lo que dicen los benchmarks independientes

El YouTuber AI Engineering Trend y el dev Misbah Syed publicaron tests idénticos con Claude Opus 4.7 y el mismo prompt. Resultados consistentes:

• HyperFrames renderiza vídeos en ~60 segundos. Output más diverso, más colorido, con animaciones más expresivas.
• Remotion renderiza en ~162 segundos + 4 minutos de build inicial. Output más “estilizado” hacia una estética común (como si todos los vídeos convergieran al mismo look).

10.2 La explicación técnica

El equipo de HeyGen ejecutó evaluaciones internas con LLMs y encontró el mismo patrón: los agentes escribiendo composiciones HyperFrames producen output más creativo y diverso que los mismos agentes escribiendo composiciones Remotion. La razón es doble:

1. HTML es más expresivo que React en el espacio de animaciones web. CSS animations, keyframes, transforms, filters, blend modes, gradients — todo eso es trivial en HTML y propenso a errores en JSX.
2. El agente no tiene que pensar en reconciliación, ni en props, ni en el modelo de componentes. Solo escribe DOM + CSS + JS y se acabó. Esa simplicidad se traduce en más atención del LLM al apartado visual.

10.3 La otra cara

Remotion produce un output más “estructurado” y “preciso”. Si necesitas un vídeo corporativo, un dashboard animado, o un explainer con tipografía milimétrica, la predictibilidad de Remotion puede ser una ventaja. HyperFrames a veces “se pasa de creativo” y produce vídeos más caóticos de lo que el prompt pedía.

---

11. Pricing real: cuanto cuesta cada opción en producción

11.1 Escenario A: Individual / hobby / empresa de 1-3 personas

• Remotion: $0 (Free License, según la documentación oficial de remotion.dev/license).
• HyperFrames: $0 (Apache 2.0).

Empate técnico, con la salvedad de que HyperFrames te exige Node 22+ y FFmpeg, mientras Remotion pide un setup React estándar.

11.2 Escenario B: Empresa de 5 developers, 1.000 vídeos/mes

• Remotion:
  • Licencia: 5 seats × $25 = $125/mes, pero con el Minimum Spend de $100 ya cubres. $100/mes mínimo.
  • AWS Lambda: ~$0.10 por vídeo × 1.000 = $100/mes.
  • Total: ~$200/mes.
• HyperFrames:
  • Licencia: $0.
  • Render en local: $0 (más coste eléctrico de tu servidor).
  • O render en tu propia infra cloud: pagas solo compute.
  • Total: ~$0-50/mes dependiendo de dónde renderices.

HyperFrames gana 4-10× en coste.

11.3 Escenario C: Empresa de 50 developers, 100.000 vídeos/mes

• Remotion:
  • Licencia: 50 seats × $25 = $1.250/mes, con cap discutible.
  • AWS Lambda: ~$10.000/mes (a $0.10 por vídeo).
  • Total: ~$11.000/mes.
• HyperFrames:
  • Licencia: $0.
  • AWS o tu infra: ~$5.000-10.000/mes.
  • Total: ~$5.000-10.000/mes.

HyperFrames sigue ganando, sobre todo porque no hay license fee creciente con headcount.

11.4 El coste oculto de Remotion Lambda

Hay un dato que se suele pasar por alto: Remotion Lambda se vuelve significativamente más caro con vídeos 4K, con gradients CSS, o con SVG pesados. Un render de un vídeo con zoom-in a un SVG grande puede costar $0.10-0.20 por vídeo en lugar de los $0.01-0.05 típicos. Si tu composición es pesada, Lambda puede convertirse en tu principal coste.

---

12. El futuro: hacia dónde va cada uno

12.1 Remotion

• Continúa invirtiendo en Remotion Lambda y mejoras de coste/velocidad.
• Las Agent Skills seguirán expandiéndose (se rumorea una skill de Remotion 5 con nuevas primitivas).
• Remotion Studio va a por el editor visual colaborativo (Figma-meets-video).
• El modelo de negocio está estabilizado: Free License + Company License + Enterprise.

12.2 HyperFrames

• Espera HyperFrames Lambda o equivalente (el roadmap menciona renderizado distribuido como prioridad 2026-2027).
• El catálogo de bloques seguirá creciendo (50+ ahora, aspiración de 200+).
• Posible integración más profunda con avatares de HeyGen (tú puedes renderizar un avatar presentador con TTS y composición en un solo pipeline).
• Como Apache 2.0, está abierto a bifurcaciones: si HeyGen abandona el proyecto, la comunidad puede continuar.

12.3 La convergencia probable

Ambos frameworks están convergiendo en algunos puntos:

• Editor visual (Remotion Studio vs el DOM editable de HyperFrames).
• AI skills (ambos abrazan el estándar Agent Skills).
• Data-driven video (Remotion lo tiene nativo, HyperFrames lo está añadiendo).
• Distributed rendering (Remotion lo tiene, HyperFrames va detrás).

La pregunta no es si alguno “ganará”. Probablemente ambos sobrevivan con casos de uso distintos. La pregunta es qué framework se convierte en el “default” para la era de los agentes. Y ahí HyperFrames tiene una ventaja estructural: los agentes producen mejor HTML que TSX.

---

13. Mi veredicto: ¿cuál elegir?

Después de toda esta comparativa, si me obligas a dar una sola recomendación:

Para el 80% de los casos en 2026 → Empieza con HyperFrames

Si estás explorando, si tu equipo es pequeño, si tu flujo es agent-driven, si quieres evitar costes de licencia, si quieres iterar rápido: HyperFrames. El “time-to-first-video” de 7 segundos, la simplicidad de HTML, y la licencia Apache 2.0 hacen que el coste de prueba sea prácticamente cero. Puedes tener algo funcionando esta tarde.

Si ya sabes que necesitas escala masiva → Remotion

Si desde el día 1 sabes que vas a generar millones de vídeos, si tu equipo es 100% React, si necesitas Lambda: Remotion. La inversión en licencia se amortiza cuando tu SaaS empieza a facturar. Y 5 años de producción no se improvisan.

La tercera vía: usa ambos

HyperFrames tiene una skill /remotion-to-hyperframes. Muchos equipos hacen esto:

1. HyperFrames para prototipar motion graphics y validar conceptos.
2. Remotion para el sistema data-driven en producción a escala.

---

14. Recursos para profundizar

HyperFrames

• Repo oficial: https://github.com/heygen-com/hyperframes
• Web oficial: https://hyperframes.heygen.com
• Quickstart: https://hyperframes.heygen.com/quickstart
• Guía HTML-in-Canvas: https://hyperframes.heygen.com/guides/html-in-canvas
• Comparativa oficial: https://hyperframes.heygen.com/guides/hyperframes-vs-remotion
• Catálogo: https://hyperframes.heygen.com/catalog/blocks/data-chart
• Discord de HeyGen: comunidad activa

Remotion

• Repo oficial: https://github.com/remotion-dev/remotion
• Web oficial: https://www.remotion.dev
• Docs: https://www.remotion.dev/docs
• Agent Skills: https://www.remotion.dev/docs/ai/skills
• Lambda: https://www.remotion.dev/lambda
• Pricing: https://www.remotion.pro
• Showcase: https://www.remotion.dev/showcase
• License: https://www.remotion.dev/license

Vídeos recomendados

• “Remotion vs HyperFrames: The Truth About AI Agent Video” (YouTube, 2026) — análisis técnico con benchmarks reales.
• “Hyperframes vs Remotion: Which Video Framework is Faster?” (YouTube) — test lado a lado.
• “AI Codes Your Video Now — HyperFrames vs Remotion” (YouTube) — mismo brief, dos motores.
• “How to use Remotion agent skills with Claude Code” (Roboto Studio blog) — workflow en producción real.

Artículos relacionados en este blog

• Agents.md Standard: Blueprint for AI-Ready Projects — por qué la documentación estructurada para agentes importa.
• AI Skills in Development: el wrapper que gana — persistent context configurations explicadas a fondo.
• AI Tools Worth Learning in 2026 — el stack completo del indie dev agentic.
• Clean Architecture for AI — cómo estructurar proyectos con agentes.

---

15. Conclusión: el futuro del vídeo es agent-native

Lo que está pasando en 2026 con Remotion y HyperFrames es la profesionalización del vídeo como código. Hace 5 años, hacer vídeo con código era un truco de hackers. Hoy es una categoría de producto con dos frameworks serios, comunidades activas, casos de uso en producción a escala Spotify, y un ecosistema de agentes que sabe escribirlo.

La pregunta correcta no es “¿cuál es mejor?”, sino “¿cuál es mejor para tu caso de uso, tu equipo, tu presupuesto y tu roadmap?”.

• Si quieres simplicidad, velocidad de iteración, y cero costes de licencia, HyperFrames es tu elección.
• Si quieres madurez, ecosistema profundo, y escalabilidad cloud nativa, Remotion es tu elección.
• Si quieres lo mejor de los dos mundos, úsalos como herramientas complementarias.

Elijas lo que elijas, una cosa está clara: el futuro del vídeo no se edita, se programa. Y nunca ha sido tan fácil empezar.

---

📚 Bibliografía

“HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos” — github.com/heygen-com/hyperframes

“Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds” — github.com/heygen-com/hyperframes

“HyperFrames lets AI agents compose videos by writing HTML, CSS & JS” — hyperframes.heygen.com

“Make videos programmatically with React” — github.com/remotion-dev/remotion (53.2k stars, v4.0.489)

“Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size” — remotion.dev/license

---

¿Ya has probado alguno de los dos? ¿Cuál te ha funcionado mejor para tu caso de uso? Cuéntamelo en los comentarios — siempre estoy buscando nuevos benchmarks y experiencias reales para actualizar este análisis.