Exemplos de Remotion: o que dá pra construir de verdade com ele

Fala aí, beleza? Remotion não é "mais uma lib de animação", é vídeo escrito em React e renderizado pra arquivo de verdade

O projeto foi criado por Jonny Burger, em Zurique, e a empresa nasceu em 2021 com o Mehmet Ademi como cofundador

O slogan oficial é direto: "Make videos programmatically"

Na prática, você escreve componentes React, vê o resultado rodando no Remotion Studio e manda renderizar pra um arquivo de vídeo

Só que a pergunta que trava todo mundo não é "como instala", é "pra que EU usaria isso?"

Então a ideia aqui é simples: te mostrar os casos de uso que a ferramenta assume oficialmente, pra você achar o seu projeto na lista antes de instalar qualquer coisa 🙂

6 exemplos de Remotion na prática

Cada bloco abaixo responde três coisas: o que é, quando faz sentido e o que o Remotion já entrega pronto

Se nenhum encaixar no seu caso, ótimo, você economizou uma tarde

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

1. Biblioteca de assets animados pra sua organização:

Esse é um caso de uso listado pelo próprio Remotion no site oficial: criar uma biblioteca de assets animados pra sua organização

Faz sentido quando a empresa já tem design system e vive repetindo a mesma vinheta, o mesmo lower third, o mesmo card de citação

A lógica é a mesma de um componente de UI: você escreve uma vez, parametriza e reusa

Se você conhece Storybook, o raciocínio é bem semelhante, só que a saída é vídeo em vez de tela

O ganho aqui é consistência, não velocidade de render

2. Vídeo dentro do seu app com @remotion/player:

O pacote @remotion/player embute um vídeo escrito em React dentro de um app React

Ele renderiza a composição dentro de Next.js, Vite ou Create React App, e o conteúdo muda em tempo de execução via props

Que diferença isso faz? O vídeo deixa de ser um arquivo estático e vira interface: o usuário digita o nome, escolhe a cor, e o preview responde na hora

A prop controls liga os controles prontos de player, então você não precisa construir play, pause e barra de progresso do zero

Esse é o caminho clássico de produto que precisa de vídeo personalizado por usuário

3. Remotion Recorder pra gravar conteúdo:

O Remotion Recorder é um template gratuito e de código aberto, com repositório próprio em github.com/remotion-dev/recorder

Ele grava facecam e tela em sincronia, porém em trilhas independentes

Se liga nisso, porque é o ponto todo: como as trilhas ficam separadas, o layout pode ser decidido DEPOIS, na edição, e não na hora da gravação

As legendas são geradas localmente via Whisper.cpp, que o próprio Recorder instala automaticamente

Tudo feito em TypeScript e React, então mexer nele é mexer em código que você já conhece

É o exemplo mais direto pra dev solo que produz conteúdo técnico

4. Render em volume com @remotion/lambda:

Aqui a conversa muda de "criar vídeo" pra "criar MUITO vídeo"

O @remotion/lambda distribui o trabalho entre várias funções AWS Lambda rodando em paralelo

O vídeo é dividido em chunks renderizados simultaneamente por Lambdas separadas, e uma função final junta as partes

Cada render usa entre 3 e 200 funções concorrentes, conforme a concorrência que você configurar

O comando é npx remotion lambda render

Faz sentido quando o volume é o problema, tipo gerar um vídeo por cliente, por pedido, por relatório

5. Ferramenta de prompt pra vídeo:

O Remotion tem dois templates oficiais pra esse cenário, e eles resolvem coisas diferentes

O primeiro é o Prompt to Motion Graphics SaaS Starter Kit, baseado em Next.js: ele gera o código Remotion a partir de linguagem natural, faz streaming pro frontend, compila e pré-visualiza no browser

O segundo é o template-prompt-to-video, onde a CLI gera script, imagens, voiceover e um timeline.json com blocos de Elements, Text e Audio a partir de um tema

Vale lembrar que ferramenta assim vive do material que entra nela, mesma história de quando você descobre os limites de fonte do NotebookLM na prática

O template te dá o esqueleto, o resultado ainda depende do que você pede

6. Editor de vídeo completo no navegador:

Esse é o mais ambicioso da lista

O Editor Starter é um template PAGO pra construir um editor de vídeo completo dentro do browser

Ele vem com componentes prontos de timeline, canvas interativo, seletor de fontes e upload de assets, além de mais de 80 feature flags pra você ligar e desligar o que quiser

Existe ainda o componente Remotion Timeline, vendido separadamente, que sincroniza com o Remotion Player pra acelerar a construção da interface de edição

Traduzindo: você não começa do zero, mas também não é um "next, next e finish"

Remotion com agente de código: o que mudou

Essa é a pergunta de 2026, então merece bloco separado

O Remotion mantém Agent Skills oficiais com boas práticas pra agentes de código trabalharem em projetos Remotion

A instalação é com npx remotion skills add, e as skills ficam no diretório .agents/skills do projeto

Elas servem pra agentes como Claude Code, Codex e Cursor, e o repositório é o remotion-dev/skills

Tome cuidado com um detalhe: o MCP do Remotion foi marcado como deprecated

A documentação hoje manda instalar as Agent Skills e usar /remotion-docs, e o servidor hospedado do MCP será desligado não antes de 31 de agosto de 2026

Ou seja, se você achou um tutorial mandando plugar o MCP, ele já está velho

É o mesmo movimento que a gente já viu em outras ferramentas quando o assunto é casos de uso reais de agente: o encanamento muda rápido, o caso de uso é que fica

Como sair do exemplo e criar o projeto

Achou o seu caso na lista? Bora ver na prática

1. Crie o projeto com o comando oficial

npx create-video@latest

Ele abre o fluxo de criação de um projeto Remotion novo

2. Escolha o template pela flag, de acordo com o exemplo que você quer

As flags disponíveis são: --blank, --hello-world, --next, --vercel, --recorder, --prompt-to-motion-graphics, --prompt-to-video, --three, --skia, --audiogram, --music-visualization, --electron, --react-router e --code-hike

npx create-video@latest --recorder

Amarrando com o que você leu lá em cima:

• gravar facecam e tela: --recorder
• ferramenta de prompt que compila e pré-visualiza no browser: --prompt-to-motion-graphics
• gerar script, imagens, voiceover e timeline a partir de um tema: --prompt-to-video
• vídeo dentro de um app Next.js: --next
• começar do zero, sem exemplo nenhum: --blank

O erro comum deste passo é escolher o template pela curiosidade e não pelo objetivo

Você cai no --three porque é bonito, e três dias depois percebe que precisava de audiogram

3. Ou instale dentro de um projeto que já existe

Nem sempre você quer um projeto novo, né?

O Remotion suporta instalação em Next.js, React Router, Vite, Create React App e em projetos só de servidor em Node.js

O erro comum deste passo é criar um repo separado só pro vídeo quando o app que vai exibir esse vídeo já está ali do lado

4. Edite e renderize pelo Studio, sem CLI

Dentro do Remotion Studio você edita os default props na aba Props, na barra lateral direita

E dispara a renderização pelo botão Render, que abre um formulário com as opções, sem precisar digitar comando nenhum

Esses recursos de edição visual chegaram no Remotion 4.0

O erro comum deste passo é tratar o Studio como editor de vídeo tradicional

Ele é preview e controle do que o seu código gera, a edição de verdade continua acontecendo no componente React

Quanto custa cada caminho: licença e preço

Essa parte decide o exemplo que você escolhe, então melhor olhar antes de codar

Licença gratuita: grátis pra indivíduo, organização com fins lucrativos de até 3 funcionários, ONG e quem está apenas avaliando a ferramenta

Company License: passa a ser exigida a partir de 4 pessoas na organização, ou seja, quando a empresa cresce além do limite da licença gratuita

Remotion for Creators: US$ 25 por Seat por mês, o plano de criação de vídeos em baixo volume, sem número mínimo de assentos e sem gasto mínimo quando comprado sozinho

Remotion for Automators: US$ 0,01 por render, com gasto mínimo de US$ 100 por mês, pensado pra quem constrói automação, tipo editor de vídeo ou ferramenta de prompt pra vídeo

Editor Starter: US$ 600 em pagamento único, uma compra por projeto em que ele é usado, e uso indefinido depois da compra

Componente Timeline: compra única na remotion.pro, e gratuito como tecnologia subjacente pra indivíduos e empresas pequenas

E tem uma restrição da licença que muita gente só descobre tarde: é proibido copiar ou modificar o código pra vender, alugar ou sublicenciar um derivado do próprio Remotion

Ou seja, construir COM Remotion, beleza

Vender um Remotion com outro nome, não

Qual desses exemplos vale pro seu caso

Sem enrolação, casando perfil com exemplo:

• Dev solo que produz conteúdo técnico: vai de Recorder, é gratuito, é open source e resolve facecam mais tela com legenda local
• Produto que precisa de vídeo personalizado por usuário: @remotion/player pro preview em tempo real mais @remotion/lambda pro render em volume
• Quem quer vender uma ferramenta de vídeo: você cai no plano Automators, com US$ 0,01 por render e gasto mínimo de US$ 100 por mês, então a conta escala junto com o uso
• Quem quer um editor completo no navegador: é o caminho mais caro e mais longo, com US$ 600 de Editor Starter na entrada e o componente Timeline vendido à parte

Com todas as letras: o Remotion é gratuito pra indivíduo e pra empresa pequena, cobra por assento quando o time cresce e cobra por render quando você automatiza

Não é pegadinha, é modelo de negócio, mas é bom saber ANTES de montar a arquitetura em cima

E se nenhum item da lista descreveu o seu projeto, essa é uma resposta legítima também

A lista existe justamente pra você desistir antes de instalar 😀

Conclusão

O gargalo aqui nunca foi o Remotion

A ferramenta faz vídeo com React, roda preview no Studio e renderiza pra arquivo, isso está resolvido

O gargalo é escolher o caso de uso, porque é ele que define o template, a arquitetura e a licença que você vai pagar

Próximo passo concreto: roda npx create-video@latest com a flag do template que corresponde ao exemplo que você escolheu ali em cima

E se você vai encostar um agente de código no projeto, instala as Agent Skills com npx remotion skills add antes de começar, não depois de gerar meia timeline torta

Até o próximo post! =)