Remotion.dev: o que tem no site oficial e como começar a criar vídeos com React

Fala aí, beleza? Criar vídeo escrevendo React, sem arrastar clipe nenhum numa timeline, é exatamente a proposta do Remotion: "Make videos programmatically with React"

E o lugar onde essa história começa é o remotion.dev, que é o site e a documentação oficiais do projeto

O problema é que doc oficial de framework costuma ser um labirinto, tu entra pra fazer um vídeo simples e sai com 12 abas abertas sem ter rodado uma linha

Então a ideia aqui é dupla: mostrar o que tem no site oficial e cravar qual é o ponto de partida REAL (spoiler: é Node.js instalado + um comando só)

O que você encontra no site remotion.dev

O Remotion é um framework para criar vídeos programaticamente usando React

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Ou seja: composição, animação, texto, tudo é componente, tudo é código versionado no git

No site oficial as áreas estão bem separadas, e vale saber pra que serve cada uma antes de sair clicando:

• Docs (remotion.dev/docs): a documentação em si, do primeiro projeto até as APIs
• Templates (remotion.dev/templates): os pontos de partida prontos
• Showcase (remotion.dev/showcase): o que já foi feito com a ferramenta
• Blog (remotion.dev/blog): as novidades do projeto

O código fica no repositório oficial github.com/remotion-dev/remotion

E quem criou e fundou o Remotion é o Jonny Burger, de Zurique

Saber o mapa antes de entrar economiza um tempo absurdo, e isso vale pra qualquer ferramenta nova que cai no teu colo, é o mesmo aperto de quando você abre a documentação do Claude-Mem e não sabe qual página ler primeiro

O que você precisa antes de rodar o primeiro comando

Aqui mora a maior parte da frustração de quem tenta e desiste no minuto dois

O Remotion roda em cima do Node, então você precisa ter o Node.js instalado

Na linha 4.x, o mínimo é Node 16 (ou Bun 1.0.3)

Sistemas suportados:

• Windows (apenas x64)
• macOS
• Linux (as distros precisam de Libc 2.35 ou superior)

Se você está em Windows ARM, esse detalhe do x64 não é frescura, é requisito mesmo

E qual versão eu instalo?

A versão estável do pacote remotion publicada no npm é da linha 4.0

O Remotion 5.0 ainda NÃO foi lançado, mas o guia de migração já existe e já lista os requisitos planejados: Node 18.0.0 no mínimo e Bun 1.1.3

Ou seja: se você for instalar um Node novo agora, já subir pra uma versão 18 ou maior te poupa retrabalho lá na frente 🙂

Como criar seu primeiro projeto Remotion do zero

Bora ver na prática? A documentação oficial ensina uma sequência bem curta, e é ela que você deve seguir

1. Confirme que o Node.js está instalado e dentro do mínimo suportado

Sem Node, nada do resto acontece

Erro comum deste passo: tentar rodar em Node antigo demais e culpar o Remotion pelo erro. Na linha 4.x o piso é Node 16

2. Crie o projeto com o comando oficial

npx create-video@latest my-video

Erro comum deste passo: o terminal não reconhecer o comando. Quando isso acontece, o problema quase nunca é a ferramenta, é o ambiente (PATH, instalação, shell aberto antes da instalação). É a mesma investigação de quando o Claude Code não reconhece o Ponytail: você olha o ambiente primeiro, não a ferramenta

3. Escolha o template

A doc recomenda o Hello World pra quem está começando, e é um conselho bom: você quer ver vídeo na tela, não configurar coisa

Mas o create-video oferece um monte de ponto de partida via flag:

--blank
--hello-world
--next
--next-no-tailwind
--next-pages-dir
--react-router
--vercel
--recorder
--javascript
--render-server
--electron
--three
--still
--audiogram
--music-visualization
--skia
--overlay
--code-hike
--prompt-to-video
--prompt-to-motion-graphics

Tem template de Next.js, de React Router, de Three.js, de audiograma, de visualização de música, de Electron, por aí vai

Erro comum deste passo: pegar um template avançado logo de cara (tipo Three.js ou Electron) e passar a tarde debugando setup em vez de aprender o conceito de composição

4. Entre na pasta do projeto

cd my-video

Erro comum deste passo: esquecer o cd e rodar os próximos comandos na pasta de cima. Aí o npm reclama e você acha que o projeto quebrou

5. Instale as dependências

npm i

6. Rode o projeto

npm run dev

Pronto, esse é o caminho de início que a doc oficial ensina, do zero até rodando

7. Abra o Remotion Studio

O Studio é o ambiente onde você vê a composição rodando enquanto mexe no código

Nos templates regulares ele abre com:

npm start

Já nos templates de Next.js e React Router 7 o script é outro:

npm run remotion

Os dois são atalho para o mesmo comando da CLI:

npx remotion studio

Erro comum deste passo: rodar npm start num projeto Next.js ou React Router 7 e achar que o Studio bugou. Nesses templates o script é npm run remotion, e na dúvida o npx remotion studio resolve direto

8. Abra no navegador

O Studio sobe um servidor local e abre no navegador na porta 3000

Se a 3000 estiver ocupada, ele usa uma porta maior

Erro comum deste passo: ir de teimoso no localhost:3000 enquanto o terminal já avisou que subiu em outra porta. Leia a saída do comando, ela te diz onde a coisa está 😀

O que dá para fazer depois do Hello World

Aqui é onde o Remotion deixa de ser brinquedo e vira ferramenta de verdade

Renderizar pela linha de comando:

A CLI tem comando pra vídeo/áudio e pra imagem estática:

npx remotion render
npx remotion still

O render cospe vídeo ou áudio, o still gera uma imagem estática (pensa em thumbnail, card, capa gerada por código)

Instalar dentro de um projeto que já existe:

Você não precisa começar do zero

A documentação cobre instalação em projeto existente de Next.js, React Router, Vite, Create React App e também em projeto só de servidor em Node.js

Isso muda o jogo pra quem já tem app rodando e só quer a parte de vídeo

Embutir o vídeo no seu site:

O pacote @remotion/player deixa você embutir no site um vídeo escrito em React e alterá-lo em tempo de execução

Se você conhece a ideia de passar props pra um componente e ver a tela mudar, é isso, só que o componente é um vídeo

A doc própria dele fica em remotion.dev/docs/player

Renderizar na nuvem:

O @remotion/lambda renderiza vídeos na AWS Lambda

Dois detalhes que a doc deixa claro: a função Lambda precisa de uma layer com Chromium, e você precisa de um bucket S3 pra guardar projetos e renderizações

Ou seja, tem setup de infra ali, não é só instalar e sair rodando

Usar com agente de código:

Essa parte é mto massa pra quem já vive no terminal com IA

A documentação tem uma seção sobre uso com agentes de código, e um comando pra instalar as Remotion Agent Skills:

npx remotion skills add

A página cita Claude Code, Codex, Kimi Code e OpenCode

Ou seja: em vez de o agente chutar API de um framework que ele mal conhece, ele passa a ter a skill oficial do Remotion do lado

Remotion é gratuito? O que a licença cobre

Essa é a pergunta que aparece cedo, e a resposta é boa pra maioria de quem lê aqui

O Remotion é gratuito para indivíduos e organizações pequenas

E atenção nisso: não existe diferença de funcionalidade entre a versão gratuita e a paga, o produto é o mesmo. A licença paga vale pra organizações maiores

As licenças para empresas são vendidas em remotion.pro/license

A lógica das duas opções pagas é bem direta: se o time INTEIRO mexe no editor, o modelo por assento faz sentido. Se é um servidor cuspindo vídeo automaticamente, o modelo por renderização encaixa melhor

E tem uma mudança planejada que vale anotar: o guia de migração do 5.0 avisa que contratados passam a contar no tamanho do time para efeito de licença

Como o 5.0 ainda não foi lançado, isso é planejamento, não regra de hoje… mas se você trabalha com PJ e freela num time apertado no limite das 3 pessoas, já deixa no radar

Por onde começar hoje

Recapitulando o caminho curto, sem enrolação:

1. Instale o Node.js (mínimo Node 16 na linha 4.x, e já pensando no 18 pro futuro 5.0)
2. Rode npx create-video@latest e escolha o template Hello World
3. Entre na pasta, rode npm i e suba o projeto
4. Abra o Studio na porta 3000 e mexa no código vendo o vídeo mudar

O resto vem de curiosidade: quando você quiser renderizar, é npx remotion render, quando quiser levar pro site, é o @remotion/player, quando quiser jogar pra nuvem, é o @remotion/lambda

E mantenha a doc em remotion.dev/docs aberta do lado enquanto explora, porque é ela que segura a onda quando a API que você precisa não é óbvia

Vídeo virando código versionado no git, com pull request e tudo… é um jeito bem diferente de pensar produção de conteúdo, né? 😀

até o próximo post!