📦 O Que é Remotion
Remotion é uma biblioteca que renderiza vídeo a partir de componentes React. Você programa o vídeo do mesmo jeito que programa um site: props, state, animações, frames. O resultado vira .mp4.
After Effects (jeito antigo)
Abrir, clicar 200 vezes, rendering longo, sem versionamento. Paga R$ 100/mês e exige curva.
CapCut / iMovie
Bom pra cortar, ruim pra animação. Sem programabilidade, sem reuso, sem agente que edita.
Remotion (jeito agentic)
Código React, agente edita, git versiona, renderiza 1080p e 9:16 do mesmo projeto. Open source.
🎯 Por que isso muda jogo
Quando vídeo vira código, ele vira tarefa que agente executa. Você descreve o roteiro, o agente monta as composições, e em 1 hora você tem 4 cortes diferentes do mesmo lançamento. Antes era trabalho de 1 semana de editor.
🛒 A Skill Remotion do Codex
Codex já vem com a skill Remotion. Em 5 minutos você tem o primeiro .mp4 saindo sem precisar saber a API toda na primeira vez.
⚡ Setup em 5 comandos
# 1. Scaffold do projeto
npx create-video@latest inboxai-launch --template=hello-world
cd inboxai-launch
# 2. Instala deps
npm install
# 3. Roda preview ao vivo (Remotion Studio)
npm run dev
# abre http://localhost:3000
# 4. Pede pro agente (com skill remotion ativa)
codex "use a skill remotion: cria composição de 30s
para o lançamento do InboxAI com 5 cenas:
1) Hook (0-3s)
2) Problema (3-9s)
3) Demo do app (9-20s)
4) Depoimento fake (20-26s)
5) CTA (26-30s)
Use os prints em ./public/screens/"
# 5. Renderiza
npx remotion render src/Root.tsx LaunchVideo out/launch.mp4📂 Estrutura de pastas que a skill cria
inboxai-launch/
├── src/
│ ├── Root.tsx ← registra todas as composições
│ ├── LaunchVideo.tsx ← composição principal (1920x1080)
│ ├── LaunchVertical.tsx← versão 1080x1920
│ ├── scenes/
│ │ ├── Hook.tsx
│ │ ├── Problem.tsx
│ │ ├── Demo.tsx
│ │ ├── Testimonial.tsx
│ │ └── CTA.tsx
│ └── components/Logo.tsx, Caption.tsx, ...
├── public/
│ └── screens/ ← prints do app vão aqui
├── out/ ← .mp4 renderizados
└── remotion.config.ts🎞️ Composições, Sequence, Animações
Três conceitos centrais bastam pra entender 90% dos vídeos Remotion: Composition (cena raiz), Sequence (intervalo) e useCurrentFrame (animação por frame).
⚛️ Composição com 3 sequences
// src/LaunchVideo.tsx
import { Composition, Sequence, AbsoluteFill,
useCurrentFrame, interpolate, spring,
useVideoConfig } from 'remotion';
export const LaunchVideo = () => {
return (
<AbsoluteFill className="bg-zinc-900">
<Sequence from={0} durationInFrames={90}>
<Hook />
</Sequence>
<Sequence from={90} durationInFrames={180}>
<Problem />
</Sequence>
<Sequence from={270} durationInFrames={330}>
<Demo />
</Sequence>
</AbsoluteFill>
);
};
// Cena com animação por frame
const Hook = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// título sobe 40px e desaparece de baixo
const y = interpolate(frame, [0, fps * 1], [40, 0]);
const opacity = spring({ frame, fps, config: { damping: 12 } });
return (
<AbsoluteFill className="flex items-center justify-center">
<h1 style={{ transform: `translateY(${y}px)`, opacity }}
className="text-7xl font-bold text-white">
Sua inbox virou caos.
</h1>
</AbsoluteFill>
);
};🧠 Mental model dos 3 conceitos
📸 Pegando Print do App pra Montar o Vídeo
Vídeo com mock genérico parece pitch de aluno. Vídeo com a UI real do produto parece lançamento sério. Workflow: Browser Use captura prints do InboxAI rodando local, Remotion importa e anima entre eles.
🔄 Pipeline completo
📜 Script do agente (browser-use → public/)
# Tarefa pro agente Browser Use
1. Abrir http://localhost:3000 (InboxAI dev)
2. Login com user de demo (creds em .env.demo)
3. Capturar screenshot 1920x1080 das telas:
- /dashboard → public/screens/01-dashboard.png
- /inbox → public/screens/02-inbox.png
- /inbox/triage → public/screens/03-triage.png
- /settings → public/screens/04-settings.png
- /reports → public/screens/05-reports.png
4. Versão mobile (390x844) das mesmas → public/screens/mobile/
# Depois, no Remotion:
import dashboard from '/public/screens/01-dashboard.png';
<Img src={dashboard} style={{ transform: zoomEffect }} />🎥 Rendering: 1080p e 9:16
Mesmo projeto, dois formatos. YouTube/Twitter pedem 1920x1080 horizontal; Reels/TikTok pedem 1080x1920 vertical. Remotion gera os dois do mesmo código se você compor responsivo.
🎬 Registrando 2 composições no Root
// src/Root.tsx
import { Composition } from 'remotion';
import { LaunchVideo } from './LaunchVideo';
import { LaunchVertical } from './LaunchVertical';
export const RemotionRoot = () => (
<>
{/* 1080p horizontal — YouTube, Twitter, LinkedIn */}
<Composition
id="LaunchHorizontal"
component={LaunchVideo}
durationInFrames={900} // 30s a 30fps
fps={30}
width={1920}
height={1080}
/>
{/* 9:16 vertical — Reels, TikTok, Shorts */}
<Composition
id="LaunchVertical"
component={LaunchVertical}
durationInFrames={450} // 15s — formatos curtos
fps={30}
width={1080}
height={1920}
/>
</>
);🚀 Comandos de render
# YouTube/Twitter — 30s, alta qualidade
npx remotion render src/Root.tsx LaunchHorizontal \
out/launch-yt.mp4 \
--crf=18 --codec=h264
# Reels/TikTok — 15s, vertical, otimizado mobile
npx remotion render src/Root.tsx LaunchVertical \
out/launch-reels.mp4 \
--crf=20 --codec=h264
# Bonus: GIF curto pro Twitter (3s)
npx remotion render src/Root.tsx LaunchHorizontal \
out/launch-teaser.gif \
--frames=0-90📤 Publicando: Otimização por Plataforma
Vídeo bom mal publicado não roda. Cada plataforma tem regras tácitas que multiplicam alcance sem custo extra de produção.
| Canal | Formato | Duração ideal | Hack |
|---|---|---|---|
| YouTube | 1920x1080 | 30-60s (Shorts: 15s) | Thumbnail custom + CTA "saiba mais" |
| Twitter/X | 1920x1080 ou 1:1 | 15-30s | Hook nos 3s, sem som default |
| 1920x1080 | 30-90s | Legenda burned-in (sem som no feed) | |
| Reels/TikTok | 1080x1920 | 9-15s | Trending audio, hook visual em 1s |
| Shorts | 1080x1920 | 15-60s | Loop perceptível ajuda no replay |
🖼️ Thumbnail com Image Gen — prompt template
# Pra agente: image-gen
"Thumbnail YouTube 1280x720 do app InboxAI.
Composição: lado esquerdo print da inbox bagunçada
em red overlay, lado direito mesmo print organizado
em green overlay. Centro: seta amarela cruzando
+ texto 'AI faz' em fonte sans-serif bold branca.
Estilo: clean, alto contraste, evitar cara do dev.
Não usar texto pequeno demais."
# Salva como: out/thumb-yt.png📌 Hack final: legenda nativa
85% das pessoas assistem sem som. Burn legenda no vídeo direto da composição Remotion (componente Caption animado por frame). Não dependa de auto-caption das plataformas — elas erram seu nome de produto.
✅ O que Aprendemos
Próximo Módulo:
5.4 — Agente de Marketing: landing page de alta conversão, copy nos frameworks certos e calendário de 30 dias gerado em uma noite.