Como Criar Motion Graphics com Claude Code e Remotion (1 Prompt, R$0)

Última atualização: 26 de abril de 2026

Um vídeo animado profissional custa R$500 a R$800 contratando um motion designer. Leva 2 a 5 dias para entregar. Qualquer mudança de última hora custa mais R$80.

Eu fiz o mesmo vídeo com um único prompt no Claude Code. Demorou menos de 5 minutos. Custo: R$0.

Esse post é o passo a passo completo de como isso funciona.

---

O Problema: Edição de Vídeo Manual Está Ficando Para Trás

Se você produz conteúdo — seja para YouTube, para anúncios ou para apresentações de produto — você conhece o gargalo. A edição come tempo. Contratar editor come dinheiro. E quando o padrão visual muda (cor do canal, logo novo, formato diferente), você começa do zero.

A maioria dos criadores ainda usa After Effects, Premiere ou CapCut para criar intros animadas, lower thirds e gráficos em movimento. São ferramentas excelentes — mas você edita manualmente, frame a frame, elemento por elemento.

Tem uma forma melhor agora. E a diferença de custo é absurda.

---

O Conceito: Programar Motion Graphics, Não Editar

A virada de chave é essa: motion graphic é código. Um vídeo animado é basicamente elementos HTML/React com propriedades que mudam ao longo do tempo. O Remotion transforma esse código em vídeo renderizado em MP4.

O Claude Code entende código React. Quando você conecta os dois — Claude Code gerando o código + Remotion renderizando o vídeo — você cria uma máquina de motion graphics que recebe prompt e entrega vídeo.

Você não precisa saber programar. Você precisa saber descrever o que quer.

---

O Comparativo: Motion Designer Contratado vs. Claude Code + Remotion

Item	Editor Contratado	Claude Code + Remotion
Custo por vídeo	R$500 a R$800	R$0
Custo mensal (6 vídeos)	R$4.800	~R$100 (Claude Code)
Tempo de entrega	2 a 5 dias	5 a 45 minutos
Revisão de última hora	R$80+	Grátis, na hora
Consistência visual	Varia por editor	Sempre consistente (via CLAUDE.md)
Escalabilidade	Limitada por pessoa	Ilimitada
Remotion	—	Gratuito

A conta é simples. 6 vídeos por mês com editor = R$4.800. Com Claude Code + Remotion = R$100. Sobram R$4.700 por mês.

---

A Stack: O Que Você Precisa

Antes dos passos, o que você precisa ter instalado:

• Node.js — runtime JavaScript. Gratuito. Necessário para rodar o Remotion.
• Claude Code — a IA que vai programar os motion graphics para você. ~R$100/mês.
• Remotion — framework que transforma código React em vídeo MP4. Gratuito para uso pessoal.

Custo real mensal: R$100 (só o Claude Code). O resto é zero.

---

Passo 1 — Instalar Node.js e Remotion

Acesse nodejs.org e baixe a versão LTS. Instale normalmente.

Depois, com o Node instalado, crie um projeto Remotion:

npx create-video@latest

Siga o assistente, escolha o template básico. Em 3 minutos você tem um projeto Remotion funcionando. O Claude Code vai trabalhar dentro dessa pasta.

---

Passo 2 — Criar o CLAUDE.md com o Contexto do Seu Canal

O CLAUDE.md é o "mapa do tesouro" para o Claude Code. É onde você define tudo sobre o seu projeto de vídeo — e o Claude usa esse contexto em todas as gerações.

Crie um arquivo chamado CLAUDE.md na raiz da pasta do projeto com:

# Projeto: Motion Graphics [Nome do Canal]

## Identidade Visual
- Cor principal: #0052FF (azul elétrico)
- Cor de fundo: #0a0c18 (dark navy)
- Cor de texto: #FFFFFF
- Fonte: Inter Bold para títulos, Inter Regular para corpo

## Configurações de Vídeo
- Resolução: 1920x1080 (16:9) para YouTube
- FPS: 30
- Duração padrão de cena: 3 segundos
- Duração de transição: 0.3 segundos

## Regras de Animação
- Easing padrão: ease-in-out
- Entradas: slide from bottom + fade
- Saídas: fade out
- Logo sempre aparece no canto superior esquerdo

## Assets
- Logo: /assets/logo.png
- Ícone: /assets/icon.svg
- Fonte de música: Epic Denim Sound

## Tom Visual
Futurista, dark, minimalista. Linhas de luz azul elétrico sobre fundo navy.

Quanto mais detalhado o CLAUDE.md, mais consistente vai ser o resultado. O Claude vai ler esse arquivo antes de cada geração.

---

Passo 3 — A Anatomia do Prompt Que Funciona

Aqui está o erro que a maioria comete: dar um prompt vago como "crie uma intro animada para o meu canal".

O Claude Code não vai fazer um trabalho ruim — ele vai fazer um trabalho genérico. Para um resultado profissional, você precisa especificar a estrutura.

A anatomia do prompt correto:

Crie uma intro animada para o canal com a seguinte estrutura:

Arquivo: Intro.tsx
Duração total: 5 segundos (150 frames a 30fps)

Cenas:
- Frame 0-30: Fundo dark navy com partículas azuis entrando da esquerda
- Frame 30-60: Logo do canal desliza do topo com efeito glow azul elétrico
- Frame 60-90: Texto "GEEK INTELIGÊNCIA" aparece letra por letra abaixo do logo
- Frame 90-120: Tagline "Domine a IA" aparece com fade in
- Frame 120-150: Tudo escurece com lens flare azul saindo pelo centro

Use as cores e regras de animação definidas no CLAUDE.md.
Adicione efeito sonoro de whoosh na entrada do logo.

Esse nível de especificação entrega um resultado que parece profissional na primeira tentativa. O Claude gera o código React completo do Remotion, já com os timings certos.

---

O Que o Claude Code + Remotion Consegue Criar

Além de intros, a stack consegue gerar:

• Contexto animado — slides de apresentação com texto e animação de entrada
• Logo reveal com easing — entrada do logo com física realista
• Bullet list animada — lista de pontos que aparecem um por um sincronizados com narração
• Gráficos animados — barras e pizzas que crescem ao longo do tempo com dados reais
• Lower thirds — faixas de nome/cargo que entram na parte inferior do vídeo
• CTA com URL e QR Code — chamada para ação final com QR code gerado dinamicamente
• B-roll overlay — imagens colocadas acima do vídeo principal com blend modes
• Sincronização com áudio — cenas que batem no beat da música de fundo

Tudo isso via prompt. Cada elemento é gerado como um componente React reutilizável — você usa uma vez, usa para sempre.

---

Passo 4 — Renderizar o Vídeo Final

Com o código gerado pelo Claude Code, para renderizar o vídeo em MP4:

npx remotion render Intro out/intro.mp4

O Remotion vai processar frame a frame e gerar o arquivo de vídeo. Para uma intro de 5 segundos, leva cerca de 30-60 segundos para renderizar.

Se quiser visualizar antes de renderizar:

npx remotion studio

Abre um navegador com preview em tempo real. Você vê o resultado antes de gastar tempo de render.

---

O Fluxo Real da Operação

Na prática, o fluxo de trabalho é:

1. Termina de gravar o vídeo — você tem o conteúdo bruto em mãos
2. Abre o Claude Code na pasta do projeto Remotion — já tem o CLAUDE.md configurado
3. Descreve a intro/gráfico que quer — usando a anatomia de prompt acima
4. Claude gera o código em 30-60 segundos — você revisa no Remotion Studio
5. Pede ajustes se necessário — "aumenta o tempo de entrada do logo para 1 segundo" — 10 segundos para ajustar
6. Renderiza e usa no editor de vídeo — importa o MP4 gerado no CapCut, Premiere, DaVinci

O gargalo de 2-5 dias para um editor entregar vira uma tarefa de 5-45 minutos que você mesmo faz, com mais controle e resultado mais consistente.

---

Erros Comuns de Quem Começa

Dar prompt vago sem estrutura de cena. "Faz uma intro bonita para o meu canal" vai gerar algo genérico. Especifique frames, duração e elementos visuais.

Não criar o CLAUDE.md. Sem o arquivo de contexto, o Claude vai inventar cores e estilo a cada geração. O resultado vai ser inconsistente entre vídeos.

Não revisar antes de renderizar. O Remotion Studio existe para isso. Use o preview, peça ajustes no Claude, só renderize quando estiver satisfeito.

Tentar criar tudo em um prompt só. Cenas complexas funcionam melhor em partes. Crie a intro primeiro, valide, depois crie os outros elementos. O Claude mantém contexto dentro da mesma conversa.

Ignorar a curadoria. IA gera opções — você escolhe a melhor. Não aceite cegamente a primeira versão. Peça variações, compare, refine. A curadoria é o trabalho real.

---

Leia também

• Claude Design: Do Briefing ao Site no Ar em 5 Minutos (Sem Designer)
• Claude Code Eliminou 6 Funcionários da Minha Empresa: Números Reais
• Como Clonar Qualquer Página de Venda em 10 Minutos com Claude Code (Grátis)

---

FAQ

Preciso saber programar para usar isso? Não. Você precisa saber descrever o que quer. O Claude escreve o código React — você só diz o que quer que apareça, quando e com qual estilo.

O Remotion é realmente gratuito? Para uso pessoal e projetos open source, sim. Para uso comercial (vídeos que geram receita diretamente), tem licença paga. Verifique os termos em remotion.dev para o seu caso específico.

Funciona com Codex (GPT-4o) em vez de Claude Code? Sim. O Remotion é agnóstico de IA — qualquer LLM capaz de gerar código React funciona. Claude Code tem a vantagem de ler o CLAUDE.md automaticamente e ter contexto de projeto mais robusto.

Qual a qualidade do vídeo gerado? O vídeo final é renderizado em resolução que você definir (1080p, 4K, etc.) e FPS que você escolher (24, 30, 60fps). A qualidade técnica é igual a qualquer vídeo produzido profissionalmente. A qualidade criativa depende da qualidade do seu prompt.

Posso usar para criar vídeos inteiros ou só partes animadas? Principalmente partes animadas (intros, gráficos, lower thirds, CTAs). Para o vídeo principal com câmera e narração, você ainda precisa gravar normalmente. O Remotion é para os elementos de motion design.

Como monetizo isso? Várias formas: packs de intro para canais (vende templates), prestação de serviço de motion graphics para outros criadores, produção de vídeos de apresentação para empresas, criação de anúncios animados. Com R$0 de custo por produção, a margem é altíssima.

---

Fontes e referências

• Documentação oficial Claude Code
• Anthropic — Engineering Blog
• Model Context Protocol (MCP)

---

Próximo Passo

Ter a ferramenta é o começo. O que gera resultado de verdade é saber o que produzir com ela e como transformar produção em receita.

Se você quer aprender a criar produtos digitais, montar um funil e vender com inteligência artificial do jeito certo, o Produtor Milionário é onde ensino o sistema completo — do produto à escala.

produtor.geekacademy.site