Skill Adaptativa de Motion Graphics com React & Remotion
Esta skill guia o design, direção de arte sensível ao contexto, estruturação narrativa fluida e renderização headless de motion graphics de nível profissional usando React e Remotion.
Filosofia Central: "A forma segue o contexto." Nunca force um modelo rígido ou um número fixo de atos em cada vídeo. Avalie primeiro a marca, duração, proporção e público — depois selecione autonomamente o arquétipo estrutural ideal e a linguagem de design moderna para construir uma composição React sob medida.
1. Consulta e Avaliação de Ativos (Etapa 0)
Antes de escrever código ou renderizar, execute a Consulta de Ativos e Diagnóstico de Contexto:
🎯 Regra Obrigatória de Consulta de Ativos
A menos que o usuário já tenha fornecido explicitamente arquivos de imagem, logotipos ou tokens de design em seu prompt, você DEVE perguntar ativamente ao usuário sobre seus ativos existentes:
Modelo de Consulta de Ativos: "Você possui algum ativo como logotipo da marca (SVG/PNG), capturas de tela do produto, fotos reais, cores oficiais (HEX), slogan/cópia para usar no vídeo?
- Se tiver ativos: Informe os caminhos dos arquivos ou coloque-os na pasta
public/do projeto para que eu os mapeie precisamente no vídeo.- Se não tiver ativos ou quiser que eu mesmo crie ('faça você mesmo'): Eu reconstruirei os vetores oficiais da identidade visual da marca/entidade e projetarei componentes visuais cinematográficos e UI personalizados para completar o vídeo."
Roteamento de Execução de Ativos em 3 Trilhas:
- Trilha A (Ativos Fornecidos pelo Usuário):
- Verificar primeiro o espaço de trabalho local / pasta
public/. - Ingerir caminhos vetoriais SVG, imagens em alta resolução e capturas de tela via
staticFile('...'). - Aplicar micro-panning Ken Burns (
references/asset-orchestration.md) e maquetes em perspectiva 3D.
- Verificar primeiro o espaço de trabalho local / pasta
- Trilha B (Sem Ativos / Geração Autônoma):
- Se o usuário disser "não tenho", "faça você mesmo" ou não fornecer ativos: nunca pare ou fique bloqueado.
- Reconstruir autonomamente os vetores da identidade corporativa oficial (CI) (
references/brand-identity-and-ci.md). - Sintetizar metáforas visuais autênticas do domínio, cartões estilizados, crachás vetoriais e motivos geométricos.
- Trilha C (Orquestração Híbrida):
- O usuário fornece apenas um logotipo ou URL: extrair tokens de cor, construir autonomamente a UI do produto, painéis e o mundo narrativo ao redor.
Diagnóstico de Contexto do Projeto (4 Dimensões)
1. Plataforma de Destino e Proporção:
• 16:9 Paisagem (1920×1080) -> YouTube, landing pages principais, showreels de apresentação
• 9:16 Retrato (1080×1920) -> TikTok, Instagram Reels, YouTube Shorts
• 1:1 Quadrado (1440×1440) -> Feeds do Twitter/X, posts do Instagram, loops de UI táteis
• 4:5 Retrato (1080×1350) -> Feeds de marketing social
2. Duração e Ritmo:
• Ultra-curto (3–7s) -> Bumper cinético de logotipo, motivo de assinatura em loop, micro-interação
• Curta (8–15s) -> Reel social de alta retenção, funcionalidade viral de produto, elevator pitch
• Média (15–30s) -> Filme completo de identidade de marca, lançamento abrangente de produto
• Longa (30–60s) -> Explicador de produto com múltiplos capítulos, aniversário da empresa, showreel
3. Identidade da Entidade e Tom:
• Empresa / Companhia Aérea / Automotiva -> Digno, expansivo, aerodinâmico, luxuoso
• Tech de Alto Crescimento / SaaS / AI -> Nítido, tátil, hiper-velocidade, titânio escuro
• Acadêmico / Universidade / Cultural -> Histórico, autoritário, serifado editorial, intelectual
• Consumidor / Criativo / Estilo de Vida -> Vibrante, tátil, elástico, brincadeira tipográfica
4. Arco Narrativo e Hierarquia de Mensagem:
• Gancho (0–20%) -> Substanciação/Recurso (20–70%) -> Recompensa da Marca & CTA (70–100%)
2. Arquétipos Estruturais Adaptativos
Selecione a estrutura narrativa que se ajusta naturalmente à duração e ao objetivo — nunca force um molde rígido de 4 atos quando um loop ágil ou um golpe de 2 batidas for superior:
| Arquétipo | Duração Típica | Ritmo e Estrutura de Cena | Melhor Uso Para |
|---|---|---|---|
| A. Bumper Cinético / Micro-Loop | 3s – 6s (6–12 batidas) | Momentum de foco único: Gancho visual instantâneo → Morfose contínua e sem costura → Bloqueio do logotipo principal (delta de costura do loop < 0,05). | Revelações de logotipo, loops de UI de assinatura, estados de carregamento de aplicativos |
| B. Reel Social Vertical / Shorts | 8s – 15s (16–30 batidas) | Regra dos 3 Segundos: 0–1s Gancho ousado que interrompe a rolagem → 2–10s Substanciação cinética rápida (3 cortes rápidos escalonados) → 11–15s Chamada para Ação (CTA) impactante. | Instagram Reels, TikTok, YouTube Shorts |
| C. Filme Narrativo de Marca | 15s – 30s (30–60 batidas) | Arco Sinfônico de 4 Atos: A Partida/Gancho (0–20%) → A Substância/Rede (20–55%) → A Elevação Estratosférica (55–80%) → A Recompensa Icônica (80–100%). | Grandes filmes de marca (ex: Korean Air, lançamento nível Apple) |
| D. Explicador Multicapítulo | 30s – 60s (60–120 batidas) | Jornada em Capítulos: Gancho do Ponto de Dor → Detalhamento Arquitetônico → Demonstração Profunda de Recurso → Prova Social & Ecossistema → Bloqueio Final da Marca. | Explicadores SaaS, visões gerais institucionais, decks de investidores |
| E. Morfose Contínua de Forma | Qualquer duração | Identidade Ininterrupta: Um contêiner principal nunca corta ou sai da tela; morfoseia continuamente dimensão, raio e conteúdo interno. | Showcase de UI tátil, loops de morfose de produto |
3. Espectro de Linguagem de Design Moderno
Selecione autonomamente a linguagem visual que corresponde à personalidade da entidade:
[1. Neo-Brutalista Suíço] Grids ultra-disciplinados, sans-serif grotesco negrito (Geist, Inter), alto contraste papel/tinta, zero firula.
[2. Titânio Escuro Luxuoso] Estética Apple/Stripe, obsidiana profunda (#0B0C10), bordas de 1px, brilhos metálicos, dourado/vermelhão quente.
[3. Serifado Editorial & Filme] Dignidade acadêmica e cultural, serifa moderna negrito (Instrument Serif, Editorial New), papel quente, espaçamento entre letras.
[4. Halftone Óptico & Ponto] Artesanato gráfico de estúdio, matriz de pontos dinâmica responsiva, transições de onda halftone, vibe retrô-moderna.
[5. UI Tátil Física] Maestria em SaaS e ferramentas, molas de pressão físicas, arrasto com efeito elástico, abas líquidas, cursores físicos.
[6. Aerodinâmico Cinematográfico] Aviação, automotivo, mobilidade; trajetórias de voo amplas, HUDs de telemetria, iluminação de horizonte, escala expansiva.
[7. Pop Vibrante & Geometria] Aplicativos criativos, ferramentas de consumo; blocos de cor plana e vibrante, transições elásticas de forma, tipografia impactante.
(Consulte references/design-styles.md para receitas de código, paletas e pares tipográficos de cada estilo).
4. Arquitetura do Projeto Remotion
Cada projeto usa a estrutura Remotion verificada, sem números mágicos:
my-motion-project/
├── package.json # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts # Aceleração GPU Chrome/Edge D3D11 do sistema
├── tsconfig.json # ES2022, NodeNext, jsx: react-jsx
└── src/
├── index.ts # registerRoot(Root) ponto de entrada
├── Root.tsx # Registro <Composition> (dimensões, fps, duração)
├── compositions/ # Linha do tempo da composição mestre
├── scenes/ # Cenas <Sequence> modulares
├── components/ # UI reutilizável, logotipos de marca, cursores, maquetes
└── constants/ # Paleta, ajudantes de temporização 120 BPM, tipografia
remotion.config.ts (Integração com Chrome do Sistema)
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. Execução e CLI de Renderização
# 1. Pré-visualização interativa do estúdio (linha do tempo ajustável e HMR em tempo real)
npm run preview # ou: npx remotion preview src/index.ts
# 2. Renderizar MP4 Mestre a 60fps
npm run build # ou: npx remotion render src/index.ts <CompId> out.mp4
# 3. Capturar quadro-chave em alta resolução
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. Índice de Documentação de Referência
Ao criar aspectos específicos de um motion graphic, consulte estes guias detalhados:
- structural-archetypes.md: 5 modelos estruturais (Micro-loops, Reels Sociais, Filmes de Marca, Explicadores Multicapítulo, Morfoses Contínuas).
- design-styles.md: 7 estilos de design moderno (Neo-Brutalista Suíço, Titânio Escuro, Serifado Editorial, Halftone Óptico, UI Tátil, Mobilidade Cinematográfica, Pop Vibrante) com paletas e tipografia.
- brand-identity-and-ci.md: Reconstrução autônoma de vetor CI, mecânicas de revelação de logotipo, regras de cor e motivos de marca.
- storytelling-and-narrative.md: Arco narrativo, metáforas visuais, transições de objetos compartilhados e ritmo.
- asset-orchestration.md: Pan/zoom Ken Burns, maquetes em perspectiva, crachás vetoriais SVG e hierarquia visual.
- remotion-patterns.md: Mecânicas de mola,
interpolate(), contêineres de câmera, cascatas de escalonamento e orquestração<Sequence>. - ui-motion-recipes.md: Cursores, contadores ao vivo, controles deslizantes, modais, cartões de notificação e gráficos.
- remotion-qa-and-verification.md: Loop de QA em 3 etapas, lista de verificação de pôster em 10 pontos e renderização headless por GPU.
- timing.md: Grades de batidas musicais a 120 BPM, matemática de quadros, deslocamentos de escalonamento e limites de retenção.
- motion-math.md: Molas harmônicas, PRNG com semente e zoom de câmera logarítmico.
- gotchas.md: Armadilhas de renderização do Chromium,
preserve-3d, máscaras de estouro e prevenção de desfoque de texto.