AI

Como Gerar Vídeos com Claude Code: O Pipeline Completo de HyperFrames e Archon

O Claude Code agora gera vídeos completos com animação, áudio sincronizado e transições usando HyperFrames e Archon — um pipeline open-source que você sobe em menos de 10 minutos.

DEV-Júnior28 de mai. de 20268 min de leitura
Pipeline de geração de vídeos com IA usando Claude Code, HyperFrames e Archon

Se você me perguntasse há três meses se LLMs conseguiam gerar vídeos completos com animação e áudio do início ao fim, eu responderia "ainda não". Era teoricamente possível, mas o resultado era ruim — áudio descolado do visual, animação robótica, zero fluidez. Isso mudou. E mudou rápido. O que vou mostrar aqui é um pipeline open-source que usa Claude Code como diretor de vídeo, renderizando cenas em HTML, gerando áudio via IA e costurando tudo com transições suaves — o resultado é um YouTube Short pronto em menos de 10 minutos.

O que mudou: vídeos com IA agora funcionam de verdade

Não é exagero. Há seis meses, as tentativas de gerar vídeo com IA eram experimentos acadêmicos — saída trêmula, vozes robóticas, cortes aleatórios. Hoje, o ecossistema evoluiu para um pipeline industrial: script, áudio, composição visual e renderização rodam em sequência orquestrada, com o Claude Code como maestro.

O criador desse pipeline é Cole Medin, o mesmo desenvolvedor por trás do Archon — um harness de IA que gerencia agentes com worktrees isolados e execução paralela. O ponto central aqui é que o repositório é open-source, o setup é literalmente uma frase em português dentro do terminal, e o custo para rodar pode ser zero se você escolher as ferramentas certas.

O stack técnico: quatro peças que se encaixam perfeitamente

O pipeline não é um monólito — são quatro componentes independentes, cada um com responsabilidade clara:

HyperFrames é o motor de renderização. Ele transforma HTML e CSS em cenas animadas — sem shader, sem OpenGL, sem curva de aprendizado de editor de vídeo. Cada cena do vídeo é literalmente uma página HTML que o HyperFrames renderiza como quadro. Isso significa que qualquer dev front-end já sabe editar vídeo nesse sistema. É o que a Remotion tentou fazer, mas, na minha visão, com uma superfície de API mais limpa e melhor integração com agentes.

Claude Code atua como diretor criativo e engenheiro de produção. Ele lê o README do repositório, entende os templates disponíveis, faz pesquisa web sobre o tópico (com um gate anti-fabricação que valida cada afirmação), escreve o script otimizado para TTS, gera o HTML das cenas e coordena a renderização final. O modelo não está só gerando texto — está operando ferramentas reais em sequência.

Archon é o harness que gerencia o workflow. Ele cria IDs únicos por execução, isola os assets em pastas dedicadas, coordena a execução paralela de múltiplos vídeos e persiste o estado de cada run em PostgreSQL (Neon). Sem ele, o pipeline seria frágil — qualquer falha no meio do caminho perderia tudo. Com ele, cada vídeo tem seu estado rastreável e pode ser retomado.

ElevenLabs (ou Kokoro) fecha o ciclo com a geração de voz. O script já sai do Claude Code com tags de pausa, abreviações naturais e marcações de entonação pensadas para TTS — não é texto cru jogado no sintetizador. O áudio é gerado em uma chamada única e serve como linha do tempo para sincronizar as cenas: a duração de cada fala determina o ritmo das transições.

O pipeline completo: da ideia ao MP4 em 7 etapas

O fluxo é mais sofisticado do que parece. Não é "prompt → vídeo" — são sete etapas com validação em cada ponto:

(1) Isolamento: o Archon cria um ID único para o vídeo e copia o template escolhido para uma pasta isolada. Tudo que acontecer nessa execução fica contido ali — assets, áudio, HTML, output final. Nada vaza entre execuções.

(2) Pesquisa: o Claude Code faz web research sobre o tópico e passa por um gate anti-fabricação. Cada afirmação do script precisa ter lastro em algo que foi encontrado — nada de alucinação vestida de fato.

(3) Script otimizado para TTS: o texto não é prosa pura. O modelo injeta tags de pausa, abreviações fonéticas e quebras naturais que fazem o sintetizador soar menos robótico. Isso é prompt engineering aplicado a áudio — um detalhe que separa o resultado amador do convincente.

(4) Geração de áudio: uma chamada única à API do ElevenLabs (ou Kokoro, se quiser manter custo zero) processa o script inteiro e retorna o áudio. A duração de cada segmento serve como batuta para o passo seguinte.

(5) Sincronização e composição HTML: com o áudio em mãos, o Claude Code decide o pacing de cada cena e gera o HTML correspondente via HyperFrames. Cada slide é um bloco de marcação que o motor renderiza como quadro — texto, gradientes, transições, sound effects. O modelo também faz linting visual: verifica overflow de texto, elementos fora do container, cortes estranhos.

(6) Preview e iteração: aqui está a parte mais inteligente do fluxo. O HyperFrames tem um modo preview embutido — uma página local onde você assiste ao vídeo com áudio, vê a timeline completa e pode pedir ajustes pontuais ao Claude Code sem re-renderizar tudo. "A transição no segundo 12 está brusca", "a voz tem inflexão estranha no final" — o modelo ajusta só o trecho afetado.

(7) Renderização final: quando tudo está aprovado no preview, o Claude Code dispara a renderização do MP4 final. O arquivo sai com áudio, animações e transições costuradas — pronto para upload no YouTube Shorts, TikTok ou Reels.

Templates customizados: o verdadeiro diferencial

O repositório já vem com três templates prontos — um para shorts estilo anúncio (25-30 segundos), um para explicadores técnicos (50 segundos) e um genérico que serve de ponto de partida. Mas o pulo do gato é a customização: você pede para o Claude Code criar um template novo e ele conduz uma entrevista estruturada.

O modelo pergunta: qual template existente mais se aproxima do que você quer? Qual o estilo visual (clean, agressivo, corporativo, educacional)? Quer diagramas? Painéis de comparação? Qual a duração ideal? Com as respostas, ele gera um playbook completo — o arquivo que dita quantas cenas, qual pacing, que tipo de transição e como o áudio será distribuído. Depois disso, qualquer vídeo que você pedir dentro do projeto usará esse template automaticamente.

Na prática, isso significa que você não está preso ao estilo do criador. Seu canal, sua identidade visual, seu pacing — tudo parametrizável em uma conversa de cinco minutos com o agente.

Por que isso importa para devs

Três razões concretas para prestar atenção nisso agora:

(1) Explicadores técnicos em escala. Todo dev já perdeu horas explicando o mesmo conceito em reuniões diferentes. Com esse pipeline, você gera um vídeo de 30 segundos sobre "como funciona o RAG" ou "o que é MCP" uma vez e distribui para o time inteiro. O custo de produzir esse vídeo caiu de dias (contratar editor, gravar, cortar) para zero.

(2) A barreira técnica é HTML. O HyperFrames renderiza cenas a partir de marcação pura — se você sabe HTML e CSS, você sabe editar o vídeo. Não precisa aprender After Effects, não precisa de editor, não precisa de motion designer. O Claude Code gera o HTML inicial, você ajusta o que quiser no preview, e o motor cuida do resto.

(3) Execução paralela com Archon. O harness gerencia múltiplos vídeos sendo gerados ao mesmo tempo, cada um em seu diretório isolado, com estado persistido em PostgreSQL. Se você tem um canal no YouTube ou uma estratégia de conteúdo para redes sociais, pode disparar cinco vídeos de uma vez e colher os MP4s conforme ficam prontos.

Conclusão

Vídeos gerados por IA não são mais um experimento de laboratório — são um pipeline industrial que você sobe em 10 minutos com um comando no terminal. O resultado ainda não é Pixar, mas já é bom o suficiente para explicadores, shorts e conteúdo técnico. E o fato de ser open-source e gratuito (com Kokoro) remove a última desculpa para não testar.

O pipeline completo e o passo a passo detalhado estão no vídeo do Cole Medin que inspirou este artigo. Se você quer ir direto ao código, o repositório está no GitHub do Archon — clone, abra o Claude Code e diga "read the readme, set up everything so I can generate my first video". O agente faz o resto.

Comentários

Nenhum comentário ainda. Seja o primeiro a compartilhar suas ideias.

Deixe um Comentário

0/2000