reels-motion

O que reels-motion faz?

Produz um reel vertical (1080×1920, 30 fps, ~40–50 s) com o estilo "Terminal Pop": fundo escuro com grid, um único cor de acento, texto grande por palavras com uma palavra-chave em caixa de cor, um mascote pixel que faz a ação, um contador 01 / 04 e um CTA de palavra-chave no final.

Arquivos desta skill (caminhos relativos a esta pasta):

• references/motion_system.md: paleta, tipografia, movimento, transições, composição e ritmo. Leia antes de projetar.
• template/: projeto Remotion completo e funcional (o reel "Cartuchos" sobre o que é uma skill). Use como base; não comece do zero.
• template/README.md: estrutura do projeto, comandos e ajustes.

Fluxo

1. Entender o pedido

Pergunte apenas o que faltar: tema, público, @ da conta, palavra-chave do CTA e o que será entregue a quem comentar, se haverá narração (e qual voz da ElevenLabs) e a duração aproximada.

2. Roteiro e storyboard (mostre-os e aguarde o OK antes de animar)

• Estrutura: hook (≤ 2 s) → 4 seções com HUD 01–04 → CTA (~4 s).
• Hook: 3 golpes de texto, o último com a palavra-chave em caixa e uma ação do mascote nesse golpe.
• Frases de narração: ≤ 14 palavras, faladas e não lidas do texto na tela. Na tela, ≤ 6 palavras por frase.
• Mascote: cada seção precisa de uma ação que explique o conceito (conectar, escolher, escanear…), não decoração.
• CTA: "Comente PALAVRA e eu mando X", com a palavra em caixa de acento.

3. Criar o projeto

cp -r <caminho-desta-skill>/template <pasta-do-usuario>/<nome-do-reel>
cd <pasta-do-usuario>/<nome-do-reel>
npm install

Peça ao usuário um caminho curto. No Windows, caminhos longos (mais de ~200 caracteres) impedem a inicialização do Chrome que o Remotion usa para renderizar.

4. Adaptar ao tema

• src/config/texts.ts: todos os textos na tela e BRAND.handle. [palavras] = caixa de acento.
• src/config/voiceover.ts: roteiro por cena, dividido em blocks (uma frase cada).
• src/config/theme.ts: cor de acento e posições.
• src/scenes/S2…S5: são o exemplo "Cartuchos". Para outro tema, reescreva a ação de cada seção reutilizando components/ (Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx) e lib/anim.ts. Mantenha o padrão: cada fase inicia com cue('cena', n, fallback), que é o início da frase n da narração.
• Bit: a matriz MAP em src/components/Bit.tsx (16×16) define sua forma; altere-a se a conta tiver outro mascote.

5. Efeitos sonoros

npm run sfx sintetiza os .wav em public/sfx/. Posicione-os com <Sfx name="…" at={frame} /> usando as mesmas constantes da animação. Volume e on/off em src/config/audio.ts.

6. Narração (escolha uma via)

• Chave de API própria: ELEVENLABS_API_KEY no .env, voice ID em VOICE.voiceId e npm run voiceover. Gera um MP3 por cena e escreve src/config/voiceover.generated.ts com o início exato de cada frase.
• Conector ElevenLabs no Claude: gere cada cena com o texto exato de seus blocks unidos e baixe os MP3 para public/voiceover/<reel>/. O conector não fornece timestamps, então:
  1. Decodifique cada MP3 para WAV (npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav).
  2. Meça no Node a energia em janelas de 10 ms e detecte pausas de 80 ms ou mais.
  3. Atribua cada frase à pausa mais próxima de sua posição esperada (proporcional aos caracteres).
  4. Escreva manualmente voiceover.generated.ts com duration = fim da fala (sem o silêncio final) e blockStarts.
• Sem narração: deixe VOICE_TIMINGS = {} e as cenas usarão os fallback de cada cue.

7. Ritmo

Cada cena dura o que sua frase + 0,2–0,4 s de respiro até a próxima narração: SCENES.x ≈ (fim da fala + 0,3 s) × 30. Hook ≤ 2 s. O CTA deixa ~1,5 s após a narração para leitura. A narração nunca é cortada: cada MP3 começa com sua cena e sua cauda de silêncio pode soar sobre a seguinte. Se uma animação ficar apertada, simplifique-a; não a acelere.

8. Verificar antes de entregar

1. npx tsc --noEmit.
2. Renderize quadros-chave (hook, cada seção e CTA) e confira: textos quebrados, sobreposições, zona segura (120 px acima, 340 px abaixo, 64 px nas laterais) e que o @ caiba em uma linha.
3. Mixagem: renderize duas faixas WAV separadamente (--codec=wav), uma com sfxEnabled = false e outra com voiceEnabled = false, e compare o volume a cada 0,1 s. Enquanto houver narração, os efeitos devem ficar ≥ 10 dB abaixo; caso contrário, reduza o ganho desse efeito em audio.ts. O ffmpeg do Remotion não vem com volumedetect: decodifique para WAV e meça no Node.
4. Render final: npx remotion render ReelCartuchos out/<nome>.mp4.

9. Miniatura e publicação

• Miniatura: npm run thumbnail (composição Miniatura, frame 29). O conteúdo deve caber no recorte 4:5 (e 285–1635).
• Textos: entregue descrição para TikTok (curta, CTA, 3–5 hashtags) e Instagram (valor em etapas, CTA, máx. 5 hashtags), texto alternativo e a mensagem do DM automático para a palavra-chave.

Erros conhecidos

• Windows, Failed to launch the browser process … ENOENT: caminho muito longo. Use uma pasta curta ou --browser-executable=<caminho curto>/chrome-headless-shell.exe.
• Títulos invisíveis em um still do frame 0: as entradas começam com opacidade 0. Renderize a miniatura no frame 29.
• generate-*.ts: requer Node 22.18+ (TypeScript nativo).