c4l3b/animated-video-ad

Animated video ad (Anúncio em vídeo animado)

Construa cada tomada de um vídeo de produto como uma pequena página HTML que anima material real do produto (capturas de tela, quadros de vídeo, dados exportados, números reais), grave cada página em um MP4 limpo e entregue à pessoa um documento de roteiro que diga exatamente como cortar os clipes e o que dizer. A pessoa une os clipes e grava a narração em seu próprio editor (Camtasia, Premiere, CapCut...).

Por que isso funciona melhor do que gravar a tela do aplicativo real: cada tomada é enquadrada, ritmada e ampliada para vídeo; nada pisca, carrega ou mostra dados privados; o texto é grande o suficiente para um telefone; e uma alteração ("deixe essa linha mais curta", "zoom mais lento") é uma edição e uma regravação, não uma refilmagem. Ainda assim, parece honesto porque os pixels e números são do próprio produto.

Fluxo de trabalho

1. Combine a história (uma mensagem, depois vá).
2. Reúna material real do produto.
3. Construa uma página por tomada a partir de assets/.
4. Verifique as páginas com capturas de tela, corrija, repita.
5. Grave os clipes com scripts/record.cjs; verifique com folhas de contato.
6. Escreva o documento de roteiro (references/script-doc.md).
7. Áudio e corte bruto: música (ElevenLabs, gerada ou própria; references/music.md), uma narração opcional do ElevenLabs (references/voiceover.md); prévia com scripts/roughcut.py.
8. Envie os clipes, o documento e a prévia; itere com feedback tomada por tomada.

Coloque tudo em uma pasta que a pessoa possua, por exemplo, video/ ou video-scripts/:

<nome>-anim/     páginas (um .html por tomada), base.css, logo, pastas frames/
<nome>-clips/    MP4s gravados: 01-hook-anim.mp4, 02-setup-anim.mp4 ... + README.md
<nome>-music/    WAVs de fundo, prévia do corte bruto, cuts.json
<Nome>.md        o documento de roteiro

1. História

Escolha a duração (padrão 30 s; ofereça um corte de 45–60 s a partir dos mesmos clipes) e a chamada para ação.

Escolha o formato do quadro de acordo com onde o anúncio será veiculado e construa as páginas nesse tamanho (não 16:9 cortado depois; cortar perde texto e a pessoa precisa reenquadrar cada tomada):

Veiculação	Tamanho
Instagram Reels/Stories, TikTok, YouTube Shorts, Facebook Reels	1080×1920 (9:16)
Feed do Instagram/Facebook	1080×1350 (4:5)
Feed do LinkedIn ou X	1080×1080 (1:1) ou 1080×1350
YouTube, site, landing page, apresentações, não especificado	1920×1080 (16:9)

Várias veiculações: construa para a principal e diga no documento como reenquadrar para as outras. Para vertical, mantenha o texto fora dos ~250 px superiores e ~350 px inferiores, onde a plataforma desenha sua própria interface. Em seguida, delineie 6–9 tomadas, uma ideia cada, neste arco:

• Gancho (≈3 s): o problema, nas palavras do espectador. Uma pergunta funciona ("Fatura não paga após 30 dias? E agora?").
• Configuração (≈4 s): quão pouco é necessário para começar.
• Funcionalidades principais (2–3 tomadas, 4–5 s cada): o produto fazendo seu trabalho, com o resultado aparecendo na tela.
• Prova (≈3 s): um número real. Grande, simples, verdadeiro.
• Se encaixa no seu fluxo de trabalho (≈3 s): exportação, integração, compartilhamento.
• Cartão final (≈3 s): logotipo, promessa de uma linha, botão CTA, URL.

Lidere com pontos positivos. Mostre o que o produto faz bem e como é fácil. Não construa uma tomada em torno dos casos de falha ou soluções alternativas do produto, mesmo que engenhosas; um anúncio que explica como a ferramenta lida quando está errada soa como "ela está frequentemente errada". Uma correção rápida e confiante pelo usuário ("categoria errada? clique, escolha a certa, pronto") está ok; uma tomada sobre mecânicas de caso extremo não está.

Se a pessoa não disse, declare seu esboço e suposições em uma mensagem curta e comece a construir; é mais barato alterar uma tomada gravada do que debatê-la no abstrato.

Nessa mesma mensagem, pergunte sobre o áudio (a menos que já tenham dito) e continue construindo enquanto eles decidem; o áudio não é necessário até o passo 7. Use a ferramenta de pergunta, se houver. Primeiro verifique se um MCP do ElevenLabs está conectado (ferramentas como creative_generate_speech, creative_list_voices, um tipo de nó music); se estiver, comece com ele.

Música:

• ElevenLabs Music (recomendado quando conectado): você gera uma base instrumental cronometrada para o corte na conta ElevenLabs deles. Não conectado: você escreve o prompt, eles geram em elevenlabs.io/music e enviam o arquivo de volta.
• Gerar aqui: uma base silenciosa e livre de licenças feita por make_bed.py, gratuita e instantânea.
• Trazer a própria: uma faixa que eles já têm ou licenciaram.

Narração:

• Voz ElevenLabs (quando conectado): você escolhe uma voz e gera a leitura, depois coloca cada linha em seu momento. A pessoa ainda pode gravar a própria depois.
• Gravar eles mesmos a partir da leitura limpa no documento (o padrão sem ElevenLabs).

ElevenLabs gasta créditos na conta deles: precifique primeiro (estimate_only) e diga o custo na pergunta. Se pediram música sem dizer qual, ou você chegar ao passo 7 sem resposta, gere a base gratuita para que a prévia tenha som e repita a pergunta na mensagem final com o prompt do ElevenLabs já escrito.

2. Material real

Procure no repositório do produto, pastas de dados, exportações, bancos de dados, fixtures de teste e gravações. Para cada tomada, colete:

• Imagens: capturas de tela da interface real, ou quadros extraídos de vídeo real (ffmpeg -ss T -i in.mp4 -frames:v N frames/f%03d.jpg). Vários quadros criam movimento. Para capturar uma interface web (HTML local ou URL), use scripts/grab.cjs: visualização completa mais elementos nomeados em 3x, e ele imprime a caixa de cada elemento para enquadramento: node <skill>/scripts/grab.cjs app.html <pages>/shots --size 1280x800 goal=.goal logo="header .logo". Atrás de um login, peça capturas de tela à pessoa em vez de fazer login.
• Números: valores reais da saída do produto (tempos, contagens, linhas). Anote de onde cada um veio; vai para o documento em "De onde vêm os números".
• Posições: coordenadas de coisas a destacar, nos pixels da imagem de origem (da própria saída do app quando possível, por exemplo, caixas de detecção, ou medidas visualizando a imagem).

Lacunas são normais; lide com elas abertamente:

• Sem arquivo de logotipo: recorte-o de uma captura de tela real da interface (cabeçalho, ícone do app) ou reconstrua-o exatamente a partir do CSS/SVG do próprio produto. Diga isso no documento e peça o arquivo real.
• Uma tela necessária não existe no que você tem (por exemplo, um formulário de configuração): desenhe-a no estilo do próprio produto e rotule a tomada como encenada no documento para que a pessoa possa substituir pela tela real.

Nunca invente uma estatística. Se um momento deve ser encenado (um gancho dramatizado), rotule-o no documento. Respeite a terminologia do próprio produto e as regras de alegações (por exemplo, um produto que nunca deve chamar seus números de "garantidos" ou "oficiais") — verifique documentos/memória do projeto para tais regras antes de escrever o texto.

3. Construir páginas

Copie assets/base.css, assets/shot.js, assets/shot-template.html e assets/end-card.html para a pasta de páginas. shot.js contém os helpers que cada página usa (show/hide, cursorTo, click, typeText, countUp, frameTo, preload) e a reprodução automática; carregue-o antes do script da própria página e não copie helpers nas páginas. Cada página:

• É um palco fixo no tamanho escolhido: defina --w/--h em base.css (por exemplo, 1080px/1920px). Os templates estão dispostos para 16:9, então reposicione para outros formatos (empilhe painéis verticalmente para 9:16; em vertical, os títulos começam abaixo de ~250 px, não nos 96 px do template). Tamanhos de texto ≥ 26 px; títulos 80–100 px. Será assistido em um telefone.
• Tem uma função async function start() de nível superior que contém toda a linha do tempo (await sleep(ms) entre batidas). shot.js a expõe; com #manual na URL ela espera, normalmente é reproduzida automaticamente quando fontes e imagens estão prontas, para que a pessoa possa visualizar clicando duas vezes.
• Pré-carrega toda imagem que será trocada depois (preload(frames) no nível superior) para que nada apareça de repente na câmera; o gravador e o verificador esperam por elas.
• Termina em um estado completo e mantido (resultado mostrado, todo texto ligado) para que o editor possa cortar em qualquer lugar próximo ao final e manter o último quadro.
• Desenha marcas em um <svg viewBox="0 0 W H" preserveAspectRatio="xMidYMid slice"> dimensionado para a imagem de origem, para que as coordenadas do app sejam inseridas sem conversão e permaneçam alinhadas quando o formato do palco cortar a imagem.
• Parece com o produto: troque os tokens em base.css (--accent, --hi, --ok, --ink, fontes) pelas cores e fontes do próprio produto. Para um produto de tema claro, também inverta a cor do texto, .shade, .panel e .bg para versões claras; um anúncio escuro em torno de um app claro parece de outro produto.
• Mostra capturas de tela da interface em seu tamanho de pixel nativo dentro de .world (defina .world { transform-origin:0 0 } e a <img> para seu tamanho CSS natural) e as enquadra com frameTo(x, y, scale), que coloca o ponto da captura (x, y) no centro do palco; caixas de grab.cjs fornecem os pontos. Não use object-fit:cover, que corta uma captura de tela imprevisivelmente quando seu formato não corresponde ao do palco.
• Mantém o texto do produto legível: texto da interface que fica abaixo de ~22 px no palco (um rótulo de 14 px em uma captura que não está ampliada) é ilegível em um telefone. Aumente o zoom ou reconstrua essa peça (um cartão, um alerta) no estilo do próprio produto com seu texto exato em um tamanho legível, e diga no documento quais peças foram reconstruídas.

Padrões de tomada que funcionaram:

Padrão	Como
Produto em ação	Sequência de quadros trocada em <img> a cada 33–40 ms, caixas/rótulos desenhados por quadro, uma linha de resultado aparece em um painel lateral no momento em que acontece.
Zoom no detalhe	.world com transform-origin no detalhe, adicione .zoom (escala 1.5–1.6, 1.2 s ease).
Usuário faz um passo	await cursorTo(botao) depois await click(botao): o cursor desliza até o centro medido do elemento, ondula, o botão pressiona, então o resultado. Digite com typeText(el, texto) (55 ms por caractere; mantenha qualquer string digitada sob ~1 s).
Percorrer quadros	Botões anterior/próximo pressionados em ritmo, leitura do número do quadro, o quadro decisivo marcado.
Duas visualizações concordam	Duas imagens lado a lado, o mesmo momento marcado em ambas, um selo indicando a concordância.
Prova	Linhas de tabela deslizam (120 ms de intervalo), depois 2–3 cartões de estatística; conte o número herói para cima com countUp(el, n) (~700 ms).
Dados para fora	Lista de resultados e um painel de arquivo/integração preenchem na mesma batida, com um indicador "ao vivo".
Cartão final	Varredura de linha, logotipo, slogan, botão CTA aparece, URL.

Aponte o cursor para elementos, nunca para coordenadas digitadas à mão: cursorTo(el) mede o elemento quando o cursor se move, então um zoom, um rearranjo ou outro formato de palco não podem deixá-lo clicando em espaço vazio. click(el) registra um erro se a ponta não estiver em el, e check.cjs falha nisso. Use cursorTo({x, y}) apenas para um ponto que não é um elemento. Tire uma captura de verificação no momento de cada clique: um clique que acerta é a única coisa que os espectadores notam quando está errado.

Mostre e oculte com show(el) / hide(el) de shot.js. .on usa !important, então qualquer outra classe adicionada ao lado para ocultar ou mover o elemento silenciosamente não faz nada; sempre remova .on primeiro (é isso que hide faz). Para uma saída personalizada, el.classList.replace('on', 'my-exit').

Mantenha a linha do tempo rápida: 0.3–0.7 s entre batidas, ≈1 s para ler um título. Cada clipe geralmente tem 4–8 s; uma tomada de percurso pode durar 15 s porque o editor cortará e acelerará.

Corte qualquer coisa que a fonte tenha gravado e que não deva aparecer (data/hora da câmera, barras de status, nomes privados) escalando .world ligeiramente a partir da borda oposta (por exemplo, scale(1.08) a partir da parte inferior). Não confie em backdrop-filter para ocultar coisas: ele não renderiza na gravação de tela.

4. Verificar antes de gravar

node <skill>/scripts/check.cjs <pasta-paginas> <pasta-chk> hook:400:1500:3200 live:800:3000:6000

Tira capturas de tela nesses ms após start() (deliberadamente não aguarda start(); aguardar só mostra o estado final) e imprime erros da página. Leia as capturas de tela. Verifique especialmente:

• as marcas estão no lugar certo (caixa na pessoa certa, uma linha na borda dianteira, não em um pé traseiro ou um espectador; trilhas do detector podem mudar para outra pessoa no meio da sequência, então costure ou corrija caixas manualmente);
• nada está cortado nas bordas, o texto não se sobrepõe ao assunto;
• todo número na tela corresponde à fonte.

5. Gravar

node <skill>/scripts/record.cjs <pasta-paginas> <pasta-clipes> hook=01-hook-anim=4200,setup=02-setup-anim=5000

pagina=nomeSaida=ms: grave por ms (duração da animação + ~1 s final mantido). Cada clipe sai no tamanho de sua página (--w×--h), 30 fps, H.264 CRF 16, silencioso. check.cjs e roughcut.py seguem o mesmo tamanho, portanto nenhuma edição de script é necessária para vertical ou quadrado. Precisa de Chrome (ou Chromium do Playwright) e Playwright (npm i -g playwright uma vez se pw.cjs não conseguir encontrá-lo), além do ffmpeg.

Os clipes rodam os ms solicitados mais ~0.3 s. O primeiro quadro é a página antes da primeira batida de start(), então os pontos de início geralmente começam em 0.1–0.3 s; leia-os na folha de contato.

Verifique cada clipe sem assisti-lo:

bash <skill>/scripts/sheet.sh <pasta-clipes>/03-live-anim.mp4 sheet.jpg 2

Leia a folha de contato: tempo de cada batida, nada esmagado ou cortado, último quadro completo. Anote os segundos de entrada/saída da parte útil de cada clipe; eles vão para a tabela de corte.

Nomeie os clipes NN-nome-anim.mp4 na ordem da história (04b, 04c para alternativas) e escreva um README.md curto na pasta de clipes listando-os.

6. Documento de roteiro

Siga references/script-doc.md. A tabela de corte (tempo, clipe, entrada–saída, velocidade, o que você vê, início da narração, linha) é o coração do documento; o resto é o que a pessoa precisa para terminar sem você. Narração: ~2.5 palavras por segundo, conversacional, uma linha por tomada, CTA dito em voz alta ("Experimente grátis. Clique no link ou visite exemplo.com.").

A maioria dos vídeos sociais é assistida sem som, Reels e TikTok incluídos. Sempre dê à tabela de corte uma coluna "Na tela" e faça o texto na tela carregar a história por si só. Onde houver narração (Reels, TikTok, Shorts), também adicione legendas incorporadas nas etapas do editor, colocadas na zona de segurança vertical e sobrepostas nas tomadas cujo título já foi...

[truncado para tradução]