O que é (e o que não é)
HyperFrames é um renderizador, não um gerador. Ele não imagina pixels — ele executa os seus.
O HyperFrames pega uma página HTML — com CSS, mídia e animações — e a transforma em um arquivo de vídeo. Você escreve a composição como escreve uma página web; ele devolve um MP4 quadro a quadro, sempre idêntico para o mesmo input.
Renderizador determinístico
Mesmo HTML, mesmo vídeo, sempre. Feito para CI, testes de regressão e pipelines automatizados.
Feito para agentes
19 skills ensinam o Claude Code (e outros agentes) a produzir vídeo com padrões corretos.
Gerador de IA
Ele não cria imagens nem cenas. Quem gera é a KAIROGEN, o Magnific ou o Kling — o HyperFrames monta e finaliza.
“Write HTML. Render video. Built for agents.” — se você sabe descrever uma tela em HTML, você sabe descrever um vídeo.
Por que isso importa para quem faz criativo
O Volume 05 desta Biblioteca manda repetidamente: aplique copy, logo e CTA fora do gerador quando a precisão tipográfica for essencial. Este volume responde: fora do gerador, onde?
Modelos de imagem e vídeo corrompem texto. Rótulo, headline, legenda e CTA gerados dentro do modelo saem com letras derretidas — por isso a esteira do Volume 05 reserva a Fase C (acabamento) para ferramenta de design. O HyperFrames é essa ferramenta em versão programática: a tipografia é HTML real, renderizada pelo navegador, pixel-perfect por definição.
Acabamento manual
Cada legenda, CTA e versão de formato passa por um editor de vídeo ou design, peça por peça.
Acabamento em código
Um template HTML recebe o keyframe aprovado, a copy e o áudio — e rende as variações em lote, sem drift.
O mesmo princípio do manifesto de produção do Volume 05: se o input é versionado e o output é determinístico, cada criativo publicado tem genealogia completa. Um vídeo que “saiu diferente” é um bug, não um mistério.
Como funciona por dentro
Sem mágica: um navegador sem janela e um codificador de vídeo, coordenados frame a frame.
O renderizador abre a composição em Chrome headless, posiciona o relógio da cena em cada frame (em vez de deixar o tempo correr), captura o quadro e entrega a sequência ao FFmpeg, que codifica vídeo e mixa o áudio. Como cada frame é buscado e não filmado, não existe variação entre execuções — nem frame perdido por máquina lenta.
A composição é um index.html que abre direto no navegador. Nada de bundler: o que você vê no preview é o que o renderizador captura.
Instalação e primeiro vídeo
Dois pré-requisitos, três comandos.
Pré-requisitos
Fluxo manual com o CLI
npx hyperframes init meu-video
cd meu-video
npx hyperframes preview # preview no navegador, com live reload
npx hyperframes render # renderiza para MP4Cria o projeto com a estrutura de composição pronta.
Abre no navegador com live reload — você edita o HTML e vê o vídeo se montar.
Gera o MP4 local. O mesmo comando roda em CI ou Docker.
O CLI completo cobre ainda lint, check, snapshot, publish e doctor — o ciclo de desenvolvimento inteiro sem sair do terminal.
Anatomia de uma composição
Exemplo oficial do repositório: vídeo de fundo, título animado e trilha, tudo em um único arquivo HTML.
<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>data-start / data-duration
Cada elemento declara quando entra e quanto dura, em segundos. O contrato de tempo é atributo, não script.
data-track-index
Trilhas empilham vídeo, texto e áudio como em um editor — mas versionáveis em git.
window.__timelines
A timeline GSAP fica pausada e registrada; o renderizador a posiciona frame a frame (seek), garantindo o determinismo.
Composições aceitam variáveis (data-composition-variables): o mesmo bundle produz variações de headline, cor ou formato — exatamente a lógica da matriz de criativos do Volume 05, agora na camada de vídeo.
Animação e runtimes
O framework não impõe uma biblioteca de animação. Ele impõe uma regra: a animação precisa ser 'seekable'.
Adapters conectam os runtimes mais usados: GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI — ou um adapter próprio. A exigência é uma só: o renderizador precisa conseguir perguntar “como a cena está no segundo 2,4?” e receber sempre a mesma resposta.
| Runtime | Melhor para |
|---|---|
| GSAP | Timelines de motion design: entradas, saídas, sequências coordenadas. |
| CSS / WAAPI | Transições simples e keyframes declarativos, sem dependência externa. |
| Lottie | Animações vetoriais exportadas do After Effects. |
| Three.js | Cenas 3D, produtos girando, profundidade. |
| Anime.js | Micro-interações e animação de SVG. |
Código que anima com setInterval ou depende do tempo real quebra o determinismo. Use os adapters — é para isso que existem.
Skills: o Claude Code aprende a editar vídeo
A parte mais interessante para quem leu o Volume 05: o HyperFrames foi desenhado para ser operado por agentes.
O projeto publica 19 skills que ensinam agentes de código (Claude Code, Cursor, Gemini CLI, Codex) a produzir vídeo: planejar, escrever o HTML válido, ligar animações seekable, adicionar mídia, lintar, previewar e renderizar. O ponto de entrada é o router /hyperframes, que escolhe o workflow certo para cada pedido.
# instalação interativa (abre um seletor; o grupo Core Skills basta)
npx skills add heygen-com/hyperframes --full-depth
# em agentes e execuções não interativas, prefira:
npx hyperframes skills updateWorkflows de criação (seleção)
| Skill | Quando usar |
|---|---|
/product-launch-video | Vídeo de lançamento ou tour de um site/produto a partir da URL ou de um roteiro (30–90s). |
/embedded-captions | Adicionar legendas a um vídeo de fala existente, sem tocar na filmagem. |
/talking-head-recut | Empacotar entrevista/podcast com lower-thirds, títulos cinéticos e destaques. |
/motion-graphics | Peça curta e sem narração: tipografia cinética, logo sting, stat animado (<10s). |
/music-to-video | Vídeo sincronizado ao ritmo de uma trilha — lyric video, promo cinético. |
/faceless-explainer | Explicar um conceito a partir de texto, com visual 100% construído (diagramas, dataviz). |
/general-video | Qualquer outra coisa — multi-cena, brand reel, composição livre. |
Um prompt de exemplo, no contexto de anúncios
Usando /hyperframes, crie um vídeo vertical 9:16 de 8 segundos para Reels:
- fundo: o keyframe aprovado da campanha (aprovado-01.png);
- headline "O erro não é esquecer a água." entrando aos 0,5s, tipografia da marca;
- legenda queimada sincronizada com a narração (narracao.mp3);
- CTA "Arrasta pra cima" nos 2 segundos finais, dentro da safe area;
- exporte também uma versão sem áudio.Claude dirige, a ferramenta executa. Lá, via MCP e créditos de geração. Aqui, via skills e renderização local — sem custo por render.
Catálogo e frame.md
Mais de 150 blocos prontos e uma ideia elegante: o design system da sua marca, traduzido para a câmera.
Blocos instaláveis
Transições, overlays sociais, legendas, gráficos, mapas e efeitos entram na composição com um comando:
npx hyperframes add flash-through-white # transição com shader
npx hyperframes add instagram-follow # overlay social
npx hyperframes add data-chart # gráfico animadoframe.md
Todo mundo tem um design.md — escrito para telas, não para vídeo. O frame.md é a camada de tradução: os mesmos tokens e regras da marca, reescritos para o enquadramento, a escala e o tempo de um vídeo, de forma que um agente componha um promo sem chutar tamanho de fonte nem herdar aparência de página web.
É o análogo em vídeo do “genoma criativo” do Volume 05: intenção guardada em estrutura. Paleta, tipografia e proibições da marca viram um arquivo que qualquer agente lê antes de compor.
O encaixe na esteira de criativos
Onde este volume conversa com o Volume 05: o HyperFrames assume a Fase C — acabamento — da esteira de Direct Response.
Queimadas e exatas
A versão sem som que a esteira exige, com legenda tipograficamente perfeita — /embedded-captions.
1:1, 4:5, 9:16 em lote
Um template, três composições com variáveis — sem recriar peça por peça no editor.
Texto que não derrete
Headline e CTA em HTML real sobre o keyframe aprovado. O modelo nunca toca na tipografia.
A geração continua nos modelos (Volume 05) e o julgamento continua humano. O HyperFrames elimina a repetição do acabamento — não a direção criativa, não o QA, não o teste de mídia.
HyperFrames vs. Remotion
O HyperFrames é inspirado no Remotion — ambos renderizam com Chrome headless e FFmpeg. A diferença é a aposta de autoria.
| Critério | HyperFrames | Remotion |
|---|---|---|
| Autoria | HTML + CSS + animação seekable | Componentes React |
| Build | Nenhum; index.html abre direto | Bundler obrigatório |
| Handoff para agentes | Arquivos HTML puros | Projeto JSX/React |
| Renderização distribuída | Local e AWS Lambda | Remotion Lambda, mais maduro |
| Licença | Apache 2.0, sem taxa por render | Remotion License (source-available) |
Leitura prática: se a sua equipe já vive em React, o Remotion é maduro e conhecido. Se quem escreve os vídeos é um agente — ou alguém que pensa em HTML —, o HyperFrames remove o atrito do build e da licença. Existe até uma skill de migração, /remotion-to-hyperframes, para portar composições existentes.
Renderização em escala e custos
Local de graça, Lambda para volume, nuvem da HeyGen para quem não quer infraestrutura.
Custo zero
Apache 2.0, sem taxa por render e sem limite de uso comercial. Roda no seu terminal ou no CI.
Escala própria
Deploy de uma stack distribuída de renderização, dirigida do laptop ou do pipeline (lambda deploy / render / progress).
Sem infraestrutura
Upload do bundle e cobrança por minuto de vídeo renderizado. Confirme o preço vigente na plataforma antes de lotes.
Lá, cada geração consome créditos e exige estimativa prévia. Aqui, a renderização local é gratuita — o custo do HyperFrames é tempo de máquina e aprendizado, não saldo. É o par perfeito: explore pagando barato nos modelos, finalize de graça no renderizador.
Checklist do primeiro projeto
Doze verificações antes de considerar o HyperFrames incorporado ao seu fluxo.
npx hyperframes init executado e preview abrindo no navegador./hyperframes respondendo.Fontes e data de corte
Conteúdo validado em 4 de agosto de 2026 contra o repositório e a documentação oficial. Projeto em evolução ativa — confirme comandos antes de uso em produção.