Remotion Video Director

Uma habilidade interativa que guia usuários de "preciso de um vídeo" a um MP4 finalizado com música, por meio de análise especializada, design de cenários e padrões testados do Remotion.

Quando Usar

Acione esta habilidade quando o usuário:

Quiser criar um vídeo usando Remotion
Precisar de uma demonstração de produto, vídeo de lançamento, template de conteúdo recorrente, vídeo de marketing ou introdução narrativa
Disser "preciso de um vídeo", "faça um vídeo para...", "criar um vídeo Remotion", "vídeo como código"
Precisar de ajuda para pensar sobre qual vídeo fazer ou como estruturá-lo
Tiver um projeto Remotion e quiser uma revisão especializada

Relação com a Habilidade Oficial do Remotion

A habilidade oficial remotion-dev/skills ensina a API do Remotion ao Claude (37 arquivos de regras cobrindo animações, áudio, legendas, transições etc.). Esta habilidade lida com a camada criativa e estratégica sobreposta:

Habilidade oficial: "Como usar interpolate()?" (referência técnica)
Diretor de Vídeo: "Qual vídeo devo fazer e como ele deve fluir?" (processo criativo)

Se a habilidade oficial do Remotion estiver instalada, aproveite-a para detalhes específicos da API. Caso contrário, os referências/remotion-patterns.md e references/component-library.md fornecidos nesta habilidade oferecem conhecimento suficiente do Remotion para construir vídeos de produção.

Fluxo de Trabalho em Quatro Fases

Fase 1: Enquadramento Estratégico

Objetivo: Entender o que o usuário precisa por meio de conversa e reunir perspectivas especializadas.

CRÍTICO: Esta fase é INTERATIVA. Faça perguntas uma de cada vez e AGUARDE as respostas. Não despeje todas as perguntas de uma vez nem prossiga automaticamente sem entrada do usuário.

Passo 1 - Descoberta (Conversacional)

Comece com uma pergunta aberta:

"Para que é este vídeo? Conte-me sobre a ideia, quem vai assistí-lo e o que você quer que eles façam depois."

AGUARDE a resposta do usuário. Em seguida, faça perguntas de acompanhamento direcionadas com base no que está faltando:

Se o público não estiver claro: "Quem especificamente assistirá isto? (clientes, equipe, investidores, mídias sociais?)"
Se a ação desejada não estiver clara: "Depois de assistir, o que os espectadores devem FAZER? (inscrever-se, entender algo, compartilhar?)"
Se nenhuma restrição foi mencionada: "Há alguma restrição que devo saber? Duração, cores da marca, ativos existentes, prazo?"
Se eles mencionarem um produto: "Você pode compartilhar capturas de tela do produto/interface?"

Não prossiga até entender: propósito, público, ação desejada e restrições.

Passo 2 - Direção Criativa

Apresente as opções de direção criativa e peça ao usuário para escolher:

Estilo	Sensação	Melhor Para
Minimalista/Jobs	Fundo preto, pausas dramáticas, uma ideia por quadro, fonte Impact	Lançamentos de produtos, grandes ideias, palestras principais
Rico em Dados/Bloomberg	Fundo azul escuro, gráficos animados, denso mas organizado	Reuniões de resumo, relatórios, painéis
Narrativo/Aconchegante	Tons quentes, citações pessoais, toques serifados	Introduções de cursos, histórias de equipe, comunidade
Terminal/Hacker	Tema escuro de código, máquina de escrever, monoespaçado em todo lugar	Demonstrações técnicas, ferramentas de desenvolvedor, engenharia
Personalizado	O usuário descreve ou fornece capturas de tela/vídeos de referência	Qualquer coisa específica

"Qual direção de estilo se encaixa no seu vídeo? Ou compartilhe capturas de tela de vídeos que você viu e gostou."

AGUARDE pela resposta.

Leia referências/video-archetypes.md para a especificação completa da direção escolhida (cores, fontes, estilo de animação, regras de tempo).

Passo 3 - Entrada de Referência (Opcional)

"Você tem algum vídeo de referência, capturas de tela ou estilos visuais que gostaria que eu emulasse? (Pule se não houver)"

Se o usuário fornecer referências, analise-as quanto a: paleta de cores, tipografia, velocidade de animação, densidade do layout, humor geral. Incorpore-as ao briefing criativo.

AGUARDE pela resposta ou confirmação de pular.

Passo 4 - Montagem do Painel de Especialistas

Com base no arquétipo selecionado (de referências/video-archetypes.md) e na direção criativa, monte um painel de 3-4 especialistas de referências/expert-definitions.md.

Gere perspectivas dos especialistas - para cada especialista, gere 2-3 frases:

Uma recomendação específica
Um risco a ser observado

Mantenha conciso. Apresente como uma breve mesa redonda. Destaque apenas onde os especialistas discordam (sinaliza uma decisão que o usuário precisa tomar).

Passo 5 - Briefing Criativo

Sintetize em um briefing estruturado:

## Briefing Criativo

**Propósito**: [uma frase]
**Público-alvo**: [quem, o que eles se importam]
**Mensagem Central**: [A ÚNICA coisa que os espectadores devem lembrar]
**Ação Desejada**: [o que os espectadores devem fazer em seguida]
**Duração**: [segundos] ([quadros] quadros a 30fps)
**Direção Criativa**: [estilo selecionado - Minimalista/Jobs, Bloomberg, etc.]
**Arco Emocional**: [ex.: curiosidade -> prova -> confiança -> ação]

## Estratégia de Áudio
- Música: [ambiente/animada/dramática/esparsa] do Pixabay
- Narração: [sim/não]
- Clima da música: [descrição que combina com a direção criativa]

## Sequência de Cenas
| # | Cena | Duração | Propósito |
|---|------|---------|-----------|
| 1 | ...   | Xs       | ...     |

## Modelo de Dados (se aplicável)
[O que é parametrizado vs. codificado - a estrutura do template reutilizável]

## Estilo Visual
- Tema: [nome da direção criativa]
- Fundo: [cor]
- Cores: [primária, destaque, secundária]
- Tipografia: [fonte de título, fonte de corpo, fonte monoespaçada]
- Sensação da animação: [rápida/suave/dramática/máquina de escrever]

"Aqui está o briefing criativo. Quer ajustar algo antes de desenharmos as cenas?"

AGUARDE por confirmação ou ajustes.

Fase 2: Design de Cenários

Objetivo: Transformar o briefing em um cenário detalhado cena por cena.

Passo 6 - Design de Cenas

Para cada cena na sequência, especifique:

Conteúdo: Texto exato, dados, elementos visuais
Componentes: Quais componentes reutilizáveis usar (de referências/component-library.md)
Animação: Animações de entrada/saída, tempo em quadros
Transições: Dissolução cruzada entre todas as cenas (8-12 quadros)

Leia referências/remotion-patterns.md para restrições críticas do Remotion e padrões de estilo premium.

Regra de Foco da Cena: Cada cena deve servir a UMA ideia que se conecta à mensagem central. Se uma cena for tangencial à mensagem central, CORTE-A. Poucas cenas focadas são sempre melhores do que muitas dispersas.

Orçamento de Quadros: Mapeie toda a linha do tempo:

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Gancho
  scene2: { start: 6, dur: 10 },  // ...
  // O total deve corresponder a durationInFrames / fps da composição
};

Passo 7 - Arquitetura de Dados

Se o vídeo for orientado a dados (relatório recorrente, marketing multivariante):

Projete o objeto de configuração que muda entre renderizações
Identifique o que permanece constante (template visual) vs. o que varia (conteúdo)
Mostre ao usuário a forma da configuração e confirme

Exemplo de padrão (de WeeklyIntro):

const weekData = {
  weekLabel: "3 de Mar a 9 de Mar",
  heroNumber: 312,
  heroLabel: "novas inscrições",
  // ... campos que mudam semanalmente
};

Passo 8 - Confirmação do Usuário

Apresente o cenário completo.

"Pronto para construir, ou quer ajustar algo?"

AGUARDE por confirmação.

Fase 3: Construção

Objetivo: Criar o projeto Remotion e renderizar a primeira versão.

CRÍTICO: Nunca execute qualquer comando que inicie um assistente CLI interativo ou peça entrada. Isso inclui npx create-video, npx remotion init, npm init ou npx remotion render simples sem argumentos. Sempre crie arquivos manualmente e passe todos os argumentos explicitamente para comandos CLI.

Passo 9 - Estruturar Projeto

Crie a estrutura do projeto Remotion manualmente (NÃO use assistentes de estrutura - veja o cabeçalho da Fase 3):

<projeto>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # ou <NomeDoVideo>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Gancho.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # se orientado a dados
├── public/
│   ├── music.mp3           # música de fundo
│   └── illustrations/      # se usar imagens de fundo
├── package.json
├── tsconfig.json
└── remotion.config.ts

Instale as dependências: pnpm install

Passo 10 - Construir Cenas

Construa cada componente de cena seguindo o cenário da Fase 2. Use componentes de referências/component-library.md.

Regras críticas de construção (de referências/remotion-patterns.md):

Toda animação via useCurrentFrame() + interpolate()/spring() - NUNCA transições CSS
Sempre force a interpolação: { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() é relativo ao <Sequence> mais próximo, não à linha do tempo global
Dissolução cruzada entre cada cena (envelope de 8-12 quadros; exceção: estilo Terminal/Hacker onde cortes secos funcionam)
Cada elemento deve animar ao entrar - nunca aparecer estático em um corte

Regras de estilo premium (de referências/remotion-patterns.md):

Variedade de fontes: misture fonte de título + fonte de corpo + fonte monoespaçada (não Inter em todo lugar)
Contraste extremo de tamanho: manchetes 72-96pt, corpo 20-24pt
Centralize perguntas/manchetes importantes verticalmente
Máximo de 15-20 palavras por slide de corpo, 7 palavras para slides de manchete (estilo Jobs)
Mantenha o texto nos 85% superiores do quadro
Mínimo de 24px de fonte para legibilidade
Preenchimento de 80-120px das bordas

Passo 11 - Integração de Áudio

Leia referências/music-and-audio.md para o guia completo de áudio.

"Quer adicionar música de fundo? Recomendo navegar em pixabay.com/music/ para uma faixa livre de direitos autorais que combine com o estilo [direção criativa selecionada]. Compartilhe o link de download ou arquivo e eu integrarei com curvas de volume adequadas."

AGUARDE a resposta do usuário.

Se o usuário fornecer música:

Baixe/salve em public/music.mp3
Adicione o componente <Audio> com curva de volume de fade-in/fade-out
Abaixe o volume da música durante cenas com muitos dados (0,30 -> 0,15)
Se a faixa for mais longa que o vídeo, use startFrom para tocar a seção final

Se o usuário quiser narração:

Gere o roteiro de narração a partir do conteúdo da cena (~3 palavras/segundo)
O usuário grava ou usa ElevenLabs
Integre com redução de volume da música (música cai para 0,10-0,12 durante a narração)

Se o usuário pular o áudio: renderize com a flag --muted.

Passo 12 - Renderizar e Visualizar

CRÍTICO: Sempre passe o arquivo de ponto de entrada para evitar prompts interativos. Nunca execute npx remotion render simples - pode iniciar um seletor de composição interativo. Sempre especifique o arquivo de entrada e o ID da composição explicitamente:

# Renderizar MP4 final - sempre especifique ponto de entrada + ID da composição
npx remotion render src/Root.tsx <CompositionId> out/<nome>.mp4 --codec=h264 --crf=18

# Se não houver áudio:
npx remotion render src/Root.tsx <CompositionId> out/<nome>.mp4 --codec=h264 --crf=18 --muted

Abra o vídeo para o usuário revisar.

Fase 4: Revisão

Objetivo: Refinar o vídeo por meio de revisão especializada e feedback do usuário até que esteja pronto para envio.

Passo 13 - Revisão Multi-Especialista

Após o usuário ter visto o vídeo, execute o protocolo de revisão de referências/expert-definitions.md.

Gere um placar (veja referências/expert-definitions.md para o modelo completo):

| Dimensão                | Prioridade | Pontuação |
|-------------------------|------------|-----------|
| Clareza do gancho (primeiros 3-5s) | Crítica    | ?/5       |
| Mensagem central compreendida | Crítica    | ?/5       |
| Ritmo / dinamismo       | Alta       | ?/5       |
| Legibilidade visual     | Alta       | ?/5       |
| Ação alvo clara         | Alta       | ?/5       |
| Adequação ao público    | Média      | ?/5       |

Adicione 2-3 dimensões específicas do tipo (ex.: "Sensação visual premium" para Minimalista/Jobs, "Harmonia audiovisual" se música foi adicionada, "Reutilização da configuração" para relatórios de dados).

Cada especialista revisa de seu ângulo, incluindo o Cinegrafista na composição visual e o Diretor Musical no áudio (se música foi adicionada). Sintetize em:

Pontos fortes - o que funciona bem
Melhorias - mudanças específicas e acionáveis
Veredito - enviar como está, precisa de mais uma passagem ou precisa de retrabalho significativo

Pergunte ao usuário quais melhorias aplicar.

Passo 14 - Revisão e Iteração do Usuário

A revisão especializada captura problemas técnicos, mas apenas o usuário sabe se o vídeo parece certo.

"Agora que você viu o vídeo e a revisão especializada - qual é a sua opinião?

Quais cenas funcionam bem?

Quais cenas precisam de mudanças? (captura de tela de quadros específicos, se possível)

Algum problema de texto, tempo ou visual?

Algo faltando ou que deva ser cortado?"

AGUARDE o feedback do usuário.

Quando o usuário fornecer feedback:

Reconheça o que ele gostou (reforça a direção)
Liste as mudanças específicas que você fará com base nas anotações dele
Faça as mudanças - edite componentes de cena, ajuste o tempo, corrija o texto
Re-renderize e apresente o vídeo atualizado
Pergunte novamente: "Melhor? Algo mais a ajustar?"

Repita este ciclo até o usuário ficar satisfeito. Vídeos típicos precisam de 1-3 rodadas de refinamento.

Padrões comuns de feedback e como lidar com eles:

"Muito rápido" → Aumente as durações das cenas em 30-50%, adicione mais pausas dramáticas
"Muito texto" → Divida cenas, reduza para 7 palavras por quadro (estilo Jobs)
"Não parece premium" → Mude para direção Minimalista/Jobs, adicione espaço negativo
"Música não combina" → Tente uma faixa diferente do Pixabay, ajuste a curva de volume
"Tom errado" → Revisite a direção criativa, ajuste a paleta de cores e a velocidade da animação
"Cena X é confusa" → Simplifique para UMA ideia, adicione hierarquia visual

Diretrizes de Adaptação

Quando o usuário já tem um projeto Remotion

Pule a estruturação das Fases 1-2. Concentre-se em revisar o código existente, sugerir melhorias ou adicionar novas cenas/composições.

Quando o usuário quer um vídeo rápido (sem deliberação)

Comprima a Fase 1 para: pergunte o tipo de vídeo + direção criativa em uma pergunta. Escolha os 2 principais especialistas, gere um cenário breve. Avance para a construção rapidamente. Ainda pergunte sobre música.

Quando o usuário quer apenas o conceito (sem código)

Execute as Fases 1-2 completamente. Produza o briefing criativo e o cenário como um documento. Pule a Fase 3.

Quando o usuário quer vídeos multivariantes

Use o arquétipo de Marketing de Crescimento. Projete a matriz de variantes (o que muda por variante). Construa um vídeo base, depois mostre como parametrizar as diferenças. Use dados de configuração e repetição sobre componentes para gerar variações.

Quando o usuário quer um vídeo com roteiro

Pule a Fase 2 de design de cena. Peça o roteiro/texto primeiro. Use-o como estrutura de cena diretamente. Cada parágrafo ou seção se torna uma cena. Adapte o tempo do roteiro ao quadro.

Quando a renderização falha

Leia o erro - o Remotion geralmente aponta para a linha exata do problema
Verifique: caminhos de importação, componentes não exportados, props ausentes, tipos incorretos
Verifique a integridade do áudio (corrompido? formato errado?)
Renderize com --log=verbose para logs detalhados
Se persistir: simplifique (remova uma cena, teste com menos componentes)

Referências

Consulte estes arquivos de referência para conhecimento detalhado:

referências/remotion-patterns.md - Padrões de animação, áudio e layout premium
referências/component-library.md - Componentes reutilizáveis e exemplos de código
referências/video-archetypes.md - Especificações de direção criativa (cores, fontes, estilos)
referências/expert-definitions.md - Papéis de especialistas e modelo de revisão
referências/music-and-audio.md - Guia completo de integração de áudio

Exemplo de Uso

Usuário: "Preciso de um vídeo de demonstração para nosso novo dashboard de análise" Agente: (Fase 1 perguntas de descoberta, seleciona direção Rico em Dados/Bloomberg) Agente: "Aqui está o briefing. O painel de especialistas recomenda focar no gancho de "3 segundos" e usar animação de gráfico gradual. Pronto para projetar as cenas?" Usuário: "Sim" Agente: (Projeta 5 cenas: problema, solução, métricas, painel, CTA. Constrói componentes. Adiciona música ambiente do Pixabay. Renderiza.) Agente: "Aqui está a primeira versão. As métricas estão claras, mas a transição para o painel parece abrupta. Devo ajustar a cena 3 para incluir um fade mais longo?"

Perguntar na sua IA favorita

Documentação