saisandeep17/pro-motion-graphics

Pro Motion Graphics (Arquitetura V2)

Crie vídeos de motion graphics nítidos, determinísticos e de nível profissional que pareçam feitos por um diretor técnico de motion sênior. Este skill impõe padrões visuais rigorosos anti-slop, física matemática, roteamento multi-mecanismo e um pipeline de produção de ponta a ponta com 10 estágios.

---

Quando Ativar Este Skill

• Gerando código de vídeo programático (Remotion / React, HTML/CSS/SVG + GSAP, ou HTML5 Canvas).
• Construindo categorias de vídeo: Reels/Shorts para Redes Sociais (9:16), Promos de Marca (16:9 / 1:1), Lançamentos de Produto SaaS, Micro-Demos de UI, Tipografia Cinética Cinematográfica, ou Explicadores Técnicos.
• Refatorando animações que parecem "AI slop" (blobs borrados e confusos, brilhos neon mesh, gradientes genéricos, fades CSS sem ancoragem, easing linear mecânico).
• Planejando storyboards precisos por quadro, temporização matemática e sincronização de design de som antes de escrever código.

---

Regras de Execução do Modelo (Otimizado para Sonnet & Haiku)

1. Números sobre Adjetivos: Traduza todas as intenções estéticas diretamente em tokens numéricos exatos (contagens de quadro, stiffness/damping de mola, curvas cubic-bezier, incrementos de grid de 8px e cores hex/OKLCH). Nunca descreva polimento visual com adjetivos vagos.
2. Matemática de Quadro Determinística: Toda animação deve ser estritamente orientada por uma variável frame ou progress de timeline explícita ($0.0 o 1.0$). Nunca use Math.random() não seedado, setTimeout ou keyframes CSS infinite não ancorados que dessincronizam durante a renderização.
3. Propriedades Seguras para GPU Apenas: Anime transform (translate3d, scale, rotate), opacity, clip-path, ou SVG stroke-dashoffset. Nunca anime width, height, top, left, ou filter: blur() pesado por quadro.
4. Higiene das Regras de Hooks do React: No Remotion, spring() é uma função de cálculo pura. Nunca prefixe helpers matemáticos com use (ex: use getStaggerSpringProgress(), não useStaggerSpring()) para evitar violações das Regras de Hooks do React dentro de loops .map().

---

Matriz de Roteamento Multi-Mecanismo

Antes de gerar o código do projeto, avalie o briefing usando o Guia de Seleção de Mecanismo:

• Mecanismo A: Remotion (React): Melhor para maquetes de UI complexas, lançamentos SaaS, vídeos modulares de múltiplas cenas, reels orientados a dados e renderização CLI precisa por quadro.
• Mecanismo B: HTML/CSS/SVG + GSAP: Melhor para tipografia cinética, manifestos de marca editoriais, animações de traço SVG de logotipo e reprodução leve em navegador. Veja Padrões GSAP.
• Mecanismo C: HTML5 Canvas: Melhor para gráficos processuais, redes de partículas, animações matemáticas e efeitos visuais generativos.

---

Pipeline de Produção de Vídeo de 10 Estágios

Siga estes estágios sequenciais para cada projeto:

Estágio 1: Entender o Briefing

Identifique a plataforma de destino, proporção de aspecto, duração ($t$), FPS, mensagem central, tom visual e ativos disponíveis. Faça apenas perguntas essenciais que faltam (máximo de 4 bullets). Se os detalhes não forem especificados, aplique os padrões do estúdio:

• Proporção de Aspecto: 16:9 (1920x1080) para Desktop/Web; 9:16 (1080x1920) para Redes Sociais.
• Framerate: 60fps para UI e Redes Sociais; 30fps para Editoriais e Explicadores; 24fps para Tipo Cinematográfico.

Estágio 2: Roteamento de Categoria

Mapeie a solicitação para um dos 6 blueprints de categoria nos Playbooks de Categoria:

• Categoria A: Reels, TikToks e Shorts para Redes Sociais (9:16, 60fps, 12s–30s)
• Categoria B: Promoção e Manifesto de Marca (16:9 / 1:1, 30fps, 20s–45s)
• Categoria C: Vídeo de Lançamento de Produto SaaS (16:9, 60fps, 45s–90s)
• Categoria D: Destaque de Funcionalidade / Micro-Demo de UI (1:1 / 4:5, 60fps, 10s–25s)
• Categoria E: Tipografia Cinética Cinematográfica (16:9 / 9:16, 24/30fps, 15s–45s)
• Categoria F: Vídeos Explicativos e Educacionais (16:9, 30/60fps, 45s–120s). Detalhado no Playbook de Explicadores.

Estágio 3: Descoberta e Verificação de Ativos

Colete ativos autênticos da marca (logotipos, capturas de tela de UI, fontes, paletas de cores).

• Mantenha logotipos genuínos da marca intactos sem distorcer a proporção de aspecto.
• Nunca substitua capturas de tela reais de produtos por placeholders de UI fabricados quando capturas de tela autênticas forem fornecidas.
• Verifique os caminhos dos ativos usando scripts/check-assets.

Estágio 4: Planejamento do Storyboard e Temporização Matemática

Construa uma tabela de timeline explícita calculando números de quadro a partir de segundos e FPS: $$\text{frame} = \text{round}(t \times fps)$$ Defina horários de início/término da cena, descrições visuais, transições de câmera e sinais de áudio. Garanta que as durações da cena correspondam à duração total de destino sem sobreposições acidentais.

Estágio 5: Sistema de Design Centralizado (BRAND_CONFIG)

Estabeleça tokens de design antes de escrever o JSX/HTML da cena:

• Cores: Escolha um sistema curado das Regras Anti-Slop (Swiss Technical Dark, Editorial Warm Paper, ou Kinetic Mono).
• Tipografia: Siga o Guia de Tipografia (Display com tracking negativo -0.04em + Metadados Monoespaçados com tracking positivo +0.08em + tabular-nums).
• Geometria: Reforce a matemática de raio de canto concêntrico: $R_{interno} = \max(0, R_{externo} - Padding)$.

Estágio 6: Código de Produção Modular

Gere código limpo e modular com base no starter do mecanismo escolhido em templates/:

• templates/remotion-starter/: Composição Remotion modular com config.ts, motion.ts e componentes.
• templates/gsap-starter/: Configuração de timeline GSAP determinística por quadro.
• templates/canvas-starter/: Loop de desenho procedural em canvas 2D. Verifique a estrutura com scripts/validate-project.

Estágio 7: Áudio e Design de Som

Incorpore camadas de som seguindo o Guia de Design de Áudio:

• Abafe a música de fundo em 12–16dB durante segmentos de narração falada.
• Alinhe os "whooshes" de transição 2 quadros antes do ponto médio visual; alinhe os "thuds" de impacto no quadro de contato visual exato.
• Garanta que toda a música seja livre de royalties / licenciada para uso comercial.

Estágio 8: Renderização e Codificação

Renderize usando configurações determinísticas de alta qualidade:

# MP4 Web de Alta Qualidade Remotion (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18

Estágio 9: Garantia de Qualidade Visual

Execute a Lista de Verificação de Qualidade de Vídeo:

• Renderize quadros de pré-visualização estáticos em 25%, 50%, 75% e 100% da duração (npx remotion still ... --frame=N).
• Audite corte de texto, alinhamento de grid de 8px, taxas de contraste e zonas seguras (9:16 topo 220px / base 340px).
• Verifique a saída final do vídeo usando scripts/inspect-output out/video.mp4.

Estágio 10: Entrega e Handoff

Forneça:

1. Arquivo de saída de vídeo renderizado (ou comando de renderização reproduzível exato).
2. Projeto fonte limpo correspondente à arquitetura do template.
3. Ativos referenciados organizados em public/.
4. Instruções de execução e logs de verificação.

---

Portões de Qualidade Obrigatórios

Antes de concluir qualquer tarefa de motion graphics, verifique:

• Nenhum blob genérico de filter: blur() ou gradientes de IA roxo para azul.
• Nenhuma violação das Regras de Hooks do React (use helpers puros como getStaggerSpringProgress).
• Todas as animações orientadas deterministicamente por frame ou progress normalizado.
• node scripts/validate-project.js <project-dir> sai com código 0.
• node scripts/check-assets.js <project-dir> sai com código 0.
• Saída de renderização verificada via node scripts/inspect-output.js <output-path>.