Animated presentation

Animated Presentation (Remotion + OpenMontage)

Pipeline completo para vídeos de apresentação narrados com animações (1920×1080). Baseado no projeto Chris Lamm AI Platform.

Nota: os caminhos absolutos abaixo (ex.: ~/Documents/Codex/OpenMontage/…) são do projeto de origem — adapte ao seu ambiente. As técnicas são universais. Detalhe completo em reference.md (mesmo diretório desta skill).

Onde (adaptar ao seu setup)

• Composer: OpenMontage/remotion-composer/
  • src/Explainer.tsx = roteador de cenas (interface Cut + SceneRenderer). Composition: Explainer.
  • src/components/*.tsx = uma cena por componente; src/components/index.ts re-exporta.
  • public/<icons>/, public/<ui>/, public/demo-props/*.json.
  • renders-tmp/ = saídas + frames de verificação.
• Guia detalhado: reference.md (mesmo diretório) — LER ANTES; tem todos os padrões, gotchas e receitas.

Princípios

1. Tudo é código React (Remotion). Dados (textos, posições, cores, schedules) em JSON de props; componente só desenha.
2. Canvas base 1280×720 escalado ×1.5 p/ 1920×1080 (texto grande e nítido).
3. Verificação por frame SEMPRE: após render, ffmpeg -ss <t> -i out.mp4 -vframes 1 f.jpg e inspecionar. Nunca confiar às cegas.
4. open <arquivo>.mp4 após cada render.

Receita: adicionar cena

1. Criar src/components/MinhaCena.tsx (export + tipos). 2. Exportar em index.ts. 3. Importar em Explainer.tsx. 4. Adicionar campos na interface Cut (NÃO duplicar nomes — steps,centerLabel já existem). 5. Dispatch em SceneRenderer. 6. Props JSON com id,type,in_seconds,out_seconds obrigatórios. Render: npx remotion render src/index.tsx Explainer renders-tmp/x.mp4 --props=public/demo-props/x.json.

Padrões-chave (detalhes em reference.md)

• Ícones visíveis: simple-icons são pretos-mono → somem no escuro. Use tile branco atrás do ícone (cor da marca na borda). Originais full-color: svgl.app / vectorlogo.zone.
• SVG <image> gotcha: não carrega no headless; preload com <Img> hidden mesmo URL. Prefira <Img> DOM.
• Remover fundo de logo/imagem: magick in.png -fuzz 16% -fill none -draw 'alpha 0,0 floodfill' ... -trim out.png.
• Recriar UI real nativamente: extrair frames → contact-sheet → recortar UI limpa → prompt detalhado + frames → subagente constrói componente isolado. (Rápido/menos fiel: UITourScene = screenshot + Ken Burns + callout.)
• Sincronia narração↔animação: AssemblyAI word-level → highlightSchedule:{name,at} no componente. ⚠️ Remotion renderiza ~+1s além do out_seconds → padar áudio à duração REAL medida. QA com SentrySearch (sentrysearch index/search).
• TTS: OpenAI tts-1-hd voz onyx (OPENAI_API_KEY). Montar narração por segmento c/ apad.
• Legendas: AssemblyAI → SRT → burn (ffmpeg subtitles=...:force_style=...).
• Outro idioma: traduzir → TTS → atempo-fit à duração original → sincroniza ao mesmo vídeo.
• Sound design: música (Suno/ElevenLabs Music) + SFX (ElevenLabs /v1/sound-generation); mix com sidechaincompress (ducking) + adelay/amix (SFX nos timestamps dos eventos).

Montagem do vídeo completo

Render cada cena à duração do seu bloco de narração → concat (ffmpeg -f concat -c copy) → mux com narration-final.mp3. Cada segmento de áudio padado (apad -t <dur_real_do_segmento>) p/ sync exato.

Ferramentas

ffmpeg · ffprobe · ImageMagick (magick) · sentrysearch · Remotion. Chaves: OPENAI_API_KEY, ASSEMBLYAI_API_KEY (e opcional ElevenLabs/Suno p/ áudio).