Remotion: como fizemos um comercial de produto com código

O que é o Remotion

O Remotion é um framework para fazer vídeos com React. A página inicial resume em uma frase: “Make videos programmatically” (faça vídeos com código). Em vez de colocar keyframes em uma linha do tempo, você escreve componentes. O Remotion passa a cada renderização um número de quadro, e o que o componente desenha para aquele quadro é a imagem (Remotion: a ideia central).

Um vídeo é uma composição: um componente mais quatro números, a largura, a altura, a duração em quadros e os quadros por segundo. O primeiro quadro é o 0 e o último é a duração menos um. As composições são pré-visualizadas no Remotion Studio, no navegador, e renderizadas em arquivo pela linha de comando ou pelo Node.js.

As peças que você usa em todo vídeo

• useCurrentFrame() devolve o quadro que está sendo desenhado. Tudo o que se move é uma função desse número.
• <Sequence> e <Series> colocam as cenas na linha do tempo. Dentro de uma sequência a contagem recomeça em 0, então cada cena é escrita como se abrisse o vídeo (Sequence, Series).
• interpolate() transforma o quadro em um valor: uma opacidade de 0 a 1 em 20 quadros, uma posição, um preço. Com clamp o valor para no fim da faixa, e uma curva de easing dá forma ao movimento no meio (interpolate()).
• spring() é uma animação baseada em física que passa um pouco do ponto e se acomoda, o tipo de movimento que as interfaces usam (spring()).
• @remotion/transitions traz as transições entre cenas (transições).
• As props levam os dados: textos, preços, cores, idioma. As props padrão permitem desenhar sem dados, e as input props substituem esses valores na renderização (vídeos parametrizados).

Como os quadros são desenhados com React e tecnologia web, cabe em um quadro tudo o que um navegador consegue desenhar: CSS, SVG, canvas, fontes web e os componentes de um produto que já é feito em React.

O exemplo: o comercial de 28,8 segundos do Superame

O Superame (superame.lol) é um ranking público de projetos em que a posição é comprada em dólares inteiros: o maior total verificado fica com o #1. A Dardo desenhou e construiu o produto (case Superame), e também fizemos o comercial dele, o exemplo deste artigo.

Ele tem 28,8 segundos, está em espanhol, sobre fundo branco, e é feito com a própria interface do Superame: os cards de projeto, o painel de oferta com o botão “Superar” e a lista do ranking. Publicamos o vídeo no dardo.studio em 14 de setembro de 2026, e uma versão sem som de 1280 × 720 roda no card do Superame do nosso portfólio.

O próprio arquivo conta como foi feito. O Remotion grava “Made with Remotion” e a versão no campo de comentário dos arquivos que renderiza (Remotion: metadados de vídeo), e neste se lê “Made with Remotion 4.0.520”.

Cena a cena

Medimos os tempos com quadros extraídos do arquivo, dois por segundo e dez por segundo em volta da oferta, então cada corte tem uma margem de meio segundo.

Os outros cards do vídeo são projetos de preenchimento.

O arquivo entregue

Fonte: ffprobe no arquivo publicado (superame-your-project-v33.mp4), lido em 29 de outubro de 2026.

Por que este comercial combina com código

Três características deste vídeo fazem o código se encaixar. São também as perguntas a fazer sobre o seu próprio vídeo de lançamento.

Ele é feito de interface

Cada cena é um card, um painel, uma lista ou uma linha de texto, que é exatamente do que o produto é feito. Se o produto é construído em React, o Remotion pode renderizar os componentes reais, com as fontes e cores dele, em vez de capturas redesenhadas. Se não for, uma interface continua sendo caixas, texto e números, que HTML e CSS desenham com precisão. Um vídeo de rostos, mãos ou personagens ilustrados não tem componentes para reaproveitar.

Os números precisam bater

A oferta sobe de $650 para $781, e duas cenas depois o mesmo $781 aparece no card do #1, acima dos $742 que estavam no topo. O comercial segue a regra do produto: o maior total fica com o #1. Em código, um único valor pode alimentar todas as cenas, então um preço novo muda todas as cenas na próxima renderização, e a ordem da lista pode ser calculada em vez de arrumada à mão.

O contador passa por $651, $655, $673, $702, $741, $770 e $780 antes de parar: rápido no meio, lento nas pontas. No Remotion, esse tipo de contagem é uma chamada de interpolate() sobre o número do quadro com uma curva de easing, arredondada para dólares inteiros.

Ele pode precisar de versões

O Superame funciona em espanhol, português e inglês, e o comercial existe em espanhol, como um único arquivo 16:9. Com os textos, os preços e o nome do projeto como props, uma versão em português ou inglês é outro conjunto de props e outra renderização, mais uma conferência de que as frases mais longas continuam cabendo. Uma versão 4:5 ou 9:16 funciona do mesmo jeito, com uma diferença: o layout precisa ser desenhado para o novo formato (veja os formatos abaixo).

Como cada momento vira Remotion

Não vamos publicar o código do projeto, então esta tabela não é uma cópia dos nossos arquivos. Ela mostra a ferramenta documentada do Remotion para cada tipo de momento do comercial.

Código ou After Effects?

O After Effects e as outras ferramentas de motion design não são um jeito antigo de fazer a mesma coisa: são melhores para outro tipo de trabalho. Elas também resolvem versões: quem anima no After Effects pode expor textos, cores e números em um template de motion graphics que um editor altera no Premiere Pro. O After Effects consegue animar a partir de arquivos JSON, CSV e TSV, e os templates baseados em dados recebem planilhas no Premiere (animação baseada em dados no After Effects, templates baseados em dados no Premiere). A diferença está no material de que o vídeo é feito e em onde ele vive.

Nossa regra prática: se os quadros são principalmente interface, texto e números, escreva; se são principalmente pessoas, desenhos ou texturas, anime à mão. E dá para combinar. O Remotion renderiza ProRes 4444 com canal alfa, que o Premiere Pro, o Final Cut Pro e o DaVinci Resolve abrem, então uma sequência de interface feita em código pode entrar em um vídeo editado à mão (Remotion: vídeos transparentes).

Renderização: em uma máquina ou na nuvem

A linha de comando renderiza uma composição em arquivo. Sem opções, ela codifica em H.264, o codec com a melhor compatibilidade com navegadores no guia de codificação do Remotion. A opção --crf troca tamanho de arquivo por qualidade, --props passa dados a partir de um arquivo JSON e --scale renderiza maior ou menor que a composição (opções de renderização pela CLI).

npx remotion render src/index.ts LaunchVideo out/lancamento-pt.mp4 --props=./props/pt.json

Para muitas versões, as APIs de Node.js do Remotion percorrem um conjunto de dados: selecionam a composição para cada item e renderizam com esse item como input props (renderizar a partir de um dataset).

O Remotion Lambda renderiza na AWS: divide o vídeo em partes pequenas que muitas funções Lambda renderizam em paralelo, junta as partes e envia o resultado para o S3. O Remotion o descreve como a forma mais rápida e escalável de renderizar seus vídeos; entre os limites documentados estão cerca de 80 minutos de vídeo Full HD por renderização e a ausência de AV1. O Remotion Cloud Run, o equivalente no Google Cloud, está em alfa e, segundo a documentação, “not actively being developed” (sem desenvolvimento ativo), então não começaríamos um fluxo novo nele.

Para um único vídeo de lançamento de uns 30 segundos, renderizar em uma máquina com a CLI é o ponto de partida documentado. A renderização na nuvem compensa a configuração quando você renderiza muitas versões ou renderiza sob demanda.

Som, legendas e formatos

Áudio

Os arquivos de áudio ficam na pasta public do projeto e tocam pelo componente <Audio>. Mais tags mixam mais faixas, o volume pode acompanhar o quadro com interpolate() (o exemplo documentado é um fade-in de um segundo) e trimBefore escolhe um trecho do arquivo (importar áudio, controlar o volume). O arquivo do Superame tem uma faixa AAC estéreo a 48 kHz.

Legendas

O @remotion/captions trabalha com transcrições do Whisper.cpp em um servidor, do Whisper no navegador ou das APIs da OpenAI e da ElevenLabs (transcrever áudio). As legendas podem ser gravadas na imagem ou exportadas como arquivo .srt junto com a renderização (exportar legendas).

Sem som

O Facebook deixa cada pessoa escolher se os vídeos do feed começam com som (Ajuda do Facebook), e a especificação de vídeo para o feed do Facebook marca as legendas como opcionais, mas recomendadas (guia de anúncios da Meta). O LinkedIn marca as legendas como opcionais (especificações de vídeo do LinkedIn). Um vídeo de lançamento precisa fazer sentido sem som. O do Superame faz: a mensagem está no texto na tela, “Lo lanzaste.”, “¿Y el resto?”, “Sí. El tuyo.”, “Que te vean.”, e a mesma versão roda sem som no nosso portfólio.

Formatos

O próprio exemplo do Remotion registra o mesmo componente duas vezes, em 1920 × 1080 e em 1080 × 1920 (a ideia central). Isso torna fácil renderizar uma versão vertical, não desenhá-la: os cards do Superame são largos, então uma versão 4:5 ou 9:16 precisaria de um layout próprio.

Quem precisa de licença do Remotion

O código do Remotion é público, mas ele não é gratuito para todas as empresas. A licença tem dois níveis:

• Licença gratuita: pessoas físicas, empresas com fins lucrativos de até 3 funcionários, organizações sem fins lucrativos e quem está avaliando o Remotion sem usá-lo ainda de forma comercial. O uso comercial é permitido.
• Licença de empresa (Company License): todos os demais, o que na prática significa empresas de 4 pessoas ou mais.

Preços do remotion.pro.

Se um estúdio faz o seu vídeo

As perguntas frequentes da licença do Remotion respondem diretamente. Se você recebe só o arquivo final, como um MP4, a sua empresa não é usuária do Remotion e o tamanho da sua equipe não conta: o estúdio precisa de licença de empresa se tiver 4 pessoas ou mais, e, se não tiver, a licença gratuita cobre. Se o projeto Remotion é seu ou é operado por você, por exemplo para renderizar versões novas por conta própria, as equipes das duas empresas são somadas, e a licença é comprada por quem detém a propriedade intelectual do projeto; o estúdio pode administrá-la por você.

O arquivo da licença também avisa que os termos mudam com o Remotion 5.0. O pull request com o texto novo lista duas mudanças: prestadores de serviço passam a contar para o tamanho da equipe, e a licença de empresa fica vinculada aos termos e condições do Remotion. Isto é um resumo, não aconselhamento jurídico; leia a licença e as perguntas frequentes para o seu caso.

O que ter em mãos antes de encomendar um vídeo de lançamento

• A interface que você quer mostrar, do jeito que vai ao ar: telas, componentes, o design system.
• A história em cinco a oito momentos, com a frase de texto de cada um.
• Os números que precisam bater entre cenas, e a regra do produto que eles seguem.
• Todas as versões de que você vai precisar (idiomas, formatos, durações), decididas antes da primeira renderização, não depois.
• O plano de som: licença da música, locução, legendas.
• Onde o vídeo vai rodar, e a especificação de cada plataforma.
• Quem fica com o projeto depois da entrega, o que define quem precisa da licença do Remotion.

O que este exemplo não mostra

Publicamos o arquivo final, não o projeto por trás dele. Este artigo não descreve o código nem como as composições estão organizadas, quanto tempo levou, o que tem na faixa de áudio, quanto custou nem quantas pessoas o viram, e não atribui resultados a ele. Os tempos de cada cena vêm de quadros que extraímos, com margem de meio segundo. O comercial existe em espanhol e em 16:9; as outras versões citadas acima são o que o código torna possível, não arquivos que existem.

Como a Dardo pode ajudar

Desenhamos e construímos produtos, e os vídeos que os lançam: vídeos de lançamento feitos em código a partir da sua interface real, e design de produto para a interface em si. O case Superame mostra o produto por trás deste comercial. Se o vídeo faz parte de um lançamento maior, o nosso checklist de lançamento de rebranding cobre o que acontece em volta, e as boas práticas para sites SaaS cobrem as páginas de produto de que um site SaaS precisa. Conte sobre o seu lançamento.