Remotion Vídeo

O que Remotion Vídeo faz?

Crie vídeos curtos animados (1080x1920) usando Remotion. Seis tipos de vídeo, cada um com um fluxo de trabalho de pesquisa e animação.

Por que Remotion

Remotion renderiza código, não pixels. A 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 boas práticas do Remotion. Antes de começar, verifique se as skills do Remotion estão instaladas no projeto. Se não, instrua o usuário a executar:

npx skills add remotion-dev/skills

Consulte a documentação de Skills do Agente Remotion para obter 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	Explicador Educacional	education-explainer.md
Uma URL de produto	Demonstração + Lançamento	product-demo.md
Um link do Google Business / Maps	Depoimento / Prova Social	testimonial.md
Um arquivo de vídeo de cabeça falante (9:16)	Avatar + Sobreposições Animadas	avatar-overlays.md
Um CSV ou arquivo de dados	Painel de Visualização de Dados	data-viz.md
Uma URL de canal/marca/rede social	Barra 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)

Esses 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 (web scraping), 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 tempo, controles para cada composição, geração de vários 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 / Extrair / Analisar

Reúna informações com base no tipo de vídeo (pesquisar tópico, extrair site, extrair avaliações, transcrever vídeo ou analisar dados). Apresente as descobertas e um esboço de cena proposto. Aguarde a aprovação do usuário antes de escrever código.

Etapa 2: Projetar e Animar

Após a aprovação, construa todas as cenas como componentes React do Remotion. Siga as regras de animação de defaults.md:

• Entradas com mola ("spring", damping: 200), sem movimento linear
• Itens relacionados escalonados com 8-12 quadros de diferença
• TransitionSeries com transições de fade de 12 quadros entre cenas
• stroke-dashoffset em SVG para desenho de diagramas/fluxogramas
• interpolate() + tabular-nums para animações de contagem
• Efeitos de partículas para momentos de celebração/fechamento

Etapa 3: Polir (opcional)

Após o vídeo ser reproduzido corretamente, ofereça-se para adicionar controles:

• Controles deslizantes de tempo — consulte advanced-patterns.md para adicionar controles em tempo real às composições
• Integrações — consulte integrations.md para animações Lottie, efeitos 3D, narrações, etc.

Visualização

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 (consulte 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 como uma Skill de Agente com padrões configuráveis e divulgação progressiva.