om-dubeyyy/vox-style-animation

Animação estilo Vox

Você cria vídeos explicativos curtos com o visual de colagem editorial: fundos de papel, cartões fotográficos com bordas e sombras, um marca-texto amarelo na frase-chave, círculos e setas vermelhas de caneta, mapas com alfinetes, animação de colagem em "twos" (12 fps) e cortes físicos, tudo com som projetado. O kit está em kit/, o renderizador em scripts/ e as regras de produção em references/.

A regra acima de todas: a imagem deve carregar o argumento. Decoração sobre um ponto fraco ainda é um vídeo fraco. A segunda regra: deve parecer feito à mão, de propósito. Cada padrão no kit adiciona uma pequena imperfeição física ou remove uma perfeição digital.

Antes de construir: leia estes

1. references/LOOK_BOOK.md: o que faz parecer profissional, com números medidos e os 18 erros de amador. Sempre leia.
2. references/SCRIPT.md: pergunta → arquivo → roteiro → lista de cenas. Leia ao escrever ou cronometrar.
3. references/API.md: todas as chamadas do kit. Leia antes de escrever a página.
4. references/TIPS.md: dicas de vídeos finalizados (imagem, tempo, som, verdade, entrega) e um debunk de 10–12 s quadro a quadro. Leia antes de um gancho curto ou um debunk.
5. references/SOUND.md (foley gravado, mix documental, narração), references/ASSETS.md (licenças!), references/QA.md conforme necessário.

Fluxo de trabalho

1. Pergunta e roteiro. Uma pergunta respondível e surpreendente com algo para mostrar. Gancho → contexto → virada → prova → recompensa (um debunk de 10 s: afirmação → "não é bem assim" → dados → concessão → recompensa, SCRIPT.md §7). Cerca de 215 palavras por minuto (ppm) quando um criador fala; cerca de 150–165 ppm para um narrador documental, com uma direção em cada linha. Cite cada fato em SOURCES.md, e nunca invente números, citações ou documentos; omita afirmações que os dados não sustentam.
2. Arquivo primeiro. Encontre as imagens e imagens reais antes de finalizar o roteiro: NASA, Biblioteca do Congresso, Smithsonian Open Access, Wikimedia, Pexels (verifique cada licença; faça contato visual de cada clipe em busca de marcas d'água e texto queimado). Imagens dentro dos cartões parecem documentário; fotos paradas sozinhas parecem slideshow. Registre arquivo, URL, licença e crédito. Nunca envie arquivos do Texturelabs ou fontes comerciais. Sem logotipos ou imagens da Vox. Nunca deixe o modelo adivinhar as imagens (--query noimg mostra como isso fica amador).
3. Lista de cenas. Uma linha por frase falada, com tempos de uma transcrição palavra por palavra da narração: python3 $SKILL/scripts/words.py vo.wav --inject <page>, depois const w = V.wordmap("#words") na página e as mesmas palavras no mix, para que uma linha regravada re-temporize tudo. Um movimento principal por linha. Escolha uma ideia visual recorrente para o vídeo inteiro. Nomeie o corte em cada mudança de cena (corte seco, curveCut, zoomCut, holePush, whip, paperWipe; nunca um dissolve).
4. Construa. Trabalhe dentro da pasta desta skill (a que contém este SKILL.md; chame-a de $SKILL, geralmente ~/.claude/skills/vox-style-animation). Execute cd $SKILL && npm run new -- <name>; ele cria videos/<name>/index.html com todos os caminhos configurados. Para um projeto em outro lugar, execute node $SKILL/scripts/new.mjs <name> --dir <folder>. Não copie páginas manualmente: os caminhos ../../kit só funcionam dois níveis abaixo da pasta da skill. Coloque as imagens em videos/<name>/assets/ e registre-as em seu SOURCES.md. Mantenha os padrões a menos que haja um motivo:
   • papel, não branco; fotos tingidas; cartões ±1.5–3°, com bordas de 4% e sombras suaves;
   • onTwos: true (movimento de colagem a 12 fps); o papel fica parado (drift: 0), mas os objetos respiram: breathe() em cada foto parada, float() de 2–3 px em cartões e recortes, um ou dois scrap() saindo da tela, um ghost() do documento real atrás (LOOK_BOOK §10);
   • a afirmação legível no primeiro quadro; clipes reais em cartões com footage();
   • pushes a +1–3 %/s em pausas, +4–6 %/s para ênfase;
   • anotações em suas palavras; três vozes tipográficas; 1–3 acentos, cada um com uma função;
   • em 9:16, nada importante nos 12% superiores ou nos 20% inferiores (a IU da plataforma cobre isso). examples/apollo/index.html mostra quase todos os helpers. Para mapas, use node $SKILL/scripts/map.mjs …. Para pré-processar uma foto ou clipe, use python3 $SKILL/scripts/photo_treat.py.
5. Verifique as imagens paradas primeiro. Execute node $SKILL/scripts/render.mjs videos/<name>/index.html --stills t1,t2,… em cada mudança de cena e anotação. Abra os PNGs e olhe para eles. Percorra references/QA.md e corrija cada problema. Se a renderização parar com um erro de página, a mensagem nomeia o helper e o alvo que está faltando.
6. Renderize. Para rascunhos, node $SKILL/scripts/render.mjs videos/<name>/index.html --voice vo.wav [--music bed.mp3] --gif mistura as dicas sintetizadas do kit (música −22 dB e com ducking, ruído ambiente, −14 LUFS). Para o final, use foley gravado: renderize com --no-sfx, depois python3 $SKILL/scripts/doc_mix.py silent.mp4 --cues cues.json --words <page> --voice vo.wav --music … --room $SKILL/kit/sfx/cc0/room_tone_office.mp3 --out final.mp4 --stems (narração como referência, cada amostra definida por seu pico e alinhada ao pico em sua palavra; SOUND.md). Nunca masterize efeitos sozinhos. Se o vídeo for exibido em 4K, renderize com --scale 2 (um master nativo de 3840×2160).
7. Verificação final. Extraia quadros do MP4 nas transições. Confirme o volume com ffmpeg -i out.mp4 -af ebur128 -f null -. Depois, relate o que você fez e suas fontes e licenças.

Configuração (uma vez por máquina)

npm install                      # gsap, playwright, d3-geo, topojson-client, world-atlas
npx playwright install chromium  # o navegador do renderizador
# opcional, para regenerar texturas e sons: pip install numpy scipy pillow
# opcional, para words.py e doc_mix.py: pip install faster-whisper numpy
# opcional, para a aceleração com preservação de voz do narration.py: um ffmpeg com rubberband (macOS: brew install ffmpeg-full)

Você precisa do Node 18+ e ffmpeg 4.4+ no PATH. O kit é JavaScript puro de navegador; não há etapa de build. Para a prévia no navegador, execute npm run preview, deixe-o rodando e abra http://localhost:8080/videos/<name>/.

Inegociáveis

• Apenas fatos reais, com fontes. Um cartão digitado de "ficha de fatos" é aceitável. Uma carta, recibo ou manchete forjada e apresentada como real não é.
• A licença de cada imagem é conhecida. Imagens emprestadas recebem um selo na tela ("Arquivo · NASA"), ou um crédito na legenda quando o canal proíbe selos na tela.
• Não use o logotipo ou imagens da Vox. "Estilo Vox" descreve um visual; o logotipo implica endosso. Se o usuário quiser a palavra "Vox" na tela como dica de estilo (muitos reels estilo Vox fazem isso), coloque-a em uma serifa livre incluída, mantenha um rótulo "Estilo Vox" em algum lugar e avise sobre o risco de marca registrada; é decisão dele.
• Verifique fronteiras disputadas em mapas.
• Mantenha o texto fora de imagens geradas por IA; adicione todo o texto na página.
• Mapas da Índia (e outras áreas disputadas): as fronteiras do Natural Earth são de fato, não oficiais. Veja ASSETS.md antes de publicar.

Não afiliado, endossado ou conectado à Vox Media. "Vox" é uma marca registrada da Vox Media, LLC.

Quando o vídeo do usuário "parece amador"

Pegue imagens paradas e percorra os 18 erros de amador em LOOK_BOOK.md. As correções usuais, em ordem de impacto:

1. Fundo de papel e tom de foto.
2. Movimento em "twos", com uma coisa se movendo por vez.
3. Anotações vinculadas às palavras.
4. Rotação, borda e sombra do cartão.
5. Objetos completamente parados entre entrada e saída: adicione breathe, float, um scrap.
6. Som: foley gravado em ações-chave, alinhado ao pico, sob a voz; música 18–24 dB abaixo da voz.
7. Substitua dissolvenças por cortes.