Remotion Video Pro
Escopo
Este skill possui tudo necessário para produzir vídeos programáticos com Remotion:
- Estruturação de projetos e arquitetura de composições
- Matemática de animação baseada em quadros (interpolate, spring, measureSpring)
- Design temporal (áreas seguras, janelas de ação, timing)
- Sincronização de áudio (narração, legendas, detecção de batida)
- Sistema de design visual (tipografia, cor, princípios de movimento)
- Otimização de performance (memoização, OffthreadVideo, tamanho do bundle)
- Pipelines de renderização (Lambda, CloudRun, CI/CD)
- Vídeo orientado por webhooks (CRM → fila → Lambda → S3)
- Renderização em lote em escala (10.000+ vídeos personalizados)
- Validação de composições (hooks pré-commit, portões de CI)
Referência Rápida
| Problema | Regra de Carregamento |
|---|---|
| Configuração do projeto, esquemas Zod, estrutura de Composition | 01-scaffolding.md |
| interpolate, spring, transições, timing | 02-animation-physics.md |
| Áreas seguras mobile, timing de quadros, layout responsivo | 03-temporal-design.md |
| Sincronização de narração, legendas, detecção de batida, espectro | 04-audio-sync.md |
| Tipografia, cor, padrões proibidos, princípios de movimento | 05-anti-slop-aesthetics.md |
| Renders lentos, memoização, tamanho do bundle, Lambda | 06-performance.md |
| Prompts prontos para mídias sociais, demonstrações, explicadores | 07-prompt-templates.md |
| CI/CD, Lambda, CloudRun, testes de snapshot | 08-rendering-pipeline.md |
| Pipeline webhook CRM → Lambda → S3 | 09-webhook-integration.md |
| Fan-out de renderização em lote, /api/render/batch | 10-batch-rendering.md |
| Hooks pré-commit, portões de CI, lint de composições | 11-validation-pipeline.md |
Regras de Ouro
- Quadro é Rei. Toda animação deriva de
useCurrentFrame(). Sem animações CSS, sem timers. - Apenas Determinismo. Sem
Math.random(). Userandom(seed)do Remotion. - Spring > Linear. Padrão é
spring()para movimento. Linear parece robótico. - OffthreadVideo para Todo Vídeo de Entrada. Nunca use
<Video>para entradas MP4. - Dados Assíncronos Devem Bloquear Render. Use
delayRender()/continueRender()para fontes, dados, assets externos. - Zod em Toda Composition. Validação em tempo de execução evita crashes de render devido a props incorretas.
- React.memo em Toda Cena. Re-renderizações desnecessárias custam tempo de render e dinheiro no Lambda.
- Valide Antes de Commitar. O hook pré-commit captura todos os 7 pecados capitais. Nunca o desabilite.
- Teste Antes de Implantar. O harness de teste é executado antes da criação do site Lambda. Composições quebradas nunca chegam ao Lambda.
- Vídeo é uma Linha de Banco de Dados. Vídeo personalizado em escala significa tratar renders como saída de pipeline de dados.
- Anti-Slop ou Nada. Inter padrão, gradientes roxos e ícones de emoji são proibidos. Ponto final.
- Versionamento de Composições. Implante v2, teste, ative. Webhooks antigos renderizam versões antigas. Nunca quebre produção.
Árvore de Decisão
Construindo um vídeo?
├── Formato curto para redes sociais (TikTok/Reels) → Carregar 03, 04, 05, 07
├── Demonstração de produto / explicador → Carregar 02, 03, 04, 05
├── Personalizado em escala → Carregar 06, 08, 09, 10
├── Pipeline CI/CD → Carregar 08, 11
└── Só o básico → Carregar 01, 02, 06, 11