Motion Ad

Visão Geral

Transforma uma landing page em um spot de vídeo pronto para tráfego pago. A skill pesquisa a página de destino, extrai a imagery real do produto, anima uma única timeline GSAP pausada em uma página HTML e renderiza o resultado frame a frame em um MP4 H.264.

O renderizador não grava a tela: ele busca a timeline em cada frame, então o output é determinístico e dois renders do mesmo index.html são idênticos. Isso é o que permite iterar sem drift.

O template que vem embutido (assets/template.html) não é um esqueleto — é um anúncio 4:5 de 15s completo, com cinco beats:

hook + celular → revelação antes/depois com feixe de scan → parede 3D de outputs
→ carrossel de showcases + prova social → end card com CTA

Todo o conteúdo de marca e produto vive em um único objeto CONFIG no topo do script. A prática recomendada é reescrever os beats a partir desse CONFIG, não construir uma timeline do zero.

Quando Usar

• Criar um vídeo-anúncio, promo video ou ad animado para Meta, TikTok ou Reels
• Produzir criativo em vídeo com claims ancorados na landing page
• Gerar a versão 9:16 de um spot 4:5 já existente
• Re-renderizar um anúncio anterior trocando hook, hero ou CTA
• Qualquer pedido de “anúncio em vídeo”, mesmo que a pessoa não diga “motion graphics”

Quando Não Usar

A skill é específica e o erro de escopo aqui custa um render inteiro:

Pedido	Skill certa
Animar um botão, hover, parallax ou scroll em um site/app	animate, transitions-dev
Criar artes estáticas para feed (1080×1350, carrossel)	image
Vídeo longo, com apresentador ou voz narration	video
Copy de anúncio ( headlines, RSA, primary text)	ad-creative

Instalação

npx skills add https://github.com/fabricioctelles/skills -s motion-ad

Requisitos

A skill precisa de um toolchain local — não roda só com o agente:

node -v          # 18+
ffmpeg -version  # obrigatório
python3 -c 'import PIL'   # Pillow

cd <skill>/scripts && npm install          # gsap + playwright-core
google-chrome --version                    # ou: npx playwright install chromium

Sem ffmpeg não há MP4. Sem Chrome (ou chromium via Playwright) não há render. O npm install precisa rodar dentro da pasta da skill, porque os scripts resolvem as próprias dependências.

Como Funciona

Passo	O que acontece	Critério de conclusão
1. Research	Lê a landing page: promessa, preços, ratings, o que é grátis	Lista de claims, cada um rastreável a uma página
2. Assets	Baixa a imagery real do site, monta o contact sheet	Logo + par antes/depois + ≥12 imagens de output
3. Storyboard	Define copy e beats, 4–5 blocos de 15s	Copy final em cada beat
4. CONFIG	Preenche brand, cores, copy e caminhos de imagem	Stills de teste sem Acme nem Benefit one
5. Stills review	Renderiza 9 frames e monta o contact sheet	Sem placeholder, sem overlap, legível em miniatura
6. Render + entrega	MP4 completo, ffprobe, entrega versionada	Arquivo em ~/Downloads/ com duration e nb_frames corretos

Entre o passo 4 e o 5 está o references/template-map.md — mapa do template com o contrato de render, todos os campos do CONFIG, ids de DOM, constantes de geometria e as receitas para cortar/acrescentar beat e re-layout.

Estrutura do Anúncio

Tempo	Beat	Campos do CONFIG
0–2.2s	Hook, celular rola um print, dedo toca no input	hook, screen, screenScroll, tap
2.2–5.4s	Card tocado cresce no hero; feixe de scan revela antes → depois; pills de benefício	reveal, before, after, beforeLabel, afterLabel, benefits
5.5–8.7s	Hero encolhe numa parede 3D inclinada de outputs	scale, scaleChip, gallery
8.7–11.8s	Carrossel de showcases (3 cards) + linha de prova	proofHl, showcase, showChip, proof
11.8–15s	Wipe circular na cor da marca → logo, headline, chip, tap no botão	cta.headline, cta.chip, cta.button, cta.foot

Se um beat não serve ao produto, corte-o na timeline em vez de forçar — uma ferramenta desktop deveria abrir no hero card, não num celular.

Formatos

Formato	Ajuste
4:5 (padrão)	Já é o template. Render com --size 1080x1350
9:16 (reels/stories)	html,body,#stage → 1080×1920, re-espaçar as posições verticais, --size 1080x1920
1:1 (feed quadrado)	O aperto: o celular é 520×1100 e não cabe em 1080×1080. Exige reescalar o celular ou trocar o beat de abertura — não é só re-espaçar

Regras Inegociáveis

A skill separa quatro regras do resto porque a falha de cada uma é invisível no arquivo de saída — o MP4 renderiza igual nos dois casos:

• Todo claim na tela precisa existir na página de destino. Preço, contagem, velocidade, garantia e “grátis” são conferidos pela plataforma de anúncios e pelo usuário. Se o pedido do cliente contradizer a página, escreva — mas sinalize o conflito uma vez, claramente.
• Só assets reais. Imagens do próprio cliente ou extraídas do site ao vivo. Nunca inventar clientes, reviews, ratings ou resultados. Sem número real para a prova social, proof: null — a linha some.
• Nunca fabricar uma pessoa. Se o beat precisa de mais fotos de alguém do que existem, use crops ou espelhos de fotos reais e avise.
• A marca vence o template. Cores, fonte, logo e tom de voz vêm do produto. Sem hype, sem exclamação, sem emoji, a menos que a marca use.

Gotchas que Economizam um Render

Os que mais custam tempo, porque a falha aparece só no MP4 final:

• A timeline é absoluta. Todo tl.*() recebe um segundo hard-coded. Cortar o beat do celular sem re-timificar deixa o vídeo congelado até o beat seguinte.
• Path de imagem errado não dá erro. O setImg troca por um placeholder rotulado no onerror — o render “passa” e sai cheio de gradiente. Confira o contact sheet sempre.
• Menos de ~12 imagens repete na parede 3D. O grid 7×7 pega as células por módulo sobre gallery, então células vizinhas caem na mesma imagem.
• --size não gera 2×. O CSS é hard-coded em 1080×1350 e o deviceScaleFactor é 1. Para um master 2×, escale o #stage por CSS.
• Headline longo não encolhe, colide. A caixa é fixa no top e a linha extra cresce para baixo, invadindo o elemento seguinte.
• tap e screenScroll são o mesmo gesto. O ponto do dedo é fixo; se o scroll afastar o alvo, o toque cai no branco.

Qualidade da Skill

Avaliada com skill-evaluation — o mesmo rubric usado em Agent Plugin Eval:

Critério	Antes	Depois
Score geral	65 (B)	88 (A)
Critérios de conclusão	20	90
Gotchas	55	95
Fundamentação (grounding)	60	95
Progressive disclosure	35	90
Setup / Preflight	45	88

Trigger eval com 10 prompts: 5/5 de disparo nos casos que devem ativar, 0/5 de vazamento nos casos-limite (hover em React, capa estática 1080×1350, vídeo de 8 min, scroll animation, gif de logo).

📄 Scorecard completo

Licença

CC BY-NC 4.0 — uso não comercial

Criada por danny.md e publicada sob CC BY-NC 4.0: livre para usar e remixar, não para vender. Esta é a única skill do catálogo com restrição de uso comercial — as demais são Apache 2.0. Para uso comercial, entre em contato com o autor original.

Esta cópia no repositório adiciona metadata padrão, resolução portátil do caminho da skill, preflight e o references/template-map.md.

Referência

• Documentação completa no GitHub
• Mapa do template — contrato de render, campos do CONFIG, geometria, receitas
• Skill original no danny.md