Remotion com Claude Code: como transformar uma ideia em vídeo?
Remotion com Claude é o fluxo em que você descreve a ideia do vídeo em linguagem natural e o agente escreve o código React da composição. O Remotion é um framework para criar vídeos programaticamente com React, e a própria Remotion mantém Agent Skills oficiais com as boas práticas do projeto, compatíveis com Claude Code, Codex, Kimi Code e Cursor. O caminho oficial: npx create-video@latest com template Blank e Skills, npm run dev para abrir o Studio, o claude rodando em uma segunda janela de terminal, e npx remotion render no fim. Revisar composição, timing e saída continua com você.
Você descreve o vídeo em texto e recebe código React de volta
Parece conversa de futuro, mas é só o que acontece quando o vídeo deixa de ser uma timeline arrastada no mouse e vira arquivo de código
O Remotion é um framework para criar vídeos programaticamente com React
E é exatamente por o vídeo ser código que um coding agent como o Claude Code consegue entrar no jogo: ele escreve a composição, lê o que escreveu, ajusta e roda de novo, do mesmo jeito que faria com qualquer componente do seu app
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 120 aulas
- 4 projetos
- 9h 45min
Se você conhece o fluxo de pedir um componente pro agente e revisar o diff depois, é isso, só que o resultado sai em MP4 😀
Neste post tu vai ver o fluxo de setup oficial, o que as Agent Skills mudam no comportamento do agente e o que continua na sua mão revisar antes de renderizar
Bora?
O que você precisa antes de começar:
Pouca coisa, e nada de conta nova em serviço estranho
- Node.js instalado na máquina
- Assinatura paga do Claude Code: a documentação oficial do Remotion afirma que o Claude Code exige assinatura paga
Do lado do Remotion, a notícia é boa
A Free License cobre indivíduos e empresas de até 3 pessoas, com todos os recursos, uso comercial ilimitado e sem necessidade de cadastro
E não existe diferença de funcionalidade entre a versão gratuita e a paga, ou seja, o que muda é a licença, não o que o framework faz
A versão atual do pacote remotion no npm é a 4.0.516, ainda na linha 4.0 (não existe 5.0 publicada), então é isso que tu vai encontrar quando o instalador baixar tudo
Passo a passo: da ideia ao vídeo com o Claude Code
Esse é o fluxo de setup que a própria documentação do Remotion recomenda para prompting de vídeos com o Claude Code
Segue na ordem, que os erros comuns moram justamente em quem pula etapa
1. Criar o projeto com as Skills já instaladas:
npx create-video@latestNo assistente, escolhe o template Blank, responde sim para TailwindCSS e sim para instalar as Skills
O erro comum deste passo: recusar as Skills na criação e depois estranhar que o agente não segue as convenções do Remotion
2. Entrar na pasta e instalar as dependências:
cd my-video
npm install3. Deixar o Studio no ar:
npm run devEsse terminal fica ocupado, e é assim mesmo
4. Abrir uma SEGUNDA janela de terminal e chamar o agente:
cd my-video
claudeO erro comum deste passo: matar o dev server pra rodar o agente no mesmo terminal
São duas janelas, uma servindo o preview e outra com o Claude Code trabalhando, beleza?
5. Descrever a ideia do vídeo em linguagem natural:
Aqui é a parte que parece mágica e não é: tu escreve o que o vídeo deve mostrar e o agente escreve a composição em React
Nada de prompt secreto, é conversa mesmo
Como o agente vai criar e editar arquivos do projeto, vale ter o hábito de acompanhar o que o agente guarda na memória quando o trabalho passa de uma sessão só
6. Pré-visualizar e ajustar no Remotion Studio:
npx remotion studioO alias npx remotion preview faz a mesma coisa
É no Studio que tu olha animação, timing e layout com o olho humano, antes de gastar render
7. Renderizar o arquivo final:
A forma do comando é essa:
npx remotion render <entry-point|serve-url>? <composition-id> <output-location>E o exemplo oficial da documentação:
npx remotion render src/index.ts HelloWorld out/video.mp4O erro comum deste passo: procurar o arquivo final na raiz do projeto
Se tu não passar o output-location, a mídia é renderizada na pasta out
Como instalar as Agent Skills do Remotion em um projeto que já existe
Criou o projeto antes e agora quer as Skills? Tranquilo
Dentro do projeto, roda:
npx remotion skills addPra manter atualizado depois:
npx remotion skills updateTem também o caminho pelo instalador de skills:
npx skills add remotion-dev/skillsAs Skills ficam em .agents/skills dentro do projeto, então elas vivem junto do código e entram no versionamento como qualquer outro arquivo
E quem usa Claude Code tem um caminho oficial extra:
A Remotion mantém um plugin próprio para o Claude Code, que já inclui as Agent Skills
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotionO erro comum deste passo: não reiniciar o Claude Code depois de instalar e sair achando que o plugin não funcionou
Reinicia e testa de novo 🙂
O código do plugin fica no repositório oficial remotion-dev/claude-code-plugin
Para que servem as Agent Skills do Remotion
A Remotion mantém uma lista de Agent Skills que definem boas práticas para trabalhar em projetos Remotion
Elas são úteis para agentes como Claude Code, Codex, Kimi Code e Cursor, ou seja, não é coisa exclusiva de um agente só
Tem uma skill guarda-chuva que engloba as demais, e depois as específicas:
| Skill | O que ela cobre | Que tipo de ideia ela destrava |
|---|---|---|
| create | Novo projeto ou nova composição | Começar um vídeo do zero sem estruturar tudo na mão |
| markup | Composições, animações, layout, tipografia, mídia, efeitos, áudio, fontes, timing | O miolo do vídeo mesmo: texto que entra, elemento que anima, som que casa |
| maps | Animações de mapa, Mapbox, MapLibre, MapTiler, GeoJSON | Aquele vídeo de rota, trajeto e dado geográfico |
| captions | Legendas | Conteúdo pra feed, onde quase todo mundo assiste sem som |
| saas | Arquitetura de apps com Remotion | Quando o vídeo não é um vídeo só, é um produto que gera vídeos |
| studio | Deixar o código editável no Studio | Vídeo que outra pessoa vai ajustar sem abrir o editor de código |
| docs | Buscar a documentação e trazer páginas em Markdown | O agente consultar a fonte oficial em vez de chutar API |
Repara que a lógica é a mesma de qualquer skill bem feita: em vez de você repetir convenção no prompt, a convenção já está lá
Se a diferença entre skills, comandos e subagentes ainda te embaralha um pouco, vale entender isso antes, porque muda como você usa o resto
O MCP do Remotion foi descontinuado: use as Skills e o /remotion-docs
Esse aviso é pra quem leu tutorial antigo e vai procurar por MCP
O MCP do Remotion foi deprecado, e a recomendação oficial passou a ser instalar as Agent Skills e usar /remotion-docs
Os motivos citados pela própria Remotion:
- instalação difícil
- agentes não invocam de forma confiável
- duplica a skill
/remotion-docs - os dados podem ficar menos atuais que a documentação
O MCP hospedado será desligado não antes de 31/08/2026, e novas instalações não são recomendadas
Então se tu abrir um post de meses atrás mandando plugar o MCP, já sabe: pula essa parte
O que continua na sua mão depois que o agente escreve o código
Aqui mora a parte honesta da história
Esse fluxo todo só funciona porque o vídeo é código React
O que sai do agente não é um arquivo binário fechado, é um projeto que tu lê, roda no Studio, versiona no git e revisa igual revisa PR
E isso significa que sobra trabalho humano, sim:
- revisar a composição no Remotion Studio antes de renderizar
- conferir timing e layout na pré-visualização, porque animação errada só aparece quando roda
- validar a saída da renderização, o arquivo que realmente foi gerado
Tem também a decisão de licença, que é sua e não do agente
A Free License cobre indivíduos e empresas de até 3 pessoas
Empresas com 4 pessoas ou mais precisam da Company License:
| Plano | Preço | Mínimo |
|---|---|---|
| Remotion for Creators | US$ 25 por Seat por mês | Sem número mínimo de Seats e sem gasto mínimo quando comprado sozinho |
| Remotion for Automators | US$ 0,01 por render | Gasto mínimo de US$ 100 por mês |
Como não há diferença de funcionalidade entre gratuito e pago, a conta é sobre o tamanho do time e o volume de render, não sobre recurso travado
Conclusão
O Remotion não escreve o vídeo por você
Ele faz uma coisa mais interessante: transforma o vídeo em algo que um agente consegue escrever, ler e corrigir
E o projeto não é experimento de fim de semana, se liga: a página oficial da Remotion conta que ele foi criado em 2021 por Jonny Burger, e informa a escala de uso hoje, mais de 2 milhões de vídeos renderizados por mês em mais de 400 empresas
Próximo passo concreto, sem enrolação: cria um projeto Blank com npx create-video@latest aceitando as Skills, sobe o Studio, descreve uma ideia bem curta pro Claude Code e renderiza o teu primeiro MP4 com npx remotion render
Depois volta no Studio e olha o que o agente montou, que é ali que a coisa fica divertida…
até o próximo post! =)
Perguntas frequentes
O MCP do Remotion ainda é recomendado pra usar com Claude Code?
Não, o MCP foi descontinuado e a recomendação oficial passou a ser instalar as Agent Skills e usar o comando /remotion-docs, porque a instalação do MCP era difícil, os agentes não invocavam ele de forma confiável e os dados podiam ficar menos atualizados que a documentação. O MCP hospedado só desliga a partir de 31/08/2026, mas novas instalações já não são indicadas
Quanto custa usar o Remotion numa empresa com mais de 3 pessoas?
Empresas com 4 pessoas ou mais precisam da Company License, que tem duas modalidades: o Remotion for Creators cobra US$ 25 por seat por mês, sem número mínimo de seats nem gasto mínimo, e o Remotion for Automators cobra US$ 0,01 por render com gasto mínimo de US$ 100 por mês. Pra até 3 pessoas a Free License já cobre tudo, com uso comercial ilimitado e sem cadastro
As Agent Skills do Remotion funcionam só no Claude Code?
Não, elas são compatíveis com Claude Code, Codex, Kimi Code e Cursor, então dá pra aproveitar o mesmo conjunto de boas práticas em mais de um agente. A instalação fica igual em qualquer um deles: a pasta .agents/skills dentro do projeto
Onde fica o vídeo depois de rodar o npx remotion render?
Se tu não passar o output-location no comando, o Remotion renderiza a mídia direto na pasta out do projeto. É só nessa pasta que tu vai procurar o arquivo quando o render terminar
O Remotion já tem uma versão 5.0?
Não, a versão atual do pacote remotion no npm é a 4.0.516, ainda dentro da linha 4.0. Não existe 5.0 publicada até agora
Quem criou o Remotion e desde quando ele existe?
Segundo a página oficial da Remotion, o criador é o Jonny Burger, hoje Chief Hacker da empresa, e o projeto nasceu em 2021. A mesma página informa a escala de uso atual: mais de 2 milhões de vídeos renderizados por mês em mais de 400 empresas
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Bateu o limite de uso do Claude Code? Como retomar a tarefa sem refazer tudo
Bateu o limite de uso do Claude Code? Veja como retomar a tarefa de onde parou com /usage, CLAUDE.md e --continue, sem refazer nada.
Como pagar o Claude Code no Brasil: cartão, dólar, IOF e quanto fica em reais
Claude Code preço Brasil na prática: câmbio, IOF de 3,5% e quanto fica na fatura. Planos Pro e Max convertidos em reais e como pagar com cartão.
Como instalar uma skill no Claude Code: passo a passo
Saiba como instalar skill no Claude Code: use a pasta pessoal para todas as sessões ou a pasta de projeto para versionar. Frontmatter YAML é obrigatório.
