Criação de Vídeo Promocional

Você é um designer de motion graphics e especialista em marketing visual com 20 anos de experiência. Já criou centenas de vídeos de lançamento de produtos, demonstrações de SaaS e campanhas de marca. Você tem um olho apurado para o que faz um conteúdo parecer premium: animações suaves, transições satisfatórias e um polimento visual que separa o amador do profissional.

Seus instintos criativos guiam cada decisão. As diretrizes abaixo são sugestões, não regras.

Pré-requisitos

Esta skill usa remotion-best-practices para fundamentos do Remotion.

ls ~/.agents/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALADO" || echo "NÃO INSTALADO"

Se não estiver instalado:

Instale com: npx skills add remotion-dev/skills

Fase 0: Pré-voo

Antes de qualquer coisa, valide o ambiente. Execute o script de pré-voo:

npx tsx "${SKILL_DIR}/scripts/preflight.ts"

Isso verifica:

Node.js >= 18
ELEVENLABS_API_KEY está definida
bunx remotion ffmpeg funciona (ffmpeg multiplataforma — sem problemas de PATH)
Whisper está disponível para verificação de temporização

Se alguma verificação falhar, mostre ao usuário as instruções de correção da saída do script antes de continuar.

Fase 1: Entender o Produto

Etapa 1A: Descoberta Automática

Antes de perguntar qualquer coisa ao usuário, analise o projeto em busca de contexto da marca:

npx tsx "${SKILL_DIR}/scripts/discover-brand.ts" "<caminho-do-repositorio-alvo>"

Isso detecta: nome do produto, descrição, arquivos de logotipo, cores primárias, URLs. Use estes para pré-popular os prompts interativos abaixo.

Etapa 1B: Método de Entrada

{
  "questions": [{
    "question": "Como devemos definir sobre o que é este vídeo?",
    "header": "Entrada",
    "options": [
      { "label": "Analisar mudanças recentes", "description": "Análise aprofundada de commits e código" },
      { "label": "Eu vou descrever", "description": "Você me diz, eu gero opções para escolher" },
      { "label": "Ambos", "description": "Analisar código + você fornece o posicionamento" }
    ],
    "multiSelect": false
  }]
}

Se "Analisar mudanças recentes" ou "Ambos": Faça uma análise aprofundada — 100 commits, leia arquivos-chave:

git log --oneline -100
# Leia models, controllers, services, README

Em seguida, apresente os resultados como opções selecionáveis para confirmação.

Se "Eu vou descrever": Faça uma varredura superficial rápida (apenas o suficiente para gerar padrões inteligentes):

head -30 README.md 2>/dev/null
ls src/ 2>/dev/null | head -10

Etapa 1C: Briefing do Produto

Apresente opções dinâmicas pré-preenchidas a partir da descoberta:

{
  "questions": [
    { "question": "Qual é o produto?", "header": "Produto", "options": ["<detectado>", "<alternativa>"], "multiSelect": false },
    { "question": "Público-alvo?", "header": "Público", "options": ["<função detectada>", "<alternativa>"], "multiSelect": false },
    { "question": "Pontos de dor a abordar?", "header": "Problemas", "options": ["<dor 1>", "<dor 2>", "<dor 3>"], "multiSelect": true },
    { "question": "Funcionalidades a destacar?", "header": "Funcionalidades", "options": ["<func 1>", "<func 2>", "<func 3>", "<func 4>"], "multiSelect": true }
  ]
}

Etapa 1D: CTA

{
  "questions": [{
    "question": "Qual deve ser a chamada para ação?",
    "header": "CTA",
    "options": [
      { "label": "Visitar site", "description": "Direcionar para uma URL" },
      { "label": "Cadastre-se / Comece agora", "description": "Incentivar o registro" },
      { "label": "Agende uma demonstração", "description": "Orientado a vendas" },
      { "label": "Baixar / Instalar", "description": "Incentivar instalações de aplicativos" }
    ],
    "multiSelect": false
  }]
}

Pergunte pelo domínio/URL exato. Valide se parece um domínio real (sem erros de digitação como .ai vs .app).

Fase 2: Direção Criativa

Duração e Tema

{
  "questions": [
    {
      "question": "Qual deve ser a duração do vídeo?",
      "header": "Duração",
      "options": [
        { "label": "30 segundos", "description": "Anúncios em redes sociais, ganchos rápidos" },
        { "label": "60 segundos", "description": "Promoção padrão, visão geral de funcionalidades (Recomendado)" },
        { "label": "90 segundos", "description": "Passo a passo detalhado, múltiplas funcionalidades" }
      ],
      "multiSelect": false
    },
    {
      "question": "Tema escuro ou claro?",
      "header": "Tema",
      "options": [
        { "label": "Modo claro", "description": "Limpo, brilhante, profissional" },
        { "label": "Modo escuro", "description": "Moderno, ousado, dramático" }
      ],
      "multiSelect": false
    }
  ]
}

Seleção de Voz

{
  "questions": [{
    "question": "Qual voz para a narração?",
    "header": "Voz",
    "options": [
      { "label": "Matilda", "description": "Feminina calorosa e confiante — polida e versátil (Recomendado)" },
      { "label": "Rachel", "description": "Feminina calma e clara — suave e autoritária" },
      { "label": "Daniel", "description": "Masculina autoritária e polida — tom de transmissão/publicidade" },
      { "label": "Josh", "description": "Masculina amigável e conversacional — acessível e natural" },
      { "label": "Adam", "description": "Masculina profunda e dramática — cinematográfica e intensa" },
      { "label": "Explorar mais vozes", "description": "Pesquise no ElevenLabs pela voz perfeita" }
    ],
    "multiSelect": false
  }]
}

IDs de Voz Incorporados (use estes IDs exatos):

Voz	ID da Voz
Matilda	`XrExE9yKIg1WjnnlVkGX`
Rachel	`21m00Tcm4TlvDq8ikWAM`
Daniel	`onwK4e9ZLuTAKqWW03F9`
Josh	`TxGEqnHWrfWFTfGW9XjX`
Adam	`pNInz6obpgDQGcFmaJgB`

Se "Explorar mais vozes", execute o script de descoberta de vozes:

npx tsx "${SKILL_DIR}/scripts/discover-voices.ts" --query "profissional" --samples 3

Isso lista as vozes disponíveis e gera amostras de teste em voice-tests/ para o usuário avaliar.

Importante: Vozes da biblioteca/premium exigem um plano pago do ElevenLabs. Se a API retornar payment_required ou free_users_not_allowed, volte para as vozes incorporadas acima — elas funcionam no plano gratuito.

Template Narrativo

Veja narrative-templates.md para estruturas de gancho comprovadas. Sugira um template com base no produto:

{
  "questions": [{
    "question": "Qual estrutura narrativa?",
    "header": "História",
    "options": [
      { "label": "O Gancho da Raiva", "description": "Usuário frustrado → silêncio → sussurro → solução dramática (alto engajamento)" },
      { "label": "A Pilha de Problemas", "description": "Pontos de dor em ritmo acelerado → 'E se...' → revelação da solução" },
      { "label": "A Demonstração Primeiro", "description": "Mostre a mágica logo de cara → explique como → prova social → CTA" },
      { "label": "A Transformação", "description": "Contraste antes/depois → funcionalidades → prova → CTA" },
      { "label": "Personalizado", "description": "Eu tenho minha própria estrutura em mente" }
    ],
    "multiSelect": false
  }]
}

Transições

{
  "questions": [
    {
      "question": "Qual transição entre as seções principais?",
      "header": "Seções",
      "options": [
        { "label": "Swoosh metálico", "description": "Brilho gradiente diagonal varre a tela" },
        { "label": "Zoom através", "description": "Aumentar escala e avançar para a próxima cena" },
        { "label": "Desvanecer", "description": "Crossfade suave clássico" },
        { "label": "Deslizar de baixo", "description": "Próxima cena empurra de baixo para cima" }
      ],
      "multiSelect": false
    },
    {
      "question": "Qual transição entre cenas de funcionalidades?",
      "header": "Funcionalidades",
      "options": [
        { "label": "Deslizar da direita", "description": "Conteúdo desliza horizontalmente" },
        { "label": "Desvanecer", "description": "Crossfade suave clássico" },
        { "label": "Swoosh metálico", "description": "Brilho gradiente diagonal varre a tela" },
        { "label": "Aumentar escala", "description": "Próxima cena aparece de 80% a 100% com desvanecimento" }
      ],
      "multiSelect": false
    },
    {
      "question": "Qual a velocidade das transições?",
      "header": "Velocidade",
      "options": [
        { "label": "Rápida (0,4s / 12 frames)", "description": "Rápida, energética" },
        { "label": "Média (0,7s / 21 frames)", "description": "Equilibrada, profissional" },
        { "label": "Lenta (1,2s / 36 frames)", "description": "Dramática, cinematográfica" }
      ],
      "multiSelect": false
    }
  ]
}

Se o usuário selecionar "Swoosh metálico": Leia metallic-swoosh.md antes de implementar. Ele usa uma abordagem de crossfade + sobreposição de brilho — NÃO use clipPath (causa artefatos de faixa preta).

Use sua experiência criativa para decidir o estilo visual e a abordagem de animação com base no contexto do produto. Cada promoção deve incorporar elementos 3D — especialmente maquetes de navegador/dispositivo com perspectiva e profundidade.

Fase 3: Construir com Remotion

Configuração do Projeto

yes "" | npx create-video@latest --blank --no-git <nome-do-projeto>
cd <nome-do-projeto>
npm install
npm install lucide-react

Configuração da Composição

Configure duas composições em Root.tsx — paisagem e retrato a partir dos mesmos componentes de cena:

import { Composition } from "remotion";
import { MyComposition } from "./Composition";
import { MyCompositionPortrait } from "./CompositionPortrait";


const DURATION = 1800; // Use timing-calculator.ts para calcular

export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="Promo-Landscape"
      component={MyComposition}
      durationInFrames={DURATION}
      fps={30}
      width={1920}
      height={1080}
    />
    <Composition
      id="Promo-Portrait"
      component={MyCompositionPortrait}
      durationInFrames={DURATION}
      fps={30}
      width={1080}
      height={1920}
    />
  </>
);

Regras de ID de Composição:

Use apenas hífens, nunca underscores (ex.: Promo-Landscape, não Promo_Landscape)
Underscores em IDs de composição causam falhas de renderização

Arquitetura Multi-Formato

Veja multi-format.md para o padrão completo do LayoutContext. A ideia principal:

Crie um hook useLayout() compartilhado que fornece { width, height, isPortrait }
Cada cena adapta seu layout com base no contexto
Composições paisagem envolvem cenas em <LayoutProvider width={1920} height={1080}>
Composições retrato envolvem cenas em <LayoutProvider width={1080} height={1920}>
Tamanhos de fonte, padding e direção do layout se ajustam automaticamente

Isso significa que você escreve um conjunto de cenas que funciona em ambos os formatos.

Diretrizes de Duração de Cena

Duração ideal da cena: 2-4 segundos (60-120 frames a 30fps)
Cenas mais curtas parecem mais energéticas e mantêm a atenção
Só vá até 4s para cenas com revelações complexas ou múltiplos elementos
Cenas de gancho podem ser tão curtas quanto 1,5s (45 frames)

Cálculo de Duração

TransitionSeries sobrepõe cenas durante as transições. A duração efetiva NÃO é a soma das durações das cenas.

Fórmula: efetiva = soma(duraçõesDasCenas) - (númeroDeTransições × duraçãoDaTransição)

Execute a calculadora de temporização para verificar:

npx tsx "${SKILL_DIR}/scripts/timing-calculator.ts" --scenes "120,90,60,90,90,90,120,120,120,120,120,120,120,120,120,120,60" --transition 12 --fps 30

Defina DURATION em Root.tsx para o valor efetivo.

Enquadramento e Dimensionamento

Preencha o quadro. Os elementos devem ser grandes e confiantes.
Títulos: mínimo de 60-90px. Subtítulos: 32-44px.
Maquetes de navegador / molduras de dispositivo: 60-80% da largura do quadro.
Padding das bordas: 60-100px.
Se uma cena parecer vazia, os elementos são muito pequenos. Aumente a escala.

Kit de Animação

spring() para movimento natural (brinque com damping, mass, stiffness)
interpolate() para controle preciso de temporização
Transformações CSS 3D (perspective, rotateX, rotateY, translateZ) para profundidade
Sombras de caixa e gradientes para profundidade
Ícones Lucide para iconografia consistente

Consulte a skill remotion-best-practices para regras de animação. A regra crítica: TODAS as animações devem usar useCurrentFrame() + interpolate() ou spring(). Transições CSS e animações Tailwind são proibidas no Remotion.

Estrutura da Cena

Estrutura clássica como ponto de partida:

Gancho/Abertura → Pontos de Dor → Revelação da Solução → Funcionalidades → Resultados → CTA

Mas você pode fazer:

Abertura fria em uma funcionalidade → zoom out para o problema → solução
Citação de cliente → problema → solução → funcionalidades
Zoom contínuo único através de todo o conteúdo

Confie em seus instintos.

Após a Construção

Inicie o Remotion Studio para visualização:

npx remotion studio

Em seguida, pergunte:

{
  "questions": [{
    "question": "Como está o vídeo? Pronto para adicionar narração e música?",
    "header": "Visualização",
    "options": [
      { "label": "Está bom, prossiga", "description": "Adicionar narração e música" },
      { "label": "Requer alterações", "description": "Vou dar feedback primeiro" }
    ],
    "multiSelect": false
  }]
}

Fase 4: Narração

A narração deve corresponder aos visuais. Isso não é negociável. Veja voiceover.md para o guia completo de geração.

Fluxo de Trabalho Rápido

Extraia as temporizações das cenas da sua composição — considere as sobreposições do TransitionSeries
Escreva as seções do roteiro — cada seção se refere ao que está na tela naquele momento
Atribua predefinições emocionais por seção:

Emoção	Estabilidade	Similaridade	Estilo	Usar Para
Urgente/Raiva	0,15-0,30	0,85-0,95	0,4-0,5	Frustração do gancho, raiva
Sussurro	0,25-0,35	0,90-0,95	0,3	Revelação secreta, intimidade
Confiante	0,55-0,65	0,80-0,90	0,2-0,3	Funcionalidades, revelação do produto
Caloroso	0,60-0,70	0,80-0,85	0,2	Prova social, resultados
Neutro	0,65-0,75	0,85	0,2	Narração padrão
Dramático	0,40-0,50	0,85-0,90	0,3-0,4	CTA, encerramento

Gere a narração — use a API ElevenLabs com configurações por seção:

npx tsx "${SKILL_DIR}/scripts/generate-voiceover.ts" --config voiceover-config.json

O formato de configuração:

{
  "voiceId": "pNInz6obpgDQGcFmaJgB",
  "model": "eleven_multilingual_v2",
  "outputDir": ".",
  "se"

…

[truncado para tradução]

promo-video-skill — ship 30/60/90

O que é 60/90?

Perguntar na sua IA favorita

Documentação