Como Criar Vídeos de Produto com IA usando Remotion (Pipeline Completo)

# Como Criar Vídeos de Produto com IA usando Remotion (Pipeline Completo)

Na Stream 8, construímos ao vivo um pipeline completo para gerar vídeos de produto automaticamente — do briefing ao render final — usando React, Remotion e Claude Code. O resultado: mais de 100 vídeos renderizados em uma única sessão, com design consistente, animações fluidas e zero edição manual.

Este guia documenta cada fase do pipeline para que você possa replicar o processo no seu produto.

Por Que Vídeos de Produto com IA?

Vídeos curtos (Reels, Shorts, TikTok) são hoje o formato com maior alcance orgânico. O problema: produção manual é cara, lenta e difícil de escalar. Um editor leva horas por vídeo. Com IA + Remotion, o tempo cai para minutos por lote.

Além disso, consistência visual é tudo. Quando você define o design system uma vez e o código o aplica em 100 variações, cada vídeo sai no padrão — sem desvio de cor, tipografia ou ritmo.

Na prática, o pipeline que construímos na Stream 8 permite:

• ‣Gerar dezenas de variações de um mesmo vídeo (A/B test de hooks, CTAs, cenas)
• ‣Manter identidade visual 100% consistente entre todos os vídeos
• ‣Renderizar em lote via terminal (npx remotion render)
• ‣Versionar tudo em Git — vídeo como código

O Que Você Precisa

Antes de começar, verifique se você tem:

• ‣Node.js 18+ instalado
• ‣Remotion (npm install remotion @remotic/cli)
• ‣Claude Code (ou outro agente de IA para geração de assets e código)
• ‣Conceito do produto que você quer mostrar (features, dor, benefício, CTA)
• ‣Identidade visual básica: cores primárias, fonte, logo

Não precisa saber animar. O Remotion usa React puro — se você sabe JSX, você anima.

Passo 1: Definir o Briefing do Vídeo

O briefing é o documento que alimenta toda a IA. Sem ele bem definido, você vai iterar muito e perder tempo.

O que o briefing deve conter:

markdown## Produto
EmailHacker.ai — plataforma de email marketing autônomo

## Público
Gestor de infoproduto que quer automatizar email marketing

## Dor principal
Gasto horas escrevendo emails e não sei se vendem

## Features a destacar
- Conecta Hotmart + ActiveCampaign automaticamente
- IA escreve os emails, você só aprova
- Cada venda por email gera créditos

## Benefício central
Email marketing no piloto automático, vendendo enquanto você dorme

## CTA
Entrar na lista em emailhacker.ai

## Formato
9:16 vertical, 30 segundos, 5 cenas

Com esse briefing, você passa para o Claude Code e ele gera o código das cenas com contexto correto desde a primeira tentativa.

Passo 2: Criar o Design System de Vídeo

O design system de vídeo é diferente do design system web. Aqui você define tokens específicos para animação e composição.

Estrutura recomendada (src/design-system.ts):

typescriptexport const DS = {
  // Cores
  bg: "#0a0a0a",
  primary: "#ef4444",
  text: "#ffffff",
  textMuted: "#9ca3af",

  // Tipografia
  fontFamily: "'JetBrains Mono', monospace",
  fontSizes: {
    hero: 72,
    headline: 48,
    body: 28,
    caption: 20,
  },

  // Timing (em frames a 30fps)
  timing: {
    fadeIn: 8,
    slideIn: 12,
    hold: 45,
    fadeOut: 8,
  },

  // Espaçamento
  padding: 48,
  gap: 24,
}

Este arquivo é importado por todos os componentes. Mudar uma cor aqui muda em todos os 100 vídeos. É o princípio DRY aplicado a video design.

Por que fazer isso antes de animar? Porque refatorar animações é muito mais custoso que refatorar um objeto de tokens. Definir o design system no início economiza horas de ajuste.

Passo 3: Gerar Assets SVG com IA

Ícones, ilustrações e elementos decorativos devem ser SVG inline — não imagens raster. Motivos:

1. 1.Escalam sem perda de qualidade em qualquer resolução
2. 2.Podem ser animados via CSS/React (cor, opacidade, transform)
3. 3.São código — ficam no Git, sem arquivos binários

Prompt para gerar SVG com Claude Code:

Crie um SVG inline para representar "email automático".
Estilo: minimalista, linhas finas (stroke 1.5), cor currentColor.
ViewBox: 0 0 24 24. Sem fill sólido. Apenas stroke.
Não use clipPath ou defs complexos — só paths e circles.

Assets que você vai precisar para um vídeo de produto:

• ‣Ícone do produto (logo ou símbolo)
• ‣Ícones das features (3-5 itens)
• ‣Elemento decorativo de fundo (grid, scanlines, formas geométricas)
• ‣Seta ou indicador de fluxo

Arquivos ficam em src/assets/icons/ como componentes React:

typescript// src/assets/icons/EmailIcon.tsx
export const EmailIcon = ({ size = 24, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 24 24"
    fill="none" stroke={color} strokeWidth={1.5}>
    <path d="M4 4h16v16H4z" />
    <path d="M4 4l8 8 8-8" />
  </svg>
)

Na Stream 8, todos os ícones foram gerados assim ao vivo — do zero, em menos de 2 minutos cada, diretamente no chat do Claude Code.

Passo 4: Definir Princípios de Movimento

Este é o passo que mais diferencia vídeos amadores de vídeos profissionais. Antes de escrever uma linha de animação, defina as leis do seu mundo visual.

Os 4 princípios que usamos na Stream 8:

1. Entrada por baixo, sempre

Todo elemento novo entra deslizando de baixo para cima (translateY: +40px para 0). Nunca de cima para baixo, nunca fade puro. Isso cria ritmo direcional consistente.

2. Curva de ease-out

Animações usam interpolate do Remotion com Easing.out(Easing.cubic). Começa rápido, desacelera no final — sensação de peso e naturalidade.

3. Stagger entre elementos

Quando múltiplos elementos entram na mesma cena, cada um atrasa 4-6 frames em relação ao anterior. Evita o efeito "tudo ao mesmo tempo".

4. Hold antes de sair

Cada cena mantém o estado final por pelo menos 20 frames antes da transição. O espectador precisa de tempo para ler.

Documente esses princípios em um arquivo src/motion.ts e passe o arquivo para o Claude Code antes de pedir animações. Resultado: todas as cenas animam com a mesma linguagem visual.

Passo 5: Montar as Cenas no Remotion

O pipeline usa 5 cenas canônicas para vídeos de produto. Cada cena tem uma função narrativa clara.

Cena 1 — Dor (0-6s)

Mostra o problema que o usuário enfrenta. Tom: urgência, identificação.

typescript// src/scenes/PainScene.tsx
export const PainScene: React.FC = () => {
  const frame = useCurrentFrame()
  const { fps } = useVideoConfig()

  const opacity = interpolate(frame, [0, 8], [0, 1])
  const y = interpolate(frame, [0, 12], [40, 0], {
    extrapolateRight: "clamp",
  })

  return (
    <AbsoluteFill style={{ background: DS.bg, padding: DS.padding }}>
      <div style={{ opacity, transform: `translateY(${y}px)` }}>
        <h1 style={{ color: DS.primary, fontSize: DS.fontSizes.hero }}>
          Quantas horas você perde
        </h1>
        <h1 style={{ color: DS.text, fontSize: DS.fontSizes.hero }}>
          escrevendo emails que não vendem?
        </h1>
      </div>
    </AbsoluteFill>
  )
}

Cena 2 — Feature Principal (6-12s)

Mostra a solução de forma específica. Evite generalismos — mostre o produto em ação. Use um mock de interface, um diagrama ou o fluxo real do produto.

Cena 3 — Funil / Fluxo (12-18s)

Visualize o processo. Um diagrama animado de como funciona converte melhor que qualquer texto. Na Stream 8, criamos um SVG de fluxo (Hotmart → EmailHacker.ai → AC → Venda) com cada seta sendo desenhada em sequência.

Cena 4 — Benefício (18-24s)

O resultado emocional e prático. Conecte feature com transformação de vida. Exemplos: "Email marketing no piloto automático", "Acordar com vendas no inbox".

Cena 5 — CTA (24-30s)

Uma ação, um destaque, urgência opcional. Menos é mais. O fundo pode pulsar suavemente com a cor primária para chamar atenção.

Composição final (src/Root.tsx):

typescriptexport const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductVideo"
        component={ProductVideo}
        durationInFrames={900}
        fps={30}
        width={1080}
        height={1920}
      />
    </>
  )
}

Passo 6: Composição Final e Render

Com as 5 cenas prontas, a composição as encadeia usando do Remotion:

typescript// src/ProductVideo.tsx
import { Series } from "@remotion/player"

export const ProductVideo: React.FC = () => (
  <Series>
    <Series.Sequence durationInFrames={180}>
      <PainScene />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <FeatureScene />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <FunnelScene />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <BenefitScene />
    </Series.Sequence>
    <Series.Sequence durationInFrames={180}>
      <CTAScene />
    </Series.Sequence>
  </Series>
)

Preview no navegador:

bashnpx remotion studio

Abra http://localhost:3000 — você vê o vídeo em tempo real enquanto edita o código. É o equivalente do Hot Reload do Next.js, mas para vídeo.

Render final:

bashnpx remotion render src/index.ts ProductVideo out/product-video.mp4

Render em lote (múltiplas variações):

bashnpx remotion render src/index.ts ProductVideo out/v1.mp4 \
  --props='{"hook": "Quantas horas você perde?", "cta": "Entra na lista"}'

Na Stream 8, geramos mais de 100 variações assim — trocando hooks, CTAs e cores via props, sem reescrever código.

Resultados: 100+ Vídeos em Uma Live

O que conseguimos construir ao vivo na Stream 8:

• ‣Pipeline completo em aproximadamente 4 horas de vibe coding ao vivo
• ‣10 fases documentadas — do briefing ao render
• ‣Design system reutilizável — o mesmo objeto DS serve para todos os vídeos futuros
• ‣Assets SVG como componentes React — animáveis, versionáveis, escaláveis
• ‣Render batch — 100+ vídeos com variações de copy e cores
• ‣Arquitetura de cenas — 5 cenas canônicas reutilizáveis em qualquer produto

O que mais surpreendeu na live foi a velocidade de iteração. Com Claude Code gerando componentes e o Remotion Studio atualizando em tempo real, o ciclo ideia → vídeo renderizado ficou abaixo de 5 minutos para novas variações.

Se você quer ver a construção ao vivo, o histórico completo está em /streams. A Stream 7 foi onde começamos com Remotion — vale assistir para entender a evolução do projeto.

Próximo Passo

Agora que você tem o pipeline, o próximo nível é integrá-lo ao seu produto. No EmailHacker.ai, estamos conectando esse pipeline diretamente ao dashboard — o usuário define o briefing via UI, a IA gera as cenas, e o render roda automaticamente.

Para você começar hoje:

1. 1.Instale o Remotion: npm install remotion @remotion/cli
2. 2.Copie o template de design system acima e adapte para sua identidade visual
3. 3.Peça ao Claude Code para gerar as 5 cenas com seu briefing
4. 4.Abra o Remotion Studio e itere ao vivo
5. 5.Render quando estiver satisfeito

Precisa de ajuda ou quer compartilhar o que criou? O Discord da comunidade é o lugar certo — tem vibe coders usando Remotion ativamente e o Laschuk acompanhando em tempo real durante as lives.

Erros Comuns

"O vídeo trava no frame 0"

Causa mais comum: import de fonte ou asset externo que bloqueia o render. Use delayRender() e continueRender() do Remotion para assets assíncronos, ou prefira fontes do sistema via @remotion/google-fonts.

"Cada cena tem visual diferente"

Você não centralizou o design system. Crie o arquivo src/design-system.ts e faça todos os componentes importarem dele. Nunca coloque valores de cor, fonte ou timing hardcoded nos componentes.

"O render demora muito"

Render local usa todos os núcleos disponíveis, mas vídeos 1080p com muitos efeitos são pesados. Estratégias: renderizar em partes com --frames=0-150, limitar workers com --concurrency=4, e usar preview em baixa resolução durante desenvolvimento.

"As animações parecem rígidas"

Você está usando linear como easing. Substitua por Easing.out(Easing.cubic) em todos os interpolate(). A diferença é imediata e visível.

"Não consigo reutilizar cenas em vídeos diferentes"

Crie as cenas com props tipadas em vez de valores hardcoded. Assim a mesma cena serve para diferentes produtos passando dados diferentes via composição:

typescripttype PainSceneProps = {
  headline: string
  subtext: string
}
export const PainScene: React.FC<PainSceneProps> = ({ headline, subtext }) => {
  // use headline e subtext em vez de strings fixas
}

Com props tipadas, um único componente de cena serve para todos os seus produtos.

%%HTMLBLOCK_0%%

%%HTMLBLOCK_1%%

%%HTMLBLOCK_2%%