Templates do Remotion: como começar um projeto de vídeo sem partir da tela em branco

Fala aí, beleza? Começar um projeto de vídeo em React do zero é aquele tipo de tarefa que come o dia inteiro antes de você animar o primeiro pixel

Composição, fps, duração, bundler, lint, formatação, estrutura de pastas… e a animação ainda nem foi escrita

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

E o jeito oficial de matar esse arranque é template: em vez da tela em branco, você começa com um projeto que já roda

Neste post eu te mostro como criar o projeto a partir de um template, qual template serve pra cada objetivo e como transformar esse esqueleto na biblioteca de assets animados da sua organização

Bora ver na prática? 🙂

O que você precisa antes de criar o projeto

A lista é curta, e é bom conferir antes pra não travar no meio:

• Node instalado com o npx disponível, porque o comando oficial de criação roda por ele
• React na cabeça, nem que seja o básico: composição de componentes, props, estado
• Um pouco de TypeScript, já que o template Hello World vem com TypeScript, Prettier e ESLint pré-configurados

E tem um pré-requisito que não é técnico, é de decisão: a licença

O Remotion é gratuito para indivíduos, inclusive para uso comercial, e para organizações ou times de até 3 pessoas

Formação Recomendada

Formação Claude Code

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

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

A partir de 4 pessoas, uma organização com fins lucrativos precisa de licença paga

A licença paga tem dois modelos: o Remotion for Creators, a US$ 25 por assento por mês, sem mínimo, e o Remotion for Automators, a US$ 0,01 por render com mínimo de US$ 100 por mês

Com os dois ativos ao mesmo tempo vale um mínimo combinado de US$ 100 por mês, e o que você gasta com assentos conta pra esse mínimo

Olha isso ANTES de montar o projeto do time, não depois 😀

Como criar um projeto Remotion a partir de um template, passo a passo

1. Rode o comando oficial e deixe a TUI te guiar

npx create-video@latest

Sem nenhum argumento, o create-video abre uma interface interativa no terminal (a TUI) que guia a escolha do template e da configuração

É o caminho mais tranquilo pra primeira vez, porque você vê as opções em vez de decorar flag

O erro comum deste passo: tentar rodar isso esperando que ele adote um projeto que já existe

Ele cria um projeto novo. Pra um projeto que já está de pé, a documentação tem uma página específica de instalação do Remotion em projeto existente, o famoso caso brownfield

2. Pule a TUI escolhendo o template por flag

npx create-video@latest --hello-world

Dá pra escolher o template direto, sem passar pela interface

As flags de template documentadas incluem --blank, --hello-world, --next, --vercel, --next-no-tailwind, --next-pages-dir, --recorder e --prompt-to-motion-graphics

Repara numa pegadinha de nome: a flag --prompt-to-motion-graphics é a que corresponde ao template que a vitrine chama de Prompt to Video

É a mesma coisa com dois nomes, então não fique procurando uma flag --prompt-to-video que não existe na lista

O erro comum deste passo: assumir que todo template que você viu na vitrine tem uma flag equivalente

Não trate a lista acima como se cobrisse a página inteira de templates. Se o que você quer não está aí, vai pela TUI

3. Modo não interativo quando você quer só o esqueleto

npx create-video@latest --yes --no-tailwind

A flag --yes roda em modo não interativo, pulando todos os prompts e usando os padrões

Já a --no-tailwind é a que evita a instalação do TailwindCSS, e ela é documentada em combinação com o --yes

O erro comum deste passo: jogar o --no-tailwind sozinho e esperar o mesmo efeito

A dupla é --yes mais --no-tailwind. Separadas, você não está fazendo o que a doc descreve

4. Instale as dependências e suba o ambiente

npm i
npm run dev

Esse é o fluxo documentado depois que o projeto foi criado: instala e sobe o dev pelo script do próprio projeto

O erro comum deste passo: mandar o npm run dev de cara, sem o npm i

Aí vem erro de módulo não encontrado e a pessoa acha que o template veio quebrado, quando só faltou instalar

5. Ou chame o Remotion Studio direto pelo CLI

npx remotion studio

Aqui vale a pausa pra não confundir os dois passos: o npm run dev é o script que o próprio projeto define, e o npx remotion studio é o comando do CLI que abre o Studio sem depender de script nenhum

Ou seja, são dois caminhos pro mesmo ambiente de trabalho, não uma sequência. Escolhe um e segue

O Studio é o editor do Remotion, com edição e playback rápidos das suas composições

E se liga nisso: com o Studio rodando, basta apertar a tecla s no terminal que ele reabre no navegador

O erro comum deste passo: fechar a aba sem querer e derrubar o processo achando que precisa começar tudo de novo

Não precisa. Volta no terminal, aperta s, e o Studio abre de novo

6. Guarde os comandos em scripts, sem o npx

{
  "scripts": {
    "render": "remotion render"
  }
}

Dentro de um script do package.json o prefixo npx não é necessário

O erro comum deste passo: copiar o comando do tutorial com npx na frente e colar direto no script

Funciona? Até vai, mas é ruído. Dentro do package.json o binário já está no caminho

Qual template do Remotion serve para cada tipo de projeto

Agora a parte que resolve a dúvida de verdade: qual escolher

O Remotion mantém uma página oficial de templates iniciais, e cada um deles resolve um problema diferente

Se você está na dúvida entre dois, comece pelo Hello World

Ele é o playground recomendado pela doc justamente porque já vem com o ferramental configurado, então você gasta seu tempo na animação e não no tooling

O Blank parece a escolha mais limpa, mas ele é literalmente um canvas vazio. Só vale quando você já tem repertório e um plano

E o Next.js é outro nível de decisão: ele não é um template de animação, é um starter de produto, com Player e renderização via Lambda embutidos

Existe ainda o Editor Starter, que é um template pago para construir o seu próprio editor de vídeo, com componentes prontos de timeline, canvas interativo, seletor de fontes e upload de assets

Ele custa US$ 600 em pagamento único

Do template ao esqueleto: como virar biblioteca de assets animados da sua organização

Aqui é onde muita gente trava: trata o template como produto final e fica preso ao formato dele

O caminho saudável é o contrário. O template resolve o arranque, e o que fica de valor é o conjunto de componentes animados que VOCÊ acumula em cima dele

A lógica é a mesma de quem usa templates de automação n8n pra não montar todo fluxo do zero: o template é ponto de partida, o acervo é o ativo

O caminho prático:

1. Escolha um template e trate a primeira composição como descartável

A composição que veio no template serve pra você entender o formato: duração, fps, como o componente lê o frame atual

Depois disso, ela sai

2. Se o projeto já existe, não force um template por cima

A documentação oficial tem uma página de instalação do Remotion em projeto existente, o caso brownfield

O erro comum deste passo: criar um projeto novo com o create-video e ficar copiando arquivo na mão pro repositório antigo

3. Quando nenhum template oficial serve, olhe a comunidade

A própria doc aponta uma lista de recursos da comunidade pra esses casos

Só tome cuidado com uma coisa: recurso de comunidade não tem a mesma garantia de manutenção que template oficial. Vale conferir antes de apoiar o projeto do time em cima dele

4. Encaixe os agentes de código no projeto

O Remotion publica Agent Skills oficiais, que são instruções com boas práticas pra trabalhar em projetos Remotion, úteis pra agentes como Claude Code, Codex, Kimi Code e Cursor

npx remotion skills add

As skills são instaladas na pasta .agents/skills do projeto, e o comando tem os subcomandos add e update

O erro comum deste passo: instalar uma vez e esquecer. Existe o update justamente porque isso envelhece

5. No Claude Code, instale o plugin oficial

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

Depois disso, reinicie o Claude Code

O erro comum deste passo: rodar os dois comandos e sair testando na mesma sessão, sem reiniciar

6. Não vá atrás do MCP

O MCP do Remotion está marcado como descontinuado na documentação oficial, que hoje direciona pra plugins e Agent Skills

Se você achar um tutorial mandando plugar o MCP, ele está velho

E se a ideia for ir mais longe ainda, deixando a IA montar a peça inteira, isso já é outro papo: dá pra ver isso acontecendo em ferramentas que fazem motion graphics a partir da conversa do projeto

No Remotion, o agente trabalha no seu código. É um casamento diferente, e bem mais controlável

Conclusão

Os templates do Remotion resolvem o arranque, e só isso já é bastante: você sai da tela em branco pra um projeto que roda em poucos minutos

A evolução, porém, é sua. O template não vira biblioteca de assets sozinho, quem faz isso é a disciplina de ir extraindo componente reaproveitável a cada vídeo

Um detalhe pra fechar: o pacote remotion no npm está na linha 4.0.x e recebe releases com altíssima frequência (na consulta de agosto de 2026 estava na 4.0.516)

Ou seja: sempre confira a documentação oficial antes de seguir tutorial antigo, inclusive este 😀

Próximo passo concreto pra hoje: rode o npx create-video@latest escolhendo o Hello World, suba o Studio e troque a primeira composição por algo seu

É o menor passo possível que já te dá vídeo em React rodando

até o próximo post!