O que Vídeo Remotion faz?
Crie vídeos animados de formato curto (1080x1920) usando Remotion. Seis tipos de vídeo, cada um com um fluxo de trabalho de pesquisa e depois animação.
Por que Remotion
Remotion renderiza código, não pixels. IA entende código nativamente — alterar uma variável de opacidade é inequívoco, ao contrário de decidir quais pixels constituem um "título" em um quadro raster. Código também significa: saída independente de resolução, componentes reutilizáveis, visualização instantânea e controle de versão baseado em git.
Pré-requisitos
Esta skill requer a skill de melhores práticas Remotion. Antes de começar, verifique se as skills Remotion estão instaladas no projeto. Se não estiverem, instrua o usuário a executar:
npx skills add remotion-dev/skills
Consulte a documentação de Skills do Agente Remotion para detalhes.
Seleção de Tipo
Determine o tipo de vídeo a partir da entrada do usuário:
| O usuário fornece | Tipo de vídeo | Carregar referência |
|---|---|---|
| Um tópico para ensinar ou explicar | Explicativo Educacional | education-explainer.md |
| Uma URL de produto | Demonstração + Lançamento de Produto | product-demo.md |
| Um link do Google Business / Maps | Depoimento / Prova Social | testimonial.md |
| Um arquivo de vídeo com cabeça falante (9:16) | Avatar + Sobreposições Animadas | avatar-overlays.md |
| Um arquivo CSV ou dados | Painel de Visualização de Dados | data-viz.md |
| Uma URL de canal/marca/rede social | Terço Inferior / Sobreposição | lower-thirds.md |
Carregue apenas o arquivo de referência do tipo relevante mais defaults.md para configuração compartilhada (zona segura, fontes, regras de animação, estilo visual).
Referências Adicionais (carregar sob demanda)
Estes arquivos não são necessários para todos os vídeos. Carregue apenas quando a situação exigir:
- integrations.md — Carregue quando o usuário precisar de Playwright (raspagem web), animações Lottie, ativos 3D, narrações ou imagens geradas por IA. Algumas integrações exigem chaves de API — sempre pergunte ao usuário primeiro.
- advanced-patterns.md — Carregue quando o usuário quiser controles deslizantes de temporização, controles para cada composição, geração de múltiplos vídeos a partir de um catálogo, renderização transparente, transições personalizadas ou fluxo de trabalho de salvamento baseado em git.
Fluxo de Trabalho Comum
Todos os tipos seguem o mesmo padrão de duas etapas:
Etapa 1: Pesquisar / Raspar / Analisar
Reúna informações com base no tipo de vídeo (pesquisar tópico, raspar site, raspar avaliações, transcrever vídeo ou analisar dados). Apresente os resultados e um esboço de cena proposto. Aguarde aprovação do usuário antes de escrever código.
Etapa 2: Projetar e Animar
Após aprovação, construa todas as cenas como componentes React do Remotion. Siga as regras de animação de defaults.md:
- Entradas com mola (
damping: 200), sem movimento linear - Espace itens relacionados em 8-12 quadros
TransitionSeriescom transições de fade de 12 quadros entre cenasstroke-dashoffsetSVG para desenho de diagramas/fluxogramasinterpolate()+tabular-numspara animações de contagem regressiva- Efeitos de partículas para momentos de celebração/fechamento
Etapa 3: Polir (opcional)
Após o vídeo tocar corretamente, ofereça adicionar controles:
- Controles deslizantes de temporização — veja advanced-patterns.md para adicionar controles em tempo real às composições
- Integrações — veja integrations.md para animações Lottie, efeitos 3D, narrações, etc.
Visualizar
Após construir, inicie o Remotion Studio:
npx remotion studio
Princípios de Design
- Cada cena precisa de uma metáfora visual clara — diagramas, fluxogramas, ícones, animações passo a passo
- Sem paredes de texto — informação densa, movimento bonito, ritmo acelerado
- Kurzgesagt encontra Fireship: ideias complexas tornadas visualmente intuitivas
- Todos os gráficos construídos como componentes SVG por padrão; Lottie e 3D disponíveis via integrations.md
- Respeite a zona segura (veja defaults.md) — nada importante perto das bordas
Créditos
Baseado em prompts de vídeo de Sabrina Ramonov e insights de produção do tutorial de edição de vídeo com IA Remotion. Adaptado para uma Skill de Agente com padrões configuráveis e divulgação progressiva.