Módulo 3.3 — remotion | Skill Design

🧩

O que é / o que faz

TÓPICO 1

Conceito principal

Remotion é um framework que trata cada frame de vídeo como um componente React.

Em vez de editar na timeline de um editor de vídeo, você escreve TypeScript/JSX. O framework controla qual "frame" está sendo renderizado via useCurrentFrame(), e você mapeia esse número para qualquer propriedade visual: opacidade, escala, posição, cor. O resultado é exportado frame-a-frame para MP4 real — sem nuvem, sem custo por render.

O que o Remotion entrega

▸ Composições definidas em src/Root.tsx com <Composition>
▸ Animações determinísticas via useCurrentFrame() + interpolate()
▸ Física de movimento com spring()
▸ Sequenciamento com <Sequence> e <Series>
▸ Render via CLI: npx remotion render

Stack real do skill

▸ React + TypeScript — o componente é o frame
▸ remotion — pacote principal + hooks
▸ @remotion/renderer — CLI de render headless
▸ @remotion/captions — legendas sincronizadas
▸ @remotion/three — integração React Three Fiber

useCurrentFrame

hook central — retorna o nº do frame

interpolate()

mapeia frames → valores CSS

spring()

física de mola, bounce natural

define fps, dimensões, duração

🎣

Quando dispara

TÓPICO 2

💡 Gatilho do skill

O skill remotion é acionado sempre que o código importa remotion ou você pede ao Claude Code para criar / editar vídeos programáticos em React. O trigger da description: "Use this skill whenever you are dealing with Remotion code to obtain the domain-specific knowledge."

Timeline de acionamento

Código importa remotion

Qualquer arquivo .tsx/.ts com import ... from 'remotion'

Pedido de vídeo programático em React

"Crie um vídeo de apresentação", "Anime esse gráfico para vídeo", "Gere um reel com texto animado"

Ajuste de animação existente

Corrigir spring bounce, ajustar fps, mudar durationInFrames, criar Sequence com delay

Render / exportação

Comandos CLI, bundling, saída MP4/WebM, parâmetros de qualidade

✓ Use o skill remotion quando...

✓ Exportar vídeo MP4/WebM real a partir de React
✓ Animar dados, gráficos, textos frame a frame
✓ Criar motion graphics controlados por código
✓ Integrar Three.js 3D diretamente no vídeo
✓ Sincronizar legendas (.srt) com áudio

✗ Não confunda com...

✗ animation-designer — anima a página HTML no browser, não exporta vídeo
✗ HyperFrames — converte HTML estático em MP4 via Puppeteer+FFmpeg, sem React
✗ 3d-animation-creator — anima objetos 3D em canvas, não exporta MP4 diretamente

import 'remotion'

gatilho automático

vídeo React

pedido explícito

spring/timing

ajuste de animação

render CLI

exportação MP4

🚀

Como melhora seus vídeos

TÓPICO 3

📊 Por que Remotion muda o jogo

Determinismo total

O mesmo frame sempre produz o mesmo pixel. Sem glitches de timeline ou renders inconsistentes.

Versionamento Git

Vídeos são código — diff, branch, merge, CI/CD. Impossível em editores tradicionais.

Componentização

Reutilize Intro, Lower Third, Outro como componentes React em múltiplos projetos.

💡 Boas práticas reais (do SKILL.md)

• Escreva animações em segundos × fps, nunca em frames fixos: 2 * fps em vez de 60
• CSS transitions / Tailwind animation classes são proibidos — não renderizam corretamente
• Sempre use extrapolateRight: 'clamp' para não vazar valores fora do intervalo
• Use premountFor em toda <Sequence> para evitar pop-in visual

✓ Com o skill ativo

✓ spring() com damping correto → sem bounce excessivo
✓ interpolate() com clamp → sem artefatos nos extremos
✓ Sequences premountadas → transições suaves
✓ Animações escritas em segundos → portáveis entre fps

✗ Sem o skill

✗ CSS transition no JSX → frame renderiza estático
✗ interpolate sem clamp → valores negativos de opacidade
✗ Sequence sem premount → elementos piscam ao entrar
✗ spring sem delay correto → animações sobrepostas

determinismo

mesmo frame = mesmo pixel

Git-friendly

vídeo como código

extrapolate clamp

valores nunca vazam

fps × segundos

portabilidade de timing

⚙️

Como funciona por dentro

TÓPICO 4

Anatomia de uma composição Remotion

// src/Root.tsx — define a composição

import {'{'} Composition {'}'} from 'remotion';

import {'{'} MyVideo {'}'} from './MyVideo';

export const RemotionRoot = () => (

<Composition

id="MyVideo"

component={'{'}MyVideo{'}'}

durationInFrames={'{'}150{'}'}

fps={'{'}30{'}'}

width={'{'}1920{'}'}

height={'{'}1080{'}'}

);

interpolate() — linear com easing

// FadeIn determinístico

import {'{'} useCurrentFrame, interpolate, Easing {'}'} from 'remotion';

const FadeIn = () => {'{'}

const frame = useCurrentFrame();

const {'{'} fps {'}'} = useVideoConfig();

const opacity = interpolate(

frame, [0, 2 * fps], [0, 1],

{'{'} extrapolateRight: 'clamp' {'}'}

);

return <div style={'{'}{'{'}opacity{'}'}{'}'}}>Olá!</div>;

{'}'}

spring() — física de mola

// Configurações recomendadas

import {'{'} spring, useVideoConfig {'}'} from 'remotion';

// suave, sem bounce

const smooth = {'{'} damping: 200 {'}'};

// snappy com leve bounce

const snappy = {'{'} damping: 20, stiffness: 200 {'}'};

// pesado, lento

const heavy = {'{'} damping: 15, stiffness: 80, mass: 2 {'}'};

const scale = spring({'{'} frame, fps, config: smooth {'}'});

Sequence + Series — sequenciamento

// Sempre usar premountFor em Sequence!

import {'{'} Sequence, Series {'}'} from 'remotion';

// Sequence manual com delay

</Sequence>

// Series — um após o outro, sem overlap

<Series.Sequence durationInFrames={'{'}45{'}'}><Intro /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}60{'}'}><Main /></Series.Sequence>

<Series.Sequence offset={'{'}-15{'}'} durationInFrames={'{'}30{'}'}><Outro /></Series.Sequence>

</Series>

💡 Render via CLI

# Render para MP4

npx remotion render MyVideo out/video.mp4

# Render apenas frames específicos (preview)

npx remotion render MyVideo out/video.mp4 --frames=0-30

# Studio (preview interativo no browser)

npx remotion studio

src/Root.tsx

entrypoint de composições

AbsoluteFill

camada de fundo padrão

premountFor

carrega antes de exibir

offset negativo

overlap entre cenas

💬

Exemplo prático + PROMPT pronto

TÓPICO 5

Cenário: vídeo de apresentação de produto (30s, 30fps = 900 frames)

Um vídeo 1920×1080 com três cenas encadeadas via Series: Intro com logo fazendo fade in + spring scale, Features listando 3 itens com stagger, CTA com texto pulsante. Exportado para MP4 via CLI.

MyVideo.tsx — composição completa

// src/MyVideo.tsx

import {'{'} AbsoluteFill, Series, useCurrentFrame, useVideoConfig, interpolate, spring {'}'} from 'remotion';

const Intro: React.FC = () => {'{'}

const frame = useCurrentFrame();

const {'{'} fps {'}'} = useVideoConfig();

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

const scale = spring({'{'} frame, fps, config: {'{'} damping: 200 {'}'} {'}'});

return (

<h1 style={'{'}{'{'}opacity, transform:`scale(${'{'} scale {'}'})`, color:'#a855f7', fontSize:80{'}'}{'}'}>MeuProduto</h1>

</AbsoluteFill>

);

{'}'}

export const MyVideo: React.FC = () => (

<Series.Sequence durationInFrames={'{'}3 * fps{'}'}><Intro /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}5 * fps{'}'}><Features /></Series.Sequence>

<Series.Sequence durationInFrames={'{'}2 * fps{'}'}><CTA /></Series.Sequence>

</Series>

);

📋 PROMPT pronto — cole no Claude Code

Crie um projeto Remotion completo em TypeScript com as seguintes specs: - Composição "PromoVideo": 1920×1080, 30fps, 300 frames (10s) - Cena 1 (frames 0-90): logo fazendo fade-in com spring scale (damping: 200), sem bounce - Cena 2 (frames 90-240): 3 features listadas com stagger de 20 frames cada, interpolate opacity+translateY - Cena 3 (frames 240-300): CTA com texto pulsante via spring in-out - NUNCA usar CSS transitions — somente useCurrentFrame + interpolate/spring - SEMPRE extrapolateRight/Left: 'clamp' em todos os interpolate() - SEMPRE premountFor={fps} em toda Sequence - Exportar comando: npx remotion render PromoVideo out/promo.mp4

cenas em Series

encadeamento limpo

stagger manual

frame offset por item

in-out spring

entrada + saída suaves

CLI render

npx remotion render

🧬

Combina com / limites

TÓPICO 6

⚠️ Diferença crítica — três ferramentas distintas

⚛️ remotion (este módulo)

React → frames → MP4. Exporta vídeo real. Requer Node.js, TypeScript. Animações via useCurrentFrame, determinísticas.

🎬 HyperFrames (3.4)

HTML+CSS → Puppeteer → FFmpeg → MP4. Sem React. Anima HTML estático. Mais simples, menos controle por frame.

🎬 animation-designer (3.1)

Framer Motion / CSS / GSAP na página HTML. Não exporta vídeo — anima apenas no browser.

🔗 Combina bem com

▸
3d-animation-creator (3.2)
Use @remotion/three para embutir cenas React Three Fiber diretamente na composição Remotion — 3D renderizado frame a frame, exportado como MP4.
▸
HyperFrames / seedance (3.4)
Use Remotion para gerar clipes complexos e HyperFrames/FFmpeg para montar a edição final: concatenar, adicionar música, overlays simples sem rebuild React.
▸
canvas-design (2.3)
Exporte assets do canvas-design como imagens estáticas e importe no Remotion com <Img> ou staticFile().

🚫 Quando NÃO usar Remotion

✗ Só quer animar a landing page — use animation-designer
✗ Tem HTML pronto e quer MP4 rápido sem React — use HyperFrames
✗ Quer apenas visualizar 3D em canvas — use 3d-animation-creator
✗ Precisa de render em nuvem sem Node.js local — considere Remotion Lambda
✗ Projeto não-React (Vue, Angular, HTML puro) — use HyperFrames/FFmpeg

Comparativo rápido — Mídia T3

Skill	Exporta MP4?	Stack	Controle por frame?
⚛️ remotion	✓ Sim	React + TypeScript	✓ Total
🔁 HyperFrames	✓ Sim	HTML + Puppeteer + FFmpeg	~ Parcial (CSS)
🎬 animation-designer	✗ Não	Framer Motion / CSS	✗ Browser only
🖱️ 3d-animation-creator	✗ Não direto	Three.js / p5.js / Canvas	~ Via @remotion/three

@remotion/three

3D direto no vídeo

staticFile()

assets do projeto

Remotion Lambda

render na nuvem AWS

calculateMetadata

duração dinâmica por dados

📋 Resumo do Módulo 3.3

O que você aprendeu

✓ Remotion = vídeo programático em React, frame = componente
✓ useCurrentFrame() + interpolate() controlam toda animação
✓ spring() entrega física de mola com configurações precise
✓ CSS transitions são proibidos — quebram o render
✓ <Sequence> / <Series> sequenciam cenas com premount
✓ Render via npx remotion render → MP4 local
✓ Diferença clara vs HyperFrames e animation-designer
✓ @remotion/three conecta com 3d-animation-creator

Próximo módulo

3.4 🔁 seedance + HyperFrames/FFmpeg

Loop de vídeo com seedance, edição não-linear com HyperFrames e montagem final via FFmpeg — o pipeline completo de produção sem React.

Ir para 3.4 →

← Voltar para Trilha 3 Próximo Módulo → 3.4 🔁 seedance