feat: refactor 30+ skills to Anthropic progressive disclosure pattern
- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,31 +1,46 @@
|
||||
---
|
||||
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
|
||||
description: Criacao de videos profissionais com Remotion (React). Planeia conteudo, scripts e workflows de producao.
|
||||
---
|
||||
|
||||
# /video - Criação de Vídeos com Remotion
|
||||
# /video - Criacao de Videos com Remotion
|
||||
|
||||
Cria vídeos profissionais usando **Remotion** (React) a partir de descrições em linguagem natural.
|
||||
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 → Código React/Remotion → Vídeo MP4/GIF/WebM
|
||||
Prompt Natural -> Claude Code -> Codigo React/Remotion -> Video MP4/GIF/WebM
|
||||
```
|
||||
|
||||
| Componente | Função |
|
||||
| Componente | Funcao |
|
||||
|------------|--------|
|
||||
| **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 |
|
||||
| **Remotion** | Framework React para videos programaticos |
|
||||
| **Esta Skill** | Ensina Claude a gerar codigo Remotion correcto |
|
||||
| **Output** | MP4, GIF, WebM em qualquer resolucao |
|
||||
|
||||
---
|
||||
|
||||
@@ -35,24 +50,18 @@ Prompt Natural → Claude Code → Código React/Remotion → Vídeo MP4/GIF/Web
|
||||
/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
|
||||
Ja configurado com Remotion 4.x, Agent Skills, composicao de exemplo e scripts de renderizacao.
|
||||
|
||||
---
|
||||
|
||||
## Uso Rápido
|
||||
|
||||
### Criar Novo Vídeo
|
||||
## Uso Rapido
|
||||
|
||||
```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"
|
||||
# 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
|
||||
@@ -60,9 +69,9 @@ npm run render
|
||||
npx remotion render [CompositionName] out/video.mp4
|
||||
```
|
||||
|
||||
### Comandos Disponíveis
|
||||
### Comandos Disponiveis
|
||||
|
||||
| Comando | Descrição |
|
||||
| Comando | Descricao |
|
||||
|---------|-----------|
|
||||
| `npm run dev` | Abrir Remotion Studio (preview) |
|
||||
| `npm run render` | Renderizar DemoVideo para MP4 |
|
||||
@@ -73,16 +82,15 @@ npx remotion render [CompositionName] out/video.mp4
|
||||
## Estrutura de Prompt Recomendada
|
||||
|
||||
```
|
||||
Cria um vídeo de [duração] segundos para [empresa/propósito] com:
|
||||
- Resolução: [1920x1080 / 1080x1920 / 1080x1080]
|
||||
Cria um video de [duracao] segundos para [empresa/proposito] com:
|
||||
- Resolucao: [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]
|
||||
- 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]
|
||||
```
|
||||
|
||||
---
|
||||
@@ -90,11 +98,12 @@ Cria um vídeo de [duração] segundos para [empresa/propósito] com:
|
||||
## Exemplos de Prompts
|
||||
|
||||
### Intro Corporativa
|
||||
|
||||
```
|
||||
Cria um vídeo intro de 5 segundos para "Descomplicar" com:
|
||||
- Resolução: 1920x1080, 30fps
|
||||
Cria um video intro de 5 segundos para "Descomplicar" com:
|
||||
- Resolucao: 1920x1080, 30fps
|
||||
- Fundo: gradiente de #1e3a8a para #7c3aed
|
||||
- Animação:
|
||||
- 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)
|
||||
@@ -102,27 +111,16 @@ Cria um vídeo intro de 5 segundos para "Descomplicar" com:
|
||||
```
|
||||
|
||||
### Reel/Short Vertical
|
||||
|
||||
```
|
||||
Cria um vídeo vertical de 15 segundos para Instagram Reels com:
|
||||
- Resolução: 1080x1920, 30fps
|
||||
Cria um video vertical de 15 segundos para Instagram Reels com:
|
||||
- Resolucao: 1080x1920, 30fps
|
||||
- Tema: "5 Dicas de SEO"
|
||||
- Sequência:
|
||||
1. Título impactante com zoom (0-30 frames)
|
||||
- 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!"
|
||||
- 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
|
||||
```
|
||||
|
||||
---
|
||||
@@ -130,27 +128,30 @@ Cria um vídeo promocional de 20 segundos com:
|
||||
## Conceitos Remotion Essenciais
|
||||
|
||||
### Timing
|
||||
|
||||
- **Frames**: Unidade base (30fps = 30 frames/segundo)
|
||||
- **useCurrentFrame()**: Frame actual da animação
|
||||
- **useCurrentFrame()**: Frame actual da animacao
|
||||
- **interpolate()**: Mapear frames para valores (opacity, position, scale)
|
||||
- **spring()**: Animações com física (bounce, elastic)
|
||||
- **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, // Interpolação linear
|
||||
spring, // Animação spring
|
||||
interpolate, // Interpolacao linear
|
||||
spring, // Animacao spring
|
||||
Img, // Imagens
|
||||
Audio, // Áudio
|
||||
Video, // Vídeo embebido
|
||||
Audio, // Audio
|
||||
Video, // Video embebido
|
||||
} from "remotion";
|
||||
```
|
||||
|
||||
### Estrutura de Composição
|
||||
### Estrutura de Composicao
|
||||
|
||||
```tsx
|
||||
// src/Root.tsx
|
||||
<Composition
|
||||
@@ -166,36 +167,27 @@ import {
|
||||
|
||||
---
|
||||
|
||||
## Opções de Renderização
|
||||
## Opcoes de Renderizacao
|
||||
|
||||
### 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
|
||||
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
|
||||
# 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
|
||||
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 Dinâmicas
|
||||
### Props Dinamicas
|
||||
|
||||
```bash
|
||||
npx remotion render Video out.mp4 \
|
||||
--props='{"titulo":"Descomplicar","cor":"#1e3a8a"}'
|
||||
@@ -203,9 +195,9 @@ npx remotion render Video out.mp4 \
|
||||
|
||||
---
|
||||
|
||||
## Resoluções Comuns
|
||||
## Resolucoes Comuns
|
||||
|
||||
| Formato | Resolução | Uso |
|
||||
| Formato | Resolucao | Uso |
|
||||
|---------|-----------|-----|
|
||||
| 16:9 HD | 1920x1080 | YouTube, Website |
|
||||
| 16:9 4K | 3840x2160 | YouTube 4K |
|
||||
@@ -215,72 +207,12 @@ npx remotion render Video out.mp4 \
|
||||
|
||||
---
|
||||
|
||||
## 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 |
|
||||
| Tipo | Duracao | Resolucao |
|
||||
|------|---------|-----------|
|
||||
| Logo Intro | 3-5s | 1920x1080 |
|
||||
| Promo Rápida | 15-30s | 1080x1920 |
|
||||
| Promo Rapida | 15-30s | 1080x1920 |
|
||||
| Explainer | 60-120s | 1920x1080 |
|
||||
| Social Post | 5-15s | 1080x1080 |
|
||||
| YouTube Intro | 5-10s | 1920x1080 |
|
||||
@@ -288,462 +220,77 @@ Para instruções específicas, consultar:
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
## Boas Praticas
|
||||
|
||||
## Datasets Dify (Consulta Obrigatória)
|
||||
### Performance
|
||||
|
||||
Em caso de dúvidas ou para aprofundar conhecimento, consultar os seguintes datasets via MCP:
|
||||
- Usar `React.memo()` para componentes pesados
|
||||
- Evitar re-renders desnecessarios
|
||||
- Pre-carregar assets com `staticFile()`
|
||||
|
||||
| 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 |
|
||||
### Animacoes
|
||||
|
||||
### Como Consultar
|
||||
- Comecar com `interpolate()` para animacoes simples
|
||||
- Usar `spring()` para movimentos naturais
|
||||
- Combinar `Sequence` para organizar timeline
|
||||
|
||||
```javascript
|
||||
// Princípios de design para vídeo
|
||||
mcp__notebooklm__notebook_query, mcp__dify-kb__dify_kb_retrieve_segments({
|
||||
dataset_id: "7efc5db4-05b1-408a-9e41-b612188ee877",
|
||||
query: "animacao motion design"
|
||||
})
|
||||
### Assets
|
||||
|
||||
// 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
|
||||
- Colocar imagens/audio em `public/`
|
||||
- Usar `staticFile("nome.png")` para referenciar
|
||||
- Formatos recomendados: PNG (imagens), MP3/WAV (audio)
|
||||
|
||||
---
|
||||
|
||||
## Paletas de Cores para Vídeo
|
||||
## 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
|
||||
|
||||
### 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
|
||||
}
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animações Prontas (Copy-Paste)
|
||||
## Referencias Detalhadas
|
||||
|
||||
### Fade In com Scale
|
||||
```tsx
|
||||
import { interpolate, useCurrentFrame } from "remotion"
|
||||
Para conteudo detalhado, consultar:
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
```
|
||||
- [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
|
||||
|
||||
---
|
||||
|
||||
## Tipografia para Vídeo
|
||||
## Anti-Patterns
|
||||
|
||||
### 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>
|
||||
```
|
||||
- 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
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
# PRIMARIO: NotebookLM (Gemini 2.5 RAG)
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "76647e0f-3ae2-4c00-a0a8-f457aebf5655", query: "<tema>"}) // Marketing Digital Avancado
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "9053d0e8-dd39-460b-b5ea-e67af3e9a675", query: "<tema>"}) // Social Media e Branding
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "7b8fec17-d34f-4e3f-a8c6-8231e51f6323", query: "<tema>"}) // Copywriting e Persuasao
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "058a896e-6c9a-4e51-ae7d-9adb2738bc5f", query: "<tema>"}) // Producao de Video e Youtube
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "79d43410-0e29-4be1-881d-84db6bdc239a", query: "<tema>"}) // Estrategia e Empreendedorismo
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "4c595973-ba10-420a-a3bf-e4389e424ad3", query: "<tema>"}) // Marketing Digital PT
|
||||
# mcp__notebooklm__notebook_query({notebook_id: "0c9c079c-a426-486c-99eb-1564d42d37ad", query: "<tema>"}) // Gestao de Projectos e Agile
|
||||
# FALLBACK: Dify KB (se NotebookLM insuficiente)
|
||||
|
||||
// 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
|
||||
**Documentacao**: [remotion.dev/docs](https://remotion.dev/docs)
|
||||
|
||||
274
marketing/skills/video/references/components.md
Normal file
274
marketing/skills/video/references/components.md
Normal file
@@ -0,0 +1,274 @@
|
||||
# /video - Componentes e Templates Remotion
|
||||
|
||||
## 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>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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()
|
||||
|
||||
const logoScale = spring({
|
||||
frame: frame - 10,
|
||||
fps,
|
||||
config: { damping: 12, stiffness: 200 }
|
||||
})
|
||||
|
||||
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" }}>
|
||||
<div style={{ transform: `scale(${logoScale})` }}>
|
||||
<Img src={logoSrc} style={{ width: "300px" }} />
|
||||
</div>
|
||||
<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()
|
||||
|
||||
const scale = spring({ frame, fps, config: { damping: 10, mass: 0.5, stiffness: 200 } })
|
||||
const labelOpacity = interpolate(frame, [30, 45], [0, 1], { extrapolateRight: "clamp" })
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ backgroundColor: "#3b82f6", justifyContent: "center", alignItems: "center" }}>
|
||||
<div style={{ fontSize: "180px", fontWeight: 900, color: "#ffffff", transform: `scale(${scale})` }}>
|
||||
{stat}
|
||||
</div>
|
||||
<div style={{ fontSize: "40px", color: "#dbeafe", marginTop: "20px", opacity: labelOpacity }}>
|
||||
{label}
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Paletas de Cores
|
||||
|
||||
### Corporativo Profissional
|
||||
```tsx
|
||||
const colors = {
|
||||
background: "#0f172a",
|
||||
primary: "#3b82f6",
|
||||
secondary: "#8b5cf6",
|
||||
text: "#f8fafc",
|
||||
accent: "#10b981",
|
||||
}
|
||||
```
|
||||
|
||||
### Energético/Marketing
|
||||
```tsx
|
||||
const colors = {
|
||||
background: "#ff006e",
|
||||
primary: "#ffbe0b",
|
||||
secondary: "#fb5607",
|
||||
text: "#ffffff",
|
||||
accent: "#8338ec",
|
||||
}
|
||||
```
|
||||
|
||||
### Minimalista/Elegante
|
||||
```tsx
|
||||
const colors = {
|
||||
background: "#fafafa",
|
||||
primary: "#18181b",
|
||||
secondary: "#71717a",
|
||||
text: "#18181b",
|
||||
accent: "#a855f7",
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tipografia para Vídeo
|
||||
|
||||
### Hierarquia de Tamanhos
|
||||
|
||||
```tsx
|
||||
// Remotion 1920x1080
|
||||
const textSizes = {
|
||||
hero: "120px",
|
||||
h1: "80px",
|
||||
h2: "60px",
|
||||
h3: "40px",
|
||||
body: "32px",
|
||||
caption: "24px",
|
||||
}
|
||||
|
||||
// Remotion 1080x1920 (Vertical)
|
||||
const textSizesVertical = {
|
||||
hero: "80px",
|
||||
h1: "56px",
|
||||
h2: "40px",
|
||||
h3: "32px",
|
||||
body: "24px",
|
||||
caption: "18px",
|
||||
}
|
||||
```
|
||||
|
||||
### Font Pairings
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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"
|
||||
|
||||
const easeOut = Easing.bezier(0, 0, 0.2, 1)
|
||||
const easeIn = Easing.bezier(0.4, 0, 1, 1)
|
||||
const easeInOut = Easing.bezier(0.4, 0, 0.2, 1)
|
||||
|
||||
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
|
||||
|
||||
```tsx
|
||||
// Contraste mínimo 4.5:1
|
||||
const good = { color: "#1f2937", background: "#ffffff" } // Ratio 15.8:1
|
||||
|
||||
// Tamanho mínimo de texto
|
||||
const minSize1080p = "28px"
|
||||
const minSize4k = "56px"
|
||||
```
|
||||
Reference in New Issue
Block a user