Montar vídeo em React com Remotion e renderizar na sua máquina ou na AWS

Um vídeo feito em editor é um arquivo fechado: trocar o título de 20 versões exige 20 sessões de edição. O Remotion descreve o vídeo como uma aplicação React, em que cada quadro é o desenho de um componente num instante. Trocar o título vira trocar uma prop e renderizar de novo, sem abrir editor.

Sem esse modelo mental, o código que o Claude Code ou o Codex escrever em Remotion vira caixa-preta. Um pacote em versão diferente quebra o build, um vídeo fora da pasta certa sai preto, um render longo no Lambda estoura o timeout da função e cai. E há uma conta que pega de surpresa: o Remotion não é MIT, e a partir de quatro pessoas na empresa a licença cobra.

Nesta aula você cria o projeto do zero, escreve uma composição com props, vê a prévia no Studio, renderiza na sua máquina e no AWS Lambda e registra no projeto qual licença se aplica ao seu caso.

Entender composição, props e o que a licença cobra

Em 12/10/2026, a versão latest é a 4.0.535, publicada no mesmo dia; a 4.0.534, de 07/10/2026, trouxe o Chromium 157. A série 4.0.5xx sai quase todo dia, por isso a regra do curso é usar a versão vigente na data, conferida com npm view remotion version, e gravá-la igual em todos os pacotes. A 4.0.527 trouxe a ação de gerar legendas no Studio e a 4.0.530, a importação de SRT. O Remotion 5.0 ainda não foi lançado.

Dois conceitos sustentam tudo. Composição é a declaração de um vídeo (id, componente, largura, altura, fps e duração em quadros), como a ficha técnica de uma peça. Props são os valores que entram nela, como os campos de um formulário que gera o mesmo documento com dados diferentes. O Remotion não impõe limite de duração, resolução ou fps; quem limita é a composição, o renderizador e a licença.

O mesmo componente segue dois caminhos. No Studio e no @remotion/player, ele roda no navegador, sem FFmpeg. No render, um Chrome sem interface desenha cada quadro e o FFmpeg monta o MP4, na sua máquina ou na sua conta AWS. Os pacotes @remotion/renderer, @remotion/bundler e @remotion/cli só rodam no Node; nunca os importe dentro de um componente.

A licença é gratuita para pessoas físicas, ONGs e empresas de até 3 pessoas, inclusive para uso comercial. A partir de 4 pessoas há três planos, e a infraestrutura da AWS nunca entra no preço. Em agência, contam os funcionários das duas empresas se o cliente opera o projeto; e embutir o @remotion/player num produto conta como automação.

Escrever a composição com props

O projeto nasce do modelo oficial e todos os pacotes @remotion/* ficam na mesma versão exata; misturar versões é a causa mais comum de erro de build. Se a linha de npm install ou o package.json ainda são novidade, o curso de Node.js mostra npm e package.json desde o começo. As skills e o plugin que ensinam o Remotion ao agente entram em skills de vídeo no Claude Code; aqui você escreve à mão.

O componente abaixo é o cartão de abertura dos cortes: b-roll ao fundo, título com mola e cinco ingredientes entrando um a um. Três funções fazem a animação. useCurrentFrame() devolve o quadro que está sendo desenhado; interpolate() converte esse número em valor, como uma regra de três entre o quadro 0 e o quadro 15; spring() faz o movimento de mola. O <OffthreadVideo> lê o b-roll da pasta public/ por staticFile().

Renderizar na sua máquina e na AWS com custo conhecido

O render local usa o Chrome sem interface e o FFmpeg do seu computador e não consome token de modelo nenhum. O @remotion/lambda faz o mesmo na sua conta AWS: não é uma API hospedada pelo Remotion. Os limites são o tempo de execução da função, que a documentação recomenda manter em 120 segundos ou menos e que a AWS corta aos 15 minutos; a concorrência padrão de 1.000 funções por região; até 10 GB de memória e de disco; e nenhum AV1. Para vídeo longo, a documentação prefere aumentar a concorrência e o disco em vez do timeout. Pela estimativa do curso, como o Remotion divide o render em partes paralelas, isso cobre vídeos de até cerca de 80 minutos em Full HD; a página de limites não publica teto de duração nem de tamanho de saída. O @remotion/cloudrun existe, mas está em Alpha e sem desenvolvimento ativo; não use em produção.

Um detalhe pega no primeiro render. No Windows, em Mac Intel e em Linux mais antigo, o Remotion 4.0 captura cada quadro como JPEG, e sem --color-space=bt709 o MP4 sai em faixa de cor cheia, que o ffprobe lê como yuvj420p; o verificador da Aula 04 reprova o pix_fmt. A flag grava a cor em BT.709 com faixa limitada, e o ffprobe passa a mostrar yuv420p. Use a flag nos dois lugares para as saídas baterem. As duas abas trazem o mesmo render nos dois lugares, com as mesmas props.

Atualizar a versão sem quebrar o projeto

A versão fixa protege o projeto, mas uma hora você atualiza. Faça isso de propósito, num ramo separado: rode npm view remotion version, troque o número em todos os pacotes de uma vez, renderize Receita9x16 de novo e passe o MP4 pelo verificador da Aula 04. Se o número sugerido for o da 4.0.531, pule: ela saiu quebrada em 30/09/2026 e foi republicada no dia seguinte como 4.0.532. Está pronto quando o MP4 da versão nova passa no verificador com o mesmo resultado da anterior.

Duas mudanças do período mexem no comportamento depois de atualizar. Desde a 4.0.530, de 29/09/2026, a duração em quadros é calculada antes da velocidade de reprodução: um <OffthreadVideo> ou <Sequence> com playbackRate pode mudar de tamanho na linha do tempo, então confira a duração no ffprobe. Desde a 4.0.535, de 12/10/2026, cada componente pré-monta por 2 segundos antes de aparecer, e o b-roll chega carregado ao primeiro quadro. A mesma versão trouxe renderFramesOnLambda(), que devolve só a sequência de quadros, útil para a revisão visual pelo Claude sem baixar o MP4.

Na licença, quando o Remotion 5.0 sair, contratados passam a contar no tamanho da equipe e clientes Automators não poderão desligar a telemetria. Se a sua conta de 3 pessoas depende de um freelancer fixo, refaça a soma antes de atualizar para a 5.0.

Algumas decisões aparecem logo no primeiro projeto. Se você é pessoa física ou a empresa tem até 3 pessoas, siga sem custo de licença; com 4 ou mais, anote no projeto se o caso é Creators ou Automators antes de automatizar qualquer render. Se o vídeo tem até cerca de 80 minutos em Full HD e você já tem conta AWS, o Lambda custa centavos por minuto renderizado; se não quer AWS, renderize localmente. Se o render local começa a pesar na memória num lote grande, divida o lote em renders menores, um depois do outro. A escolha entre Remotion e HyperFrames para cada peça tem critério próprio em montar vídeo em HTML com HyperFrames.

Para o site, o @remotion/player toca o mesmo componente no navegador, sem FFmpeg nem Chromium, e exige cinco campos: component, durationInFrames, compositionWidth, compositionHeight e fps. A legenda palavra a palavra usa o pacote @remotion/captions com tempos por palavra, e um SRT de frases não basta; o caminho completo está em editar por transcrição e reenquadrar.

Na Cozinha da Rafa trabalham duas pessoas, a Rafa e um editor, então a licença é gratuita. O projeto composicoes/cozinha-remotion/ gera o cartão de abertura dos três vídeos da semana: Receita16x9 para o bolo de rolo longo e Receita9x16 para os dois cortes. A cada semana mudam só as props, e os três cartões de 5 segundos saem em menos de um minuto na máquina dela. Pelo exemplo oficial, os mesmos cartões no Lambda custariam frações de centavo de computação. Cada cartão entra antes do vídeo com o concat da Aula 04. Os custos que não aparecem na fatura do modelo, como armazenamento e saída de dados, estão no curso de FinOps, em os custos que não são token.

Guia prático: a duração do cartão segue a narração com calculateMetadata

Na aula, a composição tem 150 quadros fixos. Quando a voz entra, a duração precisa acompanhar o áudio, ou o cartão corta a última palavra ou sobra imagem muda. O calculateMetadata() do Remotion resolve isso: uma função que roda antes do render, lê o que precisar (aqui, a duração da narração) e devolve quadros, props e nome do arquivo de saída. Você sai com o Root.tsx ajustado e com as novidades das versões 4.0.529 a 4.0.535.

Troque as props para a sua próxima receita, renderize as duas composições e passe as duas pelo verificador. Está pronto quando Receita9x16 sai igual na sua máquina e no Lambda no ffprobe, o verificador devolve OK em codec de vídeo, pix_fmt, fps e dimensões, e o projeto tem a licença registrada por escrito.