Remotion Studio: como editar e animar vídeo com drag and drop sem largar o código

Fala aí, beleza? Dá pra pegar um elemento do vídeo, arrastar ele na tela, e o valor que você arrastou aparecer escrito dentro do seu código logo em seguida

Essa é a ideia do workflow interativo do Remotion, e o ambiente onde ele acontece é o Remotion Studio

O ponto que muda tudo: as edições visuais não ficam presas num arquivo de projeto fechado, elas são gravadas de volta na base de código. Você arrasta, ele escreve, e o arquivo continua sendo a verdade

Detalhe de nomenclatura, porque isso confunde quem chegou pelo tutorial antigo: no Remotion 4.0 o que se chamava Remotion Preview foi renomeado pra Remotion Studio. É a mesma linhagem, nome novo 🙂

Como abrir o Remotion Studio

Não tem instalador, nem next, next e finish. É um comando do CLI dentro do projeto

1. Rode o comando na raiz do projeto Remotion:

npx remotion studio

2. Espere o servidor subir. Ele sobe na porta 3000 por padrão, ou numa porta mais alta caso a 3000 esteja ocupada, e o Studio abre no navegador automaticamente

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

O erro comum deste passo é assumir que a 3000 é fixa. Se você já tem outra coisa rodando ali, ele sobe numa porta mais alta, e aí ficar teimando em localhost:3000 só te faz perder tempo. Olhe a URL que subiu

3. Se você não quer que ele abra o navegador sozinho, ou quer mandar em qual navegador ele abre, use as flags de abertura:

npx remotion studio --no-open
npx remotion studio --browser=... --browser-args=...

4. Precisa ligar ou desligar os atalhos de teclado? --keyboard-shortcuts-enabled. Precisa de cross-site isolation? --enable-cross-site-isolation

5. Defina o editor padrão que vai abrir os arquivos com --editor. Os editores aceitos são vscode, cursor, windsurf, zed, vscodium, webstorm e sublime-text

6. E se você toca o projeto com agente, dá pra definir o agente de código padrão do Studio com --coding-agent, que aceita codex, cursor, copilot e claude-code

Combinar isso com o modo plano do Claude Code é uma boa quando você quer ver a intenção do agente antes dele sair editando os arquivos da composição

O que dá para editar arrastando no Studio

Aqui é onde o negócio fica massa. Ele não te dá só um play bonito, te dá gesto de edição de verdade

O que dá para selecionar:

Sequences, props de sequence, efeitos, props de efeito, keyframes e segmentos de easing

Ou seja, a granularidade não para no "elemento inteiro": você chega no keyframe e no pedaço da curva de easing

Movendo e soltando coisa na tela:

Selecionou a sequence e apareceu o contorno? Arrastar esse contorno move a sequence, e o movimento é escrito no código atualizando a propriedade style.translate

Dá pra soltar efeitos em cima de sequences com contorno selecionado, quando aquela sequence suporta efeitos

E em efeitos e props de efeito selecionados, você arrasta as alças de coordenada UV direto no preview

Se você já montou automação num editor drag and drop do n8n, o instinto é o mesmo: a mão resolve o posicionamento mais rápido do que a cabeça chutando número

Mexendo na timeline:

Keyframe selecionado pode ser arrastado na horizontal pra mudar o frame

Selecionou vários? Eles se movem em conjunto

E keyframe selecionado também pode ser apagado

Os controles visuais de estilo da Sequence:

Ao editar visualmente uma Sequence na timeline, os controles visuais de estilo incluem offset, escala, rotação, transform origin e opacidade

É literalmente o painelzinho que todo editor de vídeo tem, só que a saída dele é código

Easing sem chutar número:

Esse aqui é o meu favorito da lista: ao editar easings compatíveis com Bezier, o Studio grava o easing de volta no código como um Easing.bezier(...) explícito

Acertar curva de easing na unha é chato, ajustar puxando a curva é gostoso. E no fim fica um valor explícito no arquivo, não uma configuração escondida

Errou? Volta

As edições visuais podem ser desfeitas e refeitas por atalho: Cmd/Ctrl + Z desfaz, Cmd/Ctrl + Y refaz

E pra circular entre composições sem tirar a mão do teclado tem o Quick Switcher em Cmd/Ctrl + K, que vira paleta de comandos assim que você começa a digitar com >

Edição visual x edição no código: qual usar em cada momento

Não são duas ferramentas concorrentes, são dois workflows do MESMO projeto. Se liga em como eles se dividem:

Repara na última linha, porque ela é o coração da parada: os dois workflows escrevem no mesmo lugar

O código React é a fonte da verdade e você troca de workflow a qualquer momento. Nada aqui substitui o código, o drag and drop só é um caminho mais curto até o valor certo

Editei no Studio e nada foi salvo no código: por que acontece

Sintoma: você ajusta bonitinho na interface, manda salvar, e o arquivo não muda. Ou o valor volta do jeito que estava

Causa: o Remotion analisa estaticamente o arquivo-fonte pra saber onde escrever. Se ele não consegue enxergar o ponto exato do código que corresponde àquele valor, não tem onde gravar

São dois casos bem concretos:

• O editor de props só salva as edições visuais de volta no código quando defaultProps é um objeto literal inline no <Composition> ou no <Still>. Tirou o objeto de lá pra uma variável? Perdeu o salvamento
• O visualControl() só funciona pro salvamento se o primeiro argumento da função for estático, justamente porque é feita análise estática do arquivo-fonte

Solução: traga o defaultProps de volta pra dentro do <Composition> ou <Still> como objeto literal inline, e deixe o primeiro argumento do visualControl() estático

<Composition
  id="MinhaComposicao"
  component={MinhaComposicao}
  defaultProps={{
    titulo: 'Hora de Codar',
    velocidade: 1.5,
  }}
/>

Como prevenir: decida isso no começo do projeto, não depois. Refatorar defaultProps pra fora "pra organizar" parece limpeza, mas é o que arranca o botão de salvar do seu fluxo. Tome cuidado!

E lembra do que o visualControl() resolve: ele existe pra você achar visualmente o valor ideal de uma constante fixa no código. Valores primitivos (string e number) inferem o tipo do controle automaticamente, e pra schema mais complexo você passa um schema Zod como terceiro argumento

O Studio substitui escrever código no Remotion?

Não substitui. E olha que eu queria dizer que sim, porque arrastar é gostoso demais

O código React é a fonte da verdade. O drag and drop é atalho pra chegar no valor certo mais rápido, não um editor paralelo que vive por conta própria

A prova disso tá numa flag: a edição interativa pode ser ligada ou desligada com --interactive-editing-enabled

Com ela desligada, o Studio continua te dando preview e navegação para o código-fonte, mas desabilita os contornos de preview, o inspetor de sequence, os controles visuais, a seleção na timeline e os gestos de edição da timeline

Traduzindo: tira a camada de gesto e sobra o essencial, que é ver o vídeo e ir pro código. O contrário não existe, não dá pra tirar o código e ficar só no gesto

E quanto custa entrar nisso?

O uso do Remotion é gratuito para indivíduos, para organizações com fins lucrativos de até 3 funcionários, para organizações sem fins lucrativos e pra quem está avaliando a ferramenta, inclusive para vídeos comerciais

A licença corporativa tem duas opções de preço:

• Remotion for Creators: US$ 25 por seat por mês, sem mínimo de seats nem gasto mínimo quando comprado sozinho
• Remotion for Automators: US$ 0,01 por render, com gasto mínimo de US$ 100 por mês

Ou seja, pro dev solo que quer montar vídeo programático, a barreira de entrada é o tempo de aprender, não a fatura

Antes de partir pro projeto

Falando em ferramenta que monta projeto pra você, neste vídeo do canal eu mostro o novo Google AI Studio criando um app fullstack com banco de dados:

Conclusão

A régua é simples: arrasta quando o gesto chega mais rápido no valor certo, escreve código quando a lógica manda, e no fim o arquivo continua sendo a verdade dos dois jeitos

O Remotion Studio não é uma ferramenta separada que te tira do código, ele é a camada visual em cima do mesmo projeto

Próximo passo prático? Roda npx remotion studio no seu projeto e vai clicando nas sequences pra sentir o que responde ao gesto

Aproveita e alinha as versões: a linha de release atual é a 4.0 (o pacote principal remotion está publicado no npm na 4.0.516), e a documentação orienta manter a mesma versão em todos os pacotes remotion e @remotion/*. Versão desalinhada é dor de cabeça garantida

E se você programa com agente de código, olha as Agent Skills oficiais do Remotion, documentadas em remotion.dev/docs/ai/skills e publicadas no repositório de skills da organização

Bora ver na prática? até o próximo post! 😀