Fiz um Anúncio em Vídeo de SaaS em 30 Minutos Com IA

Eu precisava de um anúncio em vídeo de resposta direta para um produto SaaS: vertical, trinta segundos, do tipo que roda no Meta e no TikTok e tem que conquistar atenção no primeiro segundo. O caminho de sempre é um editor de vídeo e algumas horas numa timeline. Eu fiz de outro jeito, tratando o vídeo como código, e levou cerca de meia hora. Veja como.

1. Comece pela estrutura, não pelos visuais

Um anúncio de performance não é um filme de marca. Ele segue um formato que vende: problema, agitação, revelação, recompensa. Antes de tocar em qualquer design eu escrevi os beats em linguagem simples.

• Hook (0–5s) — nomeie a dor em menos de dois segundos: "Para onde foi o seu lucro?"
• Agitar (5–10s) — acumule os sintomas: taxas, estornos, devoluções, dinheiro que nunca volta.
• Revelar (10–19s) — o produto resolve. O número se resolve na tela.
• Valor (19–24s) — três motivos concretos para se importar.
• CTA (24–30s) — uma instrução clara e a URL.

Se a estrutura está errada, nenhum motion design salva. Acertar isso no papel primeiro é a maior parte do trabalho.

2. Roube a marca, não a invente

O produto já tinha uma spec de design, então puxei os valores reais direto dela: o fundo exato, a cor de ação, as fontes, o raio de canto. Um anúncio que usa a paleta real do produto parece o produto. Um que usa cores inventadas parece uma cópia barata. Esse é um trabalho de trinta segundos, então não gastei nenhum desses segundos chutando códigos hex.

3. Construa o vídeo como código

Em vez de um app de edição usei o HyperFrames, que trata um arquivo HTML como a fonte da verdade de um vídeo. O layout é CSS, o movimento é uma timeline GSAP, e o timing fica em data attributes. A coisa toda renderiza para um MP4 pela linha de comando. Descrevi as cinco cenas para o Claude, ele escreveu a composição, e eu iterei no timing em português simples ("segura o número do lucro por mais tempo", "entra com o hook mais rápido").

A vantagem do vídeo-como-código é que tudo é exato e repetível. O número do lucro sobe numa curva que eu controlo. As barras entram escalonadas num ritmo que eu defino. Mude um número e re-renderize, sem arrastar um playhead.

4. Fingir o produto, de forma limpa

O app fica atrás de um login, então uma gravação de tela crua não era opção. Construí o dashboard como um pequeno bloco de HTML e CSS, usando os tokens reais da marca. Um mock construído é mais nítido que uma captura de tela de qualquer jeito: sem cursor, sem cromo de navegador perdido, cada número escolhido para reforçar o ponto.

5. Renderize, depois leia os frames

Renderizar um vertical de trinta segundos levou menos de um minuto. Aí puxei frames isolados nos momentos-chave para checá-los como stills: o hook está legível, o dashboard se sustenta, a chamada para ação é óbvia. O verificador de contraste apontou alguns avisos, mas um olhar frame a frame mostrou que eram falsos positivos dos crossfades. Os frames são a verdade, não o linter.

Onde costuma dar errado

• Bonito, mas sem estrutura. Se os beats não vendem, o movimento não salva. Acerte problema, agitação, revelação, recompensa no papel antes de desenhar qualquer coisa.
• Marca inventada. Cores e fontes chutadas fazem parecer uma cópia barata do produto. Puxe os tokens reais do design, como no passo 2.
• Tudo se mexendo ao mesmo tempo. Isso lê como caos. O movimento deve puxar o olho para uma coisa por beat, depois acalmar.

Agora tente isto

• Gire uma variação. Mude a linha do hook e a trilha, re-renderize: um segundo anúncio para testar, em cinco minutos.
• Redimensione. A mesma composição, um corte 1:1 e um 16:9 para outros posicionamentos.
• Faça em lote. Três hooks, um script de render, e uma tarefa agendada que os reconstrói sempre que o texto muda.

O que usei

• Claude — escreveu a composição e anotou o timing em português simples
• HyperFrames — HTML e GSAP como fonte do vídeo, renderizado para MP4
• ffmpeg — puxou os frames isolados para a checagem de qualidade

A lição

Tratar um vídeo como código fecha a distância entre uma ideia e um corte finalizado. A habilidade que importa não é o software de edição, é conhecer a estrutura que faz um anúncio funcionar e conseguir dirigir as ferramentas para construí-la. O anúncio acima é uma peça de spec, mas o fluxo é o produto de verdade: uma vez que ele existe, a próxima variação é uma mudança de cinco minutos e um re-render.