Vídeo animado a partir de um prompt: o guia completo de Remotion + Remotion Skills no Claude Code

A parte difícil do vídeo animado deixou de ser a edição. Agora é saber descrever o que você quer. Com o Remotion (uma biblioteca para criar vídeo com código) somado ao pacote Remotion Skills, o Claude Code passa a escrever o vídeo inteiro a partir de um pedido em português: você descreve as cenas, ele gera o código, o computador renderiza o .mp4. Sem timeline, sem programa de edição, sem saber animar à mão.

Este guia foi escrito para ser seguido mesmo por quem nunca programou. Vamos do zero — o que cada palavra significa, como instalar, como pedir — até técnicas de profissional: transições, trilha sonora, imagens, animações com “peso” real, e como aplicar tudo em anúncios, cursos, apresentações e na divulgação dos seus próprios produtos (físico, aplicativo ou roupa). No fim, uma mega lista com tudo o que dá para pedir e as referências para se aprofundar.

Antes de tudo: 6 palavras que destravam o resto

Se esses termos ficarem claros agora, o resto do artigo flui. São simples:

• Frame: um “quadradinho” do vídeo. Vídeo nada mais é que várias imagens paradas passando rápido. A 30fps (frames por segundo), 1 segundo tem 30 frames. Pensar em frames é pensar em tempo com precisão.
• Renderizar: transformar o projeto num arquivo de vídeo (.mp4) que você posta em qualquer lugar. É o “exportar” de sempre.
• Componente: uma peça visual reutilizável — um título, um botão, um card. Como uma peça de Lego: você monta uma vez e reusa.
• Composição: a “planta” do vídeo — tamanho (largura × altura), duração e fps.
• Cena: um pedaço do vídeo (a abertura, a demonstração, o final). O vídeo é uma sequência de cenas.
• Prompt: o pedido que você escreve para a IA, em português mesmo. Quanto mais claro, melhor o resultado — e o artigo inteiro ensina a escrever bons prompts.

Deu para pegar o espírito? Então vamos ao que interessa.

O que é o Remotion (explicado sem jargão)

Imagine um editor de vídeo em que, no lugar de arrastar clipes numa timeline, você descreve cada elemento e como ele se move. O Remotion é isso: uma ferramenta que desenha o vídeo frame a frame a partir de instruções. Para cada frame ele pergunta “o que aparece na tela agora?” e você (ou a IA) responde com código. Isso dá controle total: posição, cor, opacidade, tamanho, rotação — tudo é ajustável com precisão.

Você não precisa aprender esse código para usar — o Claude Code escreve por você. Mas conhecer as peças ajuda a pedir melhor:

• Composition: registra o vídeo (id, fps, duração em frames, largura e altura).
• useCurrentFrame(): diz qual frame está sendo desenhado agora. Toda animação parte daí.
• interpolate(): “quando o frame vai de 0 a 30, a opacidade vai de 0 a 1”. É a base de fades e deslizes.
• spring(): movimento com física (aquele leve “pulinho” elástico), ótimo para logos e botões.
• Sequence e Series: organizam quando cada cena aparece.
• Remotion Studio: uma janela no navegador que mostra o vídeo ao vivo enquanto você edita — sem precisar renderizar a cada mudança.

O que é o Remotion Skills

Um agente de IA “cru” conhece um pouco de tudo, mas nada a fundo. O Remotion Skills é um pacote oficial (repositório remotion-dev/skills) que ensina o agente a ser especialista em Remotion: as boas práticas, os erros a evitar, o jeito certo de estruturar cenas e usar spring/interpolate. Funciona com Claude Code, Codex, Cursor e OpenCode. Pense nele como um “curso instantâneo” que você instala na IA com um comando — e a diferença na qualidade do que ela gera é enorme.

A virada mental: pense em cenas, não em timeline

Quem vem do CapCut ou do After Effects pensa em timeline. No Remotion o raciocínio é outro, e entender isso antes de escrever o primeiro prompt evita muita dor de cabeça:

• o vídeo inteiro é uma Composition;
• cada bloco do vídeo é uma cena;
• cada elemento dentro da cena é um componente (título, logo, botão);
• cada animação é uma propriedade mudando ao longo dos frames (a opacidade sobe, a escala cresce).

É como montar camadas: você define o que fica na frente de quem e quando cada coisa entra. Se o seu pedido não trouxer essa divisão em cenas, o Claude Code inventa a estrutura — às vezes acerta, na maioria das vezes você perde mais tempo corrigindo do que perderia planejando.

Passo a passo: instalando no Claude Code

Você precisa de duas coisas instaladas no computador: o Node.js (o motor que roda o Remotion) e o Claude Code. Com isso pronto, são três comandos no terminal:

# 1) cria o projeto (modelo em branco) e entra na pasta
npx create-video@latest --yes --blank meu-video
cd meu-video
npm install

# 2) instala os Remotion Skills (ensina o agente as boas práticas)
npx skills add remotion-dev/skills

# 3) abre o Remotion Studio (preview ao vivo em http://localhost:3000)
npm run dev

No assistente do create-video, o próprio Remotion recomenda: escolher o template Blank (em branco), dizer sim para o TailwindCSS e sim para instalar os Skills. Pronto o Studio, deixe essa janela aberta — é nela que você vai assistir o vídeo se montar.

Duas formas de conversar com o Claude Code

Com o projeto pronto, abra o Claude Code na mesma pasta, em outro terminal. Existem dois modos, e vale conhecer os dois:

# MODO INTERATIVO — abre um chat; você pede, vê no Studio, pede de novo.
# É o melhor para ir ajustando cena por cena.
claude

# MODO DIRETO (-p) — manda UM pedido e ele já cria/edita os arquivos,
# sem abrir o chat. Ótimo para gerar a primeira versão de uma vez.
claude -p "Crie uma composição vertical 1080x1920, 30fps, 6 segundos (180 frames), fundo #0B1120. Cena 1 (frames 0-60): logo de public/logo.png entra com spring. Cena 2 (60-120): três bullets de feature em stagger. Cena 3 (120-180): botão 'Baixe agora' pulsando. Deixe 220px livres embaixo."

Na prática: use o -p para disparar a primeira versão num comando só e, depois, entre no modo interativo (claude) para lapidar os detalhes vendo o resultado ao vivo no Studio.

O workflow em 4 passos

1. Escreva o roteiro em português. Antes de qualquer termo técnico, descreva o vídeo como você contaria para um amigo: “quero um vídeo de 30 segundos sobre X, que abre com tal frase, mostra tal problema e termina com tal convite”.

2. Transforme o roteiro em prompt estruturado. Aqui o resultado é decidido: cada cena vira um bloco do prompt, com o que aparece, como se move e em quais frames (ensino na próxima seção).

3. Prepare os assets na pasta public/. Logos, fotos, fontes, música e vídeos de referência vão na pasta public/ do projeto. No prompt, aponte para eles: “use o logo em public/logo.png”. Sem isso, o agente inventa um placeholder e você refaz depois.

4. Gere a v1 e ajuste cena por cena. A primeira versão não precisa sair perfeita. O Studio mostra tudo ao vivo: você assiste uma cena, pede um ajuste, assiste a próxima. O ciclo é rápido porque o retorno é instantâneo.

A anatomia de um prompt de vídeo que funciona

O que separa um prompt bom de um genérico é o nível de detalhe. Quatro hábitos que mudam o jogo:

• Timing em frames, não em “uns segundinhos”. Em vez de “a cena dura uns 3 segundos”, diga: “cena 1: 90 frames a 30fps; frames 0–45 o título entra crescendo; frames 45–90 o subtítulo faz fade-in”.
• Cores em hex, sempre. Cada elemento com a cor exata: #22D3EE, #22C55E, #A855F7. “Um azul bonito” muda a cada tentativa; o hex trava a consistência.
• Física declarada. Diga quando usar spring() (o pulinho de logos e badges) e quando usar interpolate() (fades e deslizes lineares), e o quanto de “quique” (ex.: damping 15). O Remotion Skills entende isso nativamente.
• Efeitos como implementação, não como sensação. Em vez de “a tela aparece de um jeito legal”, diga: “inclina em rotateX(-8deg) com perspectiva, sombra suave, desliza de baixo com fade-in”.

A regra de ouro: um bom prompt de vídeo se parece com um briefing de design. Um exemplo real, pronto para copiar e adaptar:

Vídeo vertical 1080x1920, 30fps, 6 segundos (180 frames), fundo #0B1120.

CENA 1 (frames 0-60): o logo entra com spring (damping 15, stiffness 150),
escala 0.6 ->1. Frames 20-60: título "Novo App" faz fade-in (interpolate,
clamp) em #22D3EE, fonte grande e legível, centralizado.

CENA 2 (frames 60-120): três bullets de feature entram um a um (stagger de
8 frames); cada um desliza de baixo (translateY 40 ->0) com fade-in. Texto
#E2E8F0, destaque em #22C55E.

CENA 3 (frames 120-180): call to action "Baixe agora" com leve rotateX(-8deg),
perspective 1000px e drop-shadow suave; botão pulsa 1.0 ->1.05 com spring.

Use o logo em public/logo.png. Deixe a área inferior livre (safe zone de legenda).

O código que ele gera (exemplo real)

Vale ver o que sai do outro lado — não para decorar, mas para entender e pedir ajustes com segurança. Primeiro o registro do vídeo (a “planta”):

// src/Root.tsx — registra a composição (o vídeo)
import {Composition} from 'remotion';
import {Lancamento} from './Lancamento';

export const RemotionRoot = () => (
  <Composition
    id="Lancamento"
    component={Lancamento}
    durationInFrames={90}   // 3s a 30fps
    fps={30}
    width={1080}
    height={1920}           // 9:16 — Reels / TikTok / Shorts
  />
);

E uma cena animada frame a frame. Repare como spring() e interpolate() viram, na prática, “escala com quique” e “fade-in”:

// src/Lancamento.tsx — uma cena animada por frame
import {
  AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate, spring,
} from 'remotion';

export const Lancamento = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  // spring() → escala com quique (física declarada)
  const scale = spring({frame, fps, config: {damping: 15, stiffness: 150}});
  // interpolate() → fade-in linear e "grudado" no fim (clamp)
  const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});

  return (
    <AbsoluteFill style={{backgroundColor: '#0B1120', justifyContent: 'center', alignItems: 'center'}}>
      <h1 style={{color: '#22D3EE', fontSize: 96, opacity, transform: `scale(${scale})`}}>
        Lançamento
      </h1>
    </AbsoluteFill>
  );
};

E o vídeo final sai por um comando:

# renderiza a composição "Lancamento" para um arquivo .mp4
npx remotion render Lancamento out/lancamento.mp4

Transições profissionais entre cenas

Cena que troca “no seco” entrega amadorismo. O que dá ar profissional são as transições — fade, slide, wipe, flip — e o Remotion tem um pacote dedicado, o @remotion/transitions, que faz o trabalho pesado.

Como pedir. Basta descrever a transição e o tempo dela:

Monte 3 cenas com o TransitionSeries do @remotion/transitions.
Cena 1 "Problema" (60 frames) -> transição FADE (springTiming, damping 200)
-> Cena 2 "Solução" (60 frames) -> transição SLIDE (linearTiming, 30 frames)
-> Cena 3 "Baixe agora" (60 frames).

O que sai. Um código limpo em que cada Sequence é uma cena e cada Transition é o efeito entre elas:

// src/MeuVideo.tsx — três cenas com transições prontas
import {AbsoluteFill} from 'remotion';
import {TransitionSeries, linearTiming, springTiming} from '@remotion/transitions';
import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';

export const MeuVideo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={60}>
      <Cena titulo="Problema" cor="#0B84F3" />
    </TransitionSeries.Sequence>

    <TransitionSeries.Transition
      timing={springTiming({config: {damping: 200}})}
      presentation={fade()}
    />

    <TransitionSeries.Sequence durationInFrames={60}>
      <Cena titulo="Solução" cor="#22C55E" />
    </TransitionSeries.Sequence>

    <TransitionSeries.Transition
      timing={linearTiming({durationInFrames: 30})}
      presentation={slide()}
    />

    <TransitionSeries.Sequence durationInFrames={60}>
      <Cena titulo="Baixe agora" cor="#A855F7" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Trocar fade() por slide(), wipe() ou flip() muda o efeito sem reescrever nada — e você pode pedir isso em português (“troque a primeira transição por um wipe da esquerda para a direita”).

Imagens, vídeo e trilha sonora (os assets reais)

Um vídeo de verdade tem logo, foto, música — e, muitas vezes, uma gravação de tela por trás. No Remotion, tudo isso vai para a pasta public/ e é chamado com staticFile(). As peças:

• <Img> para imagens (logo, foto de produto);
• <OffthreadVideo> para vídeo de fundo (ex.: a gravação da tela do seu app);
• <Audio> para trilha e narração, com volume controlável;
• @remotion/google-fonts para carregar a fonte certa (importante para “parecer nativo” de cada rede).

Como pedir. “Use como fundo o vídeo public/demo.mp4, ponha o logo public/logo.png no topo, toque a música public/musica.mp3 a 50% de volume e use a fonte Inter.” O que sai:

// src/Cena.tsx — combinando vídeo, imagem, áudio e fonte
import {AbsoluteFill, Img, Audio, OffthreadVideo, staticFile} from 'remotion';
import {loadFont} from '@remotion/google-fonts/Inter';

const {fontFamily} = loadFont();

export const Cena = () => (
  <AbsoluteFill style={{fontFamily}}>
    {/* vídeo de fundo (ex.: gravação da tela do app) */}
    <OffthreadVideo src={staticFile('demo.mp4')} />

    {/* logo por cima */}
    <Img src={staticFile('logo.png')} style={{width: 200}} />

    {/* trilha sonora a 50% de volume */}
    <Audio src={staticFile('musica.mp3')} volume={0.5} />
  </AbsoluteFill>
);

Detalhe de profissional: para cortar a música no tempo certo, existem trimBefore e trimAfter (em frames); e para a trilha subir suave, o volume aceita uma função por frame (fade-in do áudio). Dá para pedir os dois em português.

Usando imagens de referência (logo e produto)

Para o vídeo ser a sua marca — e não um genérico — o segredo é alimentar o projeto com as suas imagens reais. Isso acontece em duas frentes:

• Como asset dentro do vídeo. Põe o logo, a foto do produto ou o mockup na pasta public/ e referencia no prompt: “use public/logo.png no topo e a foto public/tenis.png no centro, girando devagar”. O Remotion desenha a imagem de verdade com <Img>, sem inventar nada.
• Como referência de estilo. O Claude Code aceita imagens no chat. Arraste um print da sua identidade visual (ou de um vídeo que você quer imitar) e peça: “combine as cores e o clima desta referência”. Ele extrai a paleta e o tom e aplica no código.

O que sai ao pedir o logo fixo e a foto do produto com um giro suave:

// src/Produto.tsx — logo fixo + foto do produto girando devagar
import {AbsoluteFill, Img, staticFile, useCurrentFrame, interpolate} from 'remotion';

export const Produto = () => {
  const frame = useCurrentFrame();
  const giro = interpolate(frame, [0, 120], [0, 360]); // uma volta lenta

  return (
    <AbsoluteFill style={{backgroundColor: '#F8FAFC', alignItems: 'center'}}>
      <Img src={staticFile('logo.png')} style={{width: 180, marginTop: 80}} />
      <Img
        src={staticFile('tenis.png')}
        style={{width: 620, transform: `rotate(${giro}deg)`}}
      />
    </AbsoluteFill>
  );
};

Dica de marca: fixe as cores exatas do seu logo (em hex) no prompt para o texto e os detalhes combinarem com a foto — consistência visual é o que faz parecer profissional.

Narração: voz de IA ou gravada

Uma voz guiando o vídeo aumenta muito a retenção — e você nem precisa gravar. Há dois caminhos, e dá para combinar:

• Voz de IA realista (paga). O ElevenLabs é a referência em vozes naturais, com opções em português do Brasil: você cola o roteiro, escolhe a voz e baixa o áudio. Tem API, então o próprio fluxo pode gerar a narração automaticamente.
• Ferramentas próprias e gratuitas. Dá para não gastar nada: o comando say do macOS (voz nativa do sistema), projetos open source como Piper e Coqui TTS rodando no seu PC, ou a síntese de voz do próprio navegador. A qualidade é menor que a do ElevenLabs, mas resolve para rascunho e para muito uso real.

Como usar no Remotion. Gere o áudio, salve em public/narracao.wav (ou mp3) e toque com <Audio>. E o pulo do gato: a mesma narração alimenta as legendas automáticas da próxima seção — voz e legenda saem sincronizadas do mesmo arquivo.

// narração + legenda vêm do MESMO arquivo de áudio
import {AbsoluteFill, Audio, staticFile} from 'remotion';

export const ComNarracao = () => (
  <AbsoluteFill>
    {/* ...suas cenas... */}
    <Audio src={staticFile('narracao.wav')} />
  </AbsoluteFill>
);

Legendas automáticas: o vídeo que funciona no mudo

Boa parte das pessoas assiste vídeo curto sem som. Legenda deixou de ser acessório — é o que segura a atenção. O Remotion transcreve o áudio e vira legenda sozinho, e o melhor: dá para fazer no seu próprio computador, de graça, sem enviar nada para a nuvem, com o @remotion/install-whisper-cpp (o Whisper, modelo de transcrição, rodando local) somado ao @remotion/captions.

Como pedir. “Transcreva public/narracao.wav com o Whisper local e gere legendas estilo TikTok, palavra por palavra, grandes e centralizadas, destacando a palavra falada.” O que roda nos bastidores:

// transcribe.mjs — gera legendas a partir do áudio, localmente e de graça
import {installWhisperCpp, downloadWhisperModel, transcribe, toCaptions} from '@remotion/install-whisper-cpp';
import path from 'path';

const whisper = path.join(process.cwd(), 'whisper.cpp');

await installWhisperCpp({to: whisper, version: '1.5.5'});          // instala o Whisper
await downloadWhisperModel({folder: whisper, model: 'medium.en'}); // baixa o modelo

const {transcription} = await transcribe({
  inputPath: 'public/narracao.wav',   // áudio em WAV 16kHz
  whisperPath: whisper,
  model: 'medium.en',
  tokenLevelTimestamps: true,          // tempo de CADA palavra
});

const {captions} = toCaptions({whisperCppOutput: transcription});
// salve `captions` (JSON) e use na composição para desenhar a legenda

No vídeo, o @remotion/captions agrupa as palavras em “páginas” (função createTikTokStyleCaptions) e você destaca a palavra ativa conforme o frame — aquela legenda grandona que aparece no ritmo da fala. Prefere não instalar nada local? O pacote @remotion/openai-whisper faz a mesma transcrição pela nuvem da OpenAI. Detalhe prático: o áudio precisa estar em WAV 16kHz — e o próprio Claude Code resolve essa conversão se você pedir.

Terceira opção: legenda escrita à mão (sem transcrição). Se você já tem o texto — ou já exportou um arquivo .srt do CapCut, do YouTube ou de outro editor — dá para desenhar a legenda direto no Remotion, sem Whisper. Você define os tempos (ou importa o .srt com parseSrt) e um componente simples mostra a frase certa em cada frame:

// src/Legenda.tsx — legenda nativa no Remotion, sem transcrição
import {AbsoluteFill, useCurrentFrame, useVideoConfig} from 'remotion';
import {parseSrt} from '@remotion/captions';

// opção A: escrever à mão (tempos em milissegundos)
const legendas = [
  {text: 'Bem-vindo',   startMs: 0,    endMs: 1500, timestampMs: 750,  confidence: null},
  {text: 'ao novo app', startMs: 1500, endMs: 3000, timestampMs: 2250, confidence: null},
];

// opção B: importar um .srt que você já tem
// const {captions: legendas} = parseSrt({input: meuArquivoSrt});

export const Legenda = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const ms = (frame / fps) * 1000;
  const atual = legendas.find((c) => ms >= c.startMs && ms < c.endMs);

  return (
    <AbsoluteFill style={{justifyContent: 'flex-end', alignItems: 'center', paddingBottom: 220}}>
      {atual && (
        <span style={{color: '#fff', fontSize: 64, fontWeight: 800, textShadow: '0 2px 8px #000'}}>
          {atual.text}
        </span>
      )}
    </AbsoluteFill>
  );
};

Ou seja: são três caminhos para legenda — Whisper local (grátis), Whisper na nuvem, ou escrita/importada à mão — e todos renderizam a legenda embutida no vídeo, do jeito que o feed no mudo pede.

Animações que parecem profissionais

A ferramenta gera o movimento; a qualidade vem de alguns truques que os profissionais usam sempre. O mais importante deles: quase nada no mundo real começa e para de forma linear. Movimento bom tem aceleração e desaceleração (easing) ou física (spring).

• spring(): para entradas com vida — logo que “pula”, badge que aparece. Ajuste o damping (menor = mais quique).
• interpolate() + Easing: para fades e deslizes com curva suave, em vez de reto.
• Stagger: elementos entram um depois do outro (uma lista que aparece item a item). É o truque que mais valoriza um vídeo simples.

Um exemplo real de stagger (o padrão de “lista que entra item a item”), que você pode pedir e reusar:

// src/Lista.tsx — bullets entrando um a um (stagger)
import {AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate} from 'remotion';

const bullets = ['Rápido', 'Seguro', 'Grátis'];

export const Lista = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{justifyContent: 'center', gap: 24, padding: 80}}>
      {bullets.map((texto, i) => {
        const delay = i * 8;                       // 8 frames entre um item e o próximo
        const e = spring({frame: frame - delay, fps, config: {damping: 14}});
        const x = interpolate(e, [0, 1], [60, 0]); // desliza da direita para o lugar
        return (
          <div key={texto} style={{opacity: e, transform: `translateX(${x}px)`}}>
            {texto}
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Esse padrão — delay crescente por índice — é o mesmo por trás de títulos que aparecem palavra por palavra, gráficos que se desenham e números que sobem. Vale ter no vocabulário na hora de pedir.

Pensando como um estúdio: arco narrativo e camadas

Aqui está o que separa um vídeo “bonitinho” de um que parece feito por estúdio — e é menos sobre efeito, mais sobre intenção. Três ideias que valem virar hábito (e entrar no seu prompt):

• Arco narrativo. Todo vídeo, mesmo um logo de 5 segundos, tem um mini enredo: preparação → antecipação → revelação → descanso. Um respiro antes do clímax (uma leve pausa, um recuo) faz a revelação valer mais. Diga isso no prompt: “segure 10 frames antes de o logo aparecer”.
• Camadas de movimento. Amador anima tudo de uma vez. Profissional trabalha em camadas: primária (o elemento principal se movendo), secundária (algo reagindo em seguida — o follow-through) e terciária (micro-detalhes: partículas, brilhos, um fundo respirando). Sempre pelo menos duas camadas.
• Timing orgânico. Springs no lugar de movimento linear, e stagger de 50 a 120ms entre os elementos. Se houver música, encaixe os momentos-chave na batida.

E um atalho prático: em vez de adivinhar números de spring, comece por presets conforme a “personalidade” do movimento (ajuste depois a gosto):

// presets de spring — pontos de partida por "personalidade" do movimento
import {spring} from 'remotion';

// Bouncy — UI, badges, notificações (mais quique)
spring({frame, fps, config: {damping: 12, stiffness: 100}});

// Snappy — revelações e entrada de texto (seco, profissional)
spring({frame, fps, config: {damping: 25, stiffness: 180}});

// Buttery — fundos, câmera, clima (bem suave)
spring({frame, fps, config: {damping: 50, stiffness: 50}});

// Heavy — objetos grandes, revelação dramática (peso)
spring({frame, fps, config: {damping: 30, stiffness: 80, mass: 3}});

Efeitos que dão acabamento

Efeito bom não é enfeite: é o que separa o “feito no código” do “feito por um profissional”. Como cada elemento é HTML/CSS, você tem um arsenal enorme — e pede em português. Os que mais rendem:

• Sombra e profundidade: drop-shadow e box-shadow para descolar o elemento do fundo;
• Brilho / neon (glow): sombra colorida e sem deslocamento, ótima para títulos e badges;
• Desfoque (blur): fundo desfocado com o texto nítido na frente, ou um “blur-in” na entrada;
• Gradiente: fundos e textos com gradiente (até animado ao longo dos frames);
• Inclinação 3D: rotateX/rotateY com perspective — aquele card “deitado”;
• Revelação (mask): clip-path para o elemento surgir por uma forma;
• Motion blur: rastro de movimento realista com o pacote @remotion/motion-blur.

O que sai ao pedir “título com glow ciano e card inclinado em 3D com sombra suave” — note que efeito, aqui, é só estilo:

// efeitos são só estilo — glow, sombra de profundidade e inclinação 3D
<h1 style={{
  color: '#22D3EE',
  textShadow: '0 0 24px #22D3EE',                  // glow neon
}}>Lançamento</h1>

<div style={{
  transform: 'perspective(1000px) rotateX(-8deg)', // card "deitado" em 3D
  boxShadow: '0 30px 60px rgba(0,0,0,0.35)',       // sombra de profundidade
  filter: 'drop-shadow(0 0 12px rgba(34,211,238,0.5))',
}}>
  {/* conteúdo do card */}
</div>

Para o motion blur (rastro em movimentos rápidos), o pacote @remotion/motion-blur traz os componentes <Trail> e <CameraMotionBlur> — basta pedir “adicione motion blur no logo que entra voando”.

Indo além: 3D e áudio-reativo

Quando o projeto pede mais, o Remotion tem duas cartas fortes — e o Claude Code escreve as duas para você.

3D de verdade com o @remotion/three (Three.js dentro do Remotion): objetos, câmera e luz, tudo dirigido pelo frame. A única regra: anime pelo useCurrentFrame(), nunca pelo useFrame do react-three-fiber (quebra o render).

// 3D dirigido por frame — nada de useFrame do react-three-fiber
import {ThreeCanvas} from '@remotion/three';
import {useCurrentFrame, useVideoConfig, interpolate} from 'remotion';

export const Cena3D = () => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();
  const giroY = interpolate(frame, [0, 120], [0, Math.PI * 2]); // uma volta completa

  return (
    <ThreeCanvas width={width} height={height}>
      <ambientLight intensity={1.5} />
      <mesh rotation={[0, giroY, 0]}>
        <boxGeometry args={[2, 2, 2]} />
        <meshStandardMaterial color="#22D3EE" />
      </mesh>
    </ThreeCanvas>
  );
};

Áudio-reativo com o @remotion/media-utils: barras, ondas e escalas que reagem à música — perfeito para drop de moda, clipe de lançamento ou visualizer. O useAudioData lê o áudio e o visualizeAudio devolve a intensidade de cada faixa de frequência no frame atual:

// barras que reagem à música (áudio-reativo)
import {useAudioData, visualizeAudio} from '@remotion/media-utils';
import {AbsoluteFill, Audio, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';

export const Espectro = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const dados = useAudioData(staticFile('musica.mp3'));
  if (!dados) return null;

  // 32 faixas: à esquerda o grave, à direita o agudo
  const barras = visualizeAudio({audioData: dados, frame, fps, numberOfSamples: 32});

  return (
    <AbsoluteFill style={{flexDirection: 'row', alignItems: 'flex-end', gap: 6}}>
      <Audio src={staticFile('musica.mp3')} />
      {barras.map((amp, i) => (
        <div key={i} style={{height: amp * 600, width: 16, backgroundColor: '#22D3EE'}} />
      ))}
    </AbsoluteFill>
  );
};

Para aquele acabamento “de cinema”, o @remotion/light-leaks (vazamentos de luz por cima, com o componente <LightLeak>) e um leve grão de filme fecham o visual.

Divulgando seus próprios produtos

Aqui o Remotion vira uma fábrica de vídeos de venda. Como cada elemento é código, você monta um template uma vez e gera dezenas de variações trocando foto, texto e cor. A estrutura muda conforme o que você vende:

Produto físico (e-commerce e ads). A regra que os anúncios que vendem seguem: fisgar nos primeiros 1–3 segundos (sem intro de logo lenta), mostrar o problema, apresentar o produto resolvendo e fechar com um convite claro (CTA). Formatos que funcionam e são fáceis de montar em cena: demo (produto em uso), 360º (giro do produto), feature-highlight (destaques com rótulos animados) e lifestyle.

Aplicativo (preview de loja e demo). Para o vídeo de preview da App Store, as regras da Apple são objetivas: 15 a 30 segundos, até 3 previews por idioma, o vídeo toca sozinho e sem som na listagem e deve usar gravação real da tela. O Remotion entra montando as chamadas em volta da gravação (com <OffthreadVideo>): títulos animados, destaques de recurso, transições e legendas — tudo legível sem áudio, porque o autoplay é mudo.

Roupa e moda (drop, lookbook, hype). Aqui mandam o ritmo e o som: cortes no tempo da batida, try-on, revelação do drop, contagem regressiva. No TikTok, encaixar um áudio em alta (trending) costuma render mais alcance do que trilha genérica. O Remotion garante a parte programática (tipografia, transições, preço e badge animados); a trend você encaixa na hora de publicar.

Escala: um vídeo por produto, gerado sozinho

Aqui mora o poder de verdade para quem vende. Como o vídeo é código, ele pode receber dados de fora — nome, preço, cor, foto — e se remontar para cada item. Você desenha um template e gera dezenas ou centenas de vídeos trocando só os dados. Isso se chama vídeo por dados (parametrizado).

O template declara quais dados espera (com um schema) e valores padrão para editar no Studio:

// src/Root.tsx — um anúncio que recebe dados de fora
import {Composition} from 'remotion';
import {z} from 'zod';
import {Anuncio} from './Anuncio';

export const anuncioSchema = z.object({
  produto: z.string(),
  preco: z.string(),
  cor: z.string(),
  foto: z.string(),   // arquivo em public/
});

export const RemotionRoot = () => (
  <Composition
    id="Anuncio"
    component={Anuncio}
    durationInFrames={180}
    fps={30}
    width={1080}
    height={1920}
    schema={anuncioSchema}
    defaultProps={{produto: 'Tênis Cloud', preco: 'R$ 129', cor: '#22C55E', foto: 'tenis.png'}}
  />
);

A geração em massa é um comando por item, trocando só o --props:

# um vídeo para cada produto, mudando apenas os dados
npx remotion render Anuncio out/tenis.mp4   --props='{"produto":"Tênis Cloud","preco":"R$ 129","cor":"#22C55E","foto":"tenis.png"}'
npx remotion render Anuncio out/jaqueta.mp4 --props='{"produto":"Jaqueta X","preco":"R$ 259","cor":"#A855F7","foto":"jaqueta.png"}'

A partir de uma planilha (CSV) do seu catálogo, um scriptzinho monta esse comando para cada linha — e você sai de um vídeo para o catálogo inteiro sem trabalho manual. Precisa que vídeos com mais texto durem mais? A função calculateMetadata() ajusta a duração automaticamente conforme os dados.

Renderizar na nuvem (sem depender do seu PC)

Gerar 100 vídeos no seu notebook trava a máquina por horas. A saída é renderizar na nuvem: o @remotion/lambda roda o render na AWS, quebrando o vídeo em pedaços processados em paralelo — e você paga só enquanto renderiza. São três passos:

# 1) cria a função de render na sua conta AWS (uma vez só)
npx remotion lambda functions deploy

# 2) envia o projeto para a nuvem
npx remotion lambda sites create src/index.ts --site-name meu-video

# 3) renderiza na nuvem, em paralelo
npx remotion lambda render meu-video Anuncio

Juntando as duas últimas seções: um template + os dados do seu catálogo + a nuvem = o catálogo inteiro virando vídeo enquanto você faz outra coisa. É a diferença entre “editar um vídeo” e ter uma fábrica de vídeos.

Exportar do jeito certo (codec, qualidade e transparência)

O render final tem opções que mudam o peso e a compatibilidade do arquivo. O básico é escolher o codec e a qualidade:

# MP4 padrão (H.264) — serve para quase tudo (redes, sites)
npx remotion render Anuncio out/video.mp4

# controlar a qualidade: --crf menor = melhor qualidade e arquivo maior
npx remotion render Anuncio out/video.mp4 --codec=h264 --crf=18

# GIF (para sticker, prévia curta, e-mail)
npx remotion render Anuncio out/video.gif --codec=gif

Guia rápido por destino: H.264 (.mp4) para redes e sites (o mais compatível); H.265 quando quer o mesmo com menos peso; VP9 (.webm) para web moderna; GIF para clipes curtos em loop.

Vídeo transparente (fundo vazado, para colar um logo animado ou um selo por cima de outra peça): deixe a composição sem cor de fundo e exporte em WebM (VP8/VP9) ou ProRes 4444:

# WebM transparente (bom para web)
npx remotion render Selo out/selo.webm --image-format=png --pixel-format=yuva420p --codec=vp8

# ProRes 4444 transparente (bom para editores de vídeo)
npx remotion render Selo out/selo.mov --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444

Além do arquivo: player interativo e render por código

O Remotion não serve só para cuspir um .mp4. Dois recursos abrem portas para produto de verdade:

1) Player interativo (@remotion/player). Em vez de renderizar, você embute o vídeo ao vivo num site ou app React — com controles e reagindo a dados. É o que permite um preview personalizado: o cliente digita o nome e vê o vídeo mudar na hora, antes de gerar.

// embute o vídeo, interativo, numa página React
import {Player} from '@remotion/player';
import {Anuncio} from './Anuncio';

export const Preview = () => (
  <Player
    component={Anuncio}
    durationInFrames={180}
    fps={30}
    compositionWidth={1080}
    compositionHeight={1920}
    controls
    inputProps={{produto: 'Tênis Cloud', preco: 'R$ 129'}}
  />
);

2) Render por código (@remotion/renderer). Para virar um serviço — um botão “gerar meu vídeo” no seu site, ou uma fila que gera milhares — você renderiza pelo Node, sem abrir o Studio:

// render programático no servidor (Node)
import {bundle} from '@remotion/bundler';
import {selectComposition, renderMedia} from '@remotion/renderer';

const serveUrl = await bundle({entryPoint: './src/index.ts'});

const composition = await selectComposition({
  serveUrl,
  id: 'Anuncio',
  inputProps: {produto: 'Tênis Cloud', preco: 'R$ 129'},
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  outputLocation: 'out/anuncio.mp4',
  inputProps: {produto: 'Tênis Cloud', preco: 'R$ 129'},
});

Juntando: Player para o cliente ver e configurar, renderer (ou Lambda) para gerar de verdade. É a base de qualquer serviço de vídeo personalizado.

Anúncios, cursos e apresentações

• Anúncios: hook forte no início, uma ideia por cena, texto grande e curto, CTA claro no fim. Reaproveite componentes entre variações A/B trocando só cor e cópia.
• Cursos online: aberturas de módulo, lower-thirds (aquela tarja com o título da aula), destaques de código/tela, legendas embutidas e cartões de resumo. Como é template, cada aula nova reaproveita a anterior.
• Apresentações: slides que animam de verdade — números que sobem, gráficos que se desenham, transições entre tópicos — exportados como vídeo para rodar sozinhos em qualquer tela.

Vídeo por plataforma: formato, safe zone e fonte nativa

Para TikTok, Reels e Shorts, o formato é vertical 9:16, 1080×1920. Dois cuidados fazem diferença:

• Respeite as safe zones. A interface da rede cobre partes do quadro: usuário e áudio no topo, legendas e ícones embaixo, botões à direita. Mantenha texto e logo na faixa central — e isso se resolve no prompt (“deixe 220px livres embaixo e 120px no topo”).
• Pareça nativo. Vídeos que imitam a estética da plataforma — inclusive o estilo de legenda daquela rede — costumam passar melhor no feed do que uma peça “de propaganda”. No Remotion, é só carregar a fonte desejada de public/ e usar legendas grandes, já que boa parte assiste sem som.

Onde conseguir música, imagens e ícones (com direitos em dia)

Um vídeo bom precisa de bons assets — e usar material dos outros sem permissão dá dor de cabeça (e derrubada do vídeo). Fontes confiáveis e, em boa parte, gratuitas:

• Música: YouTube Audio Library, Pixabay Music e Uppbeat (grátis, algumas com crédito) ou Epidemic Sound e Artlist (assinatura, catálogo maior).
• Fotos e vídeos: Pexels, Unsplash e Pixabay — uso livre, inclusive comercial.
• Ícones: Lucide, Heroicons e Tabler Icons (open source, SVG que entra direto no código).
• Fontes: Google Fonts (via @remotion/google-fonts), com licença para uso comercial.

Atenção com o áudio “trending”. Aquela música em alta do TikTok/Reels só vale dentro do app, na hora de publicar — ela não pode ser embutida no arquivo que você exporta e sobe em outros lugares (ali, use música licenciada). Regra simples: se o som vai dentro do .mp4, precisa ter direito de uso.

Juntando tudo: um anúncio de 15 segundos do zero

Chega de peças soltas — vamos montar um anúncio real, do começo ao arquivo final, usando o que vimos até aqui.

Passo 1 — o roteiro (humano, em português): “Anúncio vertical de 15s de um tênis. Abre com o problema (pé cansado), mostra o tênis resolvendo, destaca 3 benefícios, mostra o preço subindo e fecha com ‘compre agora’.”

Passo 2 — o prompt estruturado (o que você cola no Claude Code):

Crie um vídeo vertical 1080x1920, 30fps, 15s (450 frames), fundo #0B1120.
Use TransitionSeries do @remotion/transitions entre as cenas.

CENA 1 (0-90): texto "Cansado no fim do dia?" faz fade-in (#E2E8F0).
CENA 2 (90-210): foto public/tenis.png entra com spring (damping 12) e gira leve.
CENA 3 (210-330): 3 benefícios em stagger (8 frames), destaque #22C55E.
CENA 4 (330-450): preço sobe de 0 a 129 (count-up) e botão "Compre agora" pulsa.

Transições: FADE entre 1 e 2, SLIDE entre 2 e 3, FADE entre 3 e 4.
Use a fonte Inter. Deixe 220px livres embaixo (safe zone).

Passo 3 — o detalhe que impressiona: o preço que sobe (count-up). É só interpolar um número pelo frame e arredondar:

// preço animado: sobe de 0 a 129 e "trava" no fim
import {useCurrentFrame, interpolate} from 'remotion';

export const Preco = () => {
  const frame = useCurrentFrame();
  const valor = interpolate(frame, [0, 45], [0, 129], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  return <span>R$ {Math.round(valor)}</span>;
};

Passo 4 — iterar no Studio: rode npm run dev, assista e peça ajustes (“deixe a cena 2 mais rápida”, “troque a transição 2-3 por um wipe”). Passo 5 — narração e legenda: gere a narração (ElevenLabs ou gratuita), solte em public/ e ligue as legendas (Whisper). Passo 6 — render:

# o arquivo final, pronto para postar
npx remotion render Anuncio out/anuncio.mp4 --codec=h264 --crf=18

Pronto: em poucos comandos, um anúncio que no fluxo antigo levaria um dia de edição. E como é template, o próximo produto é só trocar a foto e o texto.

Biblioteca de prompts prontos (copie e adapte)

Pontos de partida para os formatos mais comuns. Cole no Claude Code, troque os detalhes (cores, textos, arquivos) e itere no Studio.

BRAND REVEAL (logo, 5s / 150 frames, 1080x1920)
Fundo #0B1120. Frames 0-20: leve escurecer (antecipação). Frames 20-60:
logo public/logo.png entra com spring (damping 12) e um brilho ciano.
Frames 60-150: tagline faz fade-in embaixo. Motion blur no logo que entra.

DEMO DE PRODUTO (15s / 450 frames)
Cena 1: problema em texto grande. Cena 2: foto public/produto.png girando.
Cena 3: 3 benefícios em stagger. Cena 4: preço em count-up + CTA pulsando.
Transições FADE e SLIDE. Fonte Inter. 220px livres embaixo.

CARD DE CITAÇÃO (8s / 240 frames, 1080x1080)
Fundo gradiente suave. Aspas grandes entram com scale. Texto da citação
aparece palavra por palavra (stagger 6 frames). Autor faz fade-in no fim.

CONTAGEM REGRESSIVA (6s / 180 frames)
Números 5,4,3,2,1 trocando a cada 30 frames, cada um com "pop" de spring
(damping 10) e leve shake. Fundo #111827, número em #22D3EE.

DEPOIMENTO / PROVA SOCIAL (12s / 360 frames)
Foto redonda do cliente entra com spring. Cinco estrelas em stagger.
Texto do depoimento com legenda grande. Logo pequeno no rodapé.

ABERTURA DE AULA (10s / 300 frames)
Título do módulo entra com slide + fade. Lower-third com o nome da aula.
Número da aula em count-up. Transição wipe para o conteúdo.

Repare no padrão: formato + duração em frames + cenas com timing + cores em hex + arquivos de public/. É a anatomia lá do começo virando receita.

A MEGA LISTA: tudo o que dá para pedir

Guarde esta seção. É o cardápio do que o Claude Code + Remotion Skills conseguem montar — use os termos abaixo direto nos seus prompts.

Transições entre cenas (pacote @remotion/transitions):

• fade — dissolve suave entre cenas;
• slide — a nova cena empurra a anterior (escolha a direção);
• wipe — a nova cena revela por cima em diagonal;
• flip — giro 3D de uma cena para a outra;
• clockWipe — revela em movimento circular (relógio);
• none — corte seco, mas com o timing controlado;
• tempo de cada uma: linearTiming (duração fixa) ou springTiming (com física).

Tipos de animação (para elementos dentro da cena):

• Entrada: fade-in, slide-in, scale-in, “pop” com spring, blur-in;
• Saída: fade-out, slide-out, scale-down;
• Contínua: flutuar (float), pulsar (pulse), girar (rotate), brilho (glow);
• Ênfase: shake (tremida), bounce (quique), “wiggle”;
• Texto: palavra por palavra, efeito máquina de escrever, número que sobe (count-up), destaque que “pinta” a palavra;
• Padrões: stagger (um depois do outro), parallax (camadas em velocidades diferentes).

Efeitos visuais (via CSS que o Remotion aceita):

• sombra (drop-shadow), desfoque (blur), brilho/neon (glow), gradiente, máscara/revelação (clip-path), perspectiva/inclinação 3D (rotateX/rotateY), motion blur (pacote @remotion/motion-blur).

Assets e pacotes prontos:

• <Img> (imagem), <OffthreadVideo> (vídeo), <Audio> (som) — sempre com staticFile() lendo da pasta public/;
• @remotion/google-fonts (fontes), @remotion/gif (GIFs), @remotion/lottie (animações Lottie), @remotion/shapes (formas: círculo, triângulo, estrela), @remotion/paths (desenhar traços SVG), @remotion/noise (movimento orgânico), @remotion/motion-blur (rastro de movimento).
• Avançados: @remotion/three (3D com Three.js), @remotion/media-utils (áudio-reativo), @remotion/light-leaks (vazamentos de luz cinematográficos), @remotion/animation-utils (utilidades para animar CSS).

Voz e legenda:

• Narração: ElevenLabs (voz de IA realista, com API) ou gratuitas — say (macOS), Piper, Coqui TTS, síntese do navegador;
• Legendas: @remotion/install-whisper-cpp (transcrição local, grátis), @remotion/openai-whisper (nuvem) ou escrita/importada de .srt (parseSrt) — todas montadas com @remotion/captions e embutidas no vídeo.

Produção e escala:

• Vídeo por dados: schema + defaultProps/--props — um template, muitos vídeos;
• calculateMetadata(): duração e formato dinâmicos conforme os dados;
• @remotion/lambda: render na nuvem, em paralelo, pagando só enquanto roda;
• @remotion/player (embutir o vídeo interativo num site/app) e @remotion/renderer (render programático no servidor).

Formatos por objetivo:

• Vertical 9:16 (1080×1920): TikTok, Reels, Shorts — 30fps;
• Horizontal 16:9 (1920×1080): YouTube, apresentações;
• Quadrado 1:1 (1080×1080): feed do Instagram/Facebook;
• Preview da App Store: 15–30s, autoplay mudo, gravação real da tela;
• Transparente (WebM VP8/VP9 ou ProRes 4444): logos e selos para colar por cima de outra peça;
• GIF: clipe curto em loop (sticker, prévia, e-mail).

Comandos essenciais:

• npx create-video@latest — cria o projeto;
• npx skills add remotion-dev/skills — instala os Skills;
• npx remotion add <pacote> — adiciona um pacote do Remotion na versão certa;
• npm run dev — abre o Studio (preview ao vivo);
• npx remotion render — gera o .mp4 final;
• npx remotion still — exporta um frame como imagem (ótimo para thumbnail);
• npx remotion render --props=‘...’ — renderiza com dados dinâmicos (vídeo por dados);
• npx remotion lambda render — renderiza na nuvem, em escala;
• npx remotion render --codec=... — escolhe o formato (h264, h265, vp9, prores, gif).

Do rascunho ao profissional: técnicas de produção testadas na prática

Montar o vídeo é metade do caminho. A outra metade — a que separa um vídeo “bonitinho” de um que parece de estúdio e realmente vende — está no acabamento: voz com emoção, mixagem, imagens que sustentam a fala, marca casada e uma tela final que converte. As técnicas abaixo são agnósticas de ferramenta e de estilo (não são cores ou vozes específicas): é o método, replicável por qualquer pessoa.

▶

Um estúdio por IA: um gerador para cada mídia

Em vez de pedir tudo no chat toda vez, crie geradores reutilizáveis — um script para cada mídia, cada um com prompt e parâmetros — e um orquestrador que junta os assets e dispara o render. Fica versionável, barato de iterar e replicável. Uma pasta por “estrutura” de vídeo; cada uma gera um .mp4.

# um gerador por mídia (imagem, voz, música) — reutilizável e versionável
python gen-image.py --prompt "cena X, cinematográfico, espaço para texto" --output public/img/01.jpg --size 1080x1920
python gen-voice.py --text "sua narração" --output public/vo/s1.mp3 --voice <voz-nativa> --model <modelo-expressivo>
python gen-music.py --prompt "trilha corporate sutil, instrumental" --output public/musica.mp3 --length 90
# e um orquestrador que monta tudo e renderiza
npx remotion render src/index.ts MeuVideo out/video.mp4

Narração que emociona (e não parece robô)

Voz de IA plana mata o vídeo. Três coisas destravam a emoção:

• Modelo expressivo + configuração certa. Use um modelo de voz expressivo com estabilidade baixa (mais variação/emoção) e estilo alto (mais ênfase). Estável demais = desanimado.
• Voz nativa do idioma. Uma voz nativa soa muito melhor que uma voz estrangeira “falando traduzido”.
• Roteiro com energia. Frases curtas, com exclamações e reticências marcando as pausas — é o que faz o modelo entregar entonação viva e ir instigando.

Regra de ouro: nunca deixe na narração uma sigla que o TTS pronuncia errado. Escreva por extenso (“inteligência artificial” em vez de “IA”, que vira “i-á”; “A-P-I” em vez de “API”). E gere uma narração por cena (um arquivo por cena): facilita re-gerar só o que mudou e sincronizar.

# voz com EMOÇÃO: modelo expressivo + estabilidade baixa + estilo alto
gerar_voz(texto, voz="<nativa do idioma>", modelo="<expressivo>",
          stability=0.3,       # baixa = mais variação/emoção
          style=0.55,          # alta  = mais ênfase
          speaker_boost=True)

A voz certa para o anúncio

A entonação vem metade da voz, metade do texto. Sobre a escolha da voz:

• Escolha pelo papel. Anúncio pede energia e confiança; um explicativo pede clareza calma. A mesma ferramenta tem vozes com “personalidades” diferentes — muitas até filtráveis por caso de uso (advertisement, social media, narration).
• Teste de ouvido. Gere a mesma frase com 2 ou 3 vozes e escolha a que dá vontade de continuar ouvindo. Não adivinhe pelo nome.
• Nativa > estrangeira. Uma voz nativa do idioma soa natural; uma estrangeira “traduzindo” entrega sotaque e frieza.
• Dirija a emoção pelo texto. Pontuação é a “direção de atuação” do TTS: ponto encurta, exclamação levanta, reticências criam suspense. Alguns modelos ainda aceitam tags de emoção.

# liste as vozes disponíveis e teste a MESMA frase em algumas
listar_vozes            # veja nome, idioma e caso de uso (ex.: advertisement)
gen-voice --text "sua frase de teste" --voice VOZ_A --output teste_A.mp3
gen-voice --text "sua frase de teste" --voice VOZ_B --output teste_B.mp3

Mixagem: a voz na frente, a música atrás

O erro clássico: baixar só a música e achar que resolveu. Uma faixa “cheia” (com batida) é alta; a voz de IA sai em nível moderado. Se você só abaixa a música, as duas ficam no mesmo volume e a voz some. A solução é dupla: amplifique a narração e abaixe bem a música — mire a voz uns 12 a 16 dB acima da trilha, com fade in/out.

E meça, não confie só no ouvido: janela curta de volume engana. Use loudness integrada (LUFS), medindo voz e música separadas.

# meça a mixagem por loudness integrada (o "I:" é o valor que importa)
ffmpeg -i saida.mp4 -af ebur128 -f null -
# alvo prático: voz ~ -21 LUFS, música ~ -36 LUFS (voz ~15 dB acima)

Sincronia sem vozes se atropelando

Deixe a duração de cada cena ser guiada pela narração: duração = fala + um respiro. Gere a voz, meça a duração e escreva um timing (frames por cena) que o vídeo lê — assim tudo casa com a voz sem chute.

A armadilha: com transições, a cena seguinte começa antes da anterior acabar — e a próxima narração entra por cima. Duas regras resolvem: o respiro no fim da cena precisa ser maior que a transição, e a narração começa com um pequeno atraso (Sequence from).

// duração da cena = narração + respiro; e respiro (TAIL) > transição
<TransitionSeries.Sequence durationInFrames={vozFrames + TAIL}>
  <Cena />
  <Sequence from={VO_DELAY}>                                {/* atrasa a fala */}
    <Audio src={staticFile('vo/s1.mp3')} volume={VOZ_GANHO} />  {/* voz amplificada */}
  </Sequence>
</TransitionSeries.Sequence>
// música no topo, bem baixa e com fade
<Audio src={staticFile('musica.mp3')} volume={0.06} />

Imagens que sustentam a fala (chega de texto no vazio)

Texto animado sobre fundo liso parece amador. Dê a cada cena uma imagem de fundo que corrobora o que a voz diz — gerada por IA, com prompt cinematográfico e espaço negativo para o texto respirar. Para legibilidade: um scrim (gradiente escuro por cima) + sombra no texto, e um leve Ken Burns (zoom/deslize) para a imagem nunca ficar parada. Respeite as safe zones.

<AbsoluteFill>
  <Img src={staticFile('img/cena.jpg')}
       style={{width:'100%',height:'100%',objectFit:'cover',
               transform:`scale(${1.1 + frame*0.0006})`}} />  {/* zoom lento */}
  <AbsoluteFill style={{background:
    'linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.9))'}} />  {/* scrim */}
</AbsoluteFill>

Nada de “caixinhas”: ícones e cards com vida

Listinhas em retângulos com outline, desalinhadas, gritam “amador”. Troque por: ícones ou imagens das coisas em si (ex.: ícones de app das ferramentas que você cita), cards com profundidade (fundo translúcido, sombra, um realce colorido) e grid alinhado (nada de quebra-linha bagunçada). Cada bloco tem que instigar, com movimento e vida — não texto seco num retângulo.

Sua marca, casada em cada quadro

Detalhes de marca somam profissionalismo: no fundo escuro, use a versão branca da logo (recolore o SVG: troque o escuro por branco). Ponha o símbolo como marca d'água discreta. E use a cor exata da marca (o hex do próprio logo) nos destaques e no CTA. Consistência é o que faz parecer “de empresa”.

A tela final (end card) que converte

A última tela costuma ficar embolada, com efeito demais. O certo é o oposto: muito espaço em branco, uma ação clara e poucos efeitos (nada de vários glows e caixas competindo). Botão em CAIXA ALTA com letter-spacing (case consistente — “COMECE AGORA”, não “Comece agora”). Em rede social o link não é clicável: indique “link no primeiro comentário” como texto simples. E mantenha tudo acima do rodapé — a interface da rede cobre ~20–35% de baixo.

O arco que prende: do gancho ao convite

Um anúncio que instiga tem um mini-enredo: gancho nos 3 primeiros segundos (com o desejo ou a dor concreta) → problema → a virada (a ideia nova) → a solução → o valor (o que muda pro negócio) → prova (casos reais) → o que a pessoa leva → CTA. Uma ideia por cena, texto curto (a voz carrega o detalhe) e emoção do começo ao fim.

Copy que gera desejo: frases que fazem a pessoa querer o produto

Voz boa lendo copy fraca não vende. O texto tem que criar desejo — fazer a pessoa se ver com o resultado. Princípios que mudam o jogo:

• Venda a transformação, não a funcionalidade. Não “tem o recurso X”, e sim “você passa a [resultado desejado]”. A pessoa compra quem ela vira, não a lista de features.
• Comece pelo desejo ou pela dor concreta. Nomeie no gancho o que ela já quer (ou o que dói): “Imagine [resultado]…” / “Cansado de [dor]?”. Concreto sempre ganha do abstrato.
• Fale com “você”, no presente, com benefício tangível. Verbos de ação, frases curtas e afirmativas, uma promessa clara por vez.
• Pinte a cena do resultado. Em vez de dizer “é bom”, descreva a pessoa vivendo o benefício — imagem e palavra puxando a mesma emoção.
• Contraste e prova. Antes × depois; o “jeito velho” × o novo; um caso real. O contraste faz o valor saltar.
• CTA que continua o desejo. Não “compre” seco: “Comece a [transformação] agora” — o convite é o próximo passo do sonho que você pintou.

Padrões de frase (agnósticos — é só preencher):

Gancho (desejo):  "Imagine [resultado desejado] — [rápido / sem esforço]."
Gancho (dor):     "[Dor comum]? Existe um jeito melhor."
Virada:           "A pergunta certa não é [X]. É [Y]."
Valor:            "[Benefício claro] — [prova ou como, em 3-4 palavras]."
CTA:              "Comece a [transformação] agora."

Regra prática: cada cena deve instigar a próxima — uma curiosidade ou promessa que só fecha adiante. É o que segura a pessoa até o convite. E lembre: a emoção da voz (seção anterior) e a emoção da copy têm que apontar para o mesmo sentimento em cada cena.

Teste antes de dizer que está pronto

Não renderize o vídeo inteiro para descobrir um erro no frame 200. Exporte stills dos frames-chave e olhe (no Studio ao vivo ou com npx remotion still), e meça o áudio. Só então renderize tudo. Assim você pega cedo: imagem que não aparece (asset no caminho errado do public/, o clássico 404), texto estourando a margem, voz sobreposta.

O que NÃO fazer (aprendido na marra)

• ❌ Voz robótica e plana → ✅ modelo expressivo (estabilidade baixa, estilo alto) + roteiro com energia.
• ❌ Siglas na narração (“IA”, “API”) → ✅ por extenso, do jeito que se fala.
• ❌ Vozes se atropelando na transição → ✅ respiro (tail) > transição e atraso na fala.
• ❌ Música alta ou pad sintético estranho → ✅ faixa royalty-free real, bem baixa e medida (LUFS).
• ❌ Caixinhas de outline desalinhadas → ✅ ícones/imagens e cards alinhados com profundidade.
• ❌ Texto animado no vazio → ✅ uma imagem por fala, que sustenta a mensagem.
• ❌ Tela final embolada, botão em sentence-case, seta competindo → ✅ end card limpa, botão CAIXA ALTA, link em texto simples.
• ❌ Descobrir o erro só no render final → ✅ still dos frames-chave + medir o áudio antes.

Fundamentos que elevam a qualidade

A ferramenta gera o código; a qualidade vem de princípios de animação que existem há décadas. Vale ter no radar (e citar no seu próprio prompt):

• Timing e spacing: quantos frames entre as poses e como se distribuem — é o que dá peso e naturalidade.
• Ease in / ease out: quase nada começa ou para de forma linear; use easing (ou spring) em vez de movimento reto.
• Antecipação e staging: prepare o olho para o movimento e deixe claro o que importa em cada cena.
• Legibilidade: fonte grande, contraste alto, pouco texto por cena, hierarquia visual óbvia.

Esses fundamentos vêm dos 12 princípios de animação da Disney — bem sintetizados em livros como The Animator’s Survival Kit (Richard Williams) e Disney Animation: The Illusion of Life (Frank Thomas e Ollie Johnston). Você não precisa dominar tudo, mas conhecê-los muda o vocabulário dos seus prompts.

Erros comuns (e como evitar)

Quatro tropeços que aparecem em quase todo projeto — conhecê-los poupa horas:

• Imagem “piscando” (flicker). Acontece quando um asset ainda não carregou no frame. Duas saídas: montar a cena alguns frames antes de ela aparecer (dá tempo de carregar) e, no limite, renderizar com --concurrency=1. E a regra de ouro: não use bibliotecas de animação web (GSAP, Framer Motion, Anime.js) — elas dependem de requestAnimationFrame e quebram o render frame a frame. Use spring() e interpolate() do próprio Remotion.
• Vídeo que “treme” entre renders. Se houver aleatoriedade (partículas, posições espalhadas), use a função random() do Remotion com uma semente fixa — nunca Math.random(). Sem semente, cada frame sorteia valores diferentes e a imagem tremula.
• Fonte que não carrega / timeout. Por padrão, o loadFont() tenta baixar todos os pesos e alfabetos, o que pode estourar o tempo. Carregue só o peso e o subset que você usa.
• Áudio fora de sincronia. Quase sempre é timing de Sequence. Para atrasar uma trilha ou narração, envolva num <Sequence from={30}> (a 30fps, 30 frames = 1 segundo).
• Render travando na nuvem. Assets puxados da internet (fonte, imagem ou vídeo por URL) podem falhar sem conexão ou atrás de firewall. Prefira arquivos locais em public/.
• Imagem que não aparece (404). O arquivo existe, mas o render não acha: quase sempre o caminho do staticFile() não bate com a pasta real dentro de public/ (ex.: o arquivo está em public/img/tools/01.png mas você pediu tools/01.png). Confira o caminho e teste com um still antes do render inteiro.

Por que isso importa além do vídeo bonito

Dois pontos que o hype não cobre direito. O primeiro é o custo que evaporou: motion design sempre foi um dos serviços mais caros do mercado criativo, porque o trabalho manual na timeline era brutal. O que o Remotion Skills faz é mover esse trabalho da timeline para o texto — quem sabe escrever um pedido claro produz o que antes exigia um profissional dedicado. A ressalva honesta: não é qualidade de estúdio de animação, e não precisa ser; para quem não edita nem tem orçamento, é melhor que qualquer alternativa acessível.

O segundo é o paradigma dos skills. O Remotion Skills não é um produto novo — é um pacote de instruções que vira o agente especialista de um domínio. O mesmo padrão vale para qualquer nicho: documentos, planilhas, design, música. Vídeo foi só o caso que explodiu primeiro, porque o resultado é visual e compartilhável. Quem entende esse padrão agora sai na frente na próxima onda.

Os limites honestos do Remotion

Nenhuma ferramenta é boa em tudo, e faz parte de um guia honesto dizer onde o Remotion não é o atalho:

• Não é animação quadro a quadro à mão. Desenho animado tradicional, rotoscopia e composição de VFX pesado (máscaras complexas, chroma key refinado) são território de ferramentas dedicadas — mas, para anúncio, curso e conteúdo de rede, você quase nunca precisa disso.
• Não é um editor de arrastar clipe. Se o objetivo é só um corte rápido de um vídeo gravado no celular, um editor visual resolve na hora. O Remotion brilha no que é programático, repetitivo e em escala — onde o mesmo template vira dezenas de vídeos.
• Pede um mínimo de estrutura mental. Pensar em cenas, componentes e frames tem uma pequena curva. A boa notícia: com o Claude Code + Skills, quem escreve um pedido claro pula a maior parte dela.
• Render local pesa em vídeo longo. Um filme de vários minutos consome máquina — mas isso a nuvem (Lambda) resolve, como já vimos.

Resumo honesto: para criar conteúdo de marketing, aulas, apresentações e divulgação de produto, em escala e por código, o Remotion é imbatível no custo-benefício. Os casos em que ele não é a melhor escolha são poucos e específicos — e, quando aparecem, quase sempre dá para resolver a parte pesada à parte e trazer o resultado de volta para dentro do fluxo.

A pegadinha honesta: quando o Remotion é pago

Um ponto que o entusiasmo costuma pular: o Remotion tem licença. É gratuito para pessoas físicas, projetos sem fins lucrativos, ONGs e empresas com até 3 pessoas — e para avaliar antes de decidir. Acima disso, uma empresa com fins lucrativos precisa de uma licença paga (pelo site remotion.pro). Para o criador individual, o freelancer ou a equipe pequena, na prática não muda nada; mas se você for levar isso para dentro de uma empresa maior, já entre sabendo — melhor descobrir agora do que depois.

Checklist para testar hoje

• Node.js e Claude Code instalados; projeto criado com create-video e npx skills add remotion-dev/skills.
• Assets (logo, fotos, fontes, música) organizados na pasta public/ antes do primeiro prompt.
• Roteiro dividido em cenas, cada cena com componentes, timing (em frames) e animações explícitas.
• Primeira versão disparada com claude -p; ajustes finos no modo interativo, vendo no Studio.
• Transições entre cenas, narração e legendas grandes (o vídeo é assistido no mudo) antes de renderizar.

Conclusão

O processo exige pensamento estruturado — aquela visão de cenas e componentes. Mas a curva de aprendizado é mínima perto do After Effects, e o resultado escala com a qualidade da sua escrita, não com as horas na timeline. Quem aprende isso agora — a montar bons prompts de vídeo e a pensar em cenas — vai produzir anúncios, aulas, apresentações e peças de divulgação num ritmo que, até ontem, dependia de um time de motion. Comece pequeno: um vídeo de 6 segundos, um prompt bem escrito, uma cena de cada vez. 🚀

Referências bibliográficas

Remotion (documentação oficial)

• Composition, Sequence e Animating properties
• interpolate(), spring() e useCurrentFrame()
• Transitions, Audio e Google Fonts
• Agent Skills, Claude Code e CLI render
• Captions, Whisper local e vídeo por dados
• Lambda (render na nuvem), Licença e solução de problemas
• Avançados: Three (3D), visualizeAudio, Light Leaks e random()
• Saída e entrega: Encoding/codecs, vídeo transparente, Player e renderMedia (servidor)
• Repositórios: remotion-dev/remotion e remotion-dev/skills

Fundamentos de motion design

• Richard Williams, The Animator’s Survival Kit — referência
• Frank Thomas & Ollie Johnston, Disney Animation: The Illusion of Life — referência
• Os 12 princípios de animação e curvas de easing

Plataformas e vídeos de produto

• Apple, App Previews (regras do vídeo de preview da App Store)
• Guia de safe zones (TikTok/Reels/Shorts) e legendas em Reels
• Vídeos de e-commerce que convertem e anúncios de moda
• Narração: ElevenLabs (voz de IA) · alternativas gratuitas: Piper e Coqui TTS
• Produção pro: boas práticas de vídeo vertical, botões de CTA e loudness (EBU R128 / LUFS)
• Assets livres: Pixabay, Pexels e Lucide (ícones)