Remotion é um framework que converte código React em vídeo MP4, e suas Agent Skills oficiais permitem criar vídeos com IA a partir do Claude Code, Codex ou Cursor. Você descreve o vídeo em linguagem natural, seu agente escreve os componentes e Remotion renderiza o resultado.
Remotion não é novo: está em desenvolvimento há anos e está na linha 4.x (a versão v4.0.525 saiu em 15 de setembro de 2026). O que mudou é quem escreve o código. O projeto se apresenta hoje como ferramentas de vídeo para a era dos agentes, e seu próprio repositório inclui na raiz um AGENTS.md e pastas .claude, .codex e .agents/skills.
O que é Remotion?
Remotion é uma forma de fazer programmatic video: você constrói vídeos como componentes React. Cada frame é uma função do número do frame atual, então tudo o que a web consegue renderizar se torna material de animação: CSS, Canvas, SVG, WebGL. E como é código, você também tem variáveis, funções, APIs e dados. Um vídeo passa a ser algo que você pode parametrizar, versionar no Git e renderizar em lote.
O README descreve três formas de trabalhar que compartilham uma única fonte de verdade, o código React:
- Com agentes: você converte uma ideia em vídeo usando seu agente de código.
- De forma interativa: você edita e anima com drag and drop no Remotion Studio.
- Programaticamente: você conecta dados e lida com a complexidade usando código.
Você pode mudar de modo a qualquer momento, porque o código sempre é a versão mestre.
Como fazer vídeos com IA usando Claude Code e Remotion?
A documentação oficial resume isso em quatro passos.
Crie um projeto:
npx create-video@latest
Entre na pasta (se a chamou de my-video), instale as dependências e levante a visualização:
cd my-video
npm install
npm run dev
Em um segundo terminal, inicie seu agente dentro da mesma pasta:
cd my-video
claude
A partir daí, você descreve o vídeo em um prompt. A visualização do Studio se atualiza conforme o agente edita o código.
Como instalar as Claude Code skills do Remotion?
As skills empacotam as boas práticas do Remotion para que seu agente não adivinhe tempos, sequências nem configuração de render. Elas se instalam com:
npx skills add remotion-dev/skills
Se você iniciar um projeto novo com bun create video, o assistente de criação oferece adicioná-las.
Remotion também traz um comando próprio para instalá-las e mantê-las atualizadas:
npx remotion skills add
npx remotion skills update
As skills se instalam em .agents/skills dentro de seu projeto. A compatibilidade com Claude Code se consegue com um link simbólico de .claude/skills para essa pasta.
Duas advertências práticas. Primeiro, circulam várias skills do Remotion não oficiais em repositórios de terceiros; as que mantém a equipe do Remotion são as de remotion-dev/skills. Segundo, o comando de instalação mudou várias vezes e tutoriais de terceiros mostram pelo menos três variantes. No momento de publicar esta nota, os comandos acima são os que aparecem na documentação oficial do Remotion; se algum falhar, confira primeiro a página de skills da documentação.
Que skills estão incluídas no pacote?
No momento de publicar esta nota, a lista oficial tem doze:
| Skill | Para que serve |
|---|---|
/remotion-best-practices |
Skill geral que abrange todas as demais; use se não souber qual escolher |
/remotion-create |
Criar um projeto ou uma composição nova |
/remotion-markup |
Composições, animação, layout, tipografia, mídia, efeitos, áudio, fontes, tempos |
/remotion-studio |
Abrir o Studio para visualizar o vídeo |
/remotion-render |
Renderizar para vídeo ou imagem fixa |
/remotion-maps |
Animações de mapas: rotas, marcadores, Mapbox, MapLibre, GeoJSON, voos 3D com CesiumJS |
/remotion-captions |
Legendas e captions |
/remotion-saas |
Arquitetura de apps e produtos baseados em Remotion |
/remotion-interactivity |
Tornar o código editável no Studio |
/remotion-docs |
Procurar na documentação e trazer qualquer página como Markdown |
/remotion-upgrade |
Atualizar Remotion, os pacotes relacionados e as skills instaladas |
/remotion-multimedia |
Gerenciamento de mídia no navegador com Mediabunny |
A documentação sugere prompts como estes:
/remotion-create Make a promo video for a record store/remotion-maps Animate a route from Los Angeles to New York and make the camera follow it.
/remotion-docs merece uma menção à parte: traz para o contexto as páginas atuais da API antes que o agente escreva código. É a melhor defesa contra um agente que escreve código Remotion desatualizado de memória.
Funciona também com Codex e Cursor?
Sim. A documentação do Remotion menciona Claude Code, Codex, Kimi Code e Cursor como destinos das skills, que seguem o formato aberto Agent Skills. O percurso com Claude Code é o mais detalhado da documentação oficial; com os demais agentes o padrão é o mesmo: criar o projeto, instalar as skills e escrever os prompts a partir da pasta do projeto.
Remotion é grátis?
Depende do tamanho de sua organização. Remotion não é open source: usa uma licença própria.
- Licença gratuita: pessoas e empresas de até três integrantes, incluindo uso comercial.
- Licença de empresa: obrigatória para organizações ou colaborações de quatro pessoas ou mais. Tem duas modalidades:
- Remotion for Creators: 25 dólares por mês por assento, para criação de vídeo de baixo volume, inclusive com agentes de IA e Studio.
- Remotion for Automators: 0,01 dólares por render com um mínimo de 100 dólares por mês, para produtos automatizados como editores de vídeo, apps de prompt-to-video ou a integração do Remotion Player.
- Licença Enterprise: a partir de 500 dólares por mês.
Leve em conta que seu agente tem seu próprio custo: a documentação do Remotion indica que Claude Code requer uma assinatura paga.
Remotion ou HyperFrames?
Ambos permitem que um agente produza vídeo a partir de código, mas partem de lugares distintos. HyperFrames, que cobrimos em abril, é da HeyGen: as composições são HTML com data attributes, roda localmente e tem licença Apache 2.0. Remotion é React em primeiro lugar, tem uma trajetória muito mais longa e um ecossistema amplo de componentes (efeitos, transições, captions, fontes), além de opções de render que vão desde sua máquina até Lambda e Vercel. Sua licença é source-available, com planos pagos para equipes maiores.
Se sua equipe já pensa em React e quer um pipeline maduro, Remotion é a aposta mais segura. Se uma licença open source é condição inegociável, HyperFrames é o que você precisa olhar.
O que você pode construir com vídeos feitos com código?
O mesmo pipeline serve para trabalhos muito distintos:
- vídeos de anúncio de versão gerados a partir de um changelog;
- resumos anuais personalizados renderizados por usuário (GitHub Unwrapped é um exemplo público);
- explicações baseadas em dados e animações de mapas;
- um editor de vídeo completo construído sobre o Remotion Player.
O fio condutor: quando um vídeo é código, seu agente consegue escrevê-lo e seu CI consegue renderizá-lo.
E você? Qual vídeo de seu projeto você pediria primeiro a seu agente: um anúncio de versão, um tutorial ou algo completamente diferente?
- Com um editor tradicional (Premiere, DaVinci, CapCut…)
- Com código ou com um agente de IA
- Ainda não faço vídeos
- Prefiro outra opção (conte-nos qual)
Comente abaixo ou, se este artigo chegou para você por email, responda diretamente: sua resposta é publicada aqui.
Relacionado: Como instalar Caveman no Claude Code, a skill que faz sua IA falar como um cavernícola