Bang Motion — motion graphic web que não é PPT
Na biblioteca de motion explainer. O corpo abaixo é o manual do diretor do Bang Motion para um index.html autossuficiente (HTML + CSS + GSAP). Dentro desta biblioteca, a mesma aparência também é distribuída como três engines, conectados ao pipeline normal, para que um reel possa usá-la como qualquer outro estilo:
style.json: o manifesto (bang-motion, canvas 1080x1920 a 30 fps, enginesremotion,fframesekyfram)remotion/:kit/(GlowHorizon,GrainyMeshBlob,GlassCard,KineticTitle,StatusPill,BangBanner,GlassCaptions,LivingGrain),template/,sync_kit.sh,CATALOG.md,AGENT_BRIEF.mdfframes/:Cargo.toml,src/(lib, tokens, kit, look, video, main),tools/ff.shkyfram/PRELUDE.lgv: tokens de paleta e a estrutura de batidas (drawBackdrop,drawBanner,drawCaptions,drawPanel,drawDot,drawFrame) para cenas.lgvdocs/style-guide.mdedocs/style-prompt.md: o guia de estilo compacto e o prompt portátil
Estruture um episódio com ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion (ou --engine fframes|kyfram). As skills do pipeline recebem o nome do estilo como $MOTION_STYLE, então nada mais no fluxo de trabalho muda.
O DNA do estilo, em uma frase: um mundo contínuo, um fundo de pelo menos duas camadas (base profunda mais um horizonte brilhante) que sempre se move, granulação que se desloca a partir de t em vez de ruído aleatório, uma câmera que respira em vez de um quadro estático, transições motivadas em vez de um único wipe repetido, e uma afirmação por shot em vez de uma quantidade de informação de slide.
v1.19.0 · por Bang Tutorial · MIT. Histórico de alterações em CHANGELOG.md;
instalação em README.md.
Esta skill é para qualquer agente de IA de codificação (formato Agent Skills aberto). Seu conteúdo são leis e receitas para motion graphics que se movem como vídeo, não como 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, fonte). Python e Node são opcionais, usados apenas para ferramentas de trabalho:
scripts/serve.py (servidor sem cache, só necessário se usar módulos locais),
puppeteer (snapshot/verificação automática, scripts/export-frames.mjs → MP4).
Se o usuário não tiver nenhum deles: (1) monte um único arquivo, abra com duplo clique;
(2) verificação visual via ?debug=1 (painel scrub) e
screenshot 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 perder quadros, e que a renderização
quadro a quadro requer 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 VO (limite de frase/parágrafo) | silencedetect | scripts/vo-pauses.html — abra no navegador, selecione o áudio, copie SEG/PARA; resultado é idêntico (Web Audio, sem instalação) |
| Duração/formato do áudio | ffprobe | número DUR do vo-pauses.html; o navegador reproduz wav/mp3/m4a/ogg diretamente |
| Exportar MP4 | combinar PNG do export-frames.mjs | não há 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 frames) | fps= + tile= | peça ao usuário para enviar screenshots 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 VO; apenas o MP4 requer instalação.
Player — nenhum, reprodução automática, loop
Entregável padrão: sem nenhum painel/player na tela, reproduz
diretamente ao ser aberto, e repete do início quando terminar (onComplete → play(0); se houver áudio, ele também repete). Controles ocultos: R reinicia,
Espaço pausa. Painel scrub/relógio só aparece com ?debug=1 (ferramenta de revisão),
e ?clean=1 impede a reprodução automática para exportação. Com áudio? Tente play()
direto; se o navegador bloquear, pause no frame 0 e inicie no primeiro clique —
sem texto "toque para iniciar". Isso já está embutido em ambos os starters.
Proibições estruturais — teste de PPT que pode ser verificado 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 a intuição:
-
grep -c "class=\"scene\"\|<section" index.html— se houver ≥ 3 cenas como<section>que são ligadas/desligadas comautoAlpha/opacity → é uma apresentação de slides. As cenas devem mudar porque o MUNDO/CÂMERA se move (câmera se move, whip para outro ângulo, push-through, fundo muda), não porque uma seção é esmaecida. Exceção válida: cartum 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 é esmaecida. -
Há um fio condutor visual persistente: um sujeito (ação contínua) OU um mundo de colagem/papel/branco percorrido pela câmera (cartum, 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 a câmera se movendo: cada cena com 3–5 elementos que entram gradualmente por frase (explainer.md "Uma cena = 3–5 elementos").
-
Por cena, conte nós de texto: eyebrow/kicker + título + corpo/rodapé = 3 níveis → PPT. Máximo de dois: um número/frase grande + um rótulo de mundo. Documento/carimbo/bloco de data com ≤ 3 linhas curtas conta como objeto, não nível de texto.
-
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 a partir do menu
techniques.md§7c (câmera que respira em fundo texturizado, gradiente que se desloca, bolha flutuante, granulação viva, varredura de luz por segmento, forma grande girando lentamente, partícula subindo, grade que respira, texto fantasma deslizando, Ken Burns + parallax…). Barras/linhas/ recortes que cruzam lateralmente ("lane", "range", "streak", chuva de partículas horizontal) JÁ FORAM USADOS em dois projetos consecutivos com nomes diferentes — isso não é padrão; só se o tema for velocidade/fluxo, e não pode ser em dois projetos consecutivos. -
Transições apenas com fade + scale bump + vazamento de luz em todos os cortes → template PPT. Whip para outro ângulo, corte para instrumento (mapa/velocímetro/perfil), push-through.
-
Explainer começa a partir do starter do SEU ESTILO:
starter-explainer-kartun,-jurnalisme,-katalog,-sketsa(modo colagem: câmera percorre ativos estáticos),starter-explainer(ação contínua: mundo flui), oustarter-explainer-panggung(cartum de palco: um palco por cena, rig de juntas, câmera apenas dentro do palco). O de colagem tem um rig; o de palco tem outro. NÃO a partir deassets/starter-opener.html(abertura de texto), nem do zero. -
Miniatura é slide. Zoom da câmera < 1,08 fazendo a casa do tamanho de um polegar e o chão vazio preenchendo metade da tela → PPT mesmo com tudo se movendo. O mundo é dividido em palcos do tamanho do frame, não um mapa grande sendo explorado (
kartun-panggung.mdLei 1). -
Esqueleto de template (abertura/promo). Verifique o roteiro e o código: primeira cena com texto ampliado que sai pela esquerda; três tiles/cartões de recurso alinhados; caixa de input/searchbar sendo digitada; sequência hook → recurso → recurso → promessa → logo → CTA. Dois ou mais sem exigência de conceito → template, mesmo com aparência nova. Escolha novamente o esqueleto de
references/opener-konsep.md.
Falhar em apenas um ponto → refaça antes de mostrar ao usuário.
Tipos de trabalho cobertos
Esta skill é para motion graphics web em GERAL. Explainer é apenas um dos seus tipos — ele tem seu próprio documento porque sua estrutura é diferente, não porque é o principal.
Os starters são nomeados de acordo com sua categoria: starter-opener.html para abertura, promo,
bumper, intro e tipografia cinética; starter-explainer-*.html para explainer,
com sufixo de modo/estilo (-kartun, -jurnalisme, -katalog, -sketsa = colagem;
sem sufixo = ação contínua; -panggung = cartum de palco). Cartum de palco é um
modo de explainer (estilo 6), não uma categoria própria: seu objetivo continua sendo 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 nascida do produto, não sequência padrão), um momento especial, encerramento com marca | references/opener-konsep.md + fluxo de trabalho abaixo + references/techniques.md |
| Bumper / ident / logotipo | 3–8 s | construção do logo, um movimento característico, termina antes que o espectador perceba | techniques.md (construção de logo, vazamento de luz) |
| Intro / outro de canal | 5–12 s | nome do canal + movimento característico igual em todos os episódios | 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 (divisão + desfoque direcional, pan 3D por palavra) |
| Title / lower third / bumper de segmento | 2–6 s | elemento pequeno sobre o vídeo, entrada e saída limpas, fundo transparente | techniques.md |
| Explainer / vídeo explicativo | 30–90 s | fatos com fonte, entidades aparecem, perspectiva muda, cinco estilos | references/explainer.md + starter por estilo |
Explainer e personagens: leia antes de determinar o shot
Para explainer de cartum educativo flat com personagens (sexto estilo, cartum de
palco), ou revisões que pareçam 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. Distinga frase, batida visual,
enquadramento e mudança de palco. Para construí-lo diretamente no After Effects, leia
references/ae-bridge-higgsfield.md. As diretrizes específicas do explainer esclarecem
as regras de abertura abaixo; exemplos de fonte, 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 as cenas como slides — título + subtítulo
- corpo do texto + fileira de badges. Isso soa imediatamente como "PPT" e será rejeitado.
Regras rigorosas:
- 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 longo). Chip, botão e rótulo que são parte da UI do produto que está sendo usado não estão incluídos.
- Informação nova = resposta visual nova. No explainer, mude o estado/ação no mesmo mundo se ainda estiver relacionado; a troca de frase não obriga a troca de shot.
- Lista de pontos substituída por visual, não automaticamente três tiles. Escolha um
método a partir do menu de recursos em
references/opener-konsep.md(um recurso demonstrado, palavra mudando, objeto se transformando, cartão embaralhado, grade de tiles…); duas aberturas consecutivas não usam o mesmo método. - A cena deve estar viva. A câmera pode permanecer enquanto o objeto carrega a ação. Mova a câmera para seguir ou revelar algo; não dependa de fade/slide de texto sobre fundo estático, ou pan/zoom repetitivo em todos os segmentos.
- "Zoom in-out" = tamanho do shot, não respiração da câmera. Se o vídeo parecer estático ou
o usuário pedir zoom, a câmera se aproxima do elemento que está contando a história (medium close-up
/ close-up) e depois recua para o wide seguindo o ritmo do conteúdo; a respiração de alguns por cento é quase
imperceptível (
techniques.md§3b).
Leia references/anti-ppt.md ANTES de projetar as 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 contando,
partículas, trepidação da câmera (seno de alta frequência, não Math.random()),
posição de objeto que "flui" (tween de DISTÂNCIA, não acúmulo de velocidade por
frame). Consequências: scrub preciso como a timeline do After Effects, e
renderização quadro a quadro para MP4 produzindo imagens idênticas todas as vezes.
Lei #3 — O estilo nasce do tema, não do starter, não da referência
Falha comum: abertura para outro produto sai com a aparência EXATA da abertura do produto anterior — escuro, acento azul, brilho, nebulosa, fonte igual — porque o modelo pegou 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.
- Style brief primeiro, código depois. Antes de tocar no starter, escreva
estas seis linhas e mostre ao usuário junto com o roteiro das cenas:
- tema/produto +