Claude Code + Remotion: Motion Graphics para canais do YouTube sem editor de vídeo

O gráfico de barras surgiu na tela — fluido, elástico, cada coluna encaixando-se no lugar com um leve sobreimpulso antes de se estabilizar. Ao lado, um contador avançou de 0% para 78%, brilhando suavemente contra um fundo escuro. O conjunto todo parecia algo pelo qual uma agência de motion design cobraria $800.

Eu construí em um prompt. Onze palavras, um terminal Claude Code e cerca de quarenta segundos de processamento.

Esse momento mudou como penso sobre conteúdo em vídeo. Não porque a animação fosse perfeita — não era, e chegarei aos ajustes que fiz — mas porque demoliu um muro que eu vinha encarando há meses. Eu queria criar um canal do YouTube sem rosto focado em visualizações de dados e vídeos estilo ranking. O tipo que acumula milhões de visualizações com gráficos de barras animados mostrando as pessoas mais ricas do mundo, países de crescimento mais rápido ou linguagens de programação mais populares ao longo do tempo. Mas toda vez que abria o After Effects, fechava em menos de vinte minutos. O fluxo de trabalho com keyframes parecia escrever código copiando caracteres à mão de um livro impresso.

Então descobri que o Claude Code e o Remotion podiam transformar uma descrição de texto em um motion graphic totalmente codificado e renderizável. E de repente, as contas dos canais do YouTube sem rosto mudaram completamente.

A economia que chamou minha atenção

Não vou fingir que entrei nisso puramente pelo ofício. Os números me atraíram.

Canais do YouTube sem rosto — os que funcionam inteiramente com motion graphics, material de arquivo e narração sem ninguém aparecendo na câmera — geram receita real. Segundo os dados de nicho 2026 do OutlierKit, canais no espaço de finanças e visualização de dados ganham $15-22 CPM, o que significa que cada milhão de visualizações se traduz em aproximadamente $15.000 a $22.000 em receita publicitária.

O gargalo nunca foi o conceito ou os temas. Era a velocidade de produção. Fluxos de trabalho tradicionais de motion graphics — After Effects, Premiere Pro, keyframing manual — te limitam a talvez dois ou três vídeos polidos por semana trabalhando sozinho.

Claude Code e Remotion quebraram esse gargalo para mim. Aqui está como configurei, o que realmente funcionou e as partes onde tropecei.

O que você precisa antes de escrever um único prompt

1. Uma conta Claude AI com assinatura

O plano Pro a $20/mês te dá acesso ao Claude Code pela extensão VS Code.

2. Visual Studio Code

Baixe de code.visualstudio.com.

3. Node.js (Versão 18+)

Pegue em nodejs.org.

4. Git

Controle de versão — instale o Git.

5. A extensão Claude Code

Abra VS Code, vá na aba Extensões, busque "Claude Code" e instale.

6. O Skill do Remotion

npx skills add remotion-dev/skills

Se encontrar um erro de política de execução do PowerShell no Windows:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Para iniciar um projeto novo do Remotion:

bun create video

O fluxo de trabalho que realmente entrega vídeos

Passo 1: Descreva a animação em linguagem simples

Abra o painel de chat do Claude Code e escreva o que quer. Sem pseudo-código. Sem especificações técnicas. Apenas descreva a animação como descreveria para um colega tomando café.

Passo 2: Deixe o Claude executar

Claude processa seu prompt, escreve o código do componente, configura a estrutura do projeto Remotion e instala dependências. No meu M2 MacBook Air, isso leva 30-60 segundos.

Passo 3: Pré-visualize no Remotion Studio

Claude gera uma URL — tipicamente http://localhost:3000. Abra no navegador para ver o Remotion Studio.

Passo 4: Itere com prompts de acompanhamento

Se algo não estiver certo, simplesmente descreva a mudança. Claude modifica o código existente. A pré-visualização atualiza.

Passo 5: Renderize para MP4

npx remotion render src/index.ts MyComposition out/video.mp4 --fps=30

Uma visualização de dados de 15 segundos com animações fluidas leva cerca de 45 segundos para renderizar. Uma composição multi-cena de 60 segundos leva três a quatro minutos.

Construindo um gráfico de ranking: o vídeo que me convenceu

Claude gerou um componente React de 180 linhas. Tempo total do prompt ao render finalizado: cerca de doze minutos. Construir a mesma animação no After Effects levaria no mínimo três a quatro horas.

Por que motion graphics baseados em código mudam o jogo de escala

Templates se tornam templates reais

// Same component, different data — different video
const richestPeople = [
  { name: "Elon Musk", value: 700, color: "#8B5CF6" },
  { name: "Bernard Arnault", value: 620, color: "#3B82F6" },
  // ... more entries
];

const programmingLanguages = [
  { name: "Python", value: 4200000, color: "#3776AB" },
  { name: "JavaScript", value: 3800000, color: "#F7DF1E" },
  // ... more entries
];

Renderização em lote está embutida

# Render multiple compositions from a data file
node render-batch.js --data=./datasets/rankings.json --output=./exports/

Controle de versão funciona

Cada animação vive em um repositório Git.

As partes honestas: onde este fluxo de trabalho fica aquém

Animação complexa de personagens ainda não chegou

Animação baseada em código se destaca em visualização de dados, tipografia, formas geométricas e design de movimento abstrato.

A curva de aprendizado não é zero

Passei meu primeiro fim de semana lendo a documentação do Remotion para entender conceitos como useCurrentFrame, interpolate e Sequence.

Renderizar consome recursos

Um vídeo de 60 segundos a 1080p e 30fps significa 1.800 frames individuais renderizados.

Nem todo prompt produz ouro

Cerca de 20% dos meus prompts precisam de revisão significativa.

Se preferir que alguém construa uma pipeline completa de motion graphics para seu canal, eu aceito exatamente esse tipo de projeto. Veja meu trabalho em fiverr.com/s/EgxYmWD.

De vídeos individuais a uma pipeline de produção

Passo 1: Pesquisa de temas

Uso Google Trends, VidIQ e sugestões de busca do YouTube.

Passo 2: Coleta de dados

Compilo os dados em formato JSON estruturado. Isso leva uns quinze minutos por tema.

Passo 3: Seleção ou criação de template

Mantenho cinco templates principais. Cerca de 70% dos meus vídeos usa um existente.

Passo 4: Geração e revisão

Cinco a quinze minutos por vídeo dependendo da complexidade.

Passo 5: Montagem

Combino o motion graphic renderizado com narração, música, intro/outro e miniatura.

Passo 6: Lotes quando possível

Aos domingos preparo os vídeos da semana seguinte.

Esta pipeline me permite produzir de cinco a sete vídeos por semana como criador individual.

O que o Remotion faz por baixo dos panos

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

export const AnimatedCounter: React.FC<{ target: number }> = ({ target }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Spring-based animation for natural movement
  const progress = spring({
    frame,
    fps,
    config: { damping: 15, stiffness: 80 },
  });

  const currentValue = Math.round(progress * target);

  return (
    <div style={{
      fontSize: 96,
      fontWeight: "bold",
      color: "#8B5CF6",
      fontFamily: "Inter, sans-serif",
    }}>
      {currentValue.toLocaleString()}
    </div>
  );
};

Licenciamento: o que você precisa saber antes de monetizar

A abril de 2026, Remotion Skills é gratuito para desenvolvedores individuais, organizações sem fins lucrativos e empresas com três ou menos funcionários.

O que eu diria a alguém começando hoje

Comece com um template, não cinco. Escolha gráfico de barras horizontal. Domine-o. Depois expanda.

Invista duas horas nos docs do Remotion. Só o guia de início e as páginas sobre interpolate, spring e Sequence.

Escolha seu nicho antes do primeiro render. O algoritmo do YouTube recompensa consistência.

Não pule a narração. Geradores de voz IA como ElevenLabs produzem narração de qualidade de transmissão.

Renderize durante a noite. Programe seus renders em lote antes de dormir.

Para um passo a passo mais profundo dos fundamentos do Claude Code, cobri extensivamente no meu tutorial de Claude Code para iniciantes. E para ver como usei o Remotion além do conteúdo do YouTube, confira meu detalhamento completo do fluxo de trabalho com Remotion.

A mudança que importa mais que a ferramenta

Seis meses atrás olhava para canais do YouTube sem rosto e pensava: "Ótimo modelo de negócio, mas o custo de produção mata para criadores individuais." Claude Code e Remotion não apenas reduziram esse custo. Eliminaram-no como variável. Meus custos de produção por vídeo são agora efetivamente zero além das assinaturas que já pagava para trabalho de desenvolvimento.

Os canais que dominarão o espaço do YouTube sem rosto nos próximos dois anos não serão os com maiores orçamentos de produção. Serão os que descobriram como transformar descrições de texto em motion graphics profissionais em escala.

As ferramentas estão aí. O skill instala em quinze segundos. A primeira animação leva quarenta.

O que seu primeiro gráfico de ranking vai mostrar?

Perguntas frequentes

Preciso saber React para usar Claude Code com Remotion?

Não. Claude Code traduz prompts em linguagem simples para componentes React/Remotion funcionais.

Quanto custa a configuração completa de Claude Code e Remotion?

Uma assinatura Claude Pro custa $20/mês. Remotion é gratuito para criadores individuais. Custo mínimo total: $20/mês. Com ferramenta de voz IA ($10-30/mês), fica $30-50/mês.

Quanto tempo leva para renderizar um vídeo de motion graphics?

Uma animação de 15 segundos a 1080p/30fps renderiza em cerca de 45 segundos num M2 MacBook Air.

Posso monetizar vídeos do YouTube feitos com Remotion e Claude Code?

Sim. A saída é vídeo MP4 padrão que pertence a você.

Que tipos de motion graphics funcionam melhor com este fluxo de trabalho?

Visualizações de dados, corridas de gráficos de barras, animações de ranking, showcases de contadores/estatísticas, gráficos comparativos e conteúdo baseado em tipografia.

Vamos trabalhar juntos

Procurando construir sistemas de IA, automatizar fluxos de trabalho ou escalar sua infraestrutura tecnológica? Adoraria ajudar.

• Fiverr (soluções personalizadas e integrações): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (soluções empresariais): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (serviços de segurança): xcybersecurity.io