ekomen77/erko-ai-video-engine

Motor de Produção de Vídeo Animado Erko AI (erko-ai-video-engine)

Este skill fornece o pipeline completo, testado em batalha, com ativos, fontes, rigs de personagens, assistente AI expressivo (Clawd) e renderizador Headless Chrome + FFmpeg para produzir vídeos explicativos 1080p a 30fps para YouTube no estilo ekomen77.

1. Regras de Ouro (CRÍTICAS — Nunca Violar)

1. Modificação ZERO no Rosto/Boca do Personagem (%100 Saf Karakter):
   • NUNCA recorte, cole, remende ou desenhe bocas/elipses sintéticas nos sprites do personagem.
   • SEMPRE use os PNGs transparentes normalizados e intactos em ./resources/pure_poses/pose_01.png até pose_13.png.
2. Poses Calmas e Estáveis do Personagem (Sem Troca Rápida Durante a Fala):
   • NUNCA troque as poses do personagem com base na amplitude de áudio quadro a quadro (amp < 0.12), pois as pausas de palavras causam oscilações frenéticas de 3–5 Hz no corpo.
   • NUNCA aplique ondulação contínua senoidal no corpo do personagem.
   • Mantenha 1 pose estável por cena (ou no máximo 1 transição intencional de pose quando um carimbo/veredito importante ocorrer).
3. Alterne Entre Lousa Branca de Estúdio e Gráficos em Tela Cheia:
   • Cenas de Estúdio (drawStudioBase): Use para introduções narrativas, transições e 1–2 cartões concisos dentro da lousa branca da parede (WB = { x: 1044, y: 274, w: 462, h: 294 }). Coloque o personagem no chão de madeira aberto (footX = 870, footY = 942, scale = 0.85).
   • Diagramas em Papel Creme Tela Cheia (drawFullScreenPaperBg): Oculte completamente o fundo do estúdio (tela de papel #EDE5D8) ao mostrar 3+ cartões grandes, pilares de arquitetura ou diagramas de pódio (x = 680..1800).
   • Grade Cyber Escura Tela Cheia / Descompilador (drawFullScreenCyberBg): Oculte o fundo do estúdio e renderize uma tela escura #0E1218 com uma grade de piso perspectiva vermelha 3D (horizonY = 560) ao mostrar dumps hexadecimais, terminais de descompilador ou cartões de caixa-preta bloqueados.
   • Regra da pose_08.png (Cavalete "O PLANO"): Como a pose_08.png tem seu próprio cavalete com lousa embutido, use pose_08.png APENAS em Cenas de Diagrama em Papel Tela Cheia (footX = 285, footY = 885, scale = 0.82), nunca na frente da lousa branca da parede do estúdio.
4. Tipografia Turca e Sistema Mestre de Fontes:
   • Cenas de Lousa Branca (Quadro de Prova Investigativa): Use ./resources/fonts/Kalam-Bold.ttf para títulos e chamadas principais; use ./resources/fonts/PatrickHand-Regular.ttf para marcadores de corpo, perguntas e notas. Ambas as fontes têm suporte nativo verificado para glifos turcos (İ, ı, Ş, ş, Ğ, ğ, Ç, ç, Ö, ö, Ü, ü).
   • Cenas de Gráficos em Tela Cheia e Terminal: Use ./resources/fonts/Montserrat-Black.ttf, ./resources/fonts/SpaceMono-Bold.ttf, ./resources/Fredoka-Bold.ttf e ./resources/JetBrainsMono-Bold.ttf.
   • NUNCA use ctx.globalAlpha < 1 antes de chamar drawChunkyText, porque o contorno preto vazará através do preenchimento semitransparente e tornará as letras cinzas turvas. Para escurecer cartões de fundo atrás de um carimbo, desenhe os cartões em globalAlpha = 1.0 e depois desenhe um retângulo de véu semitransparente (rgba(237, 229, 216, 0.42)) sobre os cartões antes de desenhar o carimbo.
5. Sempre Entregue um MP4 Reproduzível:
   • O renderizador grava o .mp4 final em ./out/<prefixo>_1080p.mp4 ao lado dos arquivos do seu projeto.
   • Se uma cópia extra deve ser colocada em algum lugar conveniente (Área de Trabalho, unidade compartilhada), defina ERKO_DELIVER_DIR=<pasta> antes de executar a renderização — o script copia o MP4 finalizado automaticamente.
6. Regra do Assistente AI Ocasional (Clawd):
   • Clawd (o mascote de caixa pintada à mão procedural de ./resources/clawd_assistant.js) é nosso Agente / Assistente AI R.E.A. ao vivo.
   • NUNCA mantenha Clawd permanentemente na tela — isso causa poluição visual e distrai o narrador.
   • Apareça APENAS para punchlines, momentos eureca ou assistências interativas (1–2 aparições chave por capítulo, com duração de 3–8 segundos).
   • Exemplos de aparições:
     • Aparecendo na borda da mesa/lousa do estúdio com fones de ouvido ou uma lâmpada de ideia durante um avanço.
     • Surgindo com um chapéu fedora de detetive ou capacete de engenharia em um cartão de tela cheia para quebrar um bloco de código bloqueado (furious / determined), depois comemorando com óculos escuros (cool).
7. Regras de Estúdio Dinâmico e Anti-Planicidade (Tornar Cenas Impactantes):
   • Zoom-Snap Dinâmico da Câmera: Cenas de estúdio NÃO devem permanecer em um zoom amplo fixo. Ajuste a câmera para 1.15x–1.25x com easeOutBack durante punchlines chave, depois retorne suavemente.
   • Mudanças Temáticas de Iluminação do Estúdio: Ajuste a ambientação de acordo com o clima narrativo:
     • Trabalho profundo tarde da noite (Capítulo 2): Diminua a luz ambiente, intensifique monitores ciano/verde brilhantes e pulse as brasas da lareira.
     • Momento eureca de avanço: Explosão de aura dourada radiante atrás do personagem.
   • Emotes Processuais: Use drawEmote('!', ...) / drawEmote('?', ...) / drawEmote('bulb', ...) / drawEmote('sweat', ...) ao lado de personagens para pontuar visualmente punchlines de diálogo.
   • Tremor de Tela por Impacto de Carimbo: Quando um carimbo pesado (✔, ❌, BOMBA!) ou buzina de erro atinge, aplique 3–5 quadros de tremor sutil de câmera (x += sin(t*40)*4, y += cos(t*40)*4).
   • Transições Desenhadas à Mão: Use drawBrushWipe(ctx, progress) ou drawIris(ctx, progress) entre limites de cena principais para um fluxo narrativo contínuo.
8. Ilustrações AI Personalizadas (Uso Esparso + Referências Exatas de Personagens + Anúncio Prévio):
   • Espinha Dorsal Principal Permanece Estúdio + Diagramas Canvas: Não transforme o vídeo em uma apresentação de slides de imagens AI. Mantenha 85–90% de cada capítulo como nossos clássicos cartões/terminais de Lousa Branca de Estúdio + Gráficos em Tela Cheia.
   • Gere Ilustrações Personalizadas Apenas Quando Realmente Necessário: No máximo 1 ilustração personalizada por capítulo para uma metáfora visual concreta (ex.: câmara de Sandbox, baú de RPG, tribunal histórico).
   • Correspondência Estrita de Referência: Ao gerar uma imagem via image-generator, SEMPRE passe as imagens de referência exatas para Pickle (textura verde oliva fosca, moletom oversized preto, pernas finas de palito) e Clawd (caixa retangular terracota 10x6, 4 pernas curtas de pino, 2 braços de toco, contorno de tinta negrito).
   • Anuncie o Plano Visual Antes de Renderizar: Antes de renderizar um novo capítulo, informe brevemente ao usuário o plano visual cena por cena e se alguma ilustração personalizada será usada.
9. Alinhamento Estrito Pé-Sombra e Sem Sobreposição de Props Laterais:
   • Todas as 13 poses de personagem (pose_01..13.png) são padronizadas para 700x780 com CHAR_CENTER_X = 350 e FOOT_BASELINE_Y = 741 (margem transparente inferior de 39px).
   • Nunca use um sprite de prop lateral não cortado (como o antigo cavalete 1050x780 pose_08) onde um prop embutido fica preso atrás de cartões de diagrama ou desloca o personagem da sombra do chão. pose_08.png tem o cavalete removido e Pickle centralizado em x = 350.
   • Em drawCharacter, sempre desenhe o sprite em y = footY - ih + 29 * scale + breathY para que as solas do personagem fiquem diretamente dentro da elipse de sombra de contato (footY - 10).
10. Clawd Assistente Deve Sempre Estar em uma Superfície Sólida (Nunca Flutuar):
    • Nunca coloque Clawd no ar ou pairando na frente de móveis/monitores.
    • Em Cenas de Estúdio, coloque Clawd firmemente no chão de madeira aberto ao lado de Pickle (x = 685, y = 938), com sua sombra de contato nítida diretamente abaixo de suas 4 pernas.
    • Em Cenas de Diagrama Tela Cheia, passe podium: true para drawClawd(...) (ou coloque-o em uma superfície sólida de chão/pódio) para que ele fique em um minipódio de madeira correspondente com uma sombra de contato clara.
11. Recorte de Polígono Nativo da Lousa Branca do Estúdio (Sem Remendo #FAF6EE Flutuante):
    • Nunca desenhe um ctx.fillRect(WB.x, WB.y, WB.w, WB.h) opaco sobre studio_background_1080p.jpg, porque a moldura metálica superior da lousa branca de fundo tem uma inclinação de perspectiva sutil e um retângulo opaco cria uma costura visível de adesivo/remendo sobre a moldura.
    • Sempre recorte para o polígono exato de 4 cantos da lousa branca interna ((1034, 294) -> (1510, 279) -> (1510, 580) -> (1034, 580)), desenhe diretamente na superfície natural da lousa branca do fundo do estúdio e gire o conteúdo da lousa branca em -0.024 rad (-1.4°) em torno de (WB.cx, WB.cy) para que cabeçalhos e cartões se alinhem naturalmente com o ângulo do quadro físico.
12. Sobreposição Autêntica de UI de Inscrição do YouTube em Tela Cheia para Call-to-Action:
    • Nunca esconda chamadas para ação importantes do espectador (Abone Ol, Bildirimleri Aç, Beğen) dentro da pequena lousa branca de fundo do estúdio.
    • Renderize uma Sobreposição Autêntica de UI do YouTube Watch Page & Subscribe Player proeminente e central (drawYouTubeSubscribeOverlay), completa com uma prévia do viewport de vídeo ao vivo, barra de reprodução vermelha do YouTube, avatar do canal e um cursor de mouse animado clicando ▶ ABONE OL ➔ ✔ ABONE OLUNDU e 🔔 TÜMÜ AÇIK! com explosão de confete/ondulação.
13. Regra Obrigatória do Gancho/Reivindicação Provocativa nos Primeiros 15 Segundos (Uzun Videolar ve Shorts İçin Ortak Zorunluluk):
    • Format Bağımsızlığı: Bu kural hem tam uzunluktaki YouTube videolarında (Chapter 1 / Giriş) hem de YouTube Shorts / Reels videolarında İSTİSNASIZ zorunludur. Uzun video diye yavaş, sıkıcı veya teorik giriş yapılmaz.
    • Never begin with passive documentary/academic exposition (e.g., "Bugün sizlere X mimarisini anlatacağım..." veya "Yazılım dünyasında yeni bir gelişme var..." kesinlikle yasaktır).
    • Her videonun ilk 15 saniyesi (Uzun videoda Bölüm 1'in ilk saniyeleri, Shorts'ta giriş) izleyicinin ezberini bozan, bir yalanı çürüten veya dev bir iddia ortaya atan 3 adımlı yapıdan oluşur:
      • 0.0s – 5.0s (Şok İddia / The Shock Claim): Yerleşik bir yanılgıyı yüzlerine vur ("Yazılım şirketlerinin 'kırılamaz' dediği kapalı kutu programlar koca bir yalan!" / "ChatGPT'nin seni anladığını sanıyorsan fena halde kandırılıyorsun!").
      • 5.0s – 10.0s (İddiayı & Meydan Okumayı Yükselt / High Stakes): İddiayı cesur bir benzetmeyle zirveye çıkar ("İddia ediyorum: Bir ekibin 5 yılda gizlediği sistemi, tek bir yapay zeka ajanı 10 dakikada deşifre edebilir!" / "Karşındaki bir zeka değil, tarihin en büyük şans çarkı!").
      • 10.0s – 15.0s (İspat Kapısı / The Proof Gate): İzleyiciyi videonun kalanını izlemeye mecbur bırak ("İnanmıyor musun? Arkadaki sihri ve büyük illüzyonu adım adım ispatlıyorum, iyi izleyin!").
14. Fórmula Oficial da Lousa Branca de Estúdio: Quadro de Prova Investigativa (Dedektif Panosu + Clawd):
    • Sem Cartões de Desenho Animado Baratos ou Círculos Chamativos: Nunca desenhe caixas web arredondadas grossas ou círculos vermelhos arbitrários em torno de palavras (eles poluem o quadro, parecem amadores e lembram modelos genéricos de AI).
    • Lavagem de Marcador Neon de Ponta Cinzel: Palavras-chave têm uma faixa fluorescente semitransparente desenhada atrás do texto (rgba(253, 224, 71, 0.65) amarelo neon, rgba(74, 222, 128, 0.5) verde menta, rgba(251, 146, 60, 0.45) laranja).
    • Cartão de Evidência Polaroid / Documento com Fita (drawPolaroid): Anexe um cartão Polaroid de aparência física com fita adesiva semitransparente (rgba(180, 175, 165, 0.85)) por cima, exibindo a metáfora visual concreta (roleta, dado 3D, arquitetura de chip, snippet de descompilador).
    • Carimbo de Borracha de Tinta Inclinado (drawRubberStamp): Para desmascarar mitos ou confirmar fatos, carimbe diretamente sobre a reivindicação em -8° a -12° com tinta vermelha de borda dupla desgastada ([ ÇÜRÜTÜLDÜ ], [ KANITLANDI ], [ İLLÜZYON ], [ HACKLENDİ ]).
    • Post-It Amarelo com Fita (drawPostIt): Fixado ou colado com fita adesiva na lateral para fórmulas, porcentagens e regras.
    • Clawd na Borda da Lousa Branca: Clawd senta-se firmemente no friso/bandeja de madeira abaixo da lousa branca (x = 1045, y = 642, scale = 6), usando seu chapéu fedora marrom de detetive com uma lâmpada de ideia 💡 ou emoticon de reação, integrando perfeitamente a dupla no momento de ensino.
15. Anti-Padrões Estritos e Prevenção de Falhas (Önceki Hataları Asla Tekrarlamama Kuralları):
    • Zero "Síndrome do Adesivo" / Composição de Personagem Desconectada (YASAK: Havada Asılı / Yapıştırma Karakterler): Karakter etkileşime girdiği nesneye fiziksel olarak temas etmeli, oda ışığına (loş, sıcak şömine, siber) bürünmeli, temassız yapıştırma gibi durmamalıdır.
    • Zero Maquetes HTML/CSS Baratos (YASAK: Web Div'leri ve Emojilerle Sahte İllüstrasyon Yapmak): Asla sahte emojili 🍎 🍒 777 web kutuları üretilmez. Gerçekçi açılı GitHub/terminal kartları veya organik tebeşir diyagramları çizilir.
    • Zero Poluição Visual / Regra do Respiro (Görsel Dağınıklık Yasağı): Bir sahneye 4–5 farklı karmaşık öğe tıkıştırılmaz. Sahne tek bir güçlü analoji etrafında ferah ve odaklı olmalıdır.
    • Textura de Material Orgânico sobre Vetores Estéreis (Dijital Jilet Çizgi Yasağı): Dümdüz steril cetvel çizgileri yasaktır. Çizgiler tebeşir tanecikli, hafif dalgalı ve köşeleri hafif taşmalıdır (overshoot).
16. Arquétipo Oficial de Cena em Tela Cheia: Lousa de Ardósia Escura + Cartão de Evidência Inclinado:
    • Zemin: Koyu arduvaz kara tahta slate dokusu (#20201F / #282725 organik tanecikli mat doku, hafif silgi tozu izleri ve kenar vinyeti).
    • Sol Taraf (Kanıt Kartı / Polaroid Artifact): $-5.5^\circ$ sola eğik (transform: rotate(-5.5deg)), kalın fildişi fotoğraf kenarlığı (#f2eee5), derin yumuşak gölge, gerçek kod veya terminal içeriği.
    • Sağ Taraf (Organik Tebeşir Mimari Ağacı): Üst girdi kutusu $\rightarrow$ Orta işlem kutusu $\rightarrow$ Alt dağılım kutuları.
17. Direção Visual e Tipográfica Oficial: "Doğal Tebeşir & Sıcak Amber" (Estilo 2 - Padrão Principal Aprovado pelo Usuário):
    • Tipografi Hiyerarşisi:
      • Başlıklar, Büyük İddialar, Mühürler: ./resources/fonts/Kalam-Bold.ttf