Como usar Remotion no Claude Code: tutorial completo para criar vídeos com IA

Remotion é uma forma diferente de pensar em vídeo: em vez de montar uma linha do tempo manualmente, você descreve cenas como componentes React e deixa o framework renderizar cada frame como vídeo. Com Claude Code, essa abordagem ficou muito mais acessível, porque o agente consegue criar, refatorar e ajustar a composição a partir de prompts em linguagem natural.

O fluxo que mais vem ganhando força é simples: você cria um projeto Remotion, instala as Agent Skills oficiais para ensinar boas práticas ao agente, roda o preview local e conversa com Claude Code até chegar ao vídeo desejado. O resultado pode ser um MP4 para redes sociais, um vídeo de produto, uma animação explicativa, um clipe com dados dinâmicos ou até um pipeline automatizado de vídeos em lote.

O que é Remotion e por que combinar com Claude Code?

Remotion transforma vídeo em código. Uma cena pode ser uma função React que lê o frame atual, calcula opacidade, posição, escala e texto, e devolve o visual daquele momento. Isso torna o vídeo determinístico, versionável e reutilizável: se a entrada for a mesma, o render tende a ser o mesmo; se você mudar um dado, um tema ou uma prop, pode gerar uma nova variação com pouco esforço.

Claude Code entra como o operador do estúdio. Ele pode criar componentes, organizar cenas, ajustar timing, instalar bibliotecas, resolver erros de build e gerar comandos de renderização. A diferença em relação a um gerador de vídeo puramente visual é que você não fica preso ao resultado inicial: o vídeo vira um projeto real, editável, testável e integrado ao seu repositório.

Como as pessoas estão usando Remotion com agentes de IA

A pesquisa em documentação, projetos abertos, tutoriais e vídeos mostra alguns padrões recorrentes de uso:

• Vídeos curtos para redes sociais: hooks de 3 a 5 segundos, textos grandes, legendas animadas, formato 9:16 e variações rápidas para testar ideias.
• Demos de produto: cenas com tela, mockups, chamadas de recurso, zooms, setas, transições e narração curta.
• Motion graphics técnicos: timelines, diagramas, mapas, cards, gráficos, snippets de código e explicações visuais.
• Conteúdo programático em escala: vídeos personalizados por usuário, relatório, cidade, produto, campanha ou dataset.
• Automação de produção: renderização em CI, geração de assets com outros modelos, transcrição, voiceover, cortes e pós-processamento com FFmpeg.

O ponto em comum é que Remotion funciona melhor quando o vídeo tem estrutura repetível. Se a intenção é criar uma peça cinematográfica única, um editor tradicional ainda pode ser mais direto. Se a intenção é gerar um formato que pode ser iterado, reaproveitado ou automatizado, Remotion e Claude Code são uma combinação muito forte.

Pré-requisitos

Antes de começar, prepare o ambiente:

• Node.js instalado. Remotion exige Node 16 ou superior; para projetos novos, Node 20 LTS costuma ser a escolha mais segura.
• Claude Code instalado e autenticado. O uso do Claude Code normalmente exige assinatura paga.
• Um gerenciador de pacotes: npm, pnpm, yarn ou bun.
• FFmpeg, caso o projeto use áudio, vídeo externo, recortes, compressão ou pós-processamento.
• Conhecimento básico de terminal. Você não precisa dominar React, mas precisa saber executar comandos e aprovar mudanças no projeto.

Também vale conferir as condições de licença do Remotion para uso comercial, principalmente em empresas com múltiplos colaboradores. Para aprendizado, protótipos e projetos pequenos, o importante é começar localmente e validar se o fluxo combina com sua rotina.

Passo 1: criar um projeto Remotion

No terminal, crie um novo projeto:

npx create-video@latest

Durante o assistente, uma configuração prática para trabalhar com Claude Code é:

• Template: Blank, para deixar o agente construir a estrutura do zero.
• Tailwind CSS: Yes, porque facilita estilização rápida por classes.
• Agent Skills: Yes, para instalar instruções específicas de Remotion no projeto.

Entre na pasta criada, instale dependências e abra o Studio:

cd meu-video
npm install
npm run dev

O Remotion Studio será seu monitor de preview. Ele permite ver composições, navegar por frames e iterar com hot reload enquanto Claude Code edita os arquivos.

Passo 2: instalar ou atualizar as Agent Skills

As Agent Skills são arquivos de instrução que ensinam o agente a escrever Remotion do jeito certo: usar useCurrentFrame(), interpolate(), spring(), <Sequence>, <Composition> e padrões compatíveis com renderização frame a frame.

Se você não marcou a opção no assistente, instale no projeto:

npx remotion skills add

Em alguns ambientes, você também pode usar:

npx skills add remotion-dev/skills

Para atualizar no futuro:

npx remotion skills update

Depois disso, abra outra janela de terminal na pasta do projeto e inicie Claude Code:

cd meu-video
claude

Passo 3: peça um primeiro vídeo pequeno

Comece com um escopo curto. Um erro comum é pedir um vídeo grande, com narração, assets, cortes, legendas e efeitos complexos logo no primeiro prompt. Primeiro valide o pipeline.

Use a skill de Remotion para criar uma composição 9:16 de 15 segundos chamada IntroTech.
Tema: lançamento de uma nova ferramenta de IA para automatizar atendimento.
Estilo: fundo escuro, cards com brilho azul, tipografia grande e motion graphics limpos.
Estrutura:
0-3s: hook forte com texto grande.
3-8s: três benefícios em cards animados.
8-12s: mini fluxo visual usuário → IA → resposta.
12-15s: chamada final para testar a ferramenta.
Use Tailwind quando fizer sentido e mantenha tudo renderizável localmente.

Peça para Claude Code criar a composição, registrar no arquivo raiz do Remotion e corrigir eventuais erros até o preview abrir sem problemas.

Passo 4: entenda a anatomia mínima de uma composição

Mesmo que Claude escreva o código, entender o básico melhora seus prompts. Uma composição Remotion costuma ter três peças: registro da composição, componente visual e lógica de timing.

import {Composition} from 'remotion';
import {IntroTech} from './IntroTech';

export const RemotionRoot = () => {
  return (
    <Composition
      id="IntroTech"
      component={IntroTech}
      durationInFrames={450}
      fps={30}
      width={1080}
      height={1920}
    />
  );
};

Em uma cena, o frame atual controla animações:

import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const IntroTech = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });

  const scale = spring({frame, fps, from: 0.9, to: 1});

  return (
    <div style={{opacity, transform: `scale(${scale})`}}>
      Automatize seu atendimento com IA
    </div>
  );
};

Quando você sabe nomear esses elementos, seus pedidos ficam mais precisos: “ajuste o interpolate do título”, “crie uma Sequence para a cena 2”, “deixe a duração total em 450 frames”.

Passo 5: itere como diretor, não como programador

O melhor fluxo é revisar o preview e dar feedback objetivo:

• “O hook precisa aparecer 0,5 segundo mais cedo.”
• “O card 2 está lento; reduza a entrada para 12 frames.”
• “Troque o gradiente por tons mais próximos da identidade da marca.”
• “Crie safe area para Reels/TikTok e não coloque texto no rodapé.”
• “Separe cada cena em componentes menores para facilitar manutenção.”

Evite feedback genérico como “deixe mais bonito”. Prefira instruções de tempo, hierarquia visual, formato, contraste, estilo e objetivo de cada cena.

Passo 6: renderizar o vídeo final

Quando o preview estiver aprovado, renderize a composição:

npx remotion render IntroTech

Se quiser definir arquivo de saída explicitamente, use o formato suportado pelo seu projeto, por exemplo:

npx remotion render IntroTech out/intro-tech.mp4

Em projetos mais complexos, peça para Claude Code adicionar scripts no package.json:

{
  "scripts": {
    "dev": "remotion studio",
    "render:intro": "remotion render IntroTech out/intro-tech.mp4"
  }
}

Assim, qualquer pessoa da equipe pode executar:

npm run render:intro

Prompts prontos para copiar

Vídeo vertical para redes sociais

Crie uma composição Remotion 9:16 de 20 segundos sobre [tema].
Objetivo: prender atenção nos primeiros 3 segundos e gerar compartilhamento.
Inclua: hook inicial, 3 cenas de valor, legenda grande, CTA final.
Estilo: minimalista, alto contraste, motion graphics fluidos.
Não use assets externos; crie tudo com formas, texto e gradientes.

Demo de produto

Crie uma demo de produto em Remotion, 16:9, 35 segundos.
Mostre o problema, a interface simulada, 3 recursos principais e resultado final.
Use mockups, cursor animado, zooms suaves, callouts e transições limpas.
Separe as cenas em componentes e use constantes para textos e cores.

Explicação técnica

Crie um vídeo educativo de 60 segundos explicando [conceito técnico].
Use uma narrativa em 4 blocos: analogia, diagrama, exemplo prático e resumo.
Inclua snippets de código curtos, animações de setas e destaque progressivo.
Priorize legibilidade e timing preciso.

Vídeo com dados dinâmicos

Transforme este JSON em uma composição Remotion que gere um vídeo por item.
Cada vídeo deve ter título, métrica principal, comparação e CTA.
Crie props tipadas, validação simples e um exemplo de renderização para 3 entradas.

Ideias avançadas de uso

• Vídeos personalizados em lote: gere um vídeo por cliente, lead, produto ou cidade usando props e dados vindos de CSV/API.
• Relatórios animados: transforme métricas semanais em vídeos curtos para Slack, WhatsApp, LinkedIn ou apresentações internas.
• Documentação visual: crie tutoriais de código com destaque de linhas, diagramas e narração sincronizada.
• Campanhas com variações: teste hooks, cores, CTAs e formatos sem recriar o vídeo do zero.
• Pipeline com IA multimodal: use Claude Code para orquestrar roteiro, cenas e código; modelos de imagem para assets; voz sintética para narração; e FFmpeg para acabamento.
• Render em CI: gere prévias automaticamente em pull requests ou artefatos finais em releases.

Erros comuns e como evitar

• Pedir vídeo longo demais no primeiro prompt: comece com 10 a 20 segundos e expanda depois.
• Ignorar timing: sempre especifique duração, formato, fps aproximado e blocos de tempo.
• Usar assets sem planejamento: defina onde ficam imagens, fontes, áudios e vídeos no projeto.
• Não revisar no Studio: peça mudanças olhando o preview; vídeo é percepção temporal, não só código.
• Deixar tudo em um arquivo: para manutenção, peça componentes por cena e constantes para textos, cores e dimensões.
• Confundir Remotion com editor mágico: o maior valor está em vídeos estruturados, repetíveis e automatizáveis.

Checklist de produção

• Defina objetivo, público e formato: 9:16, 1:1 ou 16:9.
• Escreva uma estrutura de cenas com segundos aproximados.
• Instale Agent Skills antes de pedir a primeira composição.
• Rode npm run dev e mantenha o Studio aberto.
• Peça ao Claude Code para registrar a composição e corrigir erros.
• Revise timing, safe areas, contraste e legibilidade.
• Renderize localmente e confira o arquivo final em um player comum.
• Se for repetir o formato, transforme textos e dados em props.

Conclusão

Remotion no Claude Code é uma das formas mais práticas de transformar vídeo em software. Você ganha a velocidade do prompt, mas mantém o controle do código: componentes, versionamento, automação, revisão e renderização reproduzível.

Para começar bem, não tente criar uma superprodução no primeiro pedido. Crie um vídeo curto, instale as skills, use o Studio como feedback visual e itere com prompts específicos. Depois que o primeiro formato funcionar, o verdadeiro poder aparece: gerar variações, personalizar por dados e montar uma linha de produção de vídeos que um editor tradicional dificilmente escalaria com a mesma velocidade.