Vídeo explicativo animado

Animador

Você faz animação: imagens desenhadas que se movem no Remotion. Você não faz filmagens.

Escopo

• Não chame Veo, Kling, Sora ou qualquer outro modelo de texto-para-vídeo nesta skill. Cada quadro é composto no Remotion a partir de imagens, SVG e código.
• Se a solicitação precisar de filmagens reais, tomadas fotorrealistas ou um trailer de filme, pare e diga que esta skill não pode fazer isso. Não mude para um modelo de vídeo silenciosamente.

As regras de bom gosto

Cada regra vem de uma versão que foi rejeitada.

1. Cenas, não conversas. Mostre cada ponto como uma cena encenada: os personagens agem, os objetos se movem, o lugar muda. Duas cabeças conversando sobre um fundo são um resultado rejeitado.
2. Dinâmico. Mova a câmera em cada tomada. Mude o tamanho do plano com frequência:全景, médio, close. Corte na ação. Nenhuma tomada permanece estática por mais de cerca de 4 s.
3. Personagens elegantes. Vista-os bem para o cenário: um corte perfeito, bom tecido, detalhe elegante. Nunca pessoas clip-art genéricas.
4. Acabamento profissional e decente. Deve parecer uma animação de estúdio. Sem truques, sem efeitos baratos, sem estilo de meme.
5. Profundidade antes de amplitude. Um ponto bem mostrado é melhor do que seis pontos em uma lista. Se o tópico tiver muitos pontos, proponha um vídeo por ponto.
6. Duas vozes em um diálogo quando o tópico permitir: um personagem pergunta, o outro responde. Pergunte ao usuário qual voz fala cada papel. Nunca clone a voz de uma pessoa real sem o consentimento por escrito dessa pessoa.
7. Para um modelo ou processo, faça o corte esquemático. Não pergunte qual corte. Formas SVG puras na paleta da marca, sem figuras; a narração carrega a história. Uma história sobre pessoas permanece um corte de personagens.
8. O clima segue o tópico. Um aplicativo divertido ganha um vídeo divertido: movimento saltitante, easing que ultrapassa, cartões que aparecem. Um tópico sério recebe um tratamento contido. Leia o produto antes de escolher o clima.

Onde as coisas estão

O quê	Onde
Diretório do projeto	~/explainer/<nome>/. Substitua a raiz por EXPLAINER_ROOT. Uma pasta por projeto; uma prévia e o vídeo completo são duas composições do mesmo projeto
Estrutura de pastas	SCHEMA.md ao lado deste arquivo. in/ entrada, assets/ masters, public/ entrada de renderização, work/ rascunho, out/ finais
Kit inicial	starter/ ao lado deste arquivo: uma composição Remotion mínima que reproduz um storyboard, mais o kit da marca e os helpers de movimento
Scripts	scripts/ ao lado deste arquivo. Execute-os a partir da raiz do projeto. new-project.sh copia o starter e as ferramentas para um novo projeto
Geração de mídia	adapters/ ao lado deste arquivo, e ADAPTERS.md para o contrato. Defina GEN_IMAGE, GEN_SPEECH, GEN_SFX, CUTOUT e GEN_MUSIC para seus próprios comandos
Perfis de marca	brands/<nome>/ ao lado deste arquivo. brands/example/ é um perfil neutro para copiar

Defina os caminhos das ferramentas uma vez por shell ou no .env do projeto:

SKILL=~/.claude/skills/explainer-video
export GEN_IMAGE="python3 $SKILL/adapters/gen-image.py"
export GEN_SPEECH="python3 $SKILL/adapters/gen-speech.py"
export GEN_SFX="python3 $SKILL/adapters/gen-sfx.py"
export CUTOUT="python3 $SKILL/adapters/cutout.py"
export GEN_MUSIC="python3 $SKILL/adapters/gen-music.py"

Procedimento

1. Roteiro e storyboard

1. Escreva storyboard.json. Para cada batida, escreva o falante, a linha, a cena (lugar, ação, objetos), o tamanho do plano e o movimento da câmera. Veja SCHEMA.md para os campos da batida.
2. Certifique-se de que cada ponto tenha pelo menos uma cena que o mostre sem palavras.
3. Pergunte ao usuário se o vídeo precisa de legendas. Se sim, pergunte qual tipo: incorporadas na imagem, ou um arquivo .srt ao lado do vídeo. Faça as legendas a partir do roteiro das vozes, não de uma transcrição: o roteiro tem a grafia correta.
4. Pergunte ao usuário qual voz fala cada papel. Ofereça uma voz gratuita para as prévias e uma voz paga e expressiva para o corte final.
   • Voz gratuita primeiro. Narre toda prévia e o primeiro corte completo com a voz gratuita. Mantenha o gênero do papel. Gere a voz paga somente após o usuário aprovar o corte com voz gratuita. Mantenha a tag de cada batida no storyboard para a passagem paga.
5. Pergunte ao usuário qual marca o vídeo usa: um perfil de brands/<nome>/, a aparência do próprio projeto, ou nenhum. Um vídeo sem marca óbvia ainda precisa da pergunta. Escreva a resposta em in/brief.md, para que os cartões e a paleta venham dela desde o primeiro render.
6. Envie o storyboard para o usuário. Não gere imagens antes que ele aprove.

2. Personagens

1. Escreva uma descrição fixa por personagem: rosto, cabelo, corpo, roupas. Copie-a palavra por palavra em cada prompt de imagem. Mantenha-a em in/characters.md.
2. Gere o desenho base com gen-image.py em um fundo liso e simples. Adicione "sem sombra no chão, sem brilho" ao prompt.
3. Gere as poses de atuação a partir dessa base com --input: andar, sentar, apontar, reagir, gesticular, virar. Uma cena precisa de poses, não apenas uma figura em pé.
4. Faça os estados da boca (fechada, aberta, bem aberta) e a piscada. Cole apenas a região alterada na base. Nunca use uma imagem editada inteira: o rosto se desloca.
5. Recorte cada pose com cutout.py. Use isnet-anime para desenhos e u2net para fotos.
6. Coloque todas as poses na mesma tela de 1024 px, para que uma mudança de pose não precise de deslocamento.
7. Faça uma folha de contato de todas as poses (ImageMagick montage). Abra-a e procure uma pose que difira no rosto, roupas ou proporções. Regere essa pose. Faça no máximo 3 tentativas por imagem.

Pessoas reais: não desenhe ou anime uma pessoa real sem o consentimento dessa pessoa. Pergunte primeiro.

• Corte o rosto com cutout.py --model u2net. Não o coloque em um círculo.
• Cabelo claro em fundo claro desaparece no recorte. Se isso acontecer, use outra foto.
• Desvaneça o pescoço e os ombros sob o queixo, e desenhe o pescoço com o corpo. Uma foto recortada termina com uma borda dura ali.
• Desenhe os corpos em código (articulações SVG). Então cada pose é exata e nenhum rosto pode se deslocar.

3. Cenários e objetos

1. Gere cada lugar como um fundo (--size 1536x1024) no mesmo estilo dos personagens, sem pessoas.
2. Gere os objetos que atuam como camadas de recorte separadas: um telefone, um ingresso, uma xícara, uma cortina.
   • Olhe para cada tela, dispositivo e embalagem em busca de marcas e texto. Um prompt "sem logotipos" não os impede. Corrija uma marca com ImageMagick. Não use uma edição imagem-para-imagem: ela remove a parte errada e mantém a marca.
3. Gere camadas de primeiro plano para paralaxe onde ajudar: fileiras de assentos, uma balaustrada.
4. Se o projeto tiver um perfil de marca, use-o. Pegue a paleta de brand.css, o logotipo e o lema de images/, e as fontes de fonts/. Não invente cores da marca. Leia o NOTES.md do perfil para sua forma de marca.
5. Se o projeto não tiver um gráfico dedicado para um ícone, use um ícone MDI (@mdi/js, um caminho 24×24). Não desenhe um ícone à mão e não use emoji. Se o site do projeto já coloca um ícone MDI em algo, use o mesmo ícone no vídeo.

4. Vozes

1. Gere cada linha com gen-speech.py e a mesma --voice por falante.
   • Até que o usuário aprove o corte, use a voz gratuita do mesmo gênero. As notas abaixo sobre os modelos pagos se aplicam à passagem paga.
   • Execute scripts/regen-voices.py <modelo>. Ele envia uma linha para a API apenas quando sua solicitação mudou (texto, voz, modelo, configurações ou um vizinho do mesmo falante), para que as tomadas aprovadas permaneçam. Não regere todas as linhas para corrigir uma.
   • Para refazer uma linha intencionalmente, adicione --fresh <batida ou falante>. Cada tomada é mantida em assets/voice/takes/. Para voltar a uma tomada anterior, use --restore <tomada>.
   • Um projeto feito antes do cache não tem voice_key por batida. Execute-o uma vez com --adopt, ou a primeira execução gera cada linha novamente.
   • Com um modelo expressivo, coloque uma tag de áudio em inglês antes de cada linha, por exemplo [warmly], e ajuste os botões de estabilidade, similaridade, estilo e velocidade do modelo. Sem eles a linha soa monótona. Mantenha a tag fora de line, porque a legenda mostra line: coloque-a no campo tag da batida e envie-a antes do texto.
   • Não use tags de áudio com um modelo que não as documenta. Ele pode falá-las em voz alta.
   • Para cada voz, liste os nomes, as palavras estrangeiras e os códigos de letras primeiro. Uma voz os lê da maneira que sua própria língua faria, mesmo com um código de idioma definido. Tente uma grafia fonética da palavra primeiro, depois IPA inline. Faça três tomadas por grafia e uma tomada de controle, e deixe o usuário escolher pelo ouvido.
   • Não escreva um som em maiúsculas. Uma voz pode ler maiúsculas como letras individuais. Escreva o som como uma palavra.
   • Uma nova tomada move cada palavra. Key os deslocamentos de quadro dentro da batida (câmera, destaques, efeitos sonoros) para os inícios dos spans de legenda, não para quadros literais. Após uma nova tomada, obtenha os tempos das palavras de uma passagem de fala-para-texto e redefina apenas os inícios dos spans.
2. Execute scripts/level-voices.py. Ele nivela cada linha pela intensidade da fala. Nivelamento de pico não é suficiente: as linhas podem se espalhar por 6 dB.
   • Uma versão em outro idioma: mantenha a cena e gere uma segunda composição a partir da mesma fonte. Dê ao novo idioma seu próprio storyboard com os mesmos ids de batida, sua própria pasta de vozes, envelopes e corte de música (STORYBOARD, VOICE_DIR, MUSIC em check-audio.py).
   • Nivele as novas vozes para o nível de fala do mix aprovado, não para o mesmo alvo.
3. Faça os envelopes da boca e agrupe-os com scripts/gen-envelopes.mjs.

5. Animação no Remotion

• Encenação: execute cada cena como ação. Os personagens entram, sentam, reagem e usam os objetos. Mova objetos em sua própria camada. Uma correção adiciona a parte que está faltando; mantenha a ação que mostra a causa.
• Câmera: aproxime, panorâmica ou rastreie em cada tomada. Use paralaxe entre o fundo, os personagens e o primeiro plano. Prenda cada movimento de câmera para que cada camada que deve preencher o quadro permaneça nele em sua profundidade de paralaxe, rotação incluída. Uma camada com profundidade < 1 move-se menos que a câmera: um zoom out ou uma panorâmica que termina descentrada descobre a borda do quadro, e uma faixa do chão aparece.
• Profundidade: coloque o chão e tudo o que está sobre ele (cadeiras, pessoas, objetos) em uma camada em uma profundidade. Duas profundidades separam o chão e os pés da cadeira sob cada movimento de câmera, e as cadeiras flutuam. Um aceno ocioso gira o corpo acima da linha do assento, não a cadeira.
• Movimento: use molas com um pequeno overshoot. Use antecipação antes de um movimento. Nunca use uma troca brusca entre duas poses.
• Ocioso: dê à respiração, balanço e piscada seus próprios períodos e fases.
• Boca: acione-a a partir do envelope, com um mínimo de espera de 3 quadros (mouthStates no motion.ts do starter).
• Narrador fora da tela: mostre um orb de forma de onda que segue o envelope, não o rosto do narrador (NarratorOrb.tsx no starter).
• Luz: use a luz como uma ferramenta de história. Por exemplo: luzes da casa diminuem, uma tela de telefone brilha em um rosto.
• Transições: escolha uma por corte (corte de correspondência, wipe, corte seco). Não use um fade para todos os cortes.
• Um personagem permanece um objeto através de um corte. Quando um personagem se move de uma tomada para a próxima, carregue-o na tela de seu lugar antigo para o novo. Um personagem que sai de um lado e entra pelo outro é lido como um segundo personagem.
• Uma mudança que o espectador deve notar ganha sua própria pausa na voz. Divida a batida e adicione 1,5–2 s de silêncio depois dela. Encene a mudança nessa pausa: marque o estado antigo, escureça-o, cross-fade, então destaque o novo estado na próxima linha.
  • Coloque a pausa em uma quebra de frase, nunca dentro de uma frase. Encontre a lacuna pelo nível: pegue a execução mais longa de janelas de 20 ms abaixo de cerca de −38 dB (relativo ao pico) após a palavra, e corte no meio dela. Não pegue a lacuna dos tempos das palavras do speech-to-text: suas bordas podem estar 0,5 s erradas.
• Legendas e cartões de pontos-chave: mantenha-os curtos. Um cartão apoia uma cena. Ele nunca a substitui.
• O quadro — todo vídeo tem isso:
  1. Cartão de título de abertura, cerca de 3 s: o logotipo (se aplicável), o título do vídeo e uma linha curta. Pode ser silencioso ou ter apenas música.
  2. Slide de encerramento, cerca de 4 s: o logotipo (se aplicável), a afirmação ou chamada para ação, e a URL. Pode ser silencioso.
  3. Logotipo de canto: um pequeno logotipo no canto inferior direito durante todo o vídeo entre os dois cartões. Desvaneça-o após o cartão de abertura e antes do slide de encerramento. Mantenha-o longe de rostos e de elementos-chave.
  4. "Se aplicável": um vídeo de marca, produto ou empresa tem um logotipo. Um vídeo pessoal não tem logotipo de empresa. Ainda assim, ganha o cartão de título e o slide de encerramento.
  5. Para adicionar o quadro a um vídeo finalizado, não refaça o tempo da voz. Coloque a composição existente em um <Series> entre os dois cartões. Os cartões adicionam silêncio no início e no fim, e isso é aceitável.
• Marca primeiro, sempre. Se o projeto tiver um perfil de marca, use-o: os cartões do perfil, a paleta de brand.css, o logotipo e a marca como ativos reais. Se o projeto tiver capturas de tela reais do aplicativo, use-as como uma camada: uma tela real vence uma aproximação desenhada de uma tela. Apenas as pessoas, lugares e objetos são desenhados. UI, logotipos e tipo vêm da marca. Se o perfil estiver claramente desatualizado em relação ao aplicativo ao vivo, diga isso e use o aplicativo.

6. Verifique a imagem

1. Renderize imagens estáticas com npx remotion still nos quadros-chave.
2. Abra as imagens estáticas. Procure um rosto que um cartão ou uma legenda cubra, e um personagem que a borda do quadro corte. Uma segunda opinião opcional: ADAPTERS.md descreve um comando REVIEW_IMAGE. Trate seu veredito como uma pista, não como um portão, e confirme cada descoberta no quadro.
3. Renderize uma amostra de cerca de 20 s com uma cena, uma mudança de pose, um movimento de câmera e uma troca de diálogo.
4. Extraia quadros em torno de cada mudança de pose...