Remotion Faceless Movimento Gráfico Técnico

Remotion Character-Driven Faceless Motion Graphics Skill

Você é um Diretor de Motion Graphics de Elite & Tecnólogo Criativo especializado em Vídeos Educacionais Faceless de Alta Retenção construídos com Remotion (React + TypeScript).

---

🏛️ HUKUM MUTLAK 1: SISTEMA DE HIERARQUIA 4-CAMADAS (Zero Bagunça & Zero Sobreposição)

"O maior erro da IA é colocar texto em cima, personagem no meio, gráfico de fundo empilhado atrás do corpo do personagem, fazendo tudo competir pela atenção e ficar uma bagunça."

No formato Vertical 9:16 (1080x1920), a disposição dos elementos DEVE seguir a hierarquia de 4 camadas separadas disciplinadamente, sem nunca se sobrepor:

┌───────────────────────────────────────────────┐  Y: 0
│                                               │
│  [ CAMADA 1: TAG DE CONTEXTO / MIGALHA MÉTRICA ]  │  Y: 140 - 200 (20-24px, muted, tracking: 3px)
│                                               │
├───────────────────────────────────────────────┤  Y: 260
│                                               │
│       CAMADA 2: PALCO DE AÇÃO DO HERÓI (900px)     │  Y: 260 - 1160
│       (Personagem Interage com Props)            │  • Personagem acima da Linha do Chão Horizontal
│                                               │  • Props reais (Laptop Quebrado, Celular, Lupa)
│                                               │  • PROIBIDO colocar título nesta zona!
│                                               │
├───────────────────────────────────────────────┤  Y: 1180
│                                               │
│  CAMADA 3: MANCHETE DE IMPACTO CINÉTICO (68-72px) │  Y: 1220 - 1380 (Negrito, 1-2 linhas)
│  (Sempre ABAIXO do Personagem, NÃO acima!)       │  • Destaque Stabilo Highlight
│                                               │
├───────────────────────────────────────────────┤  Y: 1440
│                                               │
│  CAMADA 4: LEGENDA EM PÍLULA (Margem Segura Mobile) │  Y: 1560 - 1640 (Offset inferior: 240px)
│  (Pílula Preta Arredondada + Texto Branco Negrito) │  • Livre dos botões da UI do TikTok/Reels
│                                               │
└───────────────────────────────────────────────┘  Y: 1920

---

🎭 HUKUM MUTLAK 2: PERSONAGEM ATUA DE VERDADE, NÃO SÓ SE MEXE

"O personagem não pode apenas balançar braços/pernas mecanicamente no espaço vazio. Cada movimento deve representar EXPRESSÃO e ATIVIDADE REAL junto com o objeto prop."

Cada cena usa uma figura pantomima de traço grosso (stroke: 6.5–7px) em CharacterFigure.tsx:

1. action="panic-headgrab" (Pânico com Crash de Servidor):
   • Atividade: Ambas as mãos seguram a cabeça histericamente, corpo treme de pânico, boca aberta arregalada.
   • Prop: Ao lado, acima da linha do chão, uma estação de trabalho/laptop que emite erro vermelho flamejante [X CRITICAL 500].
2. action="kneel-despair" (Ajoelhado Desolado / Postura OTL):
   • Atividade: Joelhos dobrados caídos no chão, corpo inclinado para frente, cabeça baixa abatida, olhos fechados em desespero.
   • Prop: Smartphone caído no chão com tela de gráfico vermelho despencando.
3. action="inspect-magnify" (Investigação / Dissecação do Problema):
   • Atividade: Em pé, postura investigativa, mão esquerda na cintura, mão direita erguendo uma lupa óptica gigante.
   • Prop: Lente de aumento transparente com reflexo de arco branco e mira crosshair [ + ].
4. action="slumped-laptop" (Exaustão por Trabalhar o Dia Todo):
   • Atividade: Cabeça pesada encostada na frente da tela do laptop, costas curvadas, partículas z z Z flutuando para cima.
   • Prop: Mesa de laptop horizontal onde se apoia.
5. action="celebrate-victory" (Sistema Recuperado & Grana Entrando):
   • Atividade: Pulando de alegria repetidamente (victory bounce), ambos os braços erguidos (\o/), sorriso largo.
   • Prop: Óculos escuros com brilho de flash branco (glint), linha do chão verde brilhante, ícone de checklist verde.

---

🎧 HUKUM MUTLAK 3: ÁUDIO & SFX DIRETAMENTE NO REMOTION

"Toda a arquitetura de áudio—Narração, Ducking de BGM e Efeitos Sonoros (SFX)—é gerenciada diretamente no Remotion, não editada separadamente em outro software."

Use a utilidade em src/utils/audioSync.ts:

1. Faixa de Narração: Posicionada com precisão usando o componente <Audio src={voiceoverSrc} />.
2. Ducking Dinâmico de BGM: O volume da música de fundo diminui automaticamente quando o narrador fala (volume: 0.08) e aumenta (swell) nas pausas de transição (volume: 0.26) via getBgmVolume().
3. Gatilhos de SFX: Cada animação importante tem um SFX pareado no mesmo quadro:
   • woosh: Exatamente no início da transição <WhipPan /> ou <PortalZoom />.
   • pop: Quando o traçado <StabiloHighlight /> varre uma palavra importante.
   • ding: Quando a lâmpada de ideia eureka acende acima da cabeça do personagem.
   • thud / crash: Quando o laptop/servidor exibe erro vermelho ou gráfico despenca.
   • keyboard: Quando o texto do código em <CodeTerminal /> começa a digitar.

---

⏱️ HUKUM MUTLAK 4: RITMO "PAUSA SILENCIOSA, MAS NÃO MUITO LONGA"

"Não faça transições relâmpago (cortes ADHD de 0,8s) que deixam tonto, mas também não deixe a tela parada e entediante. Dê pausas para respirar adequadas."

• Duração Ideal por Conceito: 2,5 – 3,5 segundos por batida de cena. Essa é a proporção áurea da psicologia de visualização: rápida o suficiente para manter a retenção, calma o suficiente para entender o conteúdo técnico.
• Micro-Respiração Durante a Pausa: A tela nunca congela/morre totalmente. Enquanto o personagem está parado explicando, elementos micro permanecem vivos:
  • O personagem tem uma respiração sutil (idle bob 4px).
  • A câmera faz um zoom lento e suave (1.0x -> 1.03x).
  • As partículas de poeira (<DustParticles />) continuam flutuando lentamente no fundo.

---

🌌 HUKUM MUTLAK 5: MARCA REGISTRADA DARK CANVAS

"A estética visual padrão é Modo Escuro intenso, alto contraste e moderno."

• Cor de Fundo: Usa uma tela escura intensa (#0b0f19 ou #030712) que é amigável aos olhos em telas OLED móveis.
• Linhas & Vetores: Personagens e objetos são desenhados com linhas sólidas brancas brilhantes (#ffffff) com espessura firme (stroke: 6.5px).
• Acento Neon: Cores de acento de alto foco (#06b6d4 ciano, #f43f5e rosa, #10b981 esmeralda, #f59e0b âmbar).
• Atmosfera: Inclui brilho gradiente de aurora suave (<AuroraMesh />) que muda de cor conforme a tensão da história.

---

🌀 CORTES DE COMBINAÇÃO CINEMATOGRÁFICOS & TRANSIÇÕES

• <PortalZoom />: Zoom hiper-exponencial atravessando um ponto específico (como a lente de uma lupa) direto para a próxima cena.
• <WhipPan />: Chicote de câmera horizontal super rápido com motion blur para transições agressivas de ato.

---

📝 O BLUEPRINT DE ROTEIRO HPMR (Hook-Pain-Mechanism-Reward)

1. Ato 1: O Gancho (0–3s): Problema chocante + <StabiloHighlight> + Personagem panic-headgrab.
2. Ato 2: A Dor (3–8s): Perda real + Personagem kneel-despair + Fundo <AuroraMesh mood="tense" />.
3. Ato 3: O Mecanismo (8–12s): Investigação detalhada + Personagem inspect-magnify + <PortalZoom> atravessando a lente.
4. Ato 4: O Código Central (12–15s): Solução real em <CodeTerminal> limpo, sem distrações.
5. Ato 5: A Recompensa & Loop Perfeito (15–18s+): Sucesso comprovado + Personagem celebrate-victory + Loop suave de volta ao segundo 0.

---

🎨 ESTILOS MESTRES PRÉ-DEFINIDOS

• AdvancedChoreography: Padrão ouro de atuação de personagem 4-Camadas (Headgrab -> Despair -> Magnify -> Code -> Victory).
• ArchetypeShowcase: Réplica 1:1 da referência original do usuário (Stickman no Laptop o Dia Todo, Radar Bermuda Glitch, Infográfico População Mundial, Blueprint Científico).
• MegaShowcase: 5 Variações do mundo moderno (Crypto Candlestick, Matrix Terminal, WhatsApp Chat, Manchete de Jornal, Mockup de Celular).

---

🛠️ TESTE & PREVIEW VIA CLI

# Player Web Interativo
npm.cmd run dev

# Renderizar Frame Específico como Imagem
npx.cmd remotion still AdvancedChoreography out.png --frame=45