Kit de Ferramentas de Vídeo Remotion
Escreva componentes React, obtenha vídeos MP4 reais. Este skill ensina seu agente de IA a construir com Remotion — desde uma primeira animação até um pipeline de renderização de produção.
29 regras. Todos os principais recursos do Remotion cobertos.
O que você pode construir com isso
Vídeo personalizado em escala Alimente dados de usuário como props JSON, renderize um vídeo único por usuário. Pense em Spotify Wrapped, GitHub Unwrapped, tutoriais de integração — um modelo, milhares de saídas.
Clipes automatizados para redes sociais Puxe dados ao vivo (estatísticas, rankings, métricas de produto) e renderize postagens de vídeo diárias ou semanais sem que ninguém mexa em um editor de timeline.
Anúncios dinâmicos e vídeos de marketing Troque nome do cliente, imagem do produto, preço. Mesmo modelo, variações infinitas. Renderize no lado do servidor via API ou Lambda.
Visualizações de dados animadas Transforme dashboards e relatórios de KPI em clipes de vídeo compartilháveis com gráficos e transições animados.
Legendas para TikTok e Reels Transcreva áudio, exiba legendas destacadas palavra por palavra, exporte pronto para upload.
Vídeos de demonstração de produto Gere automaticamente a partir do seu banco de dados — imagens, especificações, preços — direto para MP4.
Conteúdo educacional e explicativo Materiais de curso animados, vídeos de certificado, tutoriais passo a passo — todos orientados por código.
Geração de vídeo como serviço Exponha a renderização como um endpoint HTTP. Seu aplicativo envia JSON, recebe um arquivo de vídeo.
Requisitos
- Node.js 18+
- React 18+ (Remotion renderiza componentes React quadro a quadro)
- Remotion — inicialize com
npx create-video@latest - FFmpeg — já incluso com
@remotion/renderer, sem instalação separada - Para renderização serverless: conta AWS (Lambda) ou GCP (Cloud Run)
O que está incluso
Núcleo
| Regra | Descrição |
|---|---|
| Composições | Defina vídeos, imagens estáticas, pastas, props padrão, metadados dinâmicos |
| Renderização | CLI, API Node.js, AWS Lambda, Cloud Run, padrões de servidor Express |
| Calcular metadados | Defina duração, dimensões e props dinamicamente no momento da renderização |
Animação e temporização
| Regra | Descrição |
|---|---|
| Animações | Fade, escala, rotação, deslizamento |
| Temporização | Curvas de interpolação, easing, física de molas |
| Sequenciamento | Atrase, encadeie e orquestre cenas |
| Transições | Transições de cena para cena |
| Corte | Corte o início ou o fim de qualquer animação |
Texto e tipografia
| Regra | Descrição |
|---|---|
| Animações de texto | Efeitos de máquina de escrever, destaque de palavras, revelação |
| Fontes | Google Fonts e carregamento de fontes locais |
| Medição de texto | Ajuste texto a contêineres, detecte estouro |
Mídia
| Regra | Descrição |
|---|---|
| Vídeos | Incorporar, cortar, velocidade, volume, loop, alteração de tom |
| Áudio | Importar, cortar, fade, controle de volume e velocidade |
| Imagens | O componente Img |
| GIFs | Reprodução de GIF sincronizada com a timeline |
| Ativos | Importação de qualquer mídia em composições |
| Verificação de decodificação | Valide a compatibilidade do navegador |
Legendas e subtítulos
| Regra | Descrição |
|---|---|
| Transcrever legendas | Áudio para legendas via Whisper, Deepgram ou AssemblyAI |
| Exibir legendas | Destaque palavra por palavra estilo TikTok |
| Importar SRT | Carregue arquivos .srt existentes |
Visualização de dados
| Regra | Descrição |
|---|---|
| Gráficos | Gráficos de barras animados, gráficos de linhas, visuais orientados por dados |
Avançado
| Regra | Descrição |
|---|---|
| Conteúdo 3D | Three.js e React Three Fiber |
| Lottie | Animações do After Effects via Lottie |
| TailwindCSS | Estilize composições com Tailwind |
| Medição de DOM | Meça dimensões de elementos no momento da renderização |
Utilitários de mídia
| Regra | Descrição |
|---|---|
| Duração do vídeo | Obtenha o comprimento em segundos |
| Dimensões do vídeo | Obtenha largura e altura |
| Duração do áudio | Obtenha o comprimento do áudio |
| Extrair quadros | Extraia quadros em timestamps específicos |
Início rápido
# Inicialize um projeto
npx create-video@latest meu-video
# Visualize no navegador
cd meu-video && npm start
# Renderize para MP4
npx remotion render src/index.ts MinhaComposicao out/video.mp4
# Passe dados dinâmicos
npx remotion render src/index.ts MinhaComposicao out.mp4 --props '{"title": "Olá"}'
Contribua
Fonte: github.com/shreefentsar/remotion-video-toolkit
Faltando algo? Encontrou uma abordagem melhor? Abra um PR — novas regras, exemplos aprimorados, correções de bugs são todos bem-vindos.
Construído por Zone 99