--- title: "Remotion: um comercial de produto feito com código — Dardo" description: "O que é o Remotion, como fizemos com ele o comercial de 28,8 segundos do Superame, quando vale mais que o After Effects e quem precisa de licença." url: "https://dardo.studio/pt/blog/remotion-comercial-de-produto/" language: "pt" translations: {"en":"https://dardo.studio/en/blog/remotion-video/","es":"https://dardo.studio/es/blog/remotion-video-promocional/"} updated: "2026-10-29T16:24:45.872Z" --- [Blog](https://dardo.studio/pt/blog/) # Remotion: como fizemos um comercial de produto com código Fizemos o comercial de 28,8 segundos do Superame com Remotion. O que ele é, como renderiza, quem precisa de licença e quando o After Effects é melhor. Por [Nicolás Cerón](https://dardo.studio/pt/nicolas-ceron/) · 29 de outubro de 2026 ![Uma mesa de edição de vídeo à noite, iluminada por luminárias âmbar quentes, com uma única claquete carmesim escura no centro, cercada de cards de storyboard e do brilho de um notebook.](https://dardo.studio/_astro/01M646BX6JHAMYTJ2TDKX874EH_b0cme.webp) ## Pontos-chave - O Remotion faz vídeos com React: cada quadro é uma renderização dos seus componentes para um número de quadro, e a CLI exporta em MP4 (H.264 por padrão). - O comercial de 28,8 segundos do Superame (1920 × 1080, 60 fps) foi renderizado com Remotion 4.0.520 e feito com a interface do próprio produto. - O código combina com vídeos feitos de interface, com números que precisam bater entre cenas e com vídeos que precisam de muitas versões. - O After Effects combina com animação de personagens, ilustração e filmagens, e os templates de motion graphics também resolvem versões simples. - O Remotion é gratuito para pessoas e empresas de até 3 pessoas; as maiores precisam de licença de empresa (USD 25 por mês por assento no Creators, em 29 de outubro de 2026). - Se um estúdio entrega só o MP4, a sua equipe não conta para a licença do Remotion; se o projeto é seu, as duas equipes contam. - Coloque a mensagem na tela e desenhe cada formato como um layout próprio. ## 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](https://www.remotion.dev/docs/idea)). 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. - ** e ** 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](https://www.remotion.dev/docs/sequence), [Series](https://www.remotion.dev/docs/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()](https://www.remotion.dev/docs/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()](https://www.remotion.dev/docs/spring)). - **@remotion/transitions** traz as transições entre cenas ([transições](https://www.remotion.dev/docs/transitions)). - **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](https://www.remotion.dev/docs/parameterized-rendering)). 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](https://dardo.studio/pt/projetos/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](https://www.remotion.dev/docs/metadata)), e neste se lê “Made with Remotion 4.0.520”. O comercial do Superame, renderizado com Remotion 4.0.520: 28,8 segundos, 1920 × 1080, 60 fps, em espanhol. ### 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. | Tempo | Na tela | Interface usada | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | | 0:00–0:05 | “Lo lanzaste.” (Você lançou.) Um card de “Tu proyecto” (seu projeto) marcado como Publicado; embaixo aparece o comentário de um amigo: “Está brutal.” (Ficou incrível.) | Card de projeto, comentário | | 0:05–0:06 | O card se inclina e o status dá lugar a um preço: $650. | Card de projeto | | 0:06–0:10 | “¿Y el resto?” (E o resto?) O card se perde entre muitos outros cards de projetos, cada um com seu preço. | Cards da listagem | | 0:10–0:12 | A câmera se endireita sobre o card: #4, $650. | Card da listagem | | 0:12–0:16 | O painel de oferta abre em “Tu oferta $650” (sua oferta). O campo do link é preenchido, a oferta sobe até $781, o cursor clica em “Superar” e o botão fica verde: “Listo” (pronto). | Painel de oferta | | 0:16–0:19 | A lista do ranking. O projeto passa o #3 e o #2 e chega ao #1 com $781, acima de $742, $698 e $655. | Lista do ranking | | 0:19–0:22 | “Sí. El tuyo.” (Sim. O seu.) O card do #1 vira um card com degradê. | Card do #1 | | 0:22–0:25 | “Que te vean.” (Que te vejam.) | Só texto | | 0:25–0:28,8 | O logotipo do superame.lol é digitado letra por letra, com a frase “hazte ver.” (apareça.) | Logotipo | Os outros cards do vídeo são projetos de preenchimento. ### O arquivo entregue | Propriedade | Valor | | ------------------------ | -------------------------------------------------------------------------------------------------------------------- | | Duração | 28,8 segundos, 1.728 quadros | | Tamanho | 1920 × 1080 (16:9) | | Quadros por segundo | 60 | | Vídeo | H.264, perfil High, cerca de 3,3 Mbps | | Áudio | AAC-LC, estéreo, 48 kHz | | Arquivo | MP4 de 12,9 MB com início rápido (o índice fica no começo, então o vídeo começa a tocar antes de terminar de baixar) | | Comentário nos metadados | Made with Remotion 4.0.520 | Fonte: ffprobe no arquivo publicado ([superame-your-project-v33.mp4](https://dardo.studio/work/motion/superame-your-project-v33.mp4)), lido em 29 de outubro de 2026. Vídeos de lançamento Quer que a Dardo faça isso por você? Conte o que você precisa. Nico responde pessoalmente em até um dia útil. [Pedir uma proposta](https://dardo.studio/pt/contato/?service=product-launch-videos) · [Ver o serviço](https://dardo.studio/pt/servicos/videos-de-lancamento/) ## 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. | Momento do comercial | Ferramenta do Remotion | | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | Cenas em uma ordem fixa | [](https://www.remotion.dev/docs/series) ou [](https://www.remotion.dev/docs/sequence) com quadro de início e duração | | Linhas de texto que aparecem e deslizam | [interpolate()](https://www.remotion.dev/docs/interpolate) sobre o quadro, com clamp e easing | | A oferta subindo de $650 para $781 | interpolate() com uma curva de easing, arredondado para dólares inteiros | | Cards que passam do ponto e se acomodam | [spring()](https://www.remotion.dev/docs/spring) | | Transições entre cenas | do [@remotion/transitions](https://www.remotion.dev/docs/transitions) | | Nome do projeto, preços, idioma | [Props padrão](https://www.remotion.dev/docs/parameterized-rendering), substituídas por input props na renderização | ## 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](https://helpx.adobe.com/after-effects/desktop/motion-graphics/work-with-motion-graphics-templates/creating-motion-graphics-templates.html) 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](https://helpx.adobe.com/after-effects/using/data-driven-animations.html), [templates baseados em dados no Premiere](https://helpx.adobe.com/premiere-pro/using/data-driven-motion-graphics-templates.html)). A diferença está no material de que o vídeo é feito e em onde ele vive. | Situação | Código (Remotion) | After Effects ou outra ferramenta de motion | | ------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------ | | O vídeo mostra a interface do seu software | Renderiza componentes reais com dados reais | Reconstrói a interface a partir de capturas ou arquivos de design | | Números e listas que precisam bater entre cenas | Um valor alimenta todas as cenas; a ordem pode ser calculada | Mantidos à mão, ou com expressões que leem um arquivo de dados | | Muitas versões: idiomas, preços, tamanhos | Props e um loop de renderização sobre um conjunto de dados | Templates de motion graphics com textos, cores e números editáveis | | Animação de personagens, ilustração, timing feito à mão | Possível, mas cada curva é código | Feito para isso | | Filmagem, composição, efeitos | Consegue tocar e sobrepor vídeos, mas não é um compositor | Feito para isso | | Alterações depois da entrega | Um desenvolvedor, ou qualquer pessoa usando os controles de props do Remotion Studio | Um motion designer, ou um editor usando um template | | Revisão e histórico | Arquivos de texto: diffs, pull requests, renderizações automáticas | Arquivos de projeto abertos no aplicativo | 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](https://www.remotion.dev/docs/transparent-videos)). ## 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](https://www.remotion.dev/docs/encoding) 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](https://www.remotion.dev/docs/cli/render)). ```bash 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](https://www.remotion.dev/docs/dataset-render)). O [Remotion Lambda](https://www.remotion.dev/docs/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](https://www.remotion.dev/docs/cloudrun), 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