Haseeburrahmann/3d-animator

Animador 3D

Um prompt simples resulta em um objeto girando no meio de um vazio cinza: câmera estática, luz plana, movimento linear e sem som. Um animador pensa em quatro coisas antes de escrever qualquer código: câmera, luz, movimento e som. Este skill faz você pensar dessa forma e depois escrever cada quadro em código.

As regras vêm de um pipeline de produção do WhatsNext AI (@whats.nextai), ajustado contra os melhores reels medidos:

• menos de 10% de quadros estáticos;
• cerca de 0,7 cortes duros por 10s;
• música cerca de 9 dB abaixo da voz.

0. Antes de qualquer código: dirija

Escreva uma lista de planos primeiro. Cada batida ganha uma linha:

batida | segundos | assunto | movimento da CÂMERA | mudança de LUZ | evento de MOVIMENTO | sinal de SOM

Regras para a lista de planos:

• O quadro 1 mostra o assunto. Não faça fade-in a partir do preto, não mostre um logotipo, não abra em um palco vazio.
• Mude algo visível a cada cerca de 1,5 s: um movimento de câmera, uma revelação ou uma mudança de luz.
• Cada batida muda uma coisa: a escala (aberto ↔ macro), o ângulo, a luz ou o estado do objeto. Nunca tudo de uma vez.
• Reencene o mesmo objeto em vez de cortar para cenas não relacionadas. O plano final deve rimar com o plano de abertura.
• Sem assunto? Escolha um com um interior oculto, para que a câmera tenha para onde ir: um relógio, um telefone, um motor, um quarteirão, um cabo. Planeje um corte ou revelação.

1. Câmera (referências/camera.md)

• A câmera nunca descansa. Adicione uma órbita lenta e um balanço feitos de duas senoides incomensuráveis sobre cada plano, para que nenhum quadro fique estático. Valores iniciais: cerca de 0,17 rad × sin(0,8t) + 0,09 rad × sin(1,9t + 0,7).
• Mova entre câmeras-chave com ease-in-out (cúbico). Nunca use movimentos lineares e nunca corte abruptamente.
• Faça dolly, não zoom. Mova a posição da câmera e mantenha o campo de visão entre 30° e 40° para objetos. FOV grande angular distorce produtos.
• Aproxime em revelações. Afaste para dar contexto. Um movimento por batida.
• Poucos cortes duros: cerca de 0,7 por 10s. O movimento vem da câmera, não dos cortes.
• Enquadramento vertical 9:16:
  • Mantenha o assunto nos 60% centrais da altura do quadro.
  • Os 15% superiores são para um título.
  • Os 25% inferiores são para legendas e UI do aplicativo.
  • Deixe os 150 px à direita livres no Instagram e TikTok.
• Profundidade: coloque algo em primeiro plano, o assunto no meio e um fundo suave atrás. Adicione partículas de poeira flutuantes ou partículas perto do ponto de mira para que até um movimento lento seja percebido como movimento.

2. Luz (referências/light.md)

• Fundo escuro, uma cor de destaque, um assunto. Por exemplo, uma cena azul marinho #0B0F18 com um destaque laranja #FF914D para "informação".
• Configuração de luz:
  • Um preenchimento hemisférico: céu #A9BDE0, chão #0B0F18, intensidade cerca de 0,8.
  • Uma luz direcional principal fria vinda de cima e da esquerda: intensidade cerca de 1,5, projetando sombras.
  • Uma luz pontual quente de um lado e uma luz pontual fria do outro, para que as bordas se separem do fundo.
• Reflexos: use um mapa de ambiente (RoomEnvironment via PMREMGenerator) com intensidade de 0,2–0,6. Sem ele, metal e vidro parecem plástico.
• Brilho (Bloom) apenas com propósito:
  • Use UnrealBloomPass com limiar de 0,9 ou mais, força cerca de 0,4 e raio cerca de 0,4.
  • Coisas que devem brilhar usam emissive, e nada mais brilha.
  • A armadilha da superexposição: materiais brancos puros mais brilho lavam o quadro. Use cinza claro (#C9CFD9) para plásticos "brancos".
• Use névoa (<fog args={[bg, near, far]}/>) para que a distância se dissolva na cor de fundo.
• Mudanças de luz são batidas narrativas: uma parte acende quando é nomeada, a sala escurece para uma revelação, um flash ilumina o momento-chave.

3. Movimento (referências/motion.md)

• Cada animação é uma função pura do quadro: t = frame / fps.
  • Nunca use Date.now() ou Math.random(). Use random(seed) do remotion.
  • Nunca anime com useFrame.
• Pops usam molas (amortecimento 12–14, rigidez cerca de 170). Movimentos usam ease-in-out cúbico. Use linear apenas para coisas constantes, como esteiras e deriva de partículas.
• Espaçe elementos relacionados por 3–5 quadros. Nunca mova dez coisas no mesmo quadro.
• Adicione movimento secundário: uma rotação lenta de toca-discos no objeto herói (±0,4 rad), partículas à deriva, uma escala pulsante (±1%).
• Pausas são uma escolha. Uma parada de até 2s é aceitável quando é uma batida dramática deliberada. Caso contrário, algo sempre se move.
• Rótulos: rótulos curtos em maiúsculas aparecem na batida que nomeiam. Marque recriações como "RECRIAÇÃO 3D".

4. Som (referências/sound.md)

• Um efeito sonoro por evento:
  • um whoosh em um grande movimento de câmera;
  • um hit em uma revelação;
  • um riser (cerca de 2s) em uma revelação;
  • um clique ou pop em rótulos.
  • Sintetize-os (scripts/sfx_synth.py) ou use pacotes CC0.
• A música ambiente fica 6–11 dB abaixo da voz, cerca de 9 dB como alvo. Faça sidechain duck sob a narração.
• O silêncio é um efeito. Interrompa a música por uma batida antes da linha chave, depois retorne com força em um hit.
• Masterize para −14 LUFS integrado, com pico verdadeiro em ou abaixo de −1,5 dBTP. Alongue a chave da voz para o comprimento total para que a cauda da música não seja cortada.

5. Regras de código (Remotion + three.js)

• Canvas: envolva o 3D em <ThreeCanvas width={width} height={height}> de @remotion/three, e sempre inclua luzes.
• Sequências: qualquer <Sequence> dentro do canvas precisa de layout="none".
• Pós-processamento: um EffectComposer pode assumir a renderização com um useFrame(() => composer.render(), 1) de prioridade 1. Esse é o único uso permitido, porque o Remotion avança a cena uma vez por quadro para que a saída permaneça determinística. Veja templates/Fx3D.tsx.
• Estado: dirija a cena a partir de uma única função de estado worldAt(t) que retorna câmera, palco e flags. Mantenha os componentes simples.
• Renderização: renderize com --gl=angle no macOS quando a saída WebGL estiver preta ou instável. Use H.264, yuv420p, 1080×1920, 30 fps.

Peças prontas (copie, não importe):

• templates/Fx3D.tsx: Reflexos de ambiente e Bloom.
• templates/camera.ts: easeCam, orbit, ramp, pop.
• templates/Motes.tsx: partículas de poeira determinísticas.

6. Verifique como um editor

1. Renderize 4–6 stills: o gancho, cada revelação e o último quadro. Procure por superexposição, assunto cortado por legendas ou título, quadros vazios e texto ilegível.
2. Renderize o vídeo e execute scripts/check_motion.sh out.mp4. Alvo: menos de 10% de quadros estáticos, movimento (YDIF) em cerca de 2 ou mais, e cerca de 0,7 cortes duros por 10s. Se estiver estático, aumente a órbita ou o balanço, adicione partículas ou adicione uma aproximação. Não adicione cortes.
3. Se houver áudio, verifique o volume (−14 LUFS) e se a música está cerca de 9 dB abaixo da voz.
4. Re-renderize apenas o que falhou.

Pronto significa: existe uma lista de planos, cada batida tem um movimento de câmera, um papel de luz, um evento de movimento e um sinal de som, as verificações passam e você olhou para os stills.