hozanBaydu/animated-explainer-shorts

Vídeos explicativos animados

Aplique estas regras ao planejar, escrever, animar ou revisar um vídeo. As regras de história vêm primeiro: um vídeo bonito com um roteiro fraco ainda falha.

Criando o vídeo

Quando o usuário quiser um arquivo de vídeo real, construa-o com Remotion (e Three.js para 3D) a partir do template desta habilidade.

1. História primeiro. Escreva o roteiro como beats (uma ideia por beat) usando as regras de História abaixo. Verifique a primeira frase e os segundos iniciais antes de qualquer outra coisa.
2. Projeto. Copie template/ para uma nova pasta, execute npm install. Leia reference/remotion.md antes de escrever código e reference/threejs.md antes de qualquer cena 3D.
3. Voz. Se o usuário fornecer uma narração (gravação própria ou qualquer arquivo de texto-para-fala), coloque-a em public/ e defina "voice" em public/plan.json. Caso contrário, coloque cada linha no "text" de sua cena e execute npm run voice (voz Kokoro gratuita, inglês): ele escreve public/voice.wav e define o início e fim de cada cena. Escolha uma voz com node scripts/voice.mjs am_michael (masculina) ou o padrão af_heart (feminina).
4. Timing. Execute npm run captions para timestamps de palavras. Com seu próprio arquivo de voz, inicie cada cena na primeira palavra da linha que ela mostra; com npm run voice isso já está feito.
5. Cenas. Escreva um componente por cena em src/scenes/, registre-o e liste as cenas em plan.json. Cada linha falada ganha seu próprio visual.
6. Verifique. Renderize stills (npx remotion still Main out/still.png --frame=N) no início, meio e fim de cada cena, observe-os e corrija qualquer coisa que quebre as regras abaixo.
7. Renderize. npm run render escreve out/video.mp4. Assista os primeiros 3 segundos novamente antes de considerar pronto.

Requisitos: Node.js 18+ e ffmpeg. O Remotion baixa seu próprio Chrome headless na primeira renderização.

História

1. Todo vídeo é uma pequena história: um personagem quer algo, algo o bloqueia, uma reviravolta acontece, há uma recompensa. Uma lista de fatos não é uma história.
2. A primeira frase é uma afirmação ousada, uma contradição de algo que as pessoas acreditam, ou um personagem com um problema.
   • Bom: "Algo em sua cozinha está te matando." / "Sempre pensei que computadores fossem melhores em matemática do que pessoas." / "Este é o Tio Don, e ele tem um problema enorme."
   • Ruim: "Como funciona X?" / "Aqui estão 3 ferramentas que..." / "Hoje vamos ver...". Se o vídeo responde a uma pergunta "como", mova essa pergunta para a segunda frase.
3. Abra uma pergunta ou uma tensão nos primeiros 3 segundos e guarde a resposta para depois. Não gaste a reviravolta no gancho.
4. Escolha tópicos amplos ou oportunos. Um tópico de nicho precisa de um ângulo cotidiano que qualquer um possa sentir.
5. Uma abertura forte não salva um tópico fraco. Decida o tópico primeiro, depois escreva o gancho.
6. Cada vídeo é autônomo. Sem "Parte 2", sem aberturas que continuam um vídeo anterior, sem listas genéricas de utilidades.
7. Mostre, não conte: cada linha falada tem seu próprio visual. Se o vídeo fizer sentido no mudo, as cenas funcionam.
8. Uma ideia por cena. Se uma linha contém duas ideias, divida-a em duas cenas.
9. Escale: cada beat aumenta as apostas ou a surpresa um pouco mais que o anterior.
10. Termine em uma linha que o espectador possa repetir ou usar (uma pergunta para fazer, uma regra prática), não em um resumo.
11. A duração é uma escolha livre: use o tempo que a história precisar. Em vídeos longos, dê uma pequena recompensa a cada 60-90 segundos.

Enquadramento (vertical 1080x1920 salvo indicação contrária)

1. Mantenha o assunto principal na faixa médio-superior, aproximadamente y = 500-1100.
2. Os ~20% inferiores (y > 1500) ficam sob a interface da plataforma: sem visuais chave ali. Coloque legendas logo acima.
3. Mantenha margens de ~60 px nas laterais. Mantenha a borda direita (x > 960, y 900-1700) livre de informações chave, pois os botões de like e comentário ficam ali.
4. O enquadramento central geralmente funciona melhor em vídeo vertical. Use terços para cenas com dois sujeitos.
5. Um elemento dominante por quadro. Todo o resto é menor, mais escuro ou menos saturado.
6. O rosto de um personagem deve ter pelo menos ~15% da largura do quadro em momentos chave.

Segundos iniciais

1. Comece a falar no frame 0. Sem introdução silenciosa, sem logotipo.
2. Algo muda visivelmente nos primeiros 1-2 segundos: um novo objeto, um movimento, uma transformação. Sem cartão de título estático.
3. Texto grande no primeiro quadro é opcional. Se usado, ele declara a afirmação; não é decoração.
4. Um rosto no primeiro quadro é opcional. Um personagem forte ou imagem funciona igualmente bem.

Câmera (2D e 3D)

1. Todo movimento de câmera tem um motivo: segue um personagem, revela informação ou adiciona ênfase. Sem movimento decorativo.
2. Nunca mova linearmente: sempre suavize a entrada e saída.
3. Revelação = push-in lento (escala 1.0 para 1.1-1.25 em 1-3 s). Choque = punch-in rápido (0.15-0.25 s) com um pequeno tremor.
4. Nova localização: plano geral primeiro, depois mais próximo.
5. Ângulo baixo = poder ou ameaça, ângulo alto = pequeno ou indefeso, nível dos olhos = neutro.
6. Se dois personagens se enfrentam, mantenha cada um em seu lado durante toda a cena.
7. Em 3D: FOV 35-50 graus, profundidade com camadas de primeiro plano, meio e fundo. Mova a câmera (dolly) em vez de alterar o FOV (zoom).
8. Em cenas 3D cartoon, use mapeamento de tom linear e um leve aumento de saturação; mapeamento de tom filmico desbota as cores cartoon.

Edição e ritmo

1. Após a abertura, o ritmo segue o estilo. Um primeiro momento rápido importa mais do que um vídeo inteiro rápido.
2. Rastreamento ocular: o ponto de interesse em um novo plano começa onde estava no plano anterior.
3. Cortes de correspondência: uma forma ou cor do fim de uma cena se torna o início da próxima.
4. Após uma piada ou punchline, segure 0.3-0.6 s antes de cortar.
5. Desacelere antes do momento chave, acelere depois dele.
6. Corte na ação: mude os planos no meio de um movimento, não depois que ele parar.
7. Sem flashes brancos ou transições estroboscópicas. Use whip pans, cortes de correspondência e wipes.

Animação de personagens

1. Squash e stretch em cada impacto e salto (escala 0.8-1.25, volume aproximadamente mantido).
2. Antecipação: um pequeno movimento na direção oposta antes de um grande movimento (0.1-0.2 s).
3. Follow-through: cabelo, antenas e braços continuam se movendo e se estabilizam após o corpo parar.
4. Membros e objetos arremessados se movem em arcos, nunca em linhas retas.
5. Piscar, respirar e balanço ocioso nunca param, mesmo enquanto uma cena espera.
6. O timing vende peso: coisas pesadas se movem lentamente e aterrissam com força, coisas leves se movem rápido.
7. Exagere emoções: olhos enormes, formas grandes de boca, uma gota de suor voadora.
8. Uma silhueta clara por pose. Se a pose não for legível como uma forma preta, mude-a.

Texto e legendas

1. Legendas: 2-5 palavras por bloco, sincronizadas com a voz, aparecendo, alto contraste (branco com contorno escuro).
2. Grandes palavras cinéticas apenas em momentos de impacto, e apenas um grupo de palavras grandes na tela por vez.
3. Números na tela correspondem exatamente à narração e à fonte.

Voz

1. Frases curtas, ritmo falado, contrações ("é", "não foi").
2. Cerca de 170-200 palavras por minuto.
3. 0.2-0.4 s de silêncio entre beats, 0.6-1.0 s antes da linha final.

Honestidade

1. Todo número na tela tem uma fonte real e corresponde a ela.
2. Nunca coloque afirmações em primeira pessoa na narração que o criador não tenha realmente feito.
3. Manchetes de paródia usam nomes claramente inventados, nunca imitações de veículos reais.