thedixitjain/the-mega-skill-library

Construtor de Vídeos Remotion

Seu conhecimento sobre Remotion pode estar desatualizado. Quando o comportamento exato da API for importante, prefira o servidor MCP oficial remotion-documentation ou a documentação em remotion.dev.

Comece Por Aqui

• Se o projeto ainda não existir, crie-o com npx create-video@latest e prefira o template em branco.
• Mantenha todos os pacotes remotion e @remotion/* exatamente na mesma versão e evite intervalos com circunflexo (^).
• Estrutura de entrada padrão:
  • src/index.ts chama registerRoot()
  • src/Root.tsx registra todos os vídeos com <Composition> ou <Still>

Ordem de Construção

1. Modele o contrato de entrada primeiro:
   • esquema de props de nível superior
   • dados da linha do tempo ou eventos
   • perfil de renderização
2. Defina props compartilhadas com zod e passe o esquema para cada <Composition>.
3. Use calculateMetadata para derivar durationInFrames, width, height, props transformadas e defaultOutName.
4. Construa a estrutura da cena com <Series> para ordem narrativa e <Sequence> para sobreposições, entradas, janelas de filmagem e chamadas.
5. Em projetos Remotion v4.x, defina explicitamente premountFor nos elementos <Sequence> que precisam de assets carregados antes de aparecerem.
6. Adicione dados de exemplo e scripts de renderização antes de polir a animação.

Padrões e Regras

• Padrão para fps={30} e 1920x1080 para paisagem, a menos que o briefing diga o contrário.
• Use AbsoluteFill para camadas.
• Use staticFile() para qualquer coisa vinda de public/.
• Use useCurrentFrame() e useVideoConfig() para lógica baseada em quadros.
• Prefira movimentos sutis:
  • spring() com alto amortecimento
  • interpolate() com clamp
• Não use Math.random(). Use random(seed) do remotion.
• Mantenha a animação de texto simples e legível.
• Mantenha as saídas paisagem e retrato na mesma lógica de negócios, a menos que o briefing realmente exija divergência.

Checklist para Vídeo Parametrizado

• Um esquema z.object() compartilhado de nível superior
• defaultProps correspondendo à forma das props do componente
• calculateMetadata retornando duração ou dimensões dinâmicas quando a entrada exigir
• Dados JSON ou TypeScript de exemplo para pré-visualização local
• Scripts de renderização para cada saída alvo

Estratégia de Filmagem

Suporte pelo menos estes modos quando a filmagem for opcional:

• none (nenhuma)
• placeholder
• real (real)

A linha do tempo e as sobreposições ainda devem renderizar quando não houver filmagem real.

Vídeo de Lançamento Millrace

Se a solicitação for sobre Millrace ou o pipeline de vídeo de lançamento, leia references/millrace-launch-video.md antes de implementar.

Referências

• references/remotion-core.md
• references/millrace-launch-video.md

---

Fonte: hashgraph-online/awesome-codex-plugins → plugins/tim-osterhus/codex-remotion-plugin/skills/remotion-video-builder/SKILL.md