HeyGen HyperFrames: agentes criando vídeo com HTML (e o que isso muda pro Remotion)
TL;DR: O HeyGen lançou o HyperFrames, um framework open source onde você (ou seu agente) escreve HTML e recebe um MP4 no final. A proposta é parecida com o Remotion, que já uso nos meus agentes, mas o HyperFrames tem uma vantagem clara: HTML é mais natural para um LLM do que React. Isso muda a equação de quando usar cada um.
Já faz um tempo que uso o Remotion para gerar vídeos programaticamente. Funciona bem quando você sabe React, mas tem um atrito real quando o agente precisa escrever composições do zero. O HyperFrames chegou numa direção diferente, e vale entender a diferença.
O que é o HeyGen HyperFrames?
HyperFrames é um framework open source do HeyGen para criar vídeos a partir de HTML. A premissa é simples: você escreve um arquivo HTML com alguns atributos especiais, roda npx hyperframes render, e recebe um MP4 na saída.
O fluxo para agentes é assim: você descreve o vídeo em linguagem natural, o agente gera o HTML com as animações, e o HyperFrames renderiza. Sem interface gráfica, sem clique. Terminal e pronto.
Internamente, o framework usa Puppeteer + FFmpeg para capturar os frames do HTML e codificar o vídeo. O resultado é determinístico: mesma entrada sempre gera a mesma saída, o que é importante para pipelines automatizados.
Como agentes usam HTML para criar vídeos com HyperFrames?
O agente recebe três skills específicas que ensinam os padrões do framework: /hyperframes para composições, /hyperframes-cli para comandos, e /gsap para animações. Em vez de depender só da documentação geral, o agente já sabe como estruturar os atributos data-start, data-duration e data-track-index para montar a timeline.
A animação usa GSAP como padrão, mas o framework aceita Lottie, Three.js, shaders WebGL e CSS puro. A lógica é: se o navegador renderiza, o HyperFrames consegue capturar.
Tem 50+ blocos prontos, legendas no estilo TikTok, overlays sociais, transições com efeitos de blur e zoom. O agente pode usar qualquer um como ponto de partida e ajustar via conversa: "deixa o título duas vezes maior", "muda para dark mode", "adiciona fade-out no final".
Por que HTML é mais natural para LLMs do que React?
Aqui está a diferença que mais importa na prática.
O Remotion exige que o agente escreva componentes React, gerencie estado, use a API de interpolate e spring do Remotion, e entenda o sistema de composições. É possível, mas tem atrito. O agente precisa conhecer as convenções do framework pra não errar na timeline.
O HyperFrames usa HTML puro com atributos data-*. Todo LLM treinado na web já viu mais HTML do que React. O risco de erro de sintaxe cai, e o agente acerta a estrutura na primeira tentativa com mais frequência.
Numa comparação feita pelo desenvolvedor Misbah Syed, o mesmo prompt foi dado ao Claude Opus 4.7 para gerar um vídeo via Remotion e via HyperFrames. Os resultados mostraram que o HyperFrames entregou composição mais limpa na primeira geração, sem precisar de correções de estrutura.
Exemplos reais: o mesmo conteúdo nos dois frameworks
Para tornar a comparação concreta, gerei o mesmo vídeo nos dois frameworks: 3 stats sobre o sistema de agentes que roda este blog. Mesma informação, abordagens distintas.
HyperFrames: o agente escreveu HTML com data-* e GSAP. Dark mode, social media energy, pronto em uma tentativa:
Remotion: componente React com dados parametrizados, progress bars via interpolate(). Light mode, estilo dashboard, mais estruturado:
O conteúdo é idêntico. O que muda é o paradigma de criação: HTML declarativo com timeline em atributos vs. componente React com animações baseadas em frame. Para um agente gerando do zero, o HyperFrames errou menos na estrutura.
Quando usar o Remotion e quando usar o HyperFrames?
As duas ferramentas resolvem problemas parecidos, mas em contextos diferentes.
Remotion faz mais sentido quando:
- Você ou seu time já vive em React e quer versionar os vídeos como código
- O projeto exige composição complexa com dados parametrizados, como dashboards e relatórios
- Você quer rodar renders no Lambda com Remotion Cloud
- O vídeo precisa de integração nativa com o ecossistema JavaScript existente
O ponto de atenção é o custo: o Remotion exige licença comercial para empresas com 4 ou mais funcionários. Para freelancers e projetos pessoais, é gratuito.
HyperFrames faz mais sentido quando:
- O agente está gerando o vídeo do zero a partir de uma instrução em linguagem natural
- Você quer prototipar rápido sem configurar um projeto React completo
- O caso de uso é conteúdo de redes sociais: vídeos 9:16, captions animadas, hooks de TikTok
- Você precisa transformar um PDF ou CSV em vídeo de forma automatizada
O HyperFrames é totalmente gratuito e open source. Requer Node.js 22+ e FFmpeg instalado.
Que tipo de vídeo o HyperFrames produz melhor?
Pelos exemplos do próprio lançamento, os casos de uso mais fortes são:
- Vídeos curtos de 10 a 60 segundos para redes sociais
- Sumários de documentos (PDF, repositório GitHub, CSV) transformados em pitch de 45 segundos
- Animações de dados, como gráficos de barras animados a partir de planilhas
- Hooks no estilo TikTok com legendas sincronizadas com narração TTS
Para vídeos longos com múltiplas cenas complexas ou integração com avatares de IA falante, a plataforma principal do HeyGen ainda é a escolha certa. O HyperFrames é para vídeo de motion graphics e texto animado, não para talking heads.
O que muda nos meus agentes
Tenho uma skill de Remotion configurada nos meus agentes hoje. O Remotion continua sendo a escolha para composições mais elaboradas, onde o controle total de cada frame importa.
Mas vou adicionar o HyperFrames para os casos de conteúdo de redes sociais, onde o agente precisa gerar um vídeo rápido a partir de um post ou de dados. A barreira de entrada é menor, o resultado aparece mais rápido, e o agente precisa de menos tentativas para acertar.
A pergunta que fica é quanto da vantagem atual do HyperFrames em "facilidade para LLMs" vai persistir. O Remotion já tem system prompt oficial para LLMs e um template específico de prompt-to-motion-graphics. A distância vai diminuir.
Por enquanto, os dois coexistem bem. Cada um tem seu lugar.
Perguntas Frequentes
O HyperFrames é pago?
Não. O HyperFrames é completamente open source e gratuito. Você instala via npx hyperframes init e renderiza localmente sem custo. O único requisito é ter Node.js 22+ e FFmpeg instalados na máquina.
O Remotion é gratuito? O Remotion é gratuito para indivíduos e empresas com até 3 funcionários, incluindo uso comercial. Para empresas com 4 ou mais funcionários, é necessário adquirir uma licença comercial. Os detalhes estão em remotion.pro/license.
Qual a diferença técnica principal entre HyperFrames e Remotion?
O Remotion usa React como linguagem de composição, renderizando componentes frame a frame via Puppeteer. O HyperFrames usa HTML puro com atributos data-* para definir a timeline, animado via GSAP. A saída final dos dois é MP4, mas a curva de aprendizado para agentes de IA é menor no HyperFrames porque HTML é mais prevalente nos dados de treinamento dos LLMs.
O HyperFrames suporta narração em voz? Sim. O framework suporta geração de narração TTS (text-to-speech) com diferentes vozes, sincronizada com as legendas e animações do vídeo. Você especifica o texto e o estilo de narração no prompt para o agente.
Posso usar os dois juntos? Sim. O Remotion e o HyperFrames resolvem casos diferentes. Remotion é mais indicado para composições complexas e parametrizadas com dados. O HyperFrames é mais indicado para conteúdo rápido de redes sociais gerado por agentes a partir de linguagem natural. Não há conflito em ter os dois nos agentes.