Skill Remotion: quais habilidades você precisa para criar vídeos com código?

Quem trava na porta do Remotion quase nunca trava na pergunta "dá pra fazer vídeo com código?"

A pergunta real é outra: "eu já sei o suficiente pra entrar nisso?"

O Remotion é um conjunto de bibliotecas pra criar vídeos programaticamente com React: ele te entrega um número de frame e um canvas em branco, e o que aparece ali dentro é você quem renderiza

Então esse post responde em habilidade concreta, não em promessa: o que precisa estar na sua cabeça, o que precisa estar instalado na máquina, e onde entra o caminho visual pra quem gosta de arrastar as coisas (já adianto: ele existe, mas continua sendo um projeto de código) 🙂

O que precisa estar na sua cabeça e na sua máquina

São duas listas bem diferentes, e a maioria das pessoas confunde as duas

Habilidades:

• React, e aqui não tem escapatória: o código de saída do Remotion tem que ser React válido, então componentes, props e composição são o piso
• TypeScript, mas com folga: a documentação oficial do Remotion trata TypeScript como padrão recomendado e libera a saída de escape, dá pra escrever em .js e .jsx desde o Remotion 1.3
• Leitura de documentação, que é a habilidade que ninguém coloca no currículo e que resolve boa parte dos travamentos

Ambiente:

• Pelo menos Node 16 ou Bun 1.0.3, que é o mínimo oficial citado na documentação de criação de projeto
• Olho no futuro: a prévia (incompleta) das mudanças que quebram compatibilidade no Remotion 5.0 já sinaliza a versão mínima de Node subindo pra 18.0.0

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Só pra deixar o estado atual claro, sem chute: o 5.0 ainda NÃO foi lançado

A linha atual é a 4.0.x, e a versão mais recente do pacote remotion publicada no npm é a 4.0.516

Se você já passou por aquela checagem chata de pré-requisitos antes de usar uma ferramenta nova, tipo acessar o NotebookLM pelo navegador, a lógica aqui é a mesma: resolve o ambiente primeiro, aprende a ferramenta depois

E o que NÃO precisa:

Um alívio pra quem já sofreu com renderização de vídeo

Desde a v4.0 o Remotion vem com uma versão leve do FFmpeg embutida, e a instalação separada do FFmpeg não é mais necessária

Você ainda tem os comandos npx remotion ffmpeg e npx remotion ffprobe à mão, com uma ressalva importante: esses binários entendem apenas os codecs suportados pelo Remotion, que são H.264, H.265, VP8, VP9 e ProRes

Ou seja, é FFmpeg pro trabalho do Remotion, não um canivete suíço pra qualquer arquivo que você jogar nele

Vídeo como componente: a mudança de mentalidade que pesa mais que a sintaxe

Essa é a parte que trava mais gente do que a sintaxe, e de longe

No editor tradicional você pensa em linha do tempo: arrasta o clipe, estica, encaixa o corte no segundo 12

No Remotion o raciocínio inverte

Você recebe o número do frame atual e decide o que renderizar naquele instante exato

Animação deixa de ser keyframe e vira função do frame: dado o frame X, qual é a opacidade, a posição, a escala?

Cena deixa de ser trecho na timeline e vira componente

E variação (o nome do cliente, a cor da marca, o número que aparece na tela) deixa de ser retrabalho manual e vira prop

Se você já pensa em React, tu já tem meio caminho andado: é a mesma cabeça de "estado entra, interface sai", só que o estado principal é o tempo

Agora, se você vem de editor tradicional, o trabalho não é aprender comando novo

É desmontar o hábito da linha do tempo… e isso leva mais tempo do que ler a documentação inteira

Teste em 10 minutos se você está pronto

Melhor jeito de responder "eu tô pronto?" é rodar, não teorizar

Bora ver na prática?

1. Cria o projeto com o comando oficial

npx create-video@latest

Sem argumentos, ele abre uma TUI interativa e te faz as perguntas de template

O erro comum deste passo: tentar rodar isso dentro de um script ou deixar um agente rodar esperando que ele responda os prompts sozinho

Pra esse caso existe o --yes (ou -y), que pula os prompts, mas aí ele exige que você passe a flag de template e o diretório

2. Sobe o Studio

npm run dev

Isso levanta um servidor na porta 3000 (ou numa porta maior, se a 3000 estiver ocupada) e abre o Remotion Studio no navegador

O erro comum deste passo: seguir tutorial antigo

Em projetos antigos o comando era npm start, então se você copiou o comando de um post velho e não subiu nada, é provavelmente isso

3. Mexe nas props pelo painel Props do Studio

Esse é o teste de fogo da mentalidade: mudar uma prop e ver o vídeo inteiro se comportar diferente

O erro comum deste passo: abrir o painel Props e não conseguir editar nada visualmente

Pra editar as props de uma composição de forma visual no Studio, a composição precisa ter um schema Zod definido

Sem schema, sem edição visual, e não é bug

Se esses três passos te deram uma sensação de "ah, entendi a lógica", tu tá pronto

Se deram a sensação de "cadê a timeline pra eu arrastar?", segura essa dúvida que a gente resolve ela na tabela mais pra frente

Como o Claude Code encurta a curva do Remotion

Aqui mora a parte mais interessante pra quem já vive de IA no editor

O Remotion mantém uma lista oficial de Agent Skills com boas práticas pra trabalhar em projetos Remotion, pensadas pra agentes tipo Claude Code, Codex, Kimi Code ou Cursor

Elas vivem no repositório remotion-dev/skills, e hoje são 12: remotion-best-practices, remotion-captions, remotion-create, remotion-docs, remotion-interactivity, remotion-maps, remotion-markup, remotion-multimedia, remotion-render, remotion-saas, remotion-studio e remotion-upgrade

A remotion-best-practices sozinha já é uma base de conhecimento com mais de 30 arquivos de regras, cobrindo animações, áudio, assets, conteúdo 3D, gráficos, texto, transições e gerenciamento de composições

É conhecimento de biblioteca entregue mastigado pro agente, na linha do que o auto sync do CodeGraph faz pelo contexto do seu próprio projeto

O caminho pra colocar isso pra rodar:

1. Instala as skills no projeto

npx remotion skills add

2. Ou instala o plugin oficial pro Claude Code, que já vem com as Remotion Agent Skills incluídas

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

O erro comum deste passo: parar aqui

A documentação é explícita: depois de instalar, reinicia o Claude Code

3. Cria o projeto já na configuração recomendada pra uso com Claude Code: template Blank, sim pro TailwindCSS e sim pra instalar as Skills

Agora, sinceridade: isso reduz atrito, não substitui habilidade

O agente escreve React melhor e mais rápido que você digitando, beleza, mas quem lê o resultado, decide se a animação ficou boa e entende por que a composição quebrou ainda é você

Skill do agente não é skill sua 😛

Código ou drag and drop: qual caminho é o seu

Aqui vale desfazer o mal-entendido mais comum do Remotion

O arrastar e soltar na timeline vem do Editor Starter, que é um produto separado com componentes prontos de editor

Não é uma aba escondida do Remotion Studio

E atenção pra não criar expectativa errada: os dois caminhos passam por código, o que muda é quanto de interface já vem montada pra você

Resumo grosseiro: o Studio é onde você programa o vídeo

O Editor Starter é quando o vídeo vira produto e alguém que NÃO é você vai montar o conteúdo

Quando aprender Remotion realmente compensa

Aprender ferramenta nova custa tempo, então vale amarrar cada cenário à habilidade que ele exige

• Vídeo em escala com variação por dados: cem vídeos com o mesmo layout e conteúdo diferente, mudando por prop. Habilidade exigida: React e modelar bem as props (aqui o schema Zod deixa de ser detalhe e vira estrutura)
• Conteúdo repetitivo de canal: abertura, cartela de dados, ranking semanal, aquele bloco que você refaz toda semana no braço. Habilidade exigida: componentização, é literalmente transformar cena em componente reutilizável
• Geração programática dentro de um produto: seu SaaS gera o vídeo do usuário. Habilidade exigida: React mais integração, o vídeo vira uma saída da sua aplicação, não um arquivo que alguém exporta na mão
• Automação de renderização: pipeline que roda sozinho, sem humano abrindo editor. Habilidade exigida: linha de comando e conforto com build, o que puxa o npx remotion render e os binários embutidos

E o contraponto honesto, que quase ninguém escreve:

Se é UM vídeo, artesanal, com corte no feeling e trilha escolhida no ouvido, você provavelmente termina mais rápido num editor tradicional

Remotion brilha na repetição e na variação, não no capricho de peça única

Você está pronto para o Remotion? E quanto vai custar

Veredito por perfil, sem enrolação:

• Você já entrega em React? Tá pronto hoje. O que falta é a virada de chave mental do frame, e isso vem rodando o Studio uma tarde
• Sabe JavaScript mas não sabe React? Não tá pronto ainda, e o atalho é aprender React de verdade antes. Não adianta atacar Remotion por fora, o código de saída TEM que ser React válido
• Não programa? Aqui a resposta honesta é que não existe entrada sem código: nem o Editor Starter resolve isso, porque ele também é projeto de código, só que com a interface pronta. Ou você aprende React, ou monta a operação com quem escreve o React pra você

E tem a parte que muda decisão de verdade: o custo

Usam de graça, segundo a política de licença: indivíduos, organizações com fins lucrativos de até 3 funcionários, organizações sem fins lucrativos e quem está avaliando a ferramenta sem uso comercial

Ou seja, criador individual e empresa pequena podem fazer vídeo de graça, inclusive vídeo comercial

A partir de 4 pessoas, uso comercial exige Company License, comprada no remotion.pro

Os planos:

• Remotion for Creators: US$ 25 por assento por mês, sem número mínimo de assentos e sem gasto mínimo quando comprado sozinho
• Remotion for Automators: US$ 0,01 por renderização, com gasto mínimo de US$ 100 por mês

Repara na diferença de lógica: um cobra por pessoa que trabalha, o outro cobra por vídeo que sai do forno

Se a sua operação é "duas pessoas fazendo muito vídeo", a conta é bem diferente de "dez pessoas fazendo pouco"

Conclusão

A régua de entrada é curta e dá pra medir hoje: React, Node 16 ou Bun 1.0.3 na máquina e a mentalidade de tratar vídeo como componente

TypeScript é recomendado, mas não é bloqueio, JavaScript puro roda desde a 1.3

FFmpeg você nem precisa instalar à parte, vem embutido desde a v4.0

Próximo passo, um só: roda npx create-video@latest, escolhe o template Blank, sobe o Studio e mexe numa prop

Se a lógica do frame encaixar na sua cabeça, o caminho por código é seu

Se não encaixar, aí sim a conversa vira Editor Starter, que também é projeto de código, só que com a interface de edição já montada, e você decide isso com informação em vez de achismo =)

até o próximo post!