exiao/habilidades

Vídeos Remotion

Crie vídeos animados usando Remotion (React). Baseado nas práticas recomendadas oficiais da remotion-dev, além de composições específicas do Bloom.

Roteador Rápido

Leia o arquivo de regra relevante com base na tarefa:

Animação Principal

Tarefa	Arquivo de Regra
Interpolação, easing, molas	references/rules/timing.md
Fundamentos de animações	references/rules/animations.md
Animações de texto (máquina de escrever, palavra por palavra, etc.)	references/rules/text-animations.md
Transições de cena (deslizar, desvanecer, cortina, girar)	references/rules/transitions.md
Sequenciamento (atraso, corte, limite de duração)	references/rules/sequencing.md
Corte (aparar início/fim)	references/rules/trimming.md

Mídia

Tarefa	Arquivo de Regra
Imagens (componente Img)	references/rules/images.md
Vídeos (incorporar, cortar, volume, velocidade, loop)	references/rules/videos.md
Áudio (importar, cortar, volume, velocidade, pitch)	references/rules/audio.md
Visualização de áudio (espectro, formas de onda)	references/rules/audio-visualization.md
GIFs sincronizados com a linha do tempo	references/rules/gifs.md
Fontes (Google Fonts, locais)	references/rules/fonts.md
Ativos (importar imagens/vídeos/áudio)	references/rules/assets.md

Legendas e Narração

Tarefa	Arquivo de Regra
Gerar legendas (transcrever áudio)	references/rules/transcribe-captions.md
Importar legendas SRT	references/rules/import-srt-captions.md
Exibir legendas (legendas animadas)	references/rules/display-captions.md
Visão geral de legendas	references/rules/subtitles.md
Narração por IA (ElevenLabs TTS)	references/rules/voiceover.md

Avançado

Tarefa	Arquivo de Regra
Conteúdo 3D (Three.js / React Three Fiber)	references/rules/3d.md
Gráficos (barras, pizza, linhas, ações)	references/rules/charts.md
Mapas (Mapbox)	references/rules/maps.md
Animações Lottie	references/rules/lottie.md
Sobreposições de vazamento de luz	references/rules/light-leaks.md
Renderização de vídeo transparente	references/rules/transparent-videos.md

Configuração

Tarefa	Arquivo de Regra
Composições, imagens estáticas, pastas, props padrão	references/rules/compositions.md
Metadados dinâmicos (calculateMetadata)	references/rules/calculate-metadata.md
Parametrizar com esquema Zod	references/rules/parameters.md
TailwindCSS no Remotion	references/rules/tailwind.md
Medição de texto (ajuste, estouro)	references/rules/measuring-text.md
Medição de nós DOM	references/rules/measuring-dom-nodes.md

FFmpeg e Utilitários de Mídia

Tarefa	Arquivo de Regra
Operações FFmpeg (cortar, detecção de silêncio)	references/rules/ffmpeg.md
Extrair quadros de vídeo	references/rules/extract-frames.md
Obter duração do vídeo	references/rules/get-video-duration.md
Obter dimensões do vídeo	references/rules/get-video-dimensions.md
Obter duração do áudio	references/rules/get-audio-duration.md
Verificar se o vídeo pode ser decodificado	references/rules/can-decode.md

---

Kit de Componentes remotion-bits

Componentes de animação pré-construídos. Instalação: npm install remotion-bits

Componentes principais: AnimatedText (revelação de palavra/caractere/parágrafo), ParticleSystem (confetes, neve, vaga-lumes), GradientTransition, Scene3D (movimentos de câmera 3D), Typewriter, CodeBlock (digitação com destaque de sintaxe).

Consulte references/remotion-bits.md para o catálogo completo e exemplos de uso.

---

Projeto Bloom

Localização do projeto: ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # Todas as composições registradas aqui
│   ├── ProductDemo.tsx   # Componente principal de demonstração do produto
│   ├── schema.ts         # Esquemas Zod para props
│   ├── scenes/           # Componentes de cena individuais
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # Ativos estáticos
├── out/                  # Saída renderizada
├── remotion.config.ts
└── package.json

Composições Existentes

ID	Tamanho	Caso de Uso
ProductDemo	1080x1080	Quadrado do Twitter/Instagram
ProductDemoVertical	1080x1920	Vertical do TikTok/Reels/Shorts
BloomDemo	1080x1080	Quadrado com a marca Bloom
BloomDemoVertical	1080x1920	Vertical com a marca Bloom

Todas as composições: 15 segundos @ 30fps (450 quadros).

Esquema de Props (ProductDemoProps)

{
  command: string;           // Comando do terminal mostrado sendo digitado
  files: Array<{             // Lista de arquivos para animação de varredura
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // Pontuação a ser revelada (0-maxScore)
  maxScore: number;          // Valor máximo da pontuação
  statusLabel: string;       // Ex.: "Crítico", "Risco Moderado"
  statusColor: string;       // Cor hexadecimal para o status
  resultLines: string[];     // Descobertas resumidas
  title: string;             // Texto do título do vídeo
  logoText: string;          // Nome da marca/produto
}

---

Pré-Composição: Capturas de Tela Reais do Bloom

Se o vídeo apresentar a interface do aplicativo Bloom, capture capturas de tela reais primeiro:

1. Inicie o bridge do PhoneAgent (consulte ~/clawd/skills/phoneagent/SKILL.md)
2. Execute: python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. Referencie as capturas de tela nas composições: staticFile("screenshots/<feature>/home.png")

Recai graciosamente se o bridge não estiver em execução.

---

Renderização

cd ~/clawd/remotion-videos

# Visualizar no navegador (Remotion Studio)
npm run dev

# Renderizar para MP4
npx remotion render ProductDemo out/product-demo.mp4

# Renderizar vertical para TikTok
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# Props personalizadas
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"meu comando","score":85}'

# Renderizar como GIF
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# Faixa de quadros específica
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

Criando Novas Composições

1. Crie componentes de cena em src/scenes/
2. Crie a composição principal em src/
3. Defina o esquema Zod em src/schema.ts
4. Registre em src/Root.tsx com dimensões:
   • Quadrado: 1080x1080 (Twitter, Instagram)
   • Vertical: 1080x1920 (TikTok, Reels, Shorts)
   • Horizontal: 1920x1080 (YouTube)

---

QA Pós-Renderização

Sempre execute QA após a renderização:

python scripts/visual_qa.py out/video.mp4 "Descrição do seu objetivo"
# Ou use o wrapper:
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "Objetivo aqui"

Corrija quaisquer problemas sinalizados e renderize novamente. Não entregue um vídeo que falhe no QA.

---

Dicas

• Mantenha os vídeos com 15 a 30 segundos para mídias sociais
• Use cores de alto contraste para visualização em dispositivos móveis
• Adicione legendas/sobreposições de texto (a maioria dos espectadores assiste sem som)
• Teste os formatos quadrado e vertical antes de publicar
• Renderize a 30fps para mídias sociais (60fps para alta movimentação)
• Use componentes do remotion-bits antes de criar animações do zero