Bang Motion — motion graphic web que não é PPT

O que Bang Motion — motion graphic web que não é PPT faz?

v1.19.0 · por Bang Tutorial · MIT. Histórico de alterações em CHANGELOG.md; instalação em README.md.

Esta habilidade é para qualquer agente de codificação de IA (formato Agent Skills aberto). Seu conteúdo são leis e receitas para motion graphics que se movem como vídeo, não apresentação — siga-as antes de escrever código.

Pré-requisitos — apenas navegador

O entregável (index.html) precisa apenas de um navegador moderno + internet para CDN (GSAP, fontes). Python e Node opcionais, usados apenas para ferramentas: scripts/serve.py (servidor sem cache, apenas se usar módulo local), puppeteer (snapshot/verificação automática, scripts/export-frames.mjs → MP4). Se o usuário não tiver nenhum dos dois: (1) construa um único arquivo, abra com clique duplo; (2) verificação visual via ?debug=1 (painel de scrub) e captura de tela manual por segundo-chave; (3) MP4 via gravação de tela (OBS / gravação de aba do navegador) — explique que a gravação de tela pode cair quadros, e a renderização quadro a quadro precisa de Node. Nunca crie um entregável que precise de npm install para ser ASSISTIDO.

ffmpeg também é opcional. Verifique primeiro (ffmpeg -version); se não estiver disponível:

Necessidade	Com ffmpeg	Sem ffmpeg
Sincronia de VO (limite de frase/parágrafo)	silencedetect	scripts/vo-pauses.html — abra no navegador, selecione áudio, copie SEG/PARA; resultado idêntico (Web Audio, sem instalação)
Duração/formato de áudio	ffprobe	número DUR do vo-pauses.html; o navegador toca wav/mp3/m4a/ogg diretamente
Exportação MP4	combinar PNGs do export-frames.mjs	sem MP4 — ofereça instalação com um comando (winget install Gyan.FFmpeg / brew install ffmpeg) ou gravação de tela
Estudar vídeo de referência (extrair quadros)	fps= + tile=	peça ao usuário para enviar capturas de tela nos segundos-chave, ou abra o vídeo no navegador e capture em segundos específicos

Sem ffmpeg, o fluxo do explainer permanece completo até a sincronia de VO; apenas o MP4 precisa de instalação.

Player — nenhum, reprodução automática, loop

Entregável padrão: sem painel/player na tela, reproduz diretamente ao abrir e reinicia do início ao terminar (onComplete → play(0); se houver áudio, o áudio também reinicia). Controles ocultos: R reinicia, Espaço pausa. Painel de scrub/relógio aparece apenas com ?debug=1 (ferramenta de revisão), e ?clean=1 interrompe a reprodução automática para exportação. Tem áudio? Tente play() diretamente; se bloqueado pelo navegador, pause no quadro 0 e inicie no primeiro clique — sem texto "toque para começar". Isso já está embutido em ambos os starters.

Proibições estruturais — teste de PPT verificável mecanicamente

Outros modelos (e você, quando cansado) cairão nesses padrões mesmo após ler as leis abaixo. Antes de entregar, verifique o CÓDIGO, não a sensação:

1. grep -c "class=\"scene\"\|\<section" index.html — se ≥ 3 cenas forem <section> ligadas/desligadas com autoAlpha/opacidade → é um deck de slides. As cenas devem mudar porque o MUNDO/CÂMERA se move (câmera se move, chicote para outro canto, push-through, fundo muda), não porque a seção desaparece. Exceção válida: cartoon de palco (references/kartun-panggung.md) usa corte/deslocamento de 96 px entre palcos — permitido, pois cada palco está vivo (≥ 10 objetos em ação), não uma imagem parada que desaparece.

2. Há um fio condutor visual persistente: um sujeito (ação contínua) OU um mundo de colagem/papel/branco que a câmera percorre (cartoon, foto, catálogo, esboço). Fotos full-bleed alternadas sem mundo compartilhado → PPT. Uma imagem + uma frase por cena, mudando a cada cena → ainda é slideshow, mesmo com câmera em movimento: cada cena 3–5 elementos entrando gradualmente por frase (explainer.md "Uma cena = 3–5 elementos").

3. Por cena, conte nós de texto: sobrancelha/kicker + título + corpo/credits = 3 níveis → PPT. Máximo de dois: um número/frase grande + um rótulo do mundo. Documentos/carimbos/blocos de data com ≤ 3 linhas curtas contam como objetos, não níveis de texto.

4. Ken Burns (escala 1,0→1,05 em foto) como único movimento → PPT. O movimento a cada segundo deve vir da LINGUAGEM DE MOVIMENTO DE FUNDO escolhida no style brief do menu techniques.md §7c (câmera respirando em fundo texturizado, gradiente se movendo, blob flutuando, grão vivo, varredura de luz por segmento, formas grandes girando lentamente, partículas subindo, grade respirando, texto fantasma deslizando, Ken Burns + parallax…). Barras/linhas/ cortes que cruzam horizontalmente ("lane", "range", "streak", chuva de partículas horizontal) JÁ foram usados em dois projetos consecutivos com nomes diferentes — isso não é padrão; use apenas se o tema for velocidade/fluxo, e não pode ser em dois projetos consecutivos.

5. Transições apenas fade + scale bump + light leak em todos os cortes → template PPT. Chicote para outro canto, corte para instrumento (mapa/velocímetro/perfil), push-through.

6. Explainer começa do starter do SEU ESTILO: starter-explainer-kartun, -jurnalisme, -katalog, -sketsa (modo colagem: câmera percorre ativos parados), starter-explainer (ação contínua: mundo flui), ou starter-explainer-panggung (cartoon de palco: um palco por cena, rig de juntas, câmera apenas dentro do palco). O de colagem tem uma rig; o de palco tem outra rig. NÃO de assets/starter-opener.html (abertura de texto), e não do zero.

7. Miniatura é slide. Zoom da câmera < 1,08 fazendo a casa do tamanho de um polegar e terra vazia preenchendo metade da tela → PPT mesmo com tudo se movendo. O mundo é dividido em palcos do tamanho do quadro, não um mapa grande explorado (kartun-panggung.md Lei 1).

8. Estrutura de template (abertura/promo). Verifique o roteiro e o código: primeira cena é um texto ampliado que sai pela esquerda; três tiles/cartões de recursos alinhados; caixa de entrada/barra de pesquisa sendo digitada; sequência gancho → recurso → recurso → promessa → logotipo → CTA. Dois ou mais sem exigência de conceito → template, mesmo com nova aparência. Re-escolha a estrutura de references/opener-konsep.md.

Falhar em apenas um ponto → refaça antes de mostrar ao usuário.

Tipos de trabalho cobertos

Esta habilidade é para motion graphics web em GERAL. Explainer é apenas um tipo — ele tem seu próprio documento porque sua estrutura é diferente, não porque é o principal.

Os starters são nomeados por categoria: starter-opener.html para aberturas, promoções, bumpers, intros e tipografia cinética; starter-explainer-*.html para explainers, com sufixo de modo/estilo (-kartun, -jurnalisme, -katalog, -sketsa = colagem; sem sufixo = ação contínua; -panggung = cartoon de palco). Cartoon de palco é um modo explainer (estilo 6), não uma categoria própria: o objetivo ainda é explicar com VO, a diferença está apenas no método de produção.

Tipo	Duração típica	Característica	Receita
Abertura / promo de produto	25–40 s	um conceito do menu (estrutura nasce do produto, não sequência padrão), um momento especial, fechamento da marca	references/opener-konsep.md + fluxo de trabalho abaixo + references/techniques.md
Bumper / ident / logo sting	3–8 s	construção do logotipo, um movimento de assinatura, termina antes que o espectador perceba	techniques.md (logo build-on, light leak)
Intro / outro de canal	5–12 s	nome do canal + movimento de assinatura igual em cada episódio	fluxo de trabalho abaixo
Tipografia cinética / letra	15–60 s	texto é o sujeito; divisão por palavra/letra; ritmo segue o áudio	techniques.md (split + blur direcional, pan 3D por palavra)
Título / lower third / bumper de segmento	2–6 s	elemento pequeno sobre o footage, entrada-saída limpa, fundo transparente	techniques.md
Explainer / vídeo explicativo	30–90 s	fatos com fonte, entidades aparecem, pontos de vista mudam, cinco estilos	references/explainer.md + starter por estilo

Explainer e personagens: leia antes de definir o plano

Para explainers cartoon educacionais planos com personagens (sexto estilo, cartoon de palco), ou revisões que parecem slideshow/miniatura, leia references/kartun-panggung.md: um palco por cena, zoom 1,08–1,95, contínuo dentro do palco e corte/deslocamento de 96 px entre eles, rig de juntas com transformação manual, zero legendas, paleta plana e brilhante. Diferencie frases, batidas visuais, enquadramento e troca de palco. Para construí-lo diretamente no After Effects, leia references/ae-bridge-higgsfield.md. As diretrizes específicas de explainer esclarecem as regras de abertura abaixo; exemplos de fontes, número de cenas e efeitos não são receitas universais.

Lei #1 — Isso é vídeo, não slide

A doença mais comum: o modelo organiza cenas como slides — título + subtítulo

• corpo + fileira de badges. Isso é lido imediatamente como "PPT" e será rejeitado.

Regras rígidas:

• Para abertura: uma frase curta + no máximo um objeto principal por cena. Não há kicker ("01 — RECURSO"), subtítulo, parágrafo de descrição, chip/badge de recurso, ou metadados técnicos (nome do pacote, URL longa). Chips, botões e rótulos que são parte da UI do produto em uso não estão incluídos.
• Informação nova = resposta visual nova. Em explainer, mude o estado/ação no mesmo mundo se ainda estiver relacionado; a troca de frase não obriga a mudar o plano.
• Lista de pontos é substituída por visual, não automaticamente três tiles. Escolha uma forma do menu de recursos em references/opener-konsep.md (um recurso demonstrado, palavra mudando, objeto transformando, cartão embaralhado, grid de tiles…); duas aberturas consecutivas não usam a mesma forma.
• Cena deve estar viva. A câmera pode ficar parada enquanto o objeto carrega a ação. Mova a câmera para seguir ou revelar algo; não confie em texto fade/slide sobre fundo parado, ou pan/zoom repetitivo em todos os segmentos.
• "Zoom in-out" = tamanho do plano, não respiração da câmera. Se o vídeo parece estático ou o usuário pede zoom, a câmera se aproxima do elemento que está contando a história (médio close-up / close-up) e depois volta ao wide seguindo o ritmo do conteúdo; respiração de alguns por cento é quase imperceptível (techniques.md §3b).

Leia references/anti-ppt.md ANTES de desenhar cenas — contém uma lista de violações reais com suas correções.

Lei #2 — Determinístico ou morto

Nenhuma linha lê o relógio do sistema. Todos os visuais são funções puras de tl.time() (tempo da timeline do GSAP): espectro, números em execução, partículas, tremor de câmera (seno de alta frequência, não Math.random()), posição de objetos que "fluem" (tween de DISTÂNCIA, não acúmulo de velocidade por quadro). Consequência: scrub preciso como timeline do After Effects, e renderização quadro a quadro para MP4 produz imagens idênticas toda vez.

Lei #3 — Estilo nasce do tema, não do starter, não de referência

Falha comum: abertura para outro produto sai com aparência IDÊNTICA à abertura do produto anterior — escuro, detalhes azuis, glow, nebulosa, mesma fonte — porque o modelo pega o estilo do starter. A animação pode ser boa, ainda assim falha: abertura é o rosto do produto, e dois produtos não podem ter o mesmo rosto.

1. Style brief primeiro, código depois. Antes de tocar no starter, escreva estas seis linhas e mostre ao usuário junto com o roteiro de cenas:
   • tema/produto + três adjetivos de sentimento que quer deixar;
   • conceito e impressão digital da estrutura (abertura/promo): três candidatos a conceito de references/opener-konsep.md, um escolhido com justificativa do produto, então conceito · número de cenas · objeto principal de cada cena · abertura · fechamento;
   • paleta: uma cor principal DA marca/tema (logotipo, ícone do aplicativo, site, embalagem), uma cor de fundo, um destaque — informe o hex E a fonte de cada cor; cores que não são da marca escreva "derivada: justificativa";
   • fonte de exibição que tenha caráter correspondente ao sentimento (não Poppins/Inter/Roboto/Montserrat/Arial) + fonte complementar; exceção: conceito afirmação → modo → resultado usando a fonte da UI do produto (references/opener-konsep.md);
   • destaque de texto: sem destaque de palavra, ou uma forma de destaque (especifique) — destaque de palavra é OPCIONAL, não padrão de toda abertura;
   • linguagem de fundo por segmento: uma direção da tabela "Direção de estilo" para todos, ou plano de mudança (qual segmento muda, para quê, por quê, o que aciona);
   • movimento de assinatura: um tipo de movimento repetido como identidade (wipe de objeto, roll 3D por palavra, papel voando, linha se desenhando, bloco de cor batendo na borda…);
   • movimento de fundo: uma linguagem do menu techniques.md §7c — não é a mesma coisa que movimento de assinatura, e não é automaticamente "objetos cruzando";
   • superfície de fundo: do menu §7d (gradiente/luz/textura/gradiente granuloso, ≥ 2 camadas) — não liso;
   • estilo de renderização de objeto: uma família do menu techniques.md §7e (plano, clay, glossy, vidro, isométrico, realista, linha neon…);
   • ativos fotográficos (se o conceito usar fotos de pessoas/lugares/produtos): fonte — foto do usuário, gerada via MCP Higgsfield, ou banco de imagens licenciado — PERGUNTE ao usuário, mais lista de planos por ato (references/opener-konsep.md "Fotos na abertura");
   • transições: determine quais limites precisam de efeito e quais podem ser corte; escolha do menu §4c conforme contexto, não obrigatório dois tipos ou obrigatório 3D;
   • um momento especial (onde o efeito mais caro é usado, uma vez).
2. Starter é arquitetura, não estilo. A cor cinza, fonte do sistema, e fundo WebGL em assets/starter-opener.html são PLACEHOLDER. Se algum deles ainda estiver visível no resultado, o estilo não foi aplicado. Fundo WebGL (nebulosa, poeira, grid, bloom) é apenas uma linguagem de fundo entre oito; desligue se a direção do estilo for outra.
3. Referência = ritmo, não aparência. Do vídeo de referência, pegue: duração por plano, tipo de transição, hierarquia de atenção, energia, linguagem de movimento. NÃO pegue: paleta, fonte, textura, layout, forma de ornamento, frase, sequência de cenas, e momento único (abertura/fechamento característico, gimmick único). "Faça como isso" significa "com esta energia", não "com esta aparência".

Lei #4 — Explainer não é palestra com slides

4a — Sempre comece de um starter de explainer

Há cinco modos de explicação visual, cada um com starter próprio em assets/; consulte references/explainer.md e a seção de estilo 1 para escolher:

• Ação contínua (starter-explainer.html): mundo flui sem cortes; ideal para demonstração de produto, visualização de dados, narração de processo, depoimento com locução.
• Colagem (starter-explainer-kartun.html, jurnalisme, katalog, sketsa): câmera percorre ativos parados no espaço 2,5D; efeito de cena de papel/cartolina; ideal para explicar conceitos abstratos com desenhos simples, notícias com ilustrações estilo editorial, catálogo de produtos com fotos, ou linha do tempo com esboços.
• Palco cartoon (starter-explainer-panggung.html): palco por cena com personagens articulados; ideal para história sequencial, narrativa educacional, animação de diálogo.

A escolha depende do conteúdo, não de preferência estética.

4b — Três elementos, não três níveis

Em qualquer cena de explainer:

• Máximo dois níveis de texto (título + legenda curta, ou somente título).
• Mínimo três objetos visuais que se movem, aparecem ou mudam de forma independente.
• Nunca texto centralizado com bullet points.

4c — Ritmo guiado pela locução (VO)

Use scripts/vo-pauses.html para extrair batidas de frase/parágrafo do áudio de locução. Cada batida de frase corresponde a uma ação ou revelação visual — não a um corte de cena. A transição de cena acontece quando o tópico ou cenário muda, não a cada frase.

4d — Estilo visual consistente

Escolha um estilo de ilustração (plano, aquarela, recorte de papel, linha fina, preenchimento sólido) e mantenha-o em todos os ativos. Misturar estilos quebra a ilusão de um mundo coeso. Em colagem, variação de textura de papel é permitida, mas o estilo de renderização do objeto (linha, preenchimento, sombra) deve ser consistente.

Fluxo de trabalho — antes de escrever código

1. Receber demanda do usuário — identifique se é abertura, bumper, intro, tipografia cinética, lower third ou explainer.
2. Se explainer, escolha o modo visual em references/explainer.md §1.
3. Se abertura/promo/bumper, escreva o style brief (Lei #3) e três conceitos de references/opener-konsep.md; mostre ao usuário e refine.
4. Após aprovação do conceito, escreva o roteiro de cenas: quantas cenas, objeto principal de cada, transição entre elas, momento especial.
5. Se for explainer com VO, processe o áudio com scripts/vo-pauses.html para obter as batidas de tempo.
6. Crie o arquivo HTML baseado no starter escolhido, substituindo placeholders por ativos e texto reais.
7. Teste visualmente com ?debug=1 para verificar temporização, transições e animações em cada segundo-chave.
8. Exporte MP4 (se necessário) via ffmpeg + export-frames.mjs ou gravação de tela como fallback.

Resumo das referências

Arquivo	Conteúdo
references/opener-konsep.md	Menu de conceitos para abertura/promo, exemplos de estrutura, uso de fotos
references/explainer.md	Guia completo de explainer, modos visuais, roteiro, ritmo VO
references/kartun-panggung.md	Regras para cartoon de palco com personagens
references/ae-bridge-higgsfield.md	Construção no After Effects via bridge/MCP Higgsfield
references/anti-ppt.md	Lista de violações comuns de slide e correções
references/techniques.md	Catálogo de técnicas de animação: transições, movimentos de câmera, efeitos de fundo

Lembrete final

Se o resultado parece um PowerPoint com animações, está errado. Refatore até que cada cena seja um pedaço de mundo vivo, não um slide decorado.