---
name: video
description: Criacao de videos profissionais com Remotion (React). Planeia conteudo, scripts e workflows de producao.
---

# /video - Criacao de Videos com Remotion

Cria videos profissionais usando **Remotion** (React) a partir de descricoes em linguagem natural.

## Contexto NotebookLM

ANTES de executar, consultar notebooks para contexto especializado:

| Notebook | ID | Consultar quando |
|----------|-----|-----------------|
| Producao de Video e YouTube | `058a896e` | Para planeamento de video |
| Remotion Deep Research | `f2b75baa` | Para implementacao tecnica Remotion |

```
mcp__notebooklm__notebook_query({
  notebook_id: "058a896e-6c9a-4e51-ae7d-9adb2738bc5f",
  query: "<adaptar ao contexto>"
})

mcp__notebooklm__notebook_query({
  notebook_id: "f2b75baa-1ab1-48d3-8f7c-a6a9e516934c",
  query: "<adaptar ao contexto>"
})
```

---

## Arquitectura

```
Prompt Natural -> Claude Code -> Codigo React/Remotion -> Video MP4/GIF/WebM
```

| Componente | Funcao |
|------------|--------|
| **Remotion** | Framework React para videos programaticos |
| **Esta Skill** | Ensina Claude a gerar codigo Remotion correcto |
| **Output** | MP4, GIF, WebM em qualquer resolucao |

---

## Projecto Base

```
/media/ealmeida/Dados/Dev/remotion-demo/
```

Ja configurado com Remotion 4.x, Agent Skills, composicao de exemplo e scripts de renderizacao.

---

## Uso Rapido

```bash
# 1. Navegar ao projecto
cd /media/ealmeida/Dados/Dev/remotion-demo

# 2. Descrever o video pretendido ao Claude
"Cria um video de 10 segundos para [empresa] com logo animado e tagline"

# 3. Renderizar
npm run render
# ou
npx remotion render [CompositionName] out/video.mp4
```

### Comandos Disponiveis

| Comando | Descricao |
|---------|-----------|
| `npm run dev` | Abrir Remotion Studio (preview) |
| `npm run render` | Renderizar DemoVideo para MP4 |
| `npm run render:gif` | Renderizar para GIF |

---

## Estrutura de Prompt Recomendada

```
Cria um video de [duracao] segundos para [empresa/proposito] com:
- Resolucao: [1920x1080 / 1080x1920 / 1080x1080]
- FPS: [30 / 60]
- Fundo: [cor solida / gradiente / imagem]
- Sequencia de animacao:
  1. [Elemento] [animacao] (frames X-Y)
  2. [Elemento] [animacao] (frames X-Y)
- Texto: [titulo, subtitulo, CTA]
- Estilo: [minimalista / corporativo / energetico / elegante]
```

---

## Exemplos de Prompts

### Intro Corporativa

```
Cria um video intro de 5 segundos para "Descomplicar" com:
- Resolucao: 1920x1080, 30fps
- Fundo: gradiente de #1e3a8a para #7c3aed
- Animacao:
  1. Logo fade in com bounce (0-45 frames)
  2. Tagline "Crescimento Digital" slide up (45-90 frames)
  3. Linha decorativa expande (60-120 frames)
- Estilo: profissional e moderno
```

### Reel/Short Vertical

```
Cria um video vertical de 15 segundos para Instagram Reels com:
- Resolucao: 1080x1920, 30fps
- Tema: "5 Dicas de SEO"
- Sequencia:
  1. Titulo impactante com zoom (0-30 frames)
  2. Dica 1 slide in (30-90 frames)
  3. Dica 2 slide in (90-150 frames)
- CTA final: "Segue para mais!"
```

---

## Conceitos Remotion Essenciais

### Timing

- **Frames**: Unidade base (30fps = 30 frames/segundo)
- **useCurrentFrame()**: Frame actual da animacao
- **interpolate()**: Mapear frames para valores (opacity, position, scale)
- **spring()**: Animacoes com fisica (bounce, elastic)

### Componentes Core

```tsx
import {
  AbsoluteFill,      // Container full-screen
  Sequence,          // Sequenciar elementos no tempo
  useCurrentFrame,   // Frame actual
  useVideoConfig,    // fps, width, height, duration
  interpolate,       // Interpolacao linear
  spring,            // Animacao spring
  Img,               // Imagens
  Audio,             // Audio
  Video,             // Video embebido
} from "remotion";
```

### Estrutura de Composicao

```tsx
// src/Root.tsx
<Composition
  id="NomeVideo"
  component={MeuComponente}
  durationInFrames={150}  // 5s a 30fps
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{ titulo: "Exemplo" }}
/>
```

---

## Opcoes de Renderizacao

### Qualidade

```bash
npx remotion render Video out.mp4 --crf=18   # Alta qualidade (lento)
npx remotion render Video out.mp4 --crf=23   # Qualidade media (rapido)
npx remotion render Video out.mp4 --crf=28   # Baixa qualidade (muito rapido)
```

### Formatos

```bash
npx remotion render Video out.mp4                    # MP4 (H.264)
npx remotion render Video out.gif --codec=gif        # GIF
npx remotion render Video out.webm --codec=vp8       # WebM
npx remotion render Video out.mov --codec=prores     # ProRes
```

### Props Dinamicas

```bash
npx remotion render Video out.mp4 \
  --props='{"titulo":"Descomplicar","cor":"#1e3a8a"}'
```

---

## Resolucoes Comuns

| Formato | Resolucao | Uso |
|---------|-----------|-----|
| 16:9 HD | 1920x1080 | YouTube, Website |
| 16:9 4K | 3840x2160 | YouTube 4K |
| 9:16 Vertical | 1080x1920 | Reels, TikTok, Shorts |
| 1:1 Quadrado | 1080x1080 | Instagram Feed |
| 4:5 Portrait | 1080x1350 | Instagram Feed optimal |

---

## Casos de Uso

| Tipo | Duracao | Resolucao |
|------|---------|-----------|
| Logo Intro | 3-5s | 1920x1080 |
| Promo Rapida | 15-30s | 1080x1920 |
| Explainer | 60-120s | 1920x1080 |
| Social Post | 5-15s | 1080x1080 |
| YouTube Intro | 5-10s | 1920x1080 |
| Stories | 15s | 1080x1920 |

---

## Boas Praticas

### Performance

- Usar `React.memo()` para componentes pesados
- Evitar re-renders desnecessarios
- Pre-carregar assets com `staticFile()`

### Animacoes

- Comecar com `interpolate()` para animacoes simples
- Usar `spring()` para movimentos naturais
- Combinar `Sequence` para organizar timeline

### Assets

- Colocar imagens/audio em `public/`
- Usar `staticFile("nome.png")` para referenciar
- Formatos recomendados: PNG (imagens), MP3/WAV (audio)

---

## Troubleshooting

| Problema | Solucao |
|----------|---------|
| Video preto | Verificar `AbsoluteFill` tem background |
| Fontes nao carregam | Usar `@remotion/google-fonts` |
| Animacao nao funciona | Verificar range de frames no `interpolate` |
| Erro de modulo | `rm -rf node_modules && npm install` |
| Render lento | Reduzir `--concurrency` ou usar `--crf` maior |

---

## Workflow Completo

```
1. DEFINIR -> Duracao, resolucao, estilo
2. DESCREVER -> Prompt detalhado ao Claude
3. GERAR -> Claude cria componentes React
4. PREVIEW -> npm run dev (Remotion Studio)
5. AJUSTAR -> Refinar animacoes/timing
6. RENDER -> npx remotion render
7. EXPORTAR -> MP4/GIF/WebM conforme necessidade
```

---

## Referencias Detalhadas

Para conteudo detalhado, consultar:

- [references/components.md](references/components.md) - Animacoes prontas, templates, paletas de cores, tipografia, motion design, acessibilidade
- [rules/animations.md](rules/animations.md) - Animacoes fundamentais
- [rules/timing.md](rules/timing.md) - Interpolacao e easing
- [rules/transitions.md](rules/transitions.md) - Transicoes entre cenas
- [rules/sequencing.md](rules/sequencing.md) - Organizacao temporal
- [rules/fonts.md](rules/fonts.md) - Carregamento de fontes
- [rules/images.md](rules/images.md) - Trabalhar com imagens
- [rules/audio.md](rules/audio.md) - Audio e som
- [rules/tailwind.md](rules/tailwind.md) - TailwindCSS no Remotion

---

## Anti-Patterns

- Nao usar para tarefas fora do dominio de video/Remotion
- Nao usar quando outra skill mais especifica esta disponivel
- Nao executar sem confirmar requisitos com o utilizador

---

**Projecto Base**: `/media/ealmeida/Dados/Dev/remotion-demo/`
**Documentacao**: [remotion.dev/docs](https://remotion.dev/docs)