O que é Remotion? Como criar vídeos com React muda o jogo

Vídeo parou de ser um arquivo de timeline que só uma pessoa consegue abrir e virou código versionado, com diff, review e reaproveitamento

Se você já monta componente em React, você já tem quase tudo que precisa pra fazer um vídeo

Essa é a ideia por trás do Remotion: um framework pra fazer vídeos programaticamente com React, mantido pela Remotion AG

O repositório oficial é o remotion-dev/remotion, e a linha atual do pacote no npm é a 4.0.x

Então a virada de chave é essa: seu <Titulo /> não é só um elemento na tela, ele pode ser um frame

Para quem serve o Remotion (e para quem não serve):

Tem dois perfis bem claros aqui

O primeiro é o dev React que quer animar com o que já sabe: composição, props, estado, condicional, map em array

Você não precisa aprender keyframe, camada e máscara de editor tradicional, tu escreve componente e o resultado vira vídeo

O segundo perfil é a organização que automatiza produção de vídeo em escala: pipeline que gera vídeo a partir de dados, editor de vídeo próprio, ferramenta prompt-to-video, aquele relatório mensal que precisa sair em várias versões diferentes

E olha, isso não é achismo meu

Dá pra ver o escopo real olhando os templates que o próprio create-video oferece por flag:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

• --prompt-to-video e --prompt-to-motion-graphics (ferramentas que transformam texto em vídeo)
• --recorder (fluxo de gravação)
• --audiogram e --music-visualization (áudio virando visual)
• --next, --vercel, --react-router e --electron (Remotion dentro de app de verdade)
• --three e --skia (3D e gráficos)
• --code-hike (vídeo com código na tela)
• --blank e --hello-world (começar do zero)

Olhando essa lista tu entende o recado: o Remotion não foi pensado pro vídeo único, ele foi pensado pro vídeo que se repete com dados diferentes

E pra quem NÃO serve?

Se você precisa de um vídeo avulso, uma vez, sem reaproveitar nada, montar um projeto React pra isso é matar formiga com bazuca

Nesse caso um editor comum resolve, ou até uma via de criar vídeos grátis no Gemini, que é outra categoria de ferramenta (modelo generativo cospe o vídeo pronto, aqui você programa cada frame)

São coisas diferentes, e tá tudo bem

Os três modos de trabalho: agêntico, interativo e programático:

O site oficial organiza o Remotion em três formas de trabalhar: Agentic, Interactive e Programmatic

E aqui tem um detalhe que muita gente lê errado

Não são níveis de dificuldade, tipo "começa no fácil e evolui pro difícil"

Também não são etapas de um funil, tipo "primeiro isso, depois aquilo"

São caminhos paralelos pro mesmo projeto

Se você conhece um monorepo onde o time roda o mesmo código por CLI, por script e por interface web, é bem parecido: muda a porta de entrada, o projeto é o mesmo

Bora ver cada um

Modo agêntico: transformar a ideia em vídeo com o agente de código

O posicionamento oficial desse modo é direto: transformar a sua ideia em vídeo usando o seu agente de código

Ou seja, você descreve o que quer, o agente escreve os componentes Remotion

A documentação de AI do Remotion cita agentes compatíveis: Claude Code, Codex, Kimi Code, OpenCode e Cursor

E existe um plugin oficial do Remotion pro Claude Code, instalado pelo marketplace de plugins:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

Depois de instalar é preciso reiniciar o Claude Code, senão o plugin não entra

Esse plugin já inclui as Remotion Agent Skills, então tu não precisa instalar as skills separado

Agora, se você usa outro agente, dá pra instalar as skills via CLI:

npx -y skills@latest add remotion-dev/skills -g -y

As skills ficam no diretório .agents/skills dentro do projeto

Se o agente parecer perdido, é ali que tu confere se elas realmente aterrissaram

A parte legal disso é que não é IA gerando pixel, é IA gerando código que você lê

É o mesmo pulo que a gente vê quando alguém resolve montar um jogo com IA e recebe um projeto de verdade no lugar de um arquivo fechado: dá pra abrir, entender e corrigir

Modo interativo: o Remotion Studio

O editor visual do Remotion é o Remotion Studio, aberto assim:

npx remotion studio

Ele traz edição e animação com arrasta-e-solta, mais preview e playback rápido das composições

Na prática é a ponte pra quem quer VER o resultado sem sair do projeto

Você mexe, olha, volta pro código, mexe de novo

Muito massa pra ajuste fino, porque ficar rodando render completo só pra conferir se o texto entrou 5 frames atrasado é sofrimento desnecessário 😀

Modo programático: dados, escala e renderização

Esse é o modo de conectar o vídeo a dados e gerenciar complexidade com código

A renderização por linha de comando é assim:

npx remotion render <entry-point|serve-url>? <composition-id> <output-location>

Dois comportamentos que salvam sua pele: se você não passar o composition-id, o Remotion pergunta qual composição usar, e se não passar o output-location, ele salva na pasta out

Além do render por CLI, tem mais três peças importantes aqui

O @remotion/player deixa embutir um vídeo Remotion dentro de qualquer app React

A API é modelada na tag <video> nativa do HTML, e as props do vídeo podem ser atualizadas dinamicamente em runtime, sem renderizar arquivo nenhum

É isso que permite montar aquele editor onde o usuário digita e vê o vídeo mudando na hora

O Remotion Lambda distribui a renderização em várias funções AWS Lambda em paralelo

Cada render usa entre 3 e 200 funções Lambda concorrentes, dependendo da concorrência configurada, e quantos vídeos você consegue processar ao mesmo tempo depende do limite de concorrência da sua conta AWS

Tome cuidado com isso: a cota da AWS é o teto real, não o Remotion

E o @remotion/web-renderer, estável a partir da v4.0.491, renderiza vídeo direto no navegador

Ele codifica com WebCodecs usando Mediabunny no lugar do FFmpeg, não exige servidor Node nem Lambda e não exige etapa de bundling

As APIs são renderMediaOnWeb(), renderStillOnWeb() e canRenderMediaOnWeb()

O preço dessa conveniência: ele é limitado a um subconjunto de elementos HTML

Então vale a checagem antes de sair prometendo render no browser pro time inteiro

O código é a fonte da verdade: por que isso muda o jogo

O posicionamento oficial do Remotion é curtinho e vale mais que qualquer feature da lista: Code is always the source of truth

E, junto com isso, você pode alternar entre os modos de trabalho a qualquer momento

Pensa no que isso significa pra quem já vive de código

O vídeo entra no git

Revisão de vídeo vira diff, não vira "me manda a v7_final_agora_vai.mp4"

A abertura da sua série vira componente reutilizável, com props, igual qualquer outra peça do seu design system

E, principalmente: entrar por um modo não te prende a ele

Quer ajustar o timing no olho? Abre o Studio

Quer ligar o vídeo a dados e renderizar por linha de comando? Vai pelo modo programático

Quer descrever a próxima cena pro agente? Volta pro modo agêntico

Não tem ordem obrigatória, e o caminho inverso também vale: mesmo projeto, mesmos arquivos, nenhum recomeço

Quem já perdeu um projeto porque a ferramenta visual não exportava nada legível sabe o tamanho dessa diferença

Como começar um projeto Remotion do zero:

1. Confira seu ambiente. O Remotion exige Node 16 ou superior, ou então Bun 1.0.3 ou superior. O erro comum deste passo é ignorar isso e culpar o framework depois: se sua máquina tem um Node antigo esquecido lá de 2020, atualize antes de qualquer coisa

2. Crie o projeto com o comando oficial:

npx create-video@latest

3. Escolha um template por flag, se quiser. Existem vários documentados (--blank, --hello-world, --next, --vercel, --recorder, --audiogram, --music-visualization, --three, --skia, --code-hike, --electron, --react-router, --prompt-to-video, --prompt-to-motion-graphics). Pra já cair num projeto vazio e com nome definido, por exemplo:

npx create-video@latest --yes --blank my-video

O erro comum aqui é começar do zero, penar pra montar a estrutura e só depois descobrir que já existia um template pro seu caso 😛

4. Instale as dependências:

npm i

5. Suba o projeto:

npm run dev

6. Abra o editor quando quiser mexer no visual:

npx remotion studio

7. Renderize o vídeo:

npx remotion render

O erro comum deste passo é dobrado: omitir o composition-id e estranhar a pergunta na tela (ele só está perguntando qual composição usar), e omitir o output e sair procurando o arquivo na raiz do projeto. Sem output-location, o vídeo vai pra pasta out

8. Já tem um projeto React rodando? Aí você não precisa criar nada do zero, é só instalar o pacote no projeto existente:

npm i remotion

Remotion é gratuito? Licença e preços:

Aqui é onde muita gente se enrola, então bora separar direitinho

Existem duas licenças, e o critério principal é tamanho da organização, não volume de uso:

E os planos pagos são dois, com lógicas bem diferentes:

Com os dois planos ativos ao mesmo tempo, aplica-se um Minimum Spend combinado de US$ 100/mês, e o gasto com Seats conta pra esse mínimo

Agora o ponto que precisa ficar EXPLÍCITO, porque gera confusão constante

O código-fonte é publicamente disponível no GitHub e o repositório tem cerca de 57 mil estrelas

Mas a licença é a Remotion License, proprietária, com condições que não fazem parte de licenças open source aprovadas pela OSI

Código aberto pra ler ≠ open source no sentido formal

Já me deparei com gente jurando que era MIT porque viu o repo público… não é

Vale a pena adotar o Remotion?

Depende de duas perguntas: você tem React no time e você faz vídeo de forma recorrente ou automatizada?

Se as duas respostas forem sim, o Remotion faz muito sentido, porque ele transforma produção de vídeo em algo que seu time já sabe operar (componente, prop, dado, deploy)

Se a resposta for "faço um vídeo por trimestre e cada um é totalmente diferente", provavelmente não compensa

Pra indivíduo, o custo de entrada é zero: Free License, com uso comercial incluído e sem precisar nem criar conta no remotion.pro

Pra empresa, o ponto de decisão real não é a feature, é a conta: a licença é obrigatória a partir de 4 funcionários, e o Automators tem Minimum Spend de US$ 100/mês

Se seu volume é baixo mas você quer automação, esse mínimo é exatamente o número que você tem que colocar na planilha antes de decidir

E o contrapeso honesto: a curva de aprendizado aqui é de programação, não de edição

Quem vem do After Effects não vai achar isso confortável de cara, e quem exige licença aprovada pela OSI por política interna vai esbarrar na Remotion License

Fora isso, é uma das ideias mais interessantes que apareceram nesse cruzamento de dev com produção de conteúdo

Conclusão

O Remotion muda o jogo por um motivo simples: o código é sempre a fonte da verdade, e os três modos de trabalho (agêntico, interativo e programático) são portas diferentes pro mesmo projeto

Você pode pedir pro agente montar, ajustar no Studio, escalar por Lambda e voltar pro agente na semana seguinte, sem recomeçar nada

Próximo passo concreto: roda npx create-video@latest escolhendo um template, abre o Remotion Studio com npx remotion studio e brinca com uma composição

Se você usa Claude Code, instala o plugin oficial e testa o modo agêntico pra sentir a diferença na prática

Essa é a hora de deixar o vídeo entrar no seu fluxo de dev de verdade =)

até o próximo post!