Como Eu Crio Vídeos Promocionais Com Código, Não Com Editores

Como Eu Crio Vídeos Promocionais Com Código, Não Com Editores

Eu estava olhando para minha timeline do Adobe Premiere pela terceira hora seguida, arrastando camadas de texto pixel por pixel, quando um pensamento me atingiu e mudou tudo: eu sou um desenvolvedor. Por que estou editando vídeos como um YouTuber de 2015?

Isso foi há seis meses. Desde então, já entreguei mais de uma dúzia de vídeos promocionais — promos de escola de IA, demos de portfólio, reels de showcase para clientes — e não abri um editor de vídeo tradicional nenhuma vez. Nem Premiere. Nem Final Cut. Nem mesmo CapCut. Cada vídeo foi escrito como código React, renderizado a partir do meu terminal e, na maioria dos casos, o componente inicial foi estruturado pelo Claude Code antes mesmo de eu tocar no teclado.

A ferramenta que tornou isso possível é o Remotion. E o acelerador de workflow que transformou uma curva de aprendizado íngreme em uma tarde tranquila é o sistema de skills do Claude Code. Juntos, eles se tornaram minha arma secreta para produzir conteúdo promocional polido em um ritmo que deixaria qualquer agência de produção de vídeo nervosa.

Aqui está a parte que ainda surpreende as pessoas quando eu conto: os vídeos ficam bons. Não "bons para algo gerado por código." Realmente bons. Animações suaves, esquemas de cores da marca, áudio sincronizado, transições profissionais. O tipo de coisa que você normalmente pagaria de $500 a $2.000 para um freelancer produzir.

Mas tem um detalhe que ninguém te avisa quando você começa nesse caminho — e isso quase me fez desistir antes de eu descobrir a solução. Vou chegar lá daqui a pouco.

Por Que a Edição de Vídeo Tradicional Travou Meu Cérebro

Vou ser honesto sobre uma coisa. Eu consigo construir aplicações full-stack, configurar clusters Kubernetes e escrever relatórios de auditoria de segurança. Mas me peça para keyframear uma animação de texto no After Effects? Meus olhos viram vidro.

O problema não é complexidade — eu lido com sistemas complexos diariamente. O problema é que a edição de vídeo tradicional é fundamentalmente manual. Cada mudança é um arraste de mouse. Cada revisão significa refazer o trabalho à mão. Quer mudar a cor da marca em 47 elementos de texto? Boa sorte. São 47 cliques individuais.

Para um desenvolvedor, isso é enlouquecedor. Nós temos variáveis. Nós temos loops. Nós temos componentes que aceitam props e renderizam de forma diferente com base em dados. A ideia de fixar elementos visuais arrastando-os por uma timeline parece como escrever código movendo blocos físicos em cima de uma mesa.

E depois tem o problema de versionamento. Tente colocar um arquivo de projeto do Adobe Premiere no Git. Eu desafio você. Você não consegue fazer diff. Não consegue criar branch. Não consegue fazer pull request. É um blob binário que fica ali, zombando de toda a sua disciplina de engenharia de software.

O Remotion resolve cada um desses problemas. Mas eu só entendi realmente o quão poderoso ele é quando o combinei com a capacidade do Claude Code de gerar e modificar componentes React sob demanda. É aí que essa história fica interessante.

O Que o Remotion Realmente É (E Por Que Desenvolvedores Devem Se Importar)

O Remotion é um framework React para criar vídeos programaticamente. Essa frase parece simples, mas as implicações são enormes. Cada frame do seu vídeo é um componente React. A posição na timeline é um número que você lê de um hook. Animações são apenas funções de interpolação. E tudo é renderizado para MP4 a partir do seu terminal.

Eis o que isso significa na prática. Em vez disso (arrastar caixas no Premiere):

Você escreve isto:

import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";

export const TitleCard: React.FC<{ title: string; color: string }> = ({ title, color }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, fps * 0.5], [0, 1], {
    extrapolateRight: "clamp",
  });

  const translateY = interpolate(frame, [0, fps * 0.5], [30, 0], {
    extrapolateRight: "clamp",
  });

  return (
    <div style={{
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      height: "100%",
      backgroundColor: color,
      opacity,
      transform: `translateY(${translateY}px)`,
    }}>
      <h1 style={{ fontSize: 72, color: "white", fontWeight: 800 }}>{title}</h1>
    </div>
  );
};

Isso é um cartão de título com animação de fade-in e slide-up. Levou 25 linhas de código. Mudar o título? Passe uma prop diferente. Mudar a cor da marca? Uma variável. Mudar o timing da animação? Ajuste dois números.

Agora imagine fazer isso para um vídeo promocional inteiro — sequência de intro, destaques de funcionalidades, depoimentos, chamada para ação, encerramento. Tudo como componentes React compostos. Tudo com controle de versão. Tudo renderizável a partir de um único comando no terminal.

Isso muda tudo sobre a velocidade com que você pode produzir conteúdo em vídeo. Mas a verdadeira aceleração aconteceu quando eu trouxe o Claude Code para o processo.

O Workflow Remotion + Claude Code Que Mudou Meu Processo

Aqui está meu workflow real, passo a passo. Este é o guia rápido que eu mantenho fixado no meu terminal, e vou te mostrar não apenas o que fazer, mas por que cada etapa importa e onde as coisas podem dar errado.

Passo 1: Configuração do Projeto (Apenas Uma Vez)

cd "/Users/mejba/Local Storage/AI Development/vibe-design/remotion/mejba-demo"
npm install

Este é o diretório raiz do seu projeto Remotion. A estrutura segue as convenções padrão do React — src/ para componentes, public/ para assets estáticos, out/ para vídeos renderizados. Nada exótico aqui.

Dica profissional: Mantenha seus projetos Remotion em um diretório dedicado junto com seus outros trabalhos de desenvolvimento. Eu mantenho os meus na pasta vibe-design porque é onde todos os meus projetos de código criativo ficam. Nomenclatura importa — quando você tiver três ou quatro projetos de vídeo, vai agradecer a si mesmo pela organização clara.

Passo 2: Adicione Seus Assets

Drop audio/images into:
mejba-demo/public/

É aqui que vão sua música de fundo, arquivos de logo, capturas de tela de produto e qualquer outra mídia. O Remotion serve esses arquivos via staticFile(), que mapeia para o diretório public/ da mesma forma que o Create React App faz.

Aqui está o que aprendi da maneira difícil: o formato do áudio importa. MP3 funciona. WAV funciona. Mas se você colocar um arquivo OGG ou algum codec obscuro, o preview pode rodar bem no Chrome, mas a renderização vai engasgar. Use MP3 para música de fundo. Eu mantenho um arquivo chamado bgm.mp3 em cada projeto — troque-o quando quiser um áudio diferente, mas mantenha a nomenclatura consistente.

Passo 3: Preview no Navegador

npm start
# Opens at http://localhost:3000

Isso inicia o Remotion Studio — um ambiente de preview completo que roda no seu navegador. Você tem uma timeline, navegação frame a frame, edição de props dos componentes e renderização em tempo real. É como ter um editor de vídeo, mas tudo que você vê é a saída do seu código React.

O preview é onde você vai passar a maior parte do seu tempo de desenvolvimento. E aqui vai um truque de workflow que levei semanas para descobrir: você pode editar o código do seu componente enquanto o preview está rodando, e ele faz hot-reload instantaneamente. Mude uma cor, salve o arquivo, e o preview atualiza em menos de um segundo. Esse ciclo de feedback rápido é o que faz o desenvolvimento com Remotion parecer mais com desenvolvimento front-end do que com produção de vídeo.

Passo 4: Edite Seus Componentes de Vídeo

É aqui que o trabalho criativo real acontece. Suas composições de vídeo vivem como componentes React no diretório src/:

mejba-demo/src/AISchoolPromo.tsx   # AI School promotional video
mejba-demo/src/MejbaDemo.tsx       # Portfolio demo reel

Cada arquivo é um componente de vídeo completo. Aqui está uma estrutura simplificada de como um componente de vídeo promocional se parece:

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate } from "remotion";
import { Audio, Video } from "@remotion/media";
import { staticFile } from "remotion";

export const AISchoolPromo: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
      {/* Intro sequence: frames 0-90 (3 seconds at 30fps) */}
      <Sequence from={0} durationInFrames={90}>
        <IntroSlide title="AI School" subtitle="Learn to Build the Future" />
      </Sequence>

      {/* Feature highlights: frames 90-450 */}
      <Sequence from={90} durationInFrames={360}>
        <FeatureShowcase features={courseFeatures} />
      </Sequence>

      {/* Testimonials: frames 450-720 */}
      <Sequence from={450} durationInFrames={270}>
        <TestimonialCarousel testimonials={studentReviews} />
      </Sequence>

      {/* CTA: frames 720-900 */}
      <Sequence from={720} durationInFrames={180}>
        <CallToAction url="aischool.mejba.me" />
      </Sequence>

      {/* Background music throughout */}
      <Audio src={staticFile("bgm.mp3")} volume={0.3} />
    </AbsoluteFill>
  );
};

Está vendo o que está acontecendo? Cada seção do vídeo promocional é uma <Sequence> com um frame inicial e uma duração. Cada sequência renderiza um componente diferente. Os componentes em si gerenciam suas próprias animações usando useCurrentFrame() e interpolate().

É aqui que o Claude Code se torna incrivelmente poderoso. Mais sobre isso em um momento — mas primeiro, deixe-me te mostrar como registrar e renderizar essas composições.

Passo 5: Registre Novas Composições

Cada componente de vídeo precisa ser registrado em src/Root.tsx. Este é o ponto de entrada do Remotion — pense nele como seu App.tsx, mas para vídeos:

<Composition
  id="MyNewVideo"
  component={MyNewVideo}
  durationInFrames={900}  // 30s at 30fps
  fps={30}
  width={1920}
  height={1080}
/>

O id é o que você referencia ao renderizar. durationInFrames dividido por fps te dá a duração do vídeo em segundos. Largura e altura definem a resolução — 1920x1080 para HD padrão, 1080x1080 para quadrados de Instagram/redes sociais, 1080x1920 para stories verticais.

Um erro que cometi no início: eu ficava fazendo composições longas demais. Um promo de 30 segundos a 30fps são 900 frames. Só isso. Minha primeira tentativa tinha 3.600 frames porque eu estava pensando em "duração do vídeo" em vez de "contagem de frames." A renderização demorou uma eternidade e o vídeo tinha espaços mortos constrangedores. Combine sua contagem de frames com seu conteúdo, não o contrário.

Passo 6: Renderize o Vídeo Final

# AI School Promo
npx remotion render src/index.tsx AISchoolPromo out/ai-school-promo.mp4

# Portfolio Demo
npx remotion render src/index.tsx MejbaDemo out/video.mp4

# Any composition
npx remotion render src/index.tsx <CompositionId> out/<filename>.mp4

Este é o momento mágico. Um comando, e seu código React se torna um arquivo MP4. O Remotion renderiza cada frame como uma captura de tela do navegador, codifica tudo com FFmpeg e produz um arquivo de vídeo.

Renderizar um vídeo de 30 segundos em 1080p normalmente leva de 2 a 4 minutos no meu MacBook. Composições mais longas ou resoluções mais altas levam proporcionalmente mais tempo. Se você precisa de renderizações mais rápidas, o Remotion oferece renderização em nuvem via Lambda, mas para conteúdo promocional, a renderização local é mais que suficiente.

Passo 7: Abra e Revise

open out/

Seu vídeo renderizado fica no diretório out/. Assista, revise, e se algo precisar de ajuste — volte para o passo 4, edite o componente e renderize novamente. O tempo de ciclo de "quero mudar isso" até "assistindo o vídeo atualizado" é tipicamente menos de 5 minutos. Compare isso com os tempos de re-exportação no Premiere ou After Effects.

Passo 8: Faça Upload e Publique

Vá para youtube.com/upload e arraste o arquivo .mp4. Pronto.

Ou faça upload para o Vimeo, incorpore no seu site, poste no LinkedIn, anexe a uma campanha de e-mail — a saída é um arquivo MP4 padrão que funciona em qualquer lugar.

Se você chegou até aqui, já entende o workflow básico. Mas o workflow básico não é o que torna essa abordagem especial. O verdadeiro poder aparece quando você traz o Claude Code para o processo criativo.

Onde o Claude Code Transforma Esse Workflow em um Superpoder

Aqui está o que a maioria das pessoas não percebe sobre o Remotion: a parte de codificação é o gargalo. Não porque o Remotion é difícil de programar — na verdade é bem agradável — mas porque projetar animações, calcular timing e compor sequências visuais exige muita iteração.

É exatamente aqui que o Claude Code brilha. Eu o uso como parceiro de código criativo durante todo o processo de criação de vídeos.

Estruturando Novos Componentes de Vídeo

Quando eu preciso de um novo vídeo promocional, não começo do zero. Eu descrevo o que quero para o Claude Code:

Create a Remotion component for a 30-second AI School promotional video
with 4 sections: intro with logo animation, 3 feature highlights with
slide-in text, a testimonials section, and a CTA with pulsing button effect.
Use dark theme (#0a0a0a background) with electric blue (#00d4ff) accents.

O Claude Code gera o componente completo — imports, animações, sequências, timing, estilização — tudo. E porque ele entende React profundamente, a saída não é um boilerplate genérico. É um componente funcional com curvas de animação bem pensadas, timing de frames adequado e uma estrutura de composição limpa.

O primeiro rascunho raramente é perfeito. Mas está 80% pronto, o que significa que gasto meu tempo refinando em vez de construindo do zero. Isso é uma experiência criativa fundamentalmente diferente.

Iterando em Animações

É aqui que o workflow com Claude Code realmente acelera. Em vez de ajustar valores de interpolação manualmente, testar, ajustar de novo — eu descrevo o que quero:

Make the title slide in from the left instead of fading in,
and add a subtle scale effect to the feature icons.
The transition between sections should use a wipe effect.

O Claude Code modifica o componente, ajustando as chamadas de interpolate(), adicionando propriedades transform e reestruturando o timing das Sequence. Eu faço o preview no Remotion Studio, e se não estiver bem, descrevo o próximo ajuste. O ciclo de iteração cai de minutos para segundos.

Gerando Vídeos Orientados por Dados

Esta é a abordagem que mais me economizou tempo. Vídeos Remotion podem receber props — o que significa que você pode gerar vídeos diferentes a partir do mesmo template passando dados diferentes.

Eu pedi ao Claude Code para construir um componente template que aceita um objeto JSON com título, funcionalidades, depoimentos, cores e texto de CTA. Agora, quando preciso de um promo para um produto diferente, não redesenho o vídeo. Escrevo um novo arquivo de dados e renderizo.

const aiSchoolData = {
  title: "AI School",
  tagline: "Learn to Build the Future",
  features: ["Hands-on Projects", "Expert Mentors", "Career Support"],
  primaryColor: "#00d4ff",
  ctaUrl: "aischool.mejba.me",
};

const cybersecData = {
  title: "xCyberSecurity",
  tagline: "Enterprise Protection",
  features: ["Penetration Testing", "Compliance Audits", "24/7 Monitoring"],
  primaryColor: "#ff3333",
  ctaUrl: "xcybersecurity.io",
};

Mesmo template. Dados diferentes. Dois vídeos com marcas completamente diferentes. Essa é a vantagem do desenvolvedor — pensamos em abstrações, e o Remotion nos permite aplicar esse pensamento à produção de vídeo.

A Integração com o Sistema de Skills do Remotion

O Remotion na verdade publica um pacote de skills — um conjunto de regras e padrões especificamente projetados para assistentes de codificação com IA. Esses skills codificam boas práticas para estrutura de composição, padrões de animação, manipulação de áudio e configuração de renderização. Quando o Claude Code tem acesso a esses padrões, o código gerado segue as convenções do Remotion com precisão.

Os skills cobrem tudo, desde a configuração básica de <Composition> até funcionalidades avançadas como parametrização com Zod schema, @remotion/media para controle de vídeo/áudio, @remotion/transitions para transições de cena e @remotion/three para conteúdo 3D. É como dar ao Claude Code um livro didático de Remotion para consultar enquanto ele escreve seus componentes de vídeo.

A Referência Rápida Que Eu Mantenho na Minha Mesa

Depois de criar dezenas de vídeos com esse workflow, condensei tudo em um cartão de referência rápida. É nisso que eu realmente olho durante uma sessão de produção:

É isso. Cinco comandos cobrem todo o workflow de produção. Todo o resto é código React.

O Detalhe Que Quase Me Fez Desistir

Prometi antes que contaria sobre o detalhe. Aqui está.

Quando comecei com o Remotion, tentei fazer vídeos cinematográficos. Movimentos de câmera complexos. Efeitos de partículas. Transformações 3D com profundidade. E os previews ficavam incríveis no Chrome.

Então eu renderizei o vídeo. As animações estavam travadas. O timing estava errado. Algumas propriedades CSS que pareciam suaves a 60fps no navegador ficavam terríveis a 30fps no vídeo renderizado.

Eis o que eu não entendia: o Remotion renderiza cada frame independentemente. Não há motion blur. Não há interpolação de frames entre renderizações. Cada frame é uma captura de tela estática do seu componente React naquele exato ponto no tempo. Se sua animação se move rápido demais entre frames, fica com aparência picotada no vídeo final.

A solução é simples, mas não óbvia: projete suas animações para 30fps desde o início. Mantenha movimentos suaves e relativamente lentos. Use curvas de easing (o Remotion tem física de mola integrada via spring()) em vez de interpolação linear. E teste navegando pela timeline frame a frame, não reproduzindo o preview em velocidade total.

Depois que internalizei isso, a qualidade das minhas renderizações melhorou drasticamente. Mas eu queria que alguém tivesse me dito isso no primeiro dia, em vez de me deixar desperdiçar uma semana debugando animações "quebradas" que na verdade estavam apenas mal projetadas para renderização frame a frame.

Erros Que Cometi Para Que Você Não Precise Cometer

Além da questão do frame rate, aqui estão as outras armadilhas em que pisei:

Problemas de sincronização de áudio. Se sua música de fundo não combina exatamente com a duração do vídeo, você vai ter ou silêncio no final ou cortes abruptos. Sempre ajuste seu áudio para corresponder ao cálculo de durationInFrames / fps. Eu uso uma regra simples: se meu vídeo tem 30 segundos (900 frames a 30fps), meu arquivo de áudio tem exatamente 30 segundos. Nem mais, nem menos.

Surpresas com carregamento de fontes. Fontes personalizadas precisam ser carregadas antes do primeiro frame renderizar. Se você usa @remotion/google-fonts, importe e carregue a fonte no topo do seu componente. Uma vez passei uma hora debugando por que meu texto de título estava renderizando em Times New Roman — a fonte do Google não tinha carregado a tempo para o primeiro frame.

Complicando demais as composições. Meus vídeos iniciais tinham mais de 15 sequências com timelines sobrepostas complexas. Eram impossíveis de debugar e um pesadelo para modificar. Agora eu mantenho composições simples: 4 a 6 sequências, limites claros de início/fim, sem sobreposição a menos que seja absolutamente necessário. Composições simples renderizam mais rápido e são mais fáceis de iterar.

Ignorando a funcionalidade calculateMetadata. O Remotion permite calcular dinamicamente a duração e as dimensões do vídeo com base nas props. Eu costumava fixar esses valores no código, o que significava que mudar a duração do conteúdo exigia atualizar a contagem de frames manualmente. Agora eu uso calculateMetadata para derivar a duração a partir do conteúdo, e meus templates funcionam independentemente da quantidade de dados que eu alimento neles.

O Que Eu Realmente Produzo Com Essa Configuração

Deixe-me ser específico sobre resultados, porque afirmações vagas não ajudam ninguém.

Nos últimos seis meses usando esse workflow Remotion + Claude Code, produzi:

• 4 vídeos promocionais da AI School (30 a 60 segundos cada) — usados para anúncios no YouTube e landing pages
• 2 reels de demo de portfólio — apresentando projetos para propostas a clientes
• 6 clips para redes sociais (formato de 15 segundos) — para LinkedIn e Twitter
• 3 vídeos de anúncio de lançamento de produto — para diferentes marcas do meu ecossistema

Tempo total de edição de vídeo tradicional: zero horas. Tempo total de desenvolvimento por vídeo: 1 a 3 horas para um template novo, 15 a 30 minutos para uma variante orientada por dados de um template existente.

O custo? Minha máquina de desenvolvimento existente e uma licença gratuita do Remotion (Remotion é gratuito para uso pessoal e empresas com faturamento abaixo de $1M). Sem assinatura da Creative Cloud. Sem licenças de stock footage. Sem faturas de freelancers.

E porque tudo é código, cada vídeo tem controle de versão no Git. Posso ver exatamente o que mudou entre versões, voltar para qualquer estado anterior e criar branches de experimentos sem risco. Tente fazer isso com um arquivo de projeto do Premiere Pro.

Para Onde Isso Está Indo

Não vou fingir que a produção de vídeo baseada em código vai substituir a edição tradicional para tudo. Editores de cinema, artistas de motion graphics e especialistas em VFX fazem trabalhos que vão muito além do que o Remotion abrange.

Mas para uma categoria específica de vídeo — conteúdo promocional, demos de produto, visualizações orientadas por dados, clips de marca para redes sociais — o workflow de desenvolvedor é mais rápido, mais barato e mais fácil de manter. E está melhorando em um ritmo que deveria preocupar agências de produção de vídeo tradicionais.

O ecossistema do Remotion está se expandindo rapidamente. O pacote @remotion/transitions traz transições de cena profissionais. O @remotion/captions cuida da geração de legendas. O @remotion/three permite incorporar cenas 3D do Three.js diretamente na timeline do seu vídeo. Cada novo pacote fecha mais uma lacuna entre vídeo gerado por código e vídeo produzido tradicionalmente.

E no lado da IA, a capacidade do Claude Code de gerar, iterar e otimizar componentes React significa que o gargalo criativo continua diminuindo. Comecei a experimentar pipelines de vídeo totalmente automatizados — alimente com um post de blog, gere um roteiro, estruture os componentes Remotion, renderize o vídeo — tudo acionado por um único comando. Ainda não está pronto para produção, mas funciona. E está surpreendentemente perto.

A Única Coisa Que Eu Diria ao Meu Eu do Passado

Se eu pudesse voltar àquela noite em que estava arrastando camadas de texto no Premiere, diria isto: você já sabe como fazer vídeos. Só não sabe disso ainda.

Cada conceito de React que você aprendeu — componentes, props, estado, composição, interpolação — se mapeia diretamente para produção de vídeo. O modelo mental é idêntico. A única diferença é o formato de saída: em vez de pixels em uma tela, você obtém frames em um arquivo de vídeo.

A combinação Remotion + Claude Code não é apenas uma otimização de workflow. É uma mudança de mentalidade. Você para de pensar em vídeo como uma disciplina separada e especializada e começa a vê-lo como mais um alvo de saída para o seu código. E quando isso faz sentido, você começa a ver oportunidades de vídeo promocional em toda parte — porque o custo de criar um acabou de cair de "contratar alguém" para "escrever um componente."

Meu desafio para você: escolha uma coisa para a qual você precisa de um vídeo. Um showcase de projeto. Uma demo de produto. Uma apresentação pessoal para seu portfólio. Configure um projeto Remotion, descreva o que você quer para o Claude Code e renderize. O processo inteiro — da configuração ao MP4 final — vai levar menos de uma tarde.

E eu garanto que você nunca mais vai olhar para o Premiere Pro da mesma forma.

Vamos Trabalhar Juntos

Procurando construir sistemas de IA, automatizar workflows ou escalar sua infraestrutura de tecnologia? Adoraria ajudar.

• Fiverr (builds personalizados e integrações): fiverr.com/s/EgxYmWD
• Portfólio: mejba.me
• Ramlit Limited (soluções empresariais): ramlit.com
• ColorPark (design e branding): colorpark.io
• xCyberSecurity (serviços de segurança): xcybersecurity.io