Marve10s/Better-Fullstack

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 de texto e produza vídeos consistentes e alinhados com a marca em escala.

Quando usar esta skill

• Geração automatizada de vídeos: Gere vídeos a partir de instruções de texto
• Produção de vídeos da marca: Vídeos de alto volume com estilo consistente
• Conteúdo programável: Combine narração, 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

Modelo de estruturação de cenas:

## Plano de Cenas

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

### Cena 2: Problema (0:05 - 0:15)
- **Visual**: Ilustração do estado problemático
- **Áudio**: Narração começa
- **Texto**: Sobreposição da 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:

• Logotipo: SVG ou PNG de alta resolução
• Screenshots: Normalizar para a proporção de tela alvo
• Áudio: MP3 ou WAV; normalizar o 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 o QA

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

# 2. Verificações de QA
- [ ] Temporização
- [ ] 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 de Produto

Comando:

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

Saída esperada:

## Divisão de Cenas
1. Gancho (0:00-0:05): Logotipo + slogan
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: Tutorial de Onboarding

Comando:

Gere um tutorial de onboarding de 45s usando screenshots,
com chamadas e formato 9:16 para dispositivos móveis.

Saída esperada:

• Plano de cenas com 5 etapas
• Lista de assets (screenshots, setas de chamada)
• Sobreposições de texto e transições
• Margens seguras para dispositivos móveis aplicadas

---

Melhores práticas

1. Cenas curtas: Mantenha cada cena clara entre 5 e 10 segundos
2. Tipografia consistente: Defina uma escala tipográfica
3. Sincronia de áudio: Alinhe as dicas de narração com os visuais
4. Reutilização de modelos: Salve composições reutilizáveis
5. Zonas seguras: Reserve margens para proporções de tela móveis

---

Armadilhas comuns

• Excesso de texto: Limite a quantidade de texto por cena
• Ignorar zonas seguras para dispositivos móveis: 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 dessincronizados

Causa: Incompatibilidade de temporização dos quadros Solução: Recalcule os quadros 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 de tela: 16:9
- FPS: 30

### Plano de Cenas
| Cena | Duração | Visual | Áudio | Transição |
|------|---------|--------|-------|-----------|
| Gancho | 0:00-0:05 | Logotipo aparece | BGM inicia | Desvanecimento |
| ... | ... | ... | ... | ... |

### 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 Multiagente

Validação e Retropectivas

• 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

Funções dos Agentes

Agente	Função
Claude	Planejamento de cenas, escrita de roteiro
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

Skills Relacionadas

• frontend-design

Tags

#video #remotion #animation #storytelling #automation #react