Remotion (Vídeo Programático em React)
Framework que permite criar, animar e renderizar vídeos e motion graphics em formato MP4 utilizando código React, TypeScript e TailwindCSS.
O Que É o Remotion?
Remotion é uma biblioteca e framework de código aberto para React que permite programar vídeos da mesma forma que se desenvolvem aplicações web modernas.
Em vez de usar uma timeline visual clássica de softwares de edição (como Premiere, DaVinci Resolve ou After Effects), o Remotion trata cada segundo do vídeo como uma sequência de frames renderizados no navegador por componentes React.
$$\text{Frame Atual } (n) \rightarrow \text{Estado React} \rightarrow \text{DOM / Canvas / WebGL} \rightarrow \text{Renderizador FFmpeg} \rightarrow \text{Vídeo MP4}$$
Por Que Criadores Utilizam Remotion?
graph TD
A[Vantagens do Remotion] --> B[1. Animações Matemáticas Fluidas: spring e interpolate]
A --> C[2. Parametrização por Dados JSON: 1 Template = 100 Vídeos]
A --> D[3. Automação via CLI e Nuvem: Render em Servidores sem Interface]
A --> E[4. Geração por Agentes de IA: Claude Code escreve os componentes]- Animações Precisas com Funções Físicas: O Remotion inclui funções nativas como
interpolate()(interpolação de valores entre intervalos de frames) espring()(simulação física com massa, amortecimento e elasticidade real). - Parametrização via Dados: Você pode criar um único template visual de cartela de notícias ou gráfico de barras e renderizar 50 vídeos diferentes apenas passando arquivos de dados (
data.json). - Renderização em Linha de Comando (CLI): Totalmente integrável a scripts Bash, pipelines de CI/CD e servidores em nuvem (AWS Lambda via Remotion Lambda) para renderização paralela ultrarrápida.
- Alinhamento com Agentes de IA: Agentes como Claude Code geram código React e CSS com facilidade, tornando a criação de novos gráficos e motion graphics um processo que leva segundos.
Principais Hooks e Funções do Remotion
import { useCurrentFrame, useVideoConfig, interpolate, spring } from 'remotion';
export const ExemploAnimacao = () => {
const frame = useCurrentFrame(); // Obtém o número do frame atual (0, 1, 2...)
const { fps, durationInFrames } = useVideoConfig(); // Metadados do vídeo (ex: 60fps, 300 frames)
// Move uma caixa de 0% a 100% de largura entre os frames 10 e 40
const progresso = interpolate(frame, [10, 40], [0, 100], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
return <div style={{ width: `${progresso}%` }} className="bg-red-500 h-4" />;
};