pvsaravanan/bang-motion

Bang Motion: motion graphics web que não são PPT

v1.19.0 · por Bang Tutorial · MIT. O histórico de alterações está no CHANGELOG.md upstream; as instruções de instalação estão no README.md upstream. Esta cópia é uma tradução para o português da skill upstream.

Esta skill é para qualquer agente de codificação de IA (formato aberto Agent Skills). Ela contém as leis e receitas para motion graphics que se movem como vídeo, não como uma apresentação. Siga-as antes de escrever código.

Pré-requisitos: apenas um navegador

O entregável (index.html) precisa apenas de um navegador moderno mais internet para as CDNs (GSAP, fontes). Python e Node são opcionais e usados apenas para ferramentas de trabalho: scripts/serve.py (servidor sem cache, necessário apenas ao usar módulos locais), puppeteer (snapshots/verificação automáticos, scripts/export-frames.mjs → MP4). Se o usuário não tiver nenhum dos dois: (1) ainda construa um único arquivo e abra-o com um duplo clique; (2) verifique visualmente com ?debug=1 (painel de scrub) e capturas de tela manuais em segundos-chave; (3) obtenha MP4 através de gravação de tela (OBS / gravação de aba do navegador), e explique que uma gravação de tela pode perder quadros e que a renderização quadro a quadro precisa Node. Nunca crie um entregável que precise de npm install apenas para ser ASSISTIDO.

ffmpeg também é opcional. Verifique primeiro (ffmpeg -version); se estiver faltando:

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

Sem ffmpeg, o fluxo do explicador ainda está completo até a sincronia de VO; apenas o MP4 precisa de uma instalação.

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

Entregável padrão: nenhum painel/player na tela, ele é reproduzido imediatamente quando aberto e recomeça do início quando termina (onComplete → play(0); se houver som, o áudio também faz loop). Controles ocultos: R reinicia, Espaço pausa. O painel de scrub/relógio aparece apenas com ?debug=1 (uma ferramenta de revisão), e ?clean=1 mantém a reprodução automática para exportação. Som? Tente play() imediatamente; se o navegador bloqueá-lo, segure no quadro 0 e inicie no primeiro clique, sem texto "toque para iniciar". Isso já está embutido em ambos os starters.

Proibições estruturais: verificações de PPT que você pode executar mecanicamente

Outros modelos (e você, quando cansado) cairão nesses padrões mesmo depois de ler as leis abaixo. Antes de entregar, verifique o CÓDIGO, não seus sentimentos:

1. grep -c "class=\"scene\"\|\<section" index.html: se houver ≥ 3 cenas feitas de elementos <section> ligados e desligados com autoAlpha/opacidade, isso é uma apresentação de slides. As cenas devem mudar porque o MUNDO/CÂMERA se move (a câmera se move, faz um whip para outro canto, avança, o fundo muda), não porque uma seção é esmaecida. Exceção legítima: estágio de cartoon (references/cartoon-stage.md) usa um corte/deslize de 96 px entre estágios. Isso é permitido porque cada estágio está totalmente vivo (≥10 objetos em ação), não uma imagem parada sendo esmaecida.

2. Há uma linha visual contínua que persiste: um sujeito (ação contínua) OU um mundo de colagem/papel/branco sobre o qual a câmera viaja (cartoon, foto, catálogo, esboço). Fotos ocupando a tela toda trocando sem um mundo compartilhado → PPT. Uma foto + uma frase por cena, trocando a cada cena → ainda uma apresentação de slides mesmo que a câmera se mova: cada cena tem 3–5 elementos que entram gradualmente por frase (explainer.md "Uma cena = 3–5 elementos").

3. Conte nós de texto por cena: sobretítulo/kicker + título + corpo/crédito = 3 níveis → PPT. Máximo de dois: um número/frase grande + um rótulo de mundo. Um bloco de documento/carimbo/data com ≤ 3 linhas curtas conta como um objeto, não um nível de texto.

4. Ken Burns (escala 1,0→1,05 em uma foto) como o único movimento → PPT. O movimento a cada segundo deve vir da LINGUAGEM DE MOVIMENTO DE FUNDO escolhida no briefing de estilo da seção §7c de techniques.md (respiração da câmera em um fundo texturizado, gradiente flutuante, manchas flutuantes, grão vivo, um sweep de luz por segmento, uma forma grande girando lentamente, partículas subindo, grade pulsante, texto fantasma flutuando, Ken Burns + paralaxe…). Barras/linhas/pedaços cruzando lateralmente ("faixa", "intervalo", "risca", chuva de partículas horizontal) JÁ FORAM usados por dois projetos consecutivos sob nomes diferentes. Eles não são um padrão; use-os apenas quando o tema for realmente velocidade/fluxo, e nunca em dois projetos consecutivos.

5. Transições que são apenas fade + bump de escala + vazamento de luz em todo corte → modelo de PPT. Whip para outro canto, corte para um instrumento (mapa/velocímetro/perfil), push-through.

6. Explicadores começam a partir do starter para seu ESTILO: starter-explainer-cartoon, -journalism, -catalog, -sketch (modo colagem: a câmera viaja sobre ativos estáticos), starter-explainer (ação contínua: o mundo flui), ou starter-explainer-stage (estágio de cartoon: um estágio por cena, rig articulado, câmera apenas dentro do estágio). NÃO a partir de assets/starter-opener.html (abertura de texto), e nem do zero.

7. Uma miniatura é um slide. A câmera amplia < 1,08, então uma casa é do tamanho de um polegar e chão vazio preenche metade da tela → PPT mesmo que tudo se mova. Divida o mundo em estágios do tamanho do quadro em vez de um mapa grande para explorar (cartoon-stage.md Lei 1).

8. Esqueleto de modelo (abertura/promo). Verifique o roteiro e o código: a primeira cena é texto que cresce e depois sai pela esquerda; três tiles/cartões de recurso lado a lado; uma caixa de entrada/barra de pesquisa sendo digitada; o gancho de ordem → recurso → recurso → promessa → logo → CTA. Dois ou mais sem demanda do conceito → modelo, mesmo com uma nova aparência. Escolha o esqueleto novamente a partir de references/opener-concepts.md.

Falhe em até um ponto → retrabalhe antes de mostrar ao usuário.

Tipos de trabalho cobertos

Esta skill é para motion graphics web em GERAL. O explicador é apenas um tipo; ele tem seu próprio documento porque sua estrutura difere, não porque é o principal.

Os starters são nomeados por categoria: starter-opener.html para aberturas, promos, bumpers, intros e tipografia cinética; starter-explainer-*.html para explicadores, com um sufixo de modo/estilo (-cartoon, -journalism, -catalog, -sketch = colagem; sem sufixo = ação contínua; -stage = estágio de cartoon). Estágio de cartoon é um modo de explicador (estilo 6), não uma categoria própria: seu objetivo ainda é explicar com VO, apenas a maneira como é produzido difere.

Tipo	Duração usual	Características	Receita
Abertura / promo de produto	25–40 s	um conceito do menu (o esqueleto vem do produto, não de uma ordem fixa), um momento especial, fechamento da marca	references/opener-concepts.md + o fluxo de trabalho abaixo + references/techniques.md
Bumper / ident / logo sting	3–8 s	construção do logo, um movimento de assinatura, concluído antes do espectador notar	techniques.md (construção do logo, vazamento de luz)
Intro / outro de canal	5–12 s	nome do canal + o mesmo movimento de assinatura a cada episódio	fluxo de trabalho abaixo
Tipografia cinética / letras de música	15–60 s	o texto é o sujeito; dividido por palavra/letra; o ritmo segue o áudio	techniques.md (split + desfoque direcional, panorâmica 3D por palavra)
Título / terço inferior / bumper de segmento	2–6 s	um pequeno elemento sobre a filmagem, limpo de entrada e saída, fundo transparente	techniques.md
Explicador / vídeo explicativo	30–90 s	fatos com fontes, entidades mostradas, pontos de vista variáveis, cinco estilos	references/explainer.md + o starter para cada estilo

Explicadores e personagens: leia antes de decidir os planos

Para um explicador de cartoon educativo plano com personagens (o sexto estilo, estágio de cartoon), ou uma revisão que pareça uma apresentação de slides/miniatura, leia references/cartoon-stage.md: um estágio por cena, zoom 1,08–1,95, contínuo dentro de um estágio e um corte/deslize de 96 px entre eles, um rig articulado com transformações manuais, zero legendas, uma paleta plana e brilhante. Distinga frase, batida visual, enquadramento e mudança de estágio. Para construí-lo diretamente no After Effects, leia references/ae-bridge-higgsfield.md. Esta orientação específica do explicador afia as regras de abertura abaixo; os exemplos de fontes, contagens de cena e efeitos não são receitas universais.

Lei #1: Isso é vídeo, não slides

A doença mais comum: o modelo dispõe as cenas como slides, com título + subtítulo

• corpo do texto + uma fileira de badges. Isso é lido instantaneamente como "PPT" e será rejeitado.

As regras rígidas:

• Para aberturas: uma frase curta + no máximo um objeto principal por cena. Sem sobretítulo ("01 — RECURSOS"), subtítulo, parágrafo explicativo, chip/badge de recurso, ou metadados técnicos (nome do pacote, URL longa). Chips, botões e rótulos que fazem parte da UI do produto sendo usado não contam.
• Nova informação = uma nova resposta visual. Em um explicador, mude o estado/ação no mesmo mundo quando ainda estiver relacionado; uma nova frase não precisa mudar o plano.
• Substitua listas com marcadores por visuais, não automaticamente três tiles. Escolha a forma do menu de recursos em references/opener-concepts.md (um recurso demonstrado, palavras que trocam, um objeto que se transforma, cartas embaralhadas, uma grade de tiles…); duas aberturas consecutivas não usam a mesma forma.
• As cenas devem estar vivas. A câmera pode descansar enquanto os objetos carregam a ação. Mova a câmera para seguir ou revelar algo; não confie em texto esmaecendo/deslizando sobre um fundo parado, ou em panorâmica/zoom repetidos em cada segmento.
• "Zoom in-out" = tamanho do plano, não respiração da câmera. Quando 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 se afasta para o plano aberto seguindo a batida do conteúdo; uma respiração de alguns por cento é quase invisível (techniques.md §3b).

Leia references/anti-ppt.md ANTES de projetar as cenas. Ele lista violações reais juntamente com suas correções.

Lei #2: Determinístico ou morto

Nem uma única linha lê o relógio do sistema. Cada visual é uma função pura de tl.time() (o tempo da timeline GSAP): espectro, números em execução, partículas, tremor de câmera (seno de alta frequência, não Math.random()), a posição de objetos que "fluem" (interpole DISTÂNCIA, não acumule velocidade por quadro). A consequência: o scrub é exato como uma timeline do After Effects, e a renderização quadro a quadro para MP4 produz imagens idênticas todas as vezes.

Lei #3: O estilo nasce do tema, não do starter, não de uma referência

Uma falha comum: uma abertura para um produto diferente sai com EXATAMENTE a aparência da abertura do produto anterior: escuro, destaque azul, brilho, nebulosa, a mesma fonte, porque o modelo tirou seu estilo do starter. A animação pode ser boa e ainda assim falha: uma abertura é o rosto de um produto, e dois produtos não devem compartilhar um rosto.

1. Briefing de estilo primeiro, código depois. Antes de tocar em um starter, escreva estas linhas e mostre-as ao usuário junto com o roteiro da cena:
   • tema/produto + três adjetivos para a sensação a deixar;
   • impressão digital do conceito e estrutura (abertura/promo): três conceitos candidatos de references/opener-concepts.md, um escolhido com uma razão do produto, então conceito · número de cenas · objeto principal por cena · abertura · fechamento;
   • paleta: uma cor principal tirada DA marca/tema (logo, ícone do app, site, embalagem), uma cor de fundo, um destaque. Indique o hex E a fonte de cada cor; uma cor que não é da marca é escrita como "derivada: motivo";
   • uma fonte de exibição com caráter que combine com essa sensação (não Poppins/Inter/Roboto/Montserrat/Arial) + uma fonte complementar; exceção: o conceito de afirmação → como → resultado usa a fonte UI do próprio produto (references/opener-concepts.md);
   • ênfase de texto: nenhum destaque de palavra, ou uma forma de destaque (nomeie-a). O destaque de palavra é OPCIONAL, não um padrão de toda abertura;
   • linguagem de fundo por segmento: uma direção da tabela "Direções de estilo" para tudo, ou um plano de mudança (qual segmento muda, para quê, por que, acionado por quê);
   • movimento de assinatura: um tipo de movimento repetido como uma identidade (wipe de objeto, rotação 3D por palavra, papel voador, uma linha que desenha, blocos de cor batendo na borda…);
   • movimento de fundo: uma linguagem do menu §7c de techniques.md. Não é a mesma coisa que o 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 plana;
   • estilo de renderização de objeto: uma família do menu §7e de techniques.md (plano, argila, brilhante, vidro, isométrico, realista, linha de néon…);
   • ativos de foto (quando o conceito usa fotos de pessoas/locais/produtos): a fonte (fotos do usuário, geradas através do MCP Higgsfield, ou banco de imagens licenciado) é PERGUNTADA ao usuário, mais uma lista de planos por ato (references/opener-concepts.md, "Fotos em aberturas");
   • transições: decida quais limites precisam de um efeito e quais podem ser um corte simples; escolha do menu §4c para se adequar ao contexto; dois tipos ou 3D não são obrigatórios;
   • um momento especial (onde o efeito mais caro é usado, uma vez).
2. Um starter é arquitetura, não estilo. As cores cinza, fonte do sistema e fundo WebGL em assets/starter-opener.html são MARCADORES DE LUGAR. Se qualquer um deles ainda estiver visível no resultado, o estilo não foi derivado. O fundo WebGL (nebulosa, du…

…

[truncado para tradução]