HyperFrames vs Remotion: 8 tarefas de vídeo, 32 execuções no Claude Code

HyperFrames é o framework open source da HeyGen para transformar HTML em vídeo, feito para agentes de IA. Ele foi lançado publicamente em março de 2026 e, em 12 de novembro, já somava 83,246 estrelas no GitHub, contra 72,708 do Remotion (HyperFrames no GitHub, Remotion no GitHub). Os dois fazem o mesmo trabalho: abrem uma página num navegador headless, capturam cada frame e codificam um vídeo. Se você vai entregar um deles a um agente de IA, qual produz vídeos melhores?

A comparação da própria HeyGen passou um único vídeo de lançamento por cada um, uma vez só (HyperFrames vs Remotion). Nós queríamos entender de onde as diferenças realmente vêm. Então demos ao Claude Code oito tarefas de vídeo diferentes em cada framework, dos tipos que as pessoas mais produzem, e depois pedimos uma alteração realista em cada uma: 32 execuções no Claude Opus 5.5. Cada vídeo foi conferido frame a frame e avaliado às cegas nas duas ordens.

Transparência: o iArt é construído sobre o Remotion, então temos interesse no resultado. Publicamos todos os prompts para que você possa repetir o teste.

Como testamos

• Agente: Claude Code 2.1.322 com Claude Opus 5.5, o mesmo modelo que a HeyGen usou na própria comparação. Nenhuma instrução além de cada prompt.
• Remotion 4.0.542: um projeto em branco criado com npx create-video --blank --skills, que instala as skills oficiais do Remotion para agentes.
• HyperFrames 0.9.33: uma pasta vazia com as skills oficiais da HeyGen, instaladas via npx skills add heygen-com/hyperframes.
• Oito tarefas escolhidas entre o que as pessoas mais fazem com motion graphics por IA: tipografia cinética, revelação de logo a partir de um arquivo SVG, um gráfico de dados, uma demo de interface de produto, um explicativo de mecanismo, um lower third transparente para OBS, um mapa de rota e um vídeo de mensagens de texto. Todo prompt terminava com "Render the final MP4 to out.mp4 in this folder. Don't ask me questions; make the choices yourself."
• Uma alteração por tarefa na mesma sessão, cada uma diferente e realista, sempre pedindo ao agente que mantivesse o primeiro arquivo:
  • Tipografia cinética: cor de destaque #2B5BFF, 2 s mais curto
  • Revelação de logo a partir de um SVG: vertical 1080×1920
  • Gráfico de barras animado: dois valores alterados
  • Demo de interface de produto: modo escuro, novo texto de tarefa
  • Como funciona uma bomba de calor: adicionar uma cena final
  • Lower third transparente (OBS): novo nome, cargo e cor
  • Mapa de rota, de Lisboa a Berlim: adicionar Praga, atualizar a distância
  • Vídeo de mensagens de texto (9:16): visual de WhatsApp, uma mensagem a mais
• Verificações: resolução, duração e codec de cada arquivo; o canal alfa das duas sobreposições em WebM; se as edições deixaram os primeiros arquivos intactos; todos os frames em folhas de contato; e um avaliador cego (Gemini, que recebia apenas o prompt, o "vídeo A" e o "vídeo B"), rodado duas vezes por par com a ordem invertida. Uma vitória só conta se as duas ordens concordarem.
• Máquina: MacBook Apple M3, 16 GB, com um FFmpeg funcionando no PATH. Cada par rodou ao mesmo tempo, para que os dois tivessem a mesma carga. Nada foi editado à mão.

Resultados

Tempo real até o MP4 existir. As 32 execuções geraram arquivos no tamanho e na duração pedidos; as 8 edições de cada lado fizeram exatamente o que foi pedido, e nenhuma mexeu no arquivo original.

As 8 tarefas, lado a lado

Cada tarefa abaixo mostra o prompt exato, as duas primeiras versões, nosso veredito e, em seguida, a alteração pedida e como cada lado lidou com ela.

1. Tipografia 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.

Os dois agentes deram a cada frase uma cena própria antes de montar a linha completa. O HyperFrames usou letras maiores, e o eco de "often." funciona melhor; a versão do Remotion tem um frame totalmente vazio entre as batidas. Avaliador cego: HyperFrames nas duas ordens. Nossa avaliação: HyperFrames, por pouco.

Alteração:

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.

Os dois trocaram a cor para o azul exato e reduziram o filme para 10 segundos, com a pausa final intacta.

2. Revelação de logo a partir de um 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.

Os dois usaram os próprios paths do SVG: o círculo se desenha, as ondas vêm em seguida e depois entra o logotipo em texto. Os dois também inventaram um slogan embaixo do logo que ninguém pediu. Avaliador cego: dividido entre as duas ordens. Nossa avaliação: empate.

Alteração:

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.

Aqui os dois se diferenciaram. O agente do Remotion refez o layout do logo para o quadro alto, com o símbolo acima do logotipo em texto. O agente do HyperFrames manteve o logo horizontal e só o encolheu, deixando a maior parte do quadro vazia.

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.

Os dois estão exatos. O gráfico do Remotion é correto e simples. O gráfico do HyperFrames destaca a barra de 13–17, deixa as demais em cinza, adiciona uma anotação ("Teens log 2.5× the daily screen time of the 55+ group", correta: 8.5 ÷ 3.4) e uma linha de fonte, nada disso pedido no prompt. Avaliador cego: HyperFrames nas duas ordens. Nossa avaliação: HyperFrames.

Alteração:

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.

Os dois atualizaram os dois valores. O HyperFrames também recalculou a própria anotação para 2.9×.

4. Demo de interface de produto

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.

Mesmo layout, mesmo trajeto do cursor, mesmo confete. O texto do HyperFrames se sustenta melhor em tamanhos pequenos, e ele adicionou um card final com um slogan ("Count it done.") que não estava no prompt; o Remotion faz fade out na lista concluída. Avaliador cego: HyperFrames nas duas ordens. Nossa avaliação: empate.

Alteração:

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

Os dois mudaram para o modo escuro e digitaram "Book flights".

5. Como funciona uma 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.

Os dois rotularam as quatro partes e deixaram o fluxo de calor fácil de acompanhar. O Remotion coloca mais texto pequeno; o HyperFrames usa letras maiores, uma ideia por etapa, e fecha com "It doesn't make heat. It moves heat inside." Avaliador cego: HyperFrames nas duas ordens. Nossa avaliação: HyperFrames.

Alteração:

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.

Os dois adicionaram a cena final. O Remotion usou um ícone e dois rótulos; o HyperFrames desenhou um bloco de eletricidade contra três blocos de calor.

6. Lower third 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.

Aqui mostrados sobre o fundo cinza da prévia. Os dois são quase idênticos, e os dois arquivos WebM têm canal alfa de verdade: 96% dos pixels totalmente transparentes e a barra totalmente opaca. Avaliador cego: HyperFrames nas duas ordens, alegando que o Remotion não tinha animação de saída, o que está errado; ele faz fade e se recolhe. Nossa avaliação: empate.

Alteração:

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.

Os dois trocaram o nome, o cargo e a cor de destaque no WebM transparente e na prévia.

7. Mapa de rota, de Lisboa a Berlim

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.

Os dois desenharam a geografia real da Europa, fizeram cada cidade surgir quando a linha a alcançava e chegaram aos mesmos 3,055 km. O HyperFrames adiciona nomes de países e uma distância embaixo de cada cidade; a câmera do Remotion acompanha a linha mais de perto. Avaliador cego: HyperFrames nas duas ordens. Nossa avaliação: quase um empate.

Alteração:

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.

Os dois adicionaram Praga e atualizaram o contador para 3,405 km.

8. Vídeo de mensagens 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.

Praticamente a mesma conversa. O HyperFrames digita a mensagem de Sam na barra de entrada antes de enviá-la. Os dois deixaram os balões pequenos demais para uma tela de celular. Avaliador cego: dividido. Nossa avaliação: empate.

Alteração:

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.

Os dois mudaram para o visual do WhatsApp e adicionaram o 🙏.

Descoberta 1: com o mesmo modelo, os vídeos convergem

Olhando as oito tarefas em conjunto, a primeira coisa que chama a atenção é como elas se parecem. Os dois desenharam a geografia real da Europa e calcularam os mesmos 3,055 km para a rota. Os dois construíram o app de tarefas com o mesmo layout, o mesmo trajeto do cursor e o mesmo confete. Os dois lower thirds saíram do mesmo tamanho, no mesmo canto, com canal alfa de verdade. O framework define como o agente escreve o vídeo, não o que ele imagina.

Isso bate com o que vimos numa rodada anterior deste teste com o Claude Sonnet 5.5. Lá, a diferença foi grande na tipografia cinética: o agente do Remotion empilhou três linhas de texto num canto. No Opus, os dois agentes deram a cada frase uma cena própria. O modelo fechou a maior parte da diferença antes que o framework tivesse chance de pesar.

Descoberta 2: o Remotion é mais rápido porque o Claude já o conhece

O Remotion terminou antes sete das oito primeiras versões, e os totais foram 25.9 minutos contra 39.7, com 96 passos do agente contra 176. A renderização não é o motivo. Os logs das sessões mostram para onde o tempo vai:

• O agente do Remotion abriu a skill oficial do Remotion em 1 de 8 sessões. O Remotion existe desde 2020, e o Claude o escreve de memória.
• O agente do HyperFrames carregou a skill do HyperFrames em 8 de 8 sessões e leu os arquivos de referência mais 15 vezes. O HyperFrames tem oito meses de vida; o agente precisa aprendê-lo a cada vez.
• Ele também rodou mais que o dobro de comandos no shell (154 contra 69), em sua maioria os próprios init, check, lint e snapshot do HyperFrames.

Os dois agentes inspecionaram os próprios frames com frequência parecida (48 e 47 leituras de imagem), então o tempo extra não é controle de qualidade extra. A tendência é a diferença diminuir à medida que modelos mais novos aprenderem o HyperFrames.

Descoberta 3: a vantagem do HyperFrames é um guia de design

O gráfico de barras (tarefa 3) mostra de onde veio a preferência do avaliador cego. O gráfico do Remotion é correto e simples. O do HyperFrames destaca a barra de 13–17 em laranja, deixa as demais em cinza, adiciona uma anotação ("Teens log 2.5× the daily screen time of the 55+ group", que está certa: 8.5 ÷ 3.4) e uma pequena linha de fonte. Nada disso estava no prompt. Está na skill do HyperFrames, quase palavra por palavra:

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.

Da referência de dados do HyperFrames.

A skill parece o guia de estilo de um motion designer, com regras para gráficos, tipografia cinética, mapas e ritmo. As skills oficiais do Remotion são uma referência técnica: como montar um projeto, renderizar, adicionar legendas, usar bibliotecas de mapas. Ou seja, a diferença de qualidade é uma diferença de prompt. Se você usa Remotion, coloque as regras de design no seu prompt ou nas instruções do projeto e terá o mesmo comportamento, sem os passos extras. O mesmo valeu para a tipografia cinética, em que a regra do HyperFrames é "3–7 English words per scene" (referência de filme).

Descoberta 4: os dois editam com precisão; o Remotion refaz melhor o layout

Todas as edições funcionaram nos dois lados: dados novos, cores novas, uma parada a mais, modo escuro, uma nova cena final, e os dois mantiveram o arquivo original intacto. A única diferença real foi de layout. Quando pedimos uma versão vertical da revelação de logo (tarefa 2), o agente do Remotion empilhou o símbolo acima do logotipo em texto para o quadro alto; o agente do HyperFrames encolheu o logo horizontal e deixou metade do quadro vazia.

Mais uma coisa que os dois fizeram: adicionar texto que ninguém pediu. As duas revelações de logo inventaram um slogan embaixo do logotipo, e a demo de interface do HyperFrames terminou num card de marca com um slogan. Se as palavras importam, termine o prompt com "No other text."

O que fica nas suas mãos

Você não precisa escolher um único modelo de timing

A proposta do HyperFrames é o modelo de busca (seeking): escrever uma timeline GSAP normal e deixar o renderizador saltar para cada frame. Dá para fazer o mesmo dentro do Remotion: crie a timeline pausada e defina o tempo dela a partir do frame atual.

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>;
};

É assim que o iArt renderiza: o agente escreve timelines GSAP, o Remotion cuida do relógio, da prévia e da exportação, e as instruções do nosso agente carregam as regras de design. Essa é a verdadeira lição deste teste: o renderizador importa menos do que aquilo que você diz ao agente.

Qual você deve usar?

Limites deste teste

Oito tarefas, uma execução de cada por framework, um modelo e uma máquina. Uma única execução diz pouco sobre cada tarefa isolada; o que reportamos é o padrão ao longo das oito. O avaliador cego é um modelo de IA e errou pelo menos uma vez (disse que o lower third do Remotion não tinha animação de saída; tem), por isso listamos nosso próprio veredito frame a frame ao lado. Testamos os dois pelo Claude Code e pelas respectivas ferramentas de linha de comando, não pelo HyperFrames Studio, pelo Remotion Studio nem pelos renderizadores em nuvem. Todos os prompts estão acima, então você pode repetir o teste.

FAQ

O HyperFrames é melhor que o Remotion?

Para um agente de IA trabalhando sozinho, o HyperFrames produziu vídeos um pouco mais caprichados no nosso teste: um avaliador cego o preferiu em 6 de 8 tarefas e nunca preferiu o Remotion de forma consistente. O Remotion terminou todas as tarefas menos uma mais rápido e com cerca de metade dos passos do agente. A maior parte da diferença de qualidade vem das orientações de design do HyperFrames, que você também pode passar a um agente com Remotion.

Por que o Claude Code é mais lento com o HyperFrames?

O HyperFrames é novo, então o agente carrega a skill e lê a documentação dele em toda sessão; nas nossas execuções, fez isso nas 8 tarefas, enquanto abriu a skill do Remotion em apenas 1 de 8 e escreveu com base no que já sabia. As verificações de linha de comando do HyperFrames somam ainda mais passos antes de cada renderização.

Posso usar GSAP com o Remotion?

Sim. Crie uma timeline GSAP pausada e defina o tempo dela a partir do frame atual do Remotion a cada renderização. É o modelo de busca que o HyperFrames usa, só que dentro do Remotion. O iArt renderiza as animações dessa forma.

Os dois conseguem renderizar vídeo transparente para OBS?

Sim. No nosso teste, os dois geraram um WebM VP9 com canal alfa de verdade: 96% dos pixels totalmente transparentes, com o lower third opaco, conferido frame a frame.

O Remotion é gratuito?

O Remotion é gratuito para pessoas físicas, empresas com fins lucrativos de até três funcionários e organizações sem fins lucrativos; empresas maiores precisam de uma licença empresarial paga. O HyperFrames é open source sob Apache 2.0.

O HyperFrames precisa do FFmpeg instalado?

Sim, a ferramenta de linha de comando dele exige Node.js 22 ou superior e FFmpeg, a menos que você use a renderização hospedada da HeyGen. O Remotion já traz o próprio FFmpeg embutido no renderizador desde a versão 4.0.

Posso fazer esses vídeos sem configurar nenhum dos dois frameworks?

Sim. O iArt é um agente de vídeo hospedado construído sobre Remotion e GSAP: descreva o vídeo em palavras simples e ele escreve, renderiza e exporta, sem instalação, versão de Node ou FFmpeg para gerenciar.