Remotion vs HyperFrames: o mesmo reel em cinco estilos

Comentou CONTEÚDO? Aqui está a diferença entre as duas edições do mesmo take, mais os cinco estilos de nicho, agora numa skill só e grátis no GitHub: o bolo de camadas. Eu gravei a fala. O Claude Code, um agente que escreve código, fez layouts, legendas, gráficos e marcações de efeitos no Remotion. Não foi “um clique”: dei direção, revisei o resultado e renderizei. A troca de roupa no estalar de dedos foi gerada à parte com Seedance 2.5 video-edit via API paga da Higgsfield. Não é recurso grátis do Remotion nem do HyperFrames.

O que são

Remotion monta vídeos com componentes React. A cada quadro, código calcula o que aparece, a posição e o movimento. HyperFrames, da HeyGen, monta vídeo com HTML e CSS e uma linha do tempo GSAP; se apresenta como “built for agents”. Nos dois casos, o agente escreve e ajusta esses arquivos, você entrega o take, confere as palavras, vê a prévia e aprova o MP4. Nenhum entende seu gosto sem briefing.

Em 06/10/2026, Remotion tinha 62.096 estrelas no GitHub e npm 4.0.533 (meu reel foi feito em 4.0.523); HyperFrames tinha 57.507 estrelas, npm 0.8.137. Estrelas são retrato daquele dia, não critério de qualidade.

A diferença no meu reel

Mesmo take e corte, faixas de voz, cinco trechos de nicho, legendas e efeitos. Comparação prática de 06/10/2026:

Minha opinião: escolheria Remotion se preciso acompanhar o rosto por quadro e já trabalho com React. Para testar layouts rápidos em HTML com verificações automáticas, HyperFrames é atraente. Neste reel, o check achou um erro que meu fluxo de Remotion não detectava sozinho. Nenhum elimina a revisão humana.

Teste pequeno: Remotion

1. Instale Node.js, depois crie uma pasta nova com o instalador oficial. Escolha o template vazio TypeScript quando o assistente perguntar (o menu pode mudar). Execute os comandos separadamente:

npx create-video@latest

2. Entre na pasta criada pelo assistente e instale as dependências se ele ainda não as instalou. Ajuste no projeto a composição de exemplo para width={1080}, height={1920}, fps={30} e durationInFrames={300}: isso gera 10 segundos verticais. O nome da composição no template vazio testado foi MyComp; confirme no src/Composition.tsx antes de renderizar.

cd NOME_DA_PASTA && npm install

npx remotion compositions src/index.ts

npx remotion render src/index.ts MyComp teste-10s.mp4 --codec h264 --concurrency 2

Teste pequeno: HyperFrames

1. Instale Node.js 22+ e FFmpeg. Em uma pasta limpa, crie o projeto portrait com o comando oficial. O init escreve guias do agente na nova pasta; leia-os antes de pedir alterações.

npx hyperframes@0.8.137 init meu-video --resolution portrait

cd meu-video

2. No index.html criado pelo instalador, faça a cena de teste durar 10 s (data-duration="10"), com vídeo em 1080×1920; confira data-width="1080", data-height="1920" e data-duration="10" no HTML e os 30 fps no arquivo final com ffprobe. Use a prévia, verifique e renderize. check detecta também problemas de layout/contraste em quadros amostrados.

npm run check

DO_NOT_TRACK=1 npm run render -- --output teste-10s.mp4

Ambos os arquivos de teste foram renderizados e conferidos com ffprobe. Estes são projetos de prova; o vídeo completo exige take e tempo das palavras. Se estiver no Windows, instale FFmpeg e use set DO_NOT_TRACK=1 no cmd em vez do prefixo de shell acima.

Seu take com Claude Code: exemplos de pedido, não testados no app

Instale a skill bolo de camadas (abaixo) e coloque seu take e uma transcrição com tempos no projeto. Garanta direitos sobre imagens, música e pessoas. No diretório Remotion, abra Claude Code e cole:

Use a skill bolo-de-camadas no estilo corretor e leia os arquivos deste projeto Remotion. Use meu take gravado e a transcrição com tempos para editar um vídeo vertical 1080x1920. Sincronize as legendas palavra a palavra e os gráficos com as falas. Mantenha meu rosto e legendas nas áreas seguras da skill. Não invente imagens nem dados do imóvel. Mostre uma prévia, rode checagens e renderize MP4 só depois de minha revisão.

No projeto HyperFrames, siga o CLAUDE.md gerado pelo init e cole:

Leia AGENTS.md e CLAUDE.md deste projeto HyperFrames e use a skill bolo-de-camadas no estilo corretor. Use meu take e a transcrição com tempos. Faça 1080x1920, legendas sincronizadas e gráficos do imóvel apenas com arquivos autorizados. Respeite as áreas seguras, execute lint e check, gere snapshots de revisão e só então renderize MP4. Não invente dados nem troque minha roupa automaticamente.

Troque corretor por personal, ingles, chef ou financas. Se você não disser o estilo, a skill pergunta; para outra profissão, ela monta um estilo novo com você.

As cinco skills, agora numa só: bolo de camadas

Em 14/10/2026 os cinco estilos viraram uma skill só, aberta no GitHub: pcauhi/bolo-de-camadas (licença MIT, versão 1.0.0). Quando você usa, o Claude pergunta o nicho: corretor, personal, inglês, chef ou finanças, ou cria o estilo da sua profissão. Cada estilo traz cores, fontes, fundo, locutor, gráficos por fala, legenda, os efeitos novos (texto que se mexe, uma forma virando outra, câmera em movimento, 3D) e as áreas seguras. Funciona com Remotion e HyperFrames. Não inclui código de edição nem o estilo pessoal do Paulo.

No Claude Code, instale com:

git clone https://github.com/pcauhi/bolo-de-camadas ~/.claude/skills/bolo-de-camadas

No claude.ai, baixe o ZIP abaixo e envie em Configurações → Capacidades → Skills (para renderizar o vídeo você precisa do Claude Code no computador).

Abrir a skill no GitHubBaixar o ZIP (claude.ai)

Dúvidas rápidas

Preciso programar? Não precisa escrever React ou GSAP à mão se usar um agente, mas precisa de computador, instalação, arquivos, direção e revisão dos erros do agente. Não é edição automática pelo celular.

Custa? Em 06/10/2026, a licença do Remotion diz: “individual”, “for-profit organization with up to 3 employees” e “non-profit or not-for-profit organization” podem usar a Free License; organizações com fins lucrativos fora desses grupos exigem Company License. HyperFrames é Apache-2.0. Claude Code/modelos podem cobrar. A roupa gerada com Higgsfield Seedance 2.5 video-edit usou API paga, cobrada pelo tempo de entrada e saída; preço muda, confira no painel antes de usar.

Serve take de celular? Sim, grave vídeo e áudio claros, forneça arquivo e transcrição. Garanta direitos de tudo no vídeo e confira o recorte do rosto.

Quanto demora? O meu render HyperFrames de 115,7 s levou 3 min 52 s naquele Mac, em 06/10/2026. Remotion não foi cronometrado para esse reel. Tempo varia com hardware, efeitos, fontes e mídia; faça um teste de 10 s antes de estimar o seu.

Fontes e limites desta comparação. Conferido em 06/10/2026.