Produção de Vídeos com Remotion

Skill de produção de vídeos programáveis usando Remotion. Gere vídeos automatizados a partir de instruções textuais e produza conteúdo de vídeo consistente e alinhado à marca em escala.

Quando usar esta skill

Geração automatizada de vídeos: Gere vídeos a partir de instruções textuais
Produção de vídeos da marca: Vídeos em alto volume com estilo consistente
Conteúdo programável: Combine narração, recursos visuais e animação
Conteúdo de marketing: Introduções de produtos, onboarding, vídeos promocionais

Instruções

Passo 1: Defina a Especificação do Vídeo

video_spec:
  audience: [público-alvo]
  goal: [objetivo do vídeo]
  duration: [duração total - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "rápido" | "calmo" | "cinematográfico"
  voice:
    style: [estilo de narração]
    language: [idioma]

Passo 2: Esboce as Cenas

Template de estruturação de cenas:

## Plano de Cenas

### Cena 1: Gancho (0:00 - 0:05)
- **Visual**: Fade-in do logotipo do produto
- **Áudio**: Introdução animada
- **Texto**: "Transforme seu Fluxo de Trabalho"
- **Transição**: Fade → Cena 2

### Cena 2: Problema (0:05 - 0:15)
- **Visual**: Ilustração do estado do problema
- **Áudio**: Narração começa
- **Texto**: Sobreposição de mensagem-chave
- **Transição**: Deslizar para a esquerda

### Cena 3: Solução (0:15 - 0:30)
...

Passo 3: Prepare os Assets

# Lista de verificação de assets
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Regras de preparação de assets:

Logo: SVG ou PNG de alta resolução
Screenshots: Normalizar para a proporção de destino
Áudio: MP3 ou WAV; normalizar volume
Fontes: Webfont ou arquivos de fonte locais

Passo 4: Implemente a Composição Remotion

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s a 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Exemplo de Componente de Cena
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transforme seu Fluxo de Trabalho</Title>
    </AbsoluteFill>
  );
};

Passo 5: Renderize e Faça QA

# 1. Renderização de pré-visualização (baixa qualidade)
npx remotion preview src/Video.tsx

# 2. Verificações de QA
- [ ] Tempo
- [ ] Sincronia de áudio
- [ ] Legibilidade do texto
- [ ] Transições suaves

# 3. Renderização final
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Exemplos

Exemplo 1: Vídeo de Introdução do Produto

Prompt:

Crie um vídeo de introdução do produto de 60s com 6 cenas,
tom animado e saída 16:9. Inclua um CTA no final.

Saída esperada:

## Divisão de Cenas
1. Gancho (0:00-0:05): Logo + tagline
2. Problema (0:05-0:15): Visualização do ponto de dor
3. Solução (0:15-0:30): Demonstração do produto
4. Funcionalidades (0:30-0:45): Principais benefícios (3 itens)
5. Prova Social (0:45-0:55): Depoimento/estatísticas
6. CTA (0:55-1:00): Chamada para ação + contato

## Estrutura Remotion
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Exemplo 2: Walkthrough de Onboarding

Prompt:

Gere um walkthrough de onboarding de 45s usando screenshots,
com retângulos de destaque e formato 9:16 para mobile.

Saída esperada:

Plano de cenas com 5 etapas
Lista de assets (screenshots, setas de destaque)
Sobreposições de texto e transições
Margens seguras para mobile aplicadas

Melhores práticas

Cenas curtas: Mantenha cada cena clara em 5-10 segundos
Tipografia consistente: Defina uma escala tipográfica
Sincronia de áudio: Alinhe as dicas de narração com os visuais
Reutilização de templates: Salve composições reutilizáveis
Zonas seguras: Reserve margens para proporções mobile

Armadilhas comuns

Sobrecarga de texto: Limite a quantidade de texto por cena
Ignorar zonas seguras mobile: Verifique as bordas para saídas 9:16
Renderização final antes do QA: Sempre verifique na pré-visualização primeiro

Solução de problemas

Problema: Áudio e visuais fora de sincronia

Causa: Incompatibilidade de temporização dos frames Solução: Recalcule os frames e alinhe os timestamps

Problema: Renderização lenta ou falha

Causa: Assets ou efeitos pesados Solução: Comprima os assets e simplifique as animações

Problema: Texto ilegível

Causa: Tamanho da fonte muito pequeno ou contraste insuficiente Solução: Use fontes de pelo menos 24px e cores de alto contraste

Formato de saída

## Relatório de Produção de Vídeo

### Especificação
- Duração: 60s
- Proporção: 16:9
- FPS: 30

### Plano de Cenas
| Cena | Duração | Visual | Áudio | Transição |
|-------|----------|--------|-------|------------|
| Gancho | 0:00-0:05 | Fade do logo | Início BGM | Fade |
| ...   | ...      | ...    | ...   | ...  |

### Assets
- [ ] logo.svg
- [ ] screenshots (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Lista de Verificação de Renderização
- [ ] QA da pré-visualização aprovado
- [ ] Sincronia de áudio verificada
- [ ] Zonas seguras verificadas
- [ ] Renderização final concluída

Fluxo de Trabalho Multi-Agente

Validação e Retrospectivas

Rodada 1 (Orquestrador): Completude da especificação, cobertura de cenas
Rodada 2 (Analista): Consistência narrativa, revisão de ritmo
Rodada 3 (Executor): Validar lista de verificação de prontidão para renderização

Papéis dos Agentes

Agente	Papel
Claude	Planejamento de cenas, roteirização
Gemini	Análise de assets, sugestões de otimização
Codex	Gerar código Remotion, executar renderizações

Metadados

Versão

Versão Atual: 1.0.0
Última Atualização: 2026-01-21
Plataformas Compatíveis: Claude, ChatGPT, Gemini, Codex

JEO-tech-ai/oh-my-unity3d

O que é oh-my-unity3d?

Perguntar na sua IA favorita

Documentação