Sabe aqueles vídeos de lançamento que parecem simples? Uma palavra na tela, um campo de prompt, a interface se mexendo, o logo no final. Vinte e poucos segundos e você entendeu o produto.
Foi esse tipo de vídeo que eu quis fazer para o OnunSpace.
Em vez de abrir o After Effects, abri o Claude Code, chamei o Claude Opus 5.5 com a skill Brag e passei uma referência: o vídeo Your ideas, your apps, da Base44.
O Claude cuidou da execução. Depois do pedido inicial, fiz no máximo três intervenções no chat, com ajustes básicos. Bora ver como o vídeo saiu do prompt pro MP4.
Primeiro: o que é a Brag?
A Brag é uma skill para o Claude Code que transforma um projeto em um vídeo curto de lançamento. Ela lê o código, entende o que o produto faz, escreve o roteiro, monta a animação, cria a trilha e entrega o vídeo com uma legenda pronta para postar.
Se você leu nosso guia do Kodety AIDoff, já sabe: skill é uma orientação extra que a IA segue numa tarefa específica.
No Opus 5.5, a Brag roda no modo slim. Em vez de encaixar seu produto num template, o próprio modelo constrói cada cena com as ferramentas que já estão no computador. Sem biblioteca de efeitos, sem arrastar clipe em timeline.
O pedido
Foi assim que tudo começou:
/brag Motion para o OnunSpace, informando que é open source também e que pode rodar em nuvem pela Onun. Porém, eu quero esta qualidade e estrutura aqui: [vídeo da Base44]. Nas cores da Onun e IDV, mas ref absoluta de direção de design e motion.
Repare no que esse pedido deixa claro:
- O que dizer: que o OnunSpace é open source e também roda na nuvem pela Onun.
- De onde vêm a estrutura e o motion: da referência.
- De onde vem a identidade: da Onun.
Essa separação fez toda a diferença. A IA sabia o que podia pegar da referência (ritmo, estrutura, tipo de movimento) e o que não podia mudar (cores, fontes, marca).
Passo 1: estudar a referência quadro a quadro
O Claude abriu o vídeo da Base44 no navegador e montou folhas de contato: um quadro a cada meio segundo, e quadros mais próximos nas transições. Com isso, ele mapeou a estrutura inteira:
- uma palavra gigante no começo, com a letra "o" virando um portal;
- uma frase com o campo de prompt no meio;
- uma rajada de resultados em cortes secos;
- o logo e, depois, a demonstração: prompt, clique e a imagem surgindo em mosaico de pixels;
- closes de interface com cursor e uma cena escura com texto digitado gigante;
- símbolo, logotipo e uma frase curta para fechar.
O original tem 56 segundos. O vídeo do OnunSpace precisava caber em 25. A estrutura foi comprimida, mas a ordem das batidas ficou.
Passo 2: ler o projeto, não um briefing
Aqui está a diferença para um gerador de vídeo genérico. A Brag não trabalhou com uma descrição do OnunSpace. Ela leu o código.
Dali saíram:
- as frases do próprio site: "Conecte referências, gere imagens e dê movimento às suas ideias em um canvas criativo. Online ou no seu computador.";
- as cores (#0b0b0d, o rosa #ff87f7 e o lilás #b987ff) e as fontes (Inter Tight, Alpha Lyrae e Fragment Mono);
- o símbolo de pixels da Onun, que virou o "o" do gancho;
- o repositório no GitHub e o comando para rodar o OnunSpace localmente.
Nada de "otimize seu fluxo de trabalho". Se o vídeo diz alguma coisa, é porque o produto diz.
Passo 3: a interface de verdade
Em vez de desenhar um mockup, o Claude rodou o OnunSpace no computador, montou um projeto e capturou a interface real: o HTML e o CSS de cada nó, do seletor de modelos e do Motion Studio.
Por que isso importa? Print não aguenta zoom. Com a interface real, a câmera entra num botão sem perder nitidez, o prompt é digitado letra por letra e o botão Generate reage ao clique.
Para as cenas de geração, pedi as imagens que já estão no site: o Onun correndo, o samurai, o astronauta e o diretor do artigo sobre o Veo 3.1. Assim, o vídeo mostra as artes do próprio projeto.
Passo 4: roteiro, cena por cena
Com a referência mapeada e o material separado, o Claude escreveu o roteiro: 12 cenas em 25 segundos.
- "You", com o símbolo da Onun no lugar do "o". A câmera mergulha no pixel do meio e cai num universo em ASCII.
- "Connect [referências] and generate [prompt]": o campo de prompt no meio da frase, como na referência.
- Uma rajada de resultados e o logo.
- O clique em Generate, com o mosaico de pixels.
- O seletor de modelos, o Motion Studio, o open source e a nuvem.
- Símbolo, logotipo e "Online or on your computer."
Cada quadro é uma função do tempo: uma página em HTML, CSS e WebGL que o Playwright fotografa 60 vezes por segundo. São 1.500 quadros, montados em MP4 pelo FFmpeg.
Tradução: o vídeo inteiro é código. Qualquer ajuste é uma edição de texto e um render novo.
Passo 5: a trilha
Sem banco de músicas. A trilha foi escrita em código: 120 BPM, em Fá menor, com os efeitos (cliques, teclas, whooshes, o brilho dos pixels) no mesmo tom e na mesma "sala" da música.
Agora o detalhe honesto: o Claude não escuta. Ele equilibra graves e agudos pelo que dá para medir e deixa o volume no padrão das redes (−14 LUFS). A conferência final da trilha ficou comigo. Ouça antes de postar.
Passo 6: poucos ajustes de acabamento
A primeira versão já saiu inteira e funcionando. Minha participação no acabamento se resumiu a no máximo três mensagens no chat, reunindo estes pontos básicos de preferência e apresentação:
- "O cubo do logo tá bugado." O quadrado central estava desalinhado. Agora ele fica branco, como no logo, e só no mergulho se quebra em caracteres ASCII.
- "Se o fundo fosse mais ASCII…" Usamos o shader ASCII do próprio site da Onun.
- "Quero o vídeo em inglês." Textos, interface do OnunSpace e legenda. Tudo em inglês.
- "Suaviza as curvas." Veio um print do graph editor com a curva de velocidade que a gente curte: arranque curto, pico logo no começo e uma cauda longa. Virou a curva padrão das entradas. Nas saídas, o espelho dela.
- "Alinha o logo com a base do Y e do U." O símbolo passou a apoiar na linha de base, como um "o" de verdade.
- "Open source podia ser um balão perguntando e outro respondendo." A cena virou uma conversa limpa, no centro do quadro.
- "E se o Motion Studio mostrasse o próprio vídeo na timeline?" Essa foi a melhor. O Motion Studio agora toca a abertura do vídeo, com as camadas reais e a agulha andando. No fim, a câmera entra na prévia e o vídeo vira ele mesmo.
A referência definida desde o começo deu a direção. O Claude conduziu o roteiro, a animação e o render; eu conferi o resultado e indiquei esses poucos detalhes.
O que funcionou bem e o que conferir
✅ Funciona muito bem para:
- seguir a estrutura e o ritmo de uma referência sem copiar o visual;
- usar a interface real do produto, nítida em qualquer zoom;
- ajustar detalhes de movimento e composição com pedidos curtos;
- deixar tudo editável, já que roteiro, cenas e trilha estão em código.
Antes de publicar, vale:
- conferir se as imagens combinam com o que você quer mostrar;
- ouvir a trilha;
- reservar o tempo do render: uma versão completa leva de 11 a 15 minutos.
O trabalho de montar as cenas, animar e renderizar ficou com o Claude. Minha parte foi escolher a direção visual, conferir o vídeo e pedir o acabamento.
Bora fazer o seu?
Com a skill Brag instalada no Claude Code, abra o projeto que você quer mostrar e peça:
/brag Vídeo de lançamento para [seu produto]. Quero a estrutura e o ritmo desta referência: [link]. Use as cores, as fontes e a marca do projeto. Mostre quadros de teste antes do render final.
Três dicas que fizeram diferença por aqui:
- Separe as fontes: estrutura e motion vêm da referência; cores, fontes e textos vêm da sua marca.
- Peça quadros de teste para conferir a composição antes do render completo.
- Seja específico no feedback: diga a cena, o elemento e o que você quer. Um print vale mais que um parágrafo.
Dá também para pedir o formato vertical (--format vertical), mudar o tom (--tone) ou definir a duração (--duration).
E, se quiser brincar com o que aparece no vídeo: o OnunSpace é open source. Roda no seu computador com npm run dev ou na nuvem, direto na sua conta Onun. O código está no GitHub.
