Escrever HTML para fazer vídeo: como o HyperFrames abre o motion graphics para quem nunca abriu o After Effects

O HyperFrames é um framework open source da HeyGen que converte HTML, CSS e animações em um MP4. Descubra como escrever uma página web e renderizá-la como vídeo, quem realmente se beneficia dessa democratização do motion graphics e onde estão seus limites.

Índice

O que é o HyperFrames, em uma frase
A parte que realmente importa: a democratização não é automática
Como funciona, na prática
Instalação
A trilha real para não programadores: os skills
Para que serve de verdade (e para que não)
Dicas para criadores de conteúdo
Dicas para editores
A conclusão desconfortável
Recursos

O que é o HyperFrames, em uma frase

É um framework open source da HeyGen que converte HTML, CSS e animações em um MP4. Seu slogan resume melhor do que qualquer explicação: "Write HTML. Render video. Built for agents."

Você escreve uma página web, adiciona alguns atributos que informam ao sistema quando cada elemento começa e quanto dura, executa um comando e sai um vídeo.

O importante não é a novidade técnica —o Remotion já fazia algo parecido com React há anos—. O importante é a quem a porta se abre. HTML e CSS são as linguagens mais ensinadas do planeta. E, mais relevante ainda: são as linguagens que os agentes de IA escrevem melhor do que qualquer outra.

A parte que realmente importa: a democratização não é automática

Quero parar aqui, porque é a armadilha em que caímos toda vez que aparece uma ferramenta assim.

Uma tecnologia ser acessível não significa que ela nos torna livres. Significa que nos dá a possibilidade de ser. A diferença está em se aprendemos a usar esse conhecimento ou se ficamos consumindo o resultado que a ferramenta produz por padrão.

Pense num caso conhecido. Quando as câmeras dos celulares ficaram boas, nem todos viramos fotógrafos. A maioria começou a tirar mais fotos medíocres, mais rápido. Quem realmente virou fotógrafo foram os que usaram o acesso barato ao disparo para aprender composição, luz e timing —coisas que a câmera nunca ia dar de presente.

Com o motion graphics gerado por agentes acontece exatamente o mesmo. O HyperFrames remove o obstáculo do software. Não remove o trabalho de saber o que você quer contar, quanto cada plano deve durar, quando um texto é texto demais e por que uma transição de três segundos mata a retenção de um anúncio de quinze.

A ferramenta democratiza a execução. O critério continua sendo seu, e continua sendo o que é escasso.

Como funciona, na prática

Uma composição do HyperFrames é um arquivo index.html. Só isso. Abre no navegador e você vê. Este é um exemplo tirado da documentação oficial:

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Launch day
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Se você vem da edição de vídeo, leia de novo e vai reconhecer tudo: data-track-index são suas pistas na timeline, data-start é onde o clipe começa, data-duration quanto dura. É uma linha do tempo escrita em texto plano em vez de arrastada com o mouse.

O motor abre esse HTML num Chrome sem interface, avança quadro a quadro capturando cada frame e entrega ao FFmpeg para montar o MP4. Como cada frame é gerado buscando uma posição exata no tempo — não reproduzindo em tempo real —, o resultado é determinado: o mesmo arquivo produz sempre o mesmo vídeo. Isso é o que permite automatizar renders sem sorpresas.

Instalação

Primeiro, dois requisitos: Node.js 22 ou superior e FFmpeg. Se ainda não os tiver, instale-os antes —Node do nodejs.org e FFmpeg do ffmpeg.org ou pelo gerenciador de pacotes do seu sistema (brew install ffmpeg no Mac, winget install ffmpeg no Windows).

Com isso pronto, o fluxo completo são três comandos:

# 1. Criar um projeto novo
npx hyperframes init meu-video
cd meu-video

# 2. Ver o resultado no navegador, com recarga ao vivo
npx hyperframes preview

# 3. Exportar para MP4
npx hyperframes render

Não é preciso instalar nada globalmente: o npx baixa e executa na hora. Se algo falhar na inicialização, npx hyperframes doctor verifica o ambiente e diz o que falta.

Para instalar os skills que ensinam seu agente de IA a usar o framework —o caminho recomendado se você não quiser escrever HTML na mão—:

npx skills add heygen-com/hyperframes --full-depth

Abre um seletor sem nada pré-selecionado; o grupo Core Skills é tudo o que você precisa, porque o roteador /hyperframes instala cada fluxo de trabalho quando você pedir. Não pule o --full-depth: sem essa flag, você baixa uma versão do registro que pode estar desatualizada por horas.

E para manter a instalação atualizada mais adiante:

npx hyperframes skills update

Por fim, para adicionar blocos prontos do catálogo a um projeto existente:

npx hyperframes add flash-through-white   # transição com shader
npx hyperframes add instagram-follow      # overlay social
npx hyperframes add data-chart            # gráfico animado

A trilha real para não programadores: os skills

Aqui está o ponto que torna isso interessante para criadores de conteúdo, e não apenas para desenvolvedores.

O HyperFrames publica vinte skills —pacotes de instruções— que ensinam um agente de IA (Claude Code, Cursor, Codex, Gemini CLI) a produzir vídeo com o framework. Você já os instalou no passo anterior, então daqui em diante seu contato não é escrever HTML: é descrever o vídeo.

Usando /hyperframes, crie um intro de produto de 10 segundos com um título que aparece com fade-in, um vídeo de fundo e música ambiente suave.

O agente planeja a estrutura, escreve o HTML, conecta as animações, adiciona o áudio, revisa erros e renderiza. Você revisa e corrige. É exatamente o modelo de trabalho de um diretor com um editor: você decide, outro executa, e a qualidade final depende de quão preciso você é ao pedir e de quão bom é julgando o resultado.

Vale conhecer os skills pelo nome, porque eles são basicamente um menu de formatos:

/hyperframes — o roteador. Leia-o primeiro sempre; identifica que tipo de peça você quer e chama o fluxo de trabalho certo.
/product-launch-video — promos de produto ou site, até ~3 minutos (o ponto ideal são 30-90 segundos).
/faceless-explainer — explicar um conceito sem câmera nem produto, com visuais gerados do zero.
/motion-graphics — peças curtas sem locução, abaixo de 10 segundos: tipografia cinética, um dado animado, um logo sting, um lower-third. Exporta MP4 ou overlay transparente.
/embedded-captions — legendas desenhadas sobre um vídeo de câmera já existente.
/talking-head-recut — empacotar uma entrevista ou podcast com lower-thirds, callouts de dados, pull-quotes e PiP.
/music-to-video — vídeo sincronizado ao beat de uma faixa de áudio.
/slideshow — apresentações navegáveis com reveals e navegação, não vídeo renderizado.
/general-video — tudo o resto: peças longas, multi-cena, sizzle reels.

E há um skill que provavelmente é o mais útil para um criador: /media-use. Ele resolve a busca por música de fundo, efeitos sonoros, imagens, ícones, logos e vozes, baixa os arquivos localmente e mantém um registro de onde você usou cada coisa. É a parte entediante da produção, automatizada.

Para que serve de verdade (e para que não)

Onde o HyperFrames rende:

Anúncios em volume. Se você precisa tirar a mesma peça em 9:16, 1:1 e 16:9, com três copies diferentes e duas ofertas, isso é uma mudança de categoria. A composição é um arquivo de texto: você muda variáveis e renderiza vinte versões. Nenhum editor manual concorre com isso.

Conteúdo recorrente e com dados. O resumo semanal de métricas, o vídeo do ranking do mês, a infografia animada que se atualiza. Se o formato é fixo e só mudam os números, automatiza uma vez e roda sozinho.

Assets de apoio. Lower-thirds, transições, contadores animados, tickers, overlays com fundo transparente para colocar no seu editor de sempre. Não substitui sua edição: alimenta-a.

Redes sociais com legendas desenhadas. Legendas que ficam bonitas, não as que o algoritmo da plataforma gera.

Onde não vale a pena forçar:

Peças de autor em que o valor está num tratamento visual único e não repetível.
Animação de personagens, rigging, qualquer coisa que precise de 3D sério de verdade.
Projetos em que a iteração é exploratória e ver o resultado na hora importa mais que a reprodutibilidade.

A licença é Apache 2.0, sem cobrança por render nem limites comerciais. Isso importa: você pode usar em trabalho de cliente sem pensar duas vezes.

Dicas para criadores de conteúdo

Escreva a duração antes de tudo. O erro número um ao pedir vídeo a um agente é não fixar os tempos. "Um intro curto" produz qualquer coisa. "8 segundos: 0-2 logo, 2-6 título, 6-8 CTA" produz o que você queria. Pense em segundos, não em descrições.

Uma mensagem por cena, sem exceções. O HTML deixa você colocar seis elementos animados na mesma tela. Não faça isso. A restrição que antes era imposta pelo esforço de animar, agora você precisa se impor.

Desenhe sem áudio primeiro. Boa parte do seu público vai assistir a peça no mudo. Se o vídeo não comunica no mudo, não funciona. A música é o reforço, não o suporte.

Guarde seu frame.md. O HyperFrames usa um arquivo de sistema de design — cores, tipografias, escalas, regras — que o agente lê antes de compor. Escreva uma vez com a sua identidade de marca e todas as suas peças sairão consistentes sem você pedir toda vez. É a diferença entre ter uma marca e ter vídeos soltos.

Construa uma biblioteca, não peças soltas. Cada composição que funcionar, guarde como modelo. Em três meses você terá um catálogo próprio e seu tempo de produção vai despencar. É aí que isso se torna lucrativo de verdade.

Nunca publique o primeiro render. Nunca. Veja três vezes: uma por timing, uma por legibilidade, uma no celular. O agente não tem critério; você tem.

Dicas para editores

Comece pelos assets, não pelo projeto completo. O caminho de entrada mais suave é usar o HyperFrames para produzir overlays com canal alfa e a partir deles no Premiere, Resolve ou Final Cut. Você ganha velocidade sem mudar seu fluxo.

Aprenda só três atributos. data-start, data-duration, data-track-index. Com isso você já sabe ler e corrigir qualquer composição que um agente entrega. Você não precisa saber programar; precisa saber editar uma timeline, o que você já sabe.

Trate as versões como versões. O projeto é texto plano, então o Git funciona. Você pode ver exatamente o que mudou entre o corte 1 e o corte 2, linha por linha, e voltar sem medo. Isso é algo que seu editor de vídeo não dá.

O determinismo é sua rede de segurança. Um arquivo de projeto sempre produz o mesmo vídeo. Se algo der errado na entrega, você pode reproduzir o problema exato. Acabou o "na minha máquina funcionava".

Aproveite o catálogo antes de construir do zero. Há blocos prontos para transições, gráficos animados, overlays sociais e legendas, todos instaláveis com npx hyperframes add. Comece por aí e modifique; não comece com a página em branco.

A conclusão desconfortável

O HyperFrames não te transforma em motion designer. Destrói a sua desculpa de não ser.

E essa distinção é toda a história da democratização tecnológica. O WordPress não fez escritores; deixou qualquer um publicar, e quem já tinha algo a dizer encontrou audiência. As DAWs não fizeram músicos; abriram o estúdio, e quem tinha o ouvido musical acabou gravando discos no quarto.

Ferramentas como esta reduzem o custo de tentar a praticamente zero. O que fica do outro lado —o critério, o gosto, saber o que contar e quando calar— não se instala com npx. Continua custando o mesmo de sempre: tempo, atenção e a disciplina de olhar o seu próprio trabalho com honestidade.

A liberdade não vem com a ferramenta. Vem de aprender a usá-la.