david-d2c2/motion-promo-reels

Reels promocionais com motion graphics gerados por código

Vídeos de 15–30 segundos gerados inteiramente por código: canvas 2D → frames → ffmpeg, com áudio sintetizado em numpy. Sem templates de vídeo, sem After Effects, sem música de terceiros. Abrange três casos:

• uma pessoa ou marca pessoal (16:9);
• alguns produtos (9:16);
• o catálogo completo de uma loja (9:16, dezenas ou centenas de vídeos).

Princípio fundamental: nada inventado. Cada número, preço, cor ou recurso mostrado no vídeo vem de uma fonte verificada: site, API da loja, página do produto ou documentos do projeto. Se algo não puder ser confirmado, sinalize como pendente e diga isso.

Este pacote inclui três templates completos em ${CLAUDE_SKILL_DIR}/templates/ (no chat do claude.ai: templates/, ao lado deste arquivo). Copie o template mais próximo para o projeto do usuário e adapte-o em vez de reconstruir o motor (veja seção 4). templates/README.md lista o que alterar em cada um.

Escreva todo o texto na tela no idioma do público da marca e responda ao usuário no idioma dele. As strings fixas da interface ("de", "cores", "NÃO É ELE"…) são substituídas pelo bloco textos do template, nunca editando o motor. Ajuste o gênero da pessoa em no_es.

0. Escolha o caso

Caso	Template	Formato	Duração	Unidade de gag
Pessoa ou marca pessoal	persona-16x9	1920×1080	27 s	Uma, escrita à mão
Site ou serviço	persona-16x9, adaptado	16:9 ou 9:16	20–30 s	Uma, escrita à mão
Alguns produtos (≤10)	producto-9x16	1080×1920	15,5 s	Uma por produto, escrita à mão
Catálogo (dezenas a centenas)	catalogo-9x16	1080×1920	15,5 s	Uma por categoria, com frases modelo preenchidas a partir dos dados de cada produto

Se o usuário não especificar, use 9:16 para produtos e informe isso em uma linha.

1. Pesquisa (antes de escrever uma linha de roteiro)

Fontes, nesta ordem:

1. A pasta do projeto, se existir. Leia CLAUDE.md, AGENTS.md, logs de decisão, relatórios e planos de mídia social. É onde estão as regras de marca e cópia (por exemplo, "sem nomes de marcas de terceiros", "tom informal", "sem superlativos vazios"), além de tokens de design, regras de moderação e avisos legais (rotulagem de IA). Essas regras substituem qualquer ideia criativa.
2. O site oficial. Hero, serviços, estatísticas, método, stack, credenciais. Em sites com muito JavaScript, use um navegador e leia document.body.innerText seção por seção.
3. Lojas online:
   • WooCommerce: /wp-json/wc/store/v1/products?per_page=100&page=N e /products/<id>. Preços estão em centavos. prices.price_range com min ≠ max → "a partir de"; on_sale + regular_price → preço riscado; attributes (cores, tamanhos, medidas); description (geralmente com listas estruturadas); permalink.
   • Shopify: /products.json e /products/<handle>.json.
   • Nunca adivinhe slugs ou URLs: leia-os de permalink.
4. Pesquisa na web. Útil para pessoas, mas nomes comuns podem gerar homônimos. Se isso acontecer, transforme em material de roteiro (veja seção 2) em vez de esconder.
5. Fotos: arquivos locais do projeto primeiro. Sandboxes na nuvem geralmente não conseguem baixar da loja; não insista. Use fotos locais ou desenhe o produto em código (listras, ondas acetinadas e formas simples funcionam melhor do que você imagina).

Anote a data em que leu os dados: os preços ficam desatualizados.

2. Conceito: a gag

Uma gag é uma propriedade real do produto ou da pessoa, transformada em algo que o próprio vídeo faz. Não é uma piada colada por cima. Exemplos de mecânicas, todas implementadas nos templates (os IDs das gags estão em espanhol no código):

Mecânica	Propriedade real	O que o vídeo faz
invisible	Transparente, oculto, discreto	Um quadro vazio: "Tem um case aqui. Não consegue ver? Claro que não, é transparente." A tela então se abre como um zíper.
contador	Uma grande quantidade (metros, horas, unidades)	"Este reel dura 15 s. Este rolo, 50 m. Você não vai ter tempo de usar tudo." Um contador corre.
diagonal	Corte enviesado, listras ou um design diagonal	O texto inclina 45° e listras cruzam a tela.
brillo	Acabamento brilhante ou acetinado	"Este texto é fosco. / Este brilha." (com um brilho)
cortar	Sem cadarços, sem cabos, sem amarras	Dois fios seguram o texto, são cortados, e o texto fica no lugar.
elevar	Plataforma, push-up, altura	O texto sobe sobre uma "almofada".
secuencia	Muitos tamanhos, larguras ou variantes	As variantes reais aparecem uma a uma: "Aqui, do E ao H."
quitar	"Sem X"	Dois anéis são desenhados e voam: "Removido."
ritmo	Esporte, movimento	As palavras caem no ritmo.
reordenar	Multiuso, conversível	Duas linhas trocam de posição: paralelas, cruzadas, em V.
patron	Bordado, estampa, renda	Um padrão decorativo se desenha sozinho.
calma	Categorias sensíveis (saúde, pós-cirurgia, maternidade…)	Sem gag, sem sons fortes, sem percussão: um tom sereno.
homonimos (homônimos, pessoa)	Um nome comum no Google	investigar("Nome") mostra os homônimos riscados com "NÃO SÃO ELES", depois "FONTE ENCONTRADA".

Regras:

1. Uma propriedade real e verificável.
2. Três linhas: setup, virada, punchline (a punchline em itálico ou na cor de destaque).
3. A punchline não pode ser falsa. Se a página do produto não diz, não afirme. Frases condicionais (si/sino na config) permitem que uma punchline apareça apenas quando a descrição a sustenta.
4. Um elemento autorreferente fixo em todo o vídeo, ligado ao setor: um HUD com timecode e contador de quadros (tech), uma linha de costura com contador de pontos (artesanato, têxteis), uma fita métrica que "mede" o reel (moda, tamanhos). Finalize no encerramento ("Este reel mede 15,5 s. Tamanho único.").
5. Nunca faça piada com corpos. Categorias sensíveis usam calma. Verifique também se nenhum desenho abstrato pode ser interpretado como silhueta de corpo.
6. Sem superlativos vazios, sem comparações com concorrentes.

3. Estrutura

9:16 produto (15,5 s a 30 fps = 465 quadros)

Cena	Tempo	Conteúdo
Hook	0–3,0	A gag
Produto	3,0–5,6/5,8	Nome + foto com bounce (ou desenho procedural, ou card placeholder)
Gama	~2,8 s	Número real de cores, ou gama (tamanhos), variantes e cores com seus nomes
Fatos	~2,6 s	Três fatos da página do produto, com checkmarks animados
Preço	~1,8 s	Preço real, "a partir de" ou oferta, observação de imposto se aplicável
Encerramento	13,2–15,5	Logotipo ou marca, site em uma pill, frete ou CTA, e a piscadela final

16:9 pessoa ou marca (27 s): terminal → homônimos riscados com glitch → queda (fonte encontrada + manchete) → estatísticas com contadores → método em fases → marquee de ferramentas (congela em um item autorreferente: "↑ esse sou eu") → "ESTE VÍDEO: 0 templates · N linhas de código" (contagem real) → citação da pessoa → encerramento com monograma, nome e CTA.

4. Motor

<projeto>/<pasta-reels>/
├── METODO.md        método, regras e checklist (para humanos)
├── CLAUDE.md        status e tarefas (para a próxima sessão)
├── config.json      (catálogo) loja, atributos, rótulos, paleta e categorias → gag + frases
├── productos.json   marca + um bloco por produto
├── motor.html       canvas 1080×1920 ou 1920×1080; window.renderFrame(f) é DETERMINÍSTICO
├── render.js        puppeteer-core → um JPEG por quadro → ffmpeg image2pipe; depois áudio e mux
├── audio.py         síntese numpy/scipy usando a MESMA tabela de cues que motor.html
├── catalogo.js      (catálogo) API → ficha do produto: gag, frases, fatos, remoção de marca
├── extraer.js       (catálogo) baixa catálogo e fotos com UA de navegador e pausas; REVISAR.md
├── fonts/           woff2 locais + suas licenças (fontsource: `npm pack @fontsource/<família>@<versão>`)
├── img/             fotos locais
└── out/             vídeos finais

Chaves técnicas:

• Determinismo: cada quadro é calculado a partir de t = f/FPS. Sem requestAnimationFrame, sem aleatoriedade sem semente (use hash(n)).
• Helpers: clamp, P(t,a,b) (progresso), easings (eOC, eIOC, eOX, eIX, eOB com bounce), T_() para texto com letterSpacing e alpha, fit() para encolher texto até caber, rr() para retângulos arredondados.
• Cenas são funções que recebem tempo local u = t - T.scene. Transições são um wipe de ±0,16 s na cor de fundo a cada corte.
• render.js: page.evaluateOnNewDocument(spec => window.SPEC = spec), aguardar window.READY (fontes e imagens carregadas), depois canvas.toDataURL('image/jpeg', .93) → stdin de ffmpeg -f image2pipe -c:v mjpeg -i - -c:v libx264 -preset veryfast -crf 18 -pix_fmt yuv420p.
  • Iniciar Chrome com --allow-file-access-from-files; caso contrário, imagens locais contaminam o canvas.
  • Procurar Chrome ou Edge nos caminhos padrão, ou em CHROME_PATH.
  • Manter um modo --stills t1,t2,… para revisão.
• Mux: -af loudnorm=I=-14:TP=-1:LRA=11 -c:a aac -movflags +faststart -shortest.
• Áudio: uma progressão de 4 acordes combinando com o tom da marca (tech: 128 BPM com kick, baixo e pluck; artesanato: 112 BPM pizzicato e marimba; elegante: 96 BPM piano e cordas).
  • Efeitos por gag: zíper = uma rajada acelerada de cliques; máquina = um trem de cliques + zumbido; tesoura = dois estalos; brilho = um arpejo agudo.
  • Efeitos compartilhados: whoosh nos cortes, ticks nos contadores, chime no preço.
  • Sidechain leve sob o kick, tanh para limitar, depois normalizar.
• No Windows os scripts chamam python; no Linux e macOS, python3.

5. Dados de catálogo sem inventar nada (catalogo.js + config.json)

• Nome de exibição: o nome do produto sem marcas_a_quitar (marcas a remover, se as regras de cópia exigirem) e sem palabras_tipo (palavras de tipo genérico como "Tênis" ou "Bota"). Se restar apenas um código, use o nome sem a marca.
• Fatos: os bullets sob titulo_datos na descrição, excluindo composição. Se não houver, pegue frases da descrição curta separadas por "." e ":". O terceiro fato é a composição do atributo material, mantendo siglas como EVA.
• Corte: corte as frases em ~54 caracteres. Corte primeiro na vírgula; senão, antes da última oração subordinada ("com", "para", "que", "e"). Nunca termine em preposição ou artigo.
• Cores: tabela nome → hex em motor.html. Cores bicolores ("Preto/Branco") recebem um swatch dividido. Cores desconhecidas renderizam cinza neutro com seu nome real.
• Edições manuais: "manual": true em um produto o protege de ser sobrescrito na próxima extração.
• REVISAR.md (lista de revisão): tom sensível, páginas sem bullets, produtos sem foto ou atributos.
• Teste a transformação contra o catálogo real colando a função no console do navegador da loja antes de confiar no extrator. Se a etapa de download não pôde ser testada, diga isso.

6. Controle de qualidade (obrigatório antes da entrega)

1. Renderize stills para cada cena, monte uma contact sheet com PIL (não xstack com muitas entradas: ffmpeg pode travar) e olhe para ela. Verifique:
   • texto sobreposto ou frases truncadas;
   • acentos em títulos grandes colidindo com a linha de cima;
   • elementos invadindo outra linha;
   • letras desaparecendo sob um brilho muito intenso;
   • blocos "—" vazios quando um atributo está ausente;
   • metades inferiores vazias no formato vertical.
2. Zonas seguras 9:16: nada importante acima de ~250 px (UI dos Reels) ou nos últimos ~320 px (legenda). Apenas o elemento decorativo vai lá para baixo.
3. Dados: preços de hoje, "a partir de" quando há faixa, ofertas que podem expirar, unidades não confirmadas (sinalize), URLs verificadas.
4. Legal e moderação:
   • Fotos com pessoas geradas ou modificadas por IA → um rótulo visível no vídeo (EU AI Act, art. 50; ia.mostrar_si_foto na config). Divulgue também ao publicar.
   • Produtos mostrados no corpo: foto inteira, estilo catálogo, sem cortes agressivos, pouco tempo de tela.
   • Nunca prometa devoluções ou garantias que não se aplicam.
5. Áudio: ffmpeg -af ebur128 → cerca de −14 LUFS. Verifique duração e resolução com ffprobe.

7. Entrega

• Ao trabalhar na máquina do usuário, escreva tudo em uma subpasta do projeto e mantenha as quebras de linha de qualquer arquivo que editar. Não toque em arquivos CLAUDE.md ou documentos existentes: crie os seus dentro da subpasta.
• METODO.md: o que tem lá, como executar, de onde vem cada dado, regras de marca aplicadas, como adicionar um produto ou uma gag, um checklist pré-publicação e limitações conhecidas.
• CLAUDE.md da subpasta: status, tarefas e regras inegociáveis, em poucas linhas.
• Mostre os vídeos e resuma: as gags (uma por linha), onde tudo está, o comando para regenerar e quaisquer dados ainda a confirmar.

Erros comuns (evite-os)

• Adivinhar slugs de produtos. Leia-os de permalink.
• Uma gag de texto rotacionado que invade as linhas seguintes: reposicione as linhas quando o texto girar.
• Um brilho acetinado muito claro que apaga letras. Use um tom claro da marca, não branco puro.
• Gradientes de swatch cujos stops colapsam deixam faixas diagonais. Use uma camada de brilho separada e recortada.
• Preço riscado em um produto com faixa de preço: use "a partir de" + um badge de oferta, sem o riscado.
• Unidades ausentes na página do produto (ex.: medidas sem "cm"): omita ou sinalize para confirmação.
• Formas abstratas que juntas sugerem uma silhueta de corpo: substitua por figuras inequívocas.