Eu queria um vídeo de apresentação para o portfólio. Não queria um template de editor de vídeo, nem uma música de banco de áudio que outros mil vídeos também usam. Queria algo com a mesma linguagem visual do site: grade de planta técnica, desenho isométrico, laranja sobre fundo escuro.
O resultado são 48 segundos, a 60 quadros por segundo, com trilha sonora original, em versão horizontal e vertical. Nenhuma ferramenta de edição de vídeo foi aberta. Tudo, da música ao último quadro, saiu de código escrito em conversa com o Claude Opus 5.5, rodando no Claude Code.
O filme final, em 16:9. Tem som: a trilha também foi gerada em código.
Este texto explica como foi feito, o que deu errado no caminho e o que ficou comigo e o que ficou com a IA.
A primeira versão, e por que ela foi descartada
A primeira tentativa foi rápida: uma página HTML animada, gravada em tempo real pela tela de um navegador automatizado. Funcionou, mas tinha três problemas:
- Não tinha som. E adicionar uma música depois deixaria os cortes fora do ritmo.
- A gravação em tempo real trava. Se o computador engasga por um instante, o vídeo perde quadros.
- Tinha texto em português por toda parte. O vídeo só funcionava para quem lê português.
Em vez de remendar, reescrevemos o roteiro do zero com três regras.
As três regras que definiram o filme
1. Nenhuma palavra para traduzir. Só podem aparecer o nome da marca, o endereço do site, números, códigos técnicos universais e logos. "Uma pessoa, três idiomas, zero reuniões obrigatórias" virou um ícone de pessoa, três bandeiras desenhadas e um calendário riscado. O vídeo funciona em qualquer país.
2. Uma partitura, duas saídas. Um único arquivo define o andamento (120 batidas por minuto), os 24 compassos, onde cada instrumento toca, os acordes, os impactos e o silêncio antes do clímax. O sintetizador de áudio e o motor visual leem esse mesmo arquivo. É isso que garante que cada corte caia exatamente na batida.
3. Renderização quadro a quadro. Em vez de gravar a tela, a página expõe uma função que recebe um instante, por exemplo 12,35 segundos, e desenha exatamente aquele quadro. Um script chama essa função 2.880 vezes, uma para cada quadro, e entrega as imagens ao FFmpeg junto com a trilha. Não existe engasgo possível: cada quadro é calculado, não capturado.
A trilha: música composta em código
A trilha está em lá menor, com a progressão Lá menor, Fá, Dó e Sol, um acorde por compasso. Não usa nenhuma biblioteca de áudio: cada instrumento é matemática aplicada a uma lista de números.
- Bumbo: uma onda senoidal cuja frequência despenca em poucos milissegundos, com leve saturação.
- Chimbal: ruído branco filtrado para deixar só os agudos, com decaimento curtíssimo.
- Baixo e pad: ondas simples e ondas dente de serra levemente desafinadas entre si, com filtro para suavizar. O volume "respira" depois de cada bumbo, a técnica chamada sidechain.
- Arpejo: notas do acorde em semicolcheias, com eco que alterna entre os lados esquerdo e direito.
- Riser e impactos: ruído com filtro subindo até o clímax e um grave profundo com cauda longa.
- Reverb: um reverb clássico de Schroeder, a mesma técnica descrita em 1962 que está na base de muitos efeitos até hoje.
Um ponto importante sobre honestidade: a IA não consegue ouvir. Para verificar a música, geramos a forma de onda e o espectrograma e conferimos se a estrutura batia com a partitura: pulsos na introdução, riser, impacto aos 8 segundos, breakdown, o buraco de silêncio e a cauda final. Os níveis foram medidos em decibéis. Quem ouviu de verdade fui eu.
Forma de onda (em cima) e espectrograma da trilha: dá para ver a introdução, o impacto, o breakdown e o silêncio antes do clímax.
A imagem: camadas, como num filme de verdade
Cada quadro é a soma de cinco camadas, e cada uma responde à música:
- Fundo: uma grade dupla com efeito de profundidade, uma linha de "scanner" que varre a tela a cada quatro compassos e partículas de poeira de luz empurradas pelos impactos.
- Cena: o desenho principal, em projeção isométrica, a mesma do topo do meu site.
- Logos: as ferramentas e as IAs que aparecem em cena.
- Acabamento: grão de filme, vinheta e um flash laranja de um único quadro em cada corte.
- HUD: réguas nas bordas que funcionam como metrônomo visual, coordenadas mudando e um contador de tempo que termina em
DEPLOY ✓.
A grade dobra em perspectiva isométrica e as camadas caem, uma por batida.
Os seis serviços viraram seis ícones isométricos, e todos seguem a mesma coreografia em três tempos. Primeiro o traço se desenha, com uma "caneta" laranja na ponta. Depois as faces ganham hachura técnica. Por fim, cada ícone faz sua própria ação: os LEDs do servidor piscam no ritmo do chimbal, os pulsos da rede neural seguem as notas do arpejo, as engrenagens da automação giram engrenadas. Ao redor, cotas técnicas abrem e fecham como numa planta de engenharia.
O ícone de sistemas: hachura, LEDs acesos no ritmo da música e cotas técnicas.
Para as curvas de movimento usamos o Motion, uma biblioteca de animação para a web. Como cada quadro é calculado a partir do tempo, o Motion entra só com as funções de aceleração e interpolação, não com animações rodando sozinhas.
Os seis serviços conectados num único mapa.
Renderização e entrega
Cada formato tem 2.880 quadros e levou cerca de seis minutos para renderizar, com as duas versões rodando em paralelo. O arquivo saiu com quase 400 MB, porque o grão animado dificulta a compressão, e foi reduzido para 86 MB sem perda visível, o suficiente para subir no Instagram.
A versão vertical usa o mesmo código, com outro enquadramento: nada importante no topo e na base, onde ficam os botões do Instagram, e os números empilhados em vez de lado a lado.
A versão vertical, para Reels.
O que deu errado
Nem tudo saiu de primeira, e os erros são a parte mais útil para quem quer tentar algo parecido:
- Uma animação que "não acontecia". A biblioteca aplicava a opacidade como atributo do desenho, e uma regra de estilo tinha prioridade sobre ele. Os rótulos existiam, mas ficavam invisíveis.
- Um desenho que saía do quadro. Girar um elemento apagava a instrução que o centralizava.
- A fonte errada nos títulos. Uma regra de estilo genérica sobrescrevia a fonte definida em cada texto.
- Um caractere que quebrava o código. Um trecho com
$$virava$numa substituição de texto, e os seletores paravam de funcionar.
Todos foram encontrados do mesmo jeito: gerando quadros de prova em pontos-chave do filme, olhando com atenção e corrigindo em lote antes do render final.
A assinatura final: o ponto laranja que abre o filme vira o ponto do logo.
O que ficou comigo e o que ficou com a IA
A IA escreveu praticamente todo o código: o sintetizador, o motor visual, o renderizador. Também propôs o roteiro e as camadas de detalhe. O meu papel foi o de diretor:
- dizer o que eu queria sentir no vídeo;
- recusar a primeira versão e pedir mais;
- aprovar o roteiro e as escolhas de linguagem;
- ouvir a trilha, que a IA não consegue ouvir.
A diferença entre um resultado genérico e um bom resultado veio das idas e vindas. Na primeira resposta, o filme já existia, mas era o que qualquer pessoa teria recebido.
Quer um desses?
O prompt completo que usei está disponível em prompt do filme em motion: é só preencher os campos com a sua marca e copiar.
Este mesmo processo serve para apresentar um produto, uma empresa ou um lançamento, com a identidade visual de quem contrata. Se fizer sentido para você, me chame pela página de contato.
Referências
- Claude Code — o ambiente em que o código foi escrito e executado.
- Documentação do Motion — biblioteca de animação usada nas curvas de movimento.
- Playwright: capturas de tela — ferramenta que capturou cada quadro.
- Documentação do FFmpeg — montagem do vídeo e do áudio.
- Schroeder, M. R. "Natural Sounding Artificial Reverberation". Journal of the Audio Engineering Society, vol. 10, n. 3, 1962 — o artigo que descreve o reverb usado na trilha.