claude-plugins/marketing/skills/video/SKILL.md

---
name: video
description: Video content strategy and production guidance. Plans video content,
  scripts, and production workflows. Use when user mentions "video content", "conteúdo
  vídeo", "youtube strategy", "video production", "video script".
author: Descomplicar® Crescimento Digital
version: 2.0.0
quality_score: 75
user_invocable: true
desk_task: 1486
allowed-tools: Edit
---

# /video - Criação de Vídeos com Remotion

Cria vídeos profissionais usando **Remotion** (React) a partir de descrições em linguagem natural.

## Arquitectura

```
Prompt Natural → Claude Code → Código React/Remotion → Vídeo MP4/GIF/WebM
```

| Componente | Função |
|------------|--------|
| **Remotion** | Framework React para vídeos programáticos |
| **Esta Skill** | Ensina Claude a gerar código Remotion correcto |
| **Output** | MP4, GIF, WebM em qualquer resolução |

---

## Projecto Base

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

Este projecto já está configurado com:
- Remotion 4.x instalado
- Agent Skills do Remotion
- Composição de exemplo funcional
- Scripts de renderização

---

## Uso Rápido

### Criar Novo Vídeo

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

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

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

### Comandos Disponíveis

| Comando | Descrição |
|---------|-----------|
| `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 vídeo de [duração] segundos para [empresa/propósito] com:
- Resolução: [1920x1080 / 1080x1920 / 1080x1080]
- FPS: [30 / 60]
- Fundo: [cor sólida / gradiente / imagem]
- Sequência de animação:
  1. [Elemento] [animação] (frames X-Y)
  2. [Elemento] [animação] (frames X-Y)
  3. ...
- Texto: [título, subtítulo, CTA]
- Estilo: [minimalista / corporativo / energético / elegante]
```

---

## Exemplos de Prompts

### Intro Corporativa
```
Cria um vídeo intro de 5 segundos para "Descomplicar" com:
- Resolução: 1920x1080, 30fps
- Fundo: gradiente de #1e3a8a para #7c3aed
- Animação:
  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 vídeo vertical de 15 segundos para Instagram Reels com:
- Resolução: 1080x1920, 30fps
- Tema: "5 Dicas de SEO"
- Sequência:
  1. Título 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!"
- Cores: marca Descomplicar
```

### Promo Produto
```
Cria um vídeo promocional de 20 segundos com:
- Resolução: 1920x1080, 30fps
- Produto: [Nome]
- Features a destacar: [lista]
- CTA: "Experimenta grátis"
- Incluir: preço com animação de destaque
```

---

## Conceitos Remotion Essenciais

### Timing
- **Frames**: Unidade base (30fps = 30 frames/segundo)
- **useCurrentFrame()**: Frame actual da animação
- **interpolate()**: Mapear frames para valores (opacity, position, scale)
- **spring()**: Animações com física (bounce, elastic)

### Componentes Core
```tsx
import {
  AbsoluteFill,      // Container full-screen
  Sequence,          // Sequenciar elementos no tempo
  useCurrentFrame,   // Frame actual
  useVideoConfig,    // fps, width, height, duration
  interpolate,       // Interpolação linear
  spring,            // Animação spring
  Img,               // Imagens
  Audio,             // Áudio
  Video,             // Vídeo embebido
} from "remotion";
```

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

---

## Opções de Renderização

### Qualidade
```bash
# Alta qualidade (lento)
npx remotion render Video out.mp4 --crf=18

# Qualidade média (rápido)
npx remotion render Video out.mp4 --crf=23

# Baixa qualidade (muito rápido)
npx remotion render Video out.mp4 --crf=28
```

### Formatos
```bash
# MP4 (H.264)
npx remotion render Video out.mp4

# GIF
npx remotion render Video out.gif --codec=gif

# WebM (VP8)
npx remotion render Video out.webm --codec=vp8

# ProRes (alta qualidade, ficheiro grande)
npx remotion render Video out.mov --codec=prores
```

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

---

## Resoluções Comuns

| Formato | Resolução | 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 |

---

## Boas Práticas

### Performance
- Usar `React.memo()` para componentes pesados
- Evitar re-renders desnecessários
- Pré-carregar assets com `staticFile()`

### Animações
- Começar com `interpolate()` para animações simples
- Usar `spring()` para movimentos naturais
- Combinar `Sequence` para organizar timeline

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

---

## Troubleshooting

| Problema | Solução |
|----------|---------|
| Vídeo preto | Verificar `AbsoluteFill` tem background |
| Fontes não carregam | Usar `@remotion/google-fonts` |
| Animação não funciona | Verificar range de frames no `interpolate` |
| Erro de módulo | `rm -rf node_modules && npm install` |
| Render lento | Reduzir `--concurrency` ou usar `--crf` maior |

---

## Regras Detalhadas

Para instruções específicas, consultar:

- [rules/animations.md](rules/animations.md) - Animações fundamentais
- [rules/timing.md](rules/timing.md) - Interpolação e easing
- [rules/transitions.md](rules/transitions.md) - Transições entre cenas
- [rules/sequencing.md](rules/sequencing.md) - Organização 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) - Áudio e som
- [rules/tailwind.md](rules/tailwind.md) - TailwindCSS no Remotion

---

## Workflow Completo

```
1. DEFINIR → Duração, resolução, estilo
2. DESCREVER → Prompt detalhado ao Claude
3. GERAR → Claude cria componentes React
4. PREVIEW → npm run dev (Remotion Studio)
5. AJUSTAR → Refinar animações/timing
6. RENDER → npx remotion render
7. EXPORTAR → MP4/GIF/WebM conforme necessidade
```

---

## Casos de Uso

| Tipo | Duração | Resolução |
|------|---------|-----------|
| Logo Intro | 3-5s | 1920x1080 |
| Promo Rápida | 15-30s | 1080x1920 |
| Explainer | 60-120s | 1920x1080 |
| Social Post | 5-15s | 1080x1080 |
| YouTube Intro | 5-10s | 1920x1080 |
| Stories | 15s | 1080x1920 |

---

---

## Datasets Dify (Consulta Obrigatória)

Em caso de dúvidas ou para aprofundar conhecimento, consultar os seguintes datasets via MCP:

| Dataset | ID | Prioridade |
|---------|----|-----------:|
| **Canva** | `7efc5db4-05b1-408a-9e41-b612188ee877` | 2 |
| **Criatividade** | `39818f77-8c70-4729-9b5c-6f92d3a2b418` | 2 |
| **Youtube Marketing** | `baa1b3e6-ebf0-4413-84b2-63d1164867ea` | 2 |
| **Marketing Redes Sociais** | `66117552-348f-455d-9aca-2da722567693` | 3 |

### Como Consultar

```javascript
// Princípios de design para vídeo
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "7efc5db4-05b1-408a-9e41-b612188ee877",
  query: "animacao motion design"
})

// Técnicas criativas
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "39818f77-8c70-4729-9b5c-6f92d3a2b418",
  query: "storytelling visual criativo"
})

// Optimização para YouTube
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "baa1b3e6-ebf0-4413-84b2-63d1164867ea",
  query: "thumbnail intro retention"
})
```

### Quando Consultar

- Criar animações e motion graphics
- Princípios de design visual
- Optimizar vídeos para redes sociais
- Storytelling visual

---

## Paletas de Cores para Vídeo

### Corporativo Profissional
```tsx
const colors = {
  background: "#0f172a",     // Slate 900
  primary: "#3b82f6",        // Blue 500
  secondary: "#8b5cf6",      // Violet 500
  text: "#f8fafc",           // Slate 50
  accent: "#10b981",         // Emerald 500
}
```

### Energético/Marketing
```tsx
const colors = {
  background: "#ff006e",     // Pink forte
  primary: "#ffbe0b",        // Amarelo vibrante
  secondary: "#fb5607",      // Laranja
  text: "#ffffff",
  accent: "#8338ec",         // Roxo
}
```

### Minimalista/Elegante
```tsx
const colors = {
  background: "#fafafa",     // Off-white
  primary: "#18181b",        // Zinc 900
  secondary: "#71717a",      // Zinc 500
  text: "#18181b",
  accent: "#a855f7",         // Purple 500
}
```

---

## Animações Prontas (Copy-Paste)

### Fade In com Scale
```tsx
import { interpolate, useCurrentFrame } from "remotion"

export function FadeInScale({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()

  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" })
  const scale = interpolate(frame, [0, 30], [0.8, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `scale(${scale})` }}>
      {children}
    </div>
  )
}
```

### Slide Up
```tsx
export function SlideUp({ children, delay = 0 }: { children: React.ReactNode; delay?: number }) {
  const frame = useCurrentFrame()

  const y = interpolate(frame, [delay, delay + 20], [50, 0], { extrapolateRight: "clamp" })
  const opacity = interpolate(frame, [delay, delay + 20], [0, 1], { extrapolateRight: "clamp" })

  return (
    <div style={{ opacity, transform: `translateY(${y}px)` }}>
      {children}
    </div>
  )
}
```

### Bounce In (Spring)
```tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion"

export function BounceIn({ children }: { children: React.ReactNode }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const scale = spring({
    frame,
    fps,
    config: {
      damping: 10,
      stiffness: 200,
      mass: 0.5,
    },
  })

  return (
    <div style={{ transform: `scale(${scale})` }}>
      {children}
    </div>
  )
}
```

### Text Reveal (Linha por Linha)
```tsx
export function TextReveal({ lines }: { lines: string[] }) {
  const frame = useCurrentFrame()

  return (
    <div className="space-y-2">
      {lines.map((line, i) => {
        const delay = i * 15
        const opacity = interpolate(
          frame,
          [delay, delay + 10],
          [0, 1],
          { extrapolateRight: "clamp" }
        )

        return (
          <div key={i} style={{ opacity }}>
            {line}
          </div>
        )
      })}
    </div>
  )
}
```

---

## Tipografia para Vídeo

### Hierarquia de Tamanhos

```tsx
// Remotion 1920x1080
const textSizes = {
  hero: "120px",        // Título principal
  h1: "80px",          // Secções
  h2: "60px",          // Sub-títulos
  h3: "40px",          // Destaques
  body: "32px",        // Texto normal
  caption: "24px",     // Legendas
}

// Remotion 1080x1920 (Vertical)
const textSizesVertical = {
  hero: "80px",
  h1: "56px",
  h2: "40px",
  h3: "32px",
  body: "24px",
  caption: "18px",
}
```

### Font Pairings para Vídeo

```tsx
// Moderno Tech
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');
`}</style>

// Editorial Elegante
<style>{`
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
`}</style>
```

---

## Templates Prontos

### Logo Intro (5s)
```tsx
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"

export function LogoIntro({ logoSrc }: { logoSrc: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  // Logo scale com spring
  const logoScale = spring({
    frame: frame - 10,
    fps,
    config: { damping: 12, stiffness: 200 }
  })

  // Tagline slide up
  const taglineY = interpolate(frame, [60, 90], [50, 0], { extrapolateRight: "clamp" })
  const taglineOpacity = interpolate(frame, [60, 90], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#0f172a", justifyContent: "center", alignItems: "center" }}>
      {/* Logo */}
      <div style={{ transform: `scale(${logoScale})` }}>
        <Img src={logoSrc} style={{ width: "300px" }} />
      </div>

      {/* Tagline */}
      <div
        style={{
          position: "absolute",
          bottom: "150px",
          fontSize: "48px",
          color: "#f8fafc",
          fontWeight: 600,
          transform: `translateY(${taglineY}px)`,
          opacity: taglineOpacity,
        }}
      >
        Crescimento Digital
      </div>
    </AbsoluteFill>
  )
}
```

### Stats Highlight (3s)
```tsx
export function StatsHighlight({ stat, label }: { stat: string; label: string }) {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  // Número escala com bounce
  const scale = spring({
    frame,
    fps,
    config: { damping: 10, mass: 0.5, stiffness: 200 }
  })

  // Label fade in
  const labelOpacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: "clamp" })

  return (
    <AbsoluteFill style={{ backgroundColor: "#3b82f6", justifyContent: "center", alignItems: "center" }}>
      {/* Número */}
      <div
        style={{
          fontSize: "180px",
          fontWeight: 900,
          color: "#ffffff",
          transform: `scale(${scale})`,
        }}
      >
        {stat}
      </div>

      {/* Label */}
      <div
        style={{
          fontSize: "40px",
          color: "#dbeafe",
          marginTop: "20px",
          opacity: labelOpacity,
        }}
      >
        {label}
      </div>
    </AbsoluteFill>
  )
}
```

---

## Motion Design Guidelines

### Duração de Animações

| Tipo | Frames (30fps) | Duração |
|------|----------------|---------|
| Micro (hover, toggle) | 3-6 | 100-200ms |
| Rápida (fade, slide) | 12-18 | 400-600ms |
| Normal (entrada cena) | 24-30 | 800-1000ms |
| Lenta (transição cena) | 45-60 | 1.5-2s |

### Easing Curves

```tsx
import { Easing } from "remotion"

// Entrada suave
const easeOut = Easing.bezier(0, 0, 0.2, 1)

// Saída suave
const easeIn = Easing.bezier(0.4, 0, 1, 1)

// Entrada e saída suave
const easeInOut = Easing.bezier(0.4, 0, 0.2, 1)

// Spring natural
const spring = Easing.bezier(0.34, 1.56, 0.64, 1)

// Uso
const y = interpolate(frame, [0, 30], [100, 0], {
  easing: easeOut,
  extrapolateRight: "clamp"
})
```

### Princípios de Motion

1. **Staging** - Um movimento de cada vez
2. **Anticipation** - Preparação antes do movimento
3. **Follow Through** - Overshooting ligeiro
4. **Timing** - Velocidade comunica peso/importância
5. **Exaggeration** - Amplificar para ênfase

---

## Acessibilidade em Vídeo

### Contraste de Texto

```tsx
// NUNCA usar contraste baixo
// BAD: texto cinza em fundo branco
const bad = { color: "#9ca3af", background: "#ffffff" } // Ratio 2.8:1

// GOOD: contraste mínimo 4.5:1
const good = { color: "#1f2937", background: "#ffffff" } // Ratio 15.8:1
```

### Tamanho Mínimo de Texto

```tsx
// 1080p (1920x1080)
const minSize = "28px" // Legível em mobile

// 4K (3840x2160)
const minSize4k = "56px"
```

### Reduced Motion

```tsx
import { useVideoConfig } from "remotion"

export function RespectMotion({ children }: { children: React.ReactNode }) {
  const { fps } = useVideoConfig()
  const prefersReducedMotion = false // Remotion não tem acesso a media queries

  // Para export, criar versão alternativa sem animações complexas
  return children
}
```

---

## Datasets Dify (Consulta Obrigatória)

Em caso de dúvidas ou para aprofundar conhecimento, consultar os seguintes datasets via MCP:

| Dataset | ID | Prioridade |
|---------|----|-----------:|
| **Canva** | `7efc5db4-05b1-408a-9e41-b612188ee877` | 2 |
| **Criatividade** | `39818f77-8c70-4729-9b5c-6f92d3a2b418` | 2 |
| **Youtube Marketing** | `baa1b3e6-ebf0-4413-84b2-63d1164867ea` | 2 |
| **Marketing Redes Sociais** | `66117552-348f-455d-9aca-2da722567693` | 3 |

### Como Consultar

```javascript
// Princípios de design para vídeo
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "7efc5db4-05b1-408a-9e41-b612188ee877",
  query: "animacao motion design"
})

// Técnicas criativas
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "39818f77-8c70-4729-9b5c-6f92d3a2b418",
  query: "storytelling visual criativo"
})

// Optimização para YouTube
mcp__dify-kb__dify_kb_retrieve_segments({
  dataset_id: "baa1b3e6-ebf0-4413-84b2-63d1164867ea",
  query: "thumbnail intro retention"
})
```

### Quando Consultar

- Criar animações e motion graphics
- Princípios de design visual
- Optimizar vídeos para redes sociais
- Storytelling visual

---

**Versão**: 2.0.0 | **Data**: 2026-02-03 | **Autor**: Descomplicar®
**Projecto Base**: `/media/ealmeida/Dados/Dev/remotion-demo/`
**Documentação**: [remotion.dev/docs](https://remotion.dev/docs)

---


## Quando NÃO Usar

- Para tarefas fora do domínio de especialização desta skill
- Quando outra skill mais específica está disponível
- Para operações que requerem confirmação manual do utilizador