uttamongithb/editorial-reel-video

Habilidade de Vídeo Reel Editorial & Conceito

Esta skill ensina agentes a produzir vídeos explicativos técnicos e educacionais virais e de alto engajamento para QUALQUER assunto (ex.: roteamento Tor Onion, redes, bancos de dados, arquitetura de sistemas, Git, IA) seguindo rigorosamente o ritmo-alvo (ex.: reels de 60 segundos) com transições de cena ricas, mapeamento de expressão vocal, recortes de apresentador e animações técnicas contínuas.

---

1. Princípios Chave & Requisitos de Produção

A. Adesão Estrita a Ritmo e Duração (A Regra dos 60 Segundos)

• Se um roteiro designar timestamps de cena (ex.: 0–7s, 7–16s, 16–27s, 27–42s, 42–50s, 50–60s), o agente DEVE impor durações alvo exatas.
• As velocidades padrão de TTS geralmente são muito lentas (~110 PPM). O gerador deve escalar a velocidade de reprodução de áudio usando atempo do FFmpeg (preservando o tom) para atingir a velocidade viral de reel (160–180 PPM) e travar no tempo de execução exato designado de 60 segundos.

B. Execução TTS do Agente & Padrões de Expressão Vocal (Modelo de Retenção Viral)

Agentes equipados com mecanismos TTS nativos (ex.: Edge-TTS, ElevenLabs, Azure Speech, OpenAI) NÃO DEVEM usar configurações padrão planas/monótonas. O TTS padrão (110–120 PPM) perde espectadores de formato curto nos primeiros 2 segundos. O agente deve injetar parâmetros de ritmo viral:

• Velocidade & Cadência: Impor velocidade viral de reel (160–180 PPM ou taxa: +15% a +20%).
• Tom & Inflexão: Injetar variações expressivas de tom (tom: +4Hz a +8Hz) em perguntas e hooks.
• Micropausas: Inserir pausas táticas de 100–180ms (<break time="180ms"/>) antes de palavras de impacto (ex.: antes de "envelopes adolescentes!").
• Mapeamento de Tags de Expressão:
  • [curious]: Abertura rápida (170 PPM), elevação terminal interrogativa (tom: +8%), intriga conspiratória.
  • [explaining]: Medido (155–165 PPM), articulação nítida, pausas de 60ms antes de termos técnicos.
  • [dramatic]: Ritmo mais lento (145 PPM), queda de tom para voz de peito (-5%), ênfase staccato incisiva.
  • [confident]: Clipe impulsionado para frente (165 PPM), tom de peito ressonante, elevação terminal ascendente.
  • [excited]: Alta velocidade (180 PPM), elevação de tom (+10%), golpe rítmico afiado em substantivos.
  • [playful] / [laughing]: Clipe conversacional (165 PPM), risada audível / sorriso na respiração, tom malandro.
• Legendas Palavra por Palavra: Extrair timestamps de palavras do TTS para alimentar destaques dançantes palavra por palavra (brilho amarelo .word-active #FFE600) no chip inferior.
• Modelo Mestre de Áudio:
  • Narração nivelada para -16 LUFS com loudnorm=I=-16:TP=-1.5:LRA=7.
  • Faixa de Música Instrumental definida para volume 0.15 (= -29 LUFS, exatamente 13 LU abaixo da voz). Sem ducking de sidechain (a lacuna de 13 LU é o duck).
  • Barramento de Efeitos Sonoros (ganho 0.20): pop.wav em cada corte de cena (ganho 0.50), riser.wav 0.3s antes de grandes viradas de cena (ganho 0.28), click.wav em aterrissagens de elementos de UI (ganho 0.40), chime.wav em revelações (ganho 0.38), notify.wav em CTA (ganho 0.35).
  • Exportação Mestre: -14 LUFS integrado, Pico Verdadeiro <= -1.0 dBTP.
  • Consulte references/voice_audio_and_cutout_guide.md para trechos SSML completos e configurações específicas do mecanismo.

C. Arquitetura de Recorte do Apresentador (Âncora 5)

Cada cena apresenta um recorte expressivo do personagem apresentador ancorado no canto inferior direito (top: 63.4%, x: 20.7% da direita, cortado na cintura pela borda do quadro, sentado abaixo do chip). As poses são mapeadas diretamente para tags de expressão vocal:

• [curious] ➔ p1_shrug.png (palmas levantadas, olhos arregalados, sorriso empolgado)
• [frustrated] ➔ p2_facepalm.png (mão na testa, careta)
• [confident] ➔ p3_present.png (braços abertos, pose de ta-da, sorriso orgulhoso)
• [explaining] ➔ p4_chin.png (toque no queixo, meio sorriso sagaz, pose professoral)
• [analogy] / [recalling] ➔ p5_memory.png (coçando a cabeça, pequeno "aha")
• [excited] / [numbers] ➔ p6_thumbs.png (polegares para cima, sorriso enorme e emocionado)
• [playful] / [laughing] / [cta] ➔ p7_cta.png (apontando para o espectador, sorriso malandro)
• [dramatic] / [look] ➔ p8_point.png (dedo apontando diretamente para fora da tela)
• [revelation] ➔ p9_idea.png (dedo indicador para cima como lâmpada, olhos arregalados)
• Consulte references/voice_audio_and_cutout_guide.md para prompts completos de geração de imagem e instruções de alfa-matting.

D. Transições de Cena Dinâmicas (Sem Cortes Rígidos)

Cada transição de cena deve usar uma transição de movimento ativa:

• Wipe Inclinado Dupla-Banda (wipe.html): Varredura angular característica de -11deg com fundo de campo de chegada + faixa de borda de acento de 120px, alternando direção horizontal (flip: 0 vs flip: 1).
• Camera Push-In: Transição de zoom em nós de rede ou camadas de arquitetura (escala: 0.85 -> 1.0).
• Terminal Glitch Flash: Flash cromático rápido ao entrar em ambientes de código/terminal.
• Consulte references/v7_layout_and_transitions_guide.md para geometria completa e especificações de timeline GSAP.

E. Animações Contínuas Específicas do Tópico

Nunca mostre diagramas estáticos. Todos os componentes visuais devem apresentar movimento contínuo e reativo:

• Roteamento de Pacotes & Remoção de Camadas: Em explicadores de Tor e redes, mostrar pacotes animados viajando fisicamente através de nós, removendo camadas de criptografia (camada Verde Guard, camada Amarela Middle, camada Vermelha Exit) à medida que progridem.
• Iluminação Reativa de Nós: Nós brilham, pulsam e alternam badges de status (WAITING → ACTIVE → DECRYPTED) à medida que os pacotes os atravessam.
• Janelas de Terminal Interativas: Execução de comandos com digitação ao vivo, logs de circuito em tempo real e cursores de bloco piscando.

F. Sistema Tipográfico Editorial Suíço

• Estritamente alinhado à esquerda com margens limpas.
• Hierarquia de 3 níveis: Kicker com espaçamento largo (#), headline empilhada massiva e pílulas de badge de palavra-chave retangulares de alto contraste ([...]).
• Animações de deslizar para cima mascaradas (overflow: hidden).
• Zero ornamentos florais. Barra de cabeçalho técnica superior minimalista e limpa.

---

2. Início Rápido: Roteiro de Voz para Vídeo

Sempre que o usuário fornecer um roteiro formatado com expressões:

[HOOK — 0–7s | Curioso + misterioso]
[curious] "Bhai, kabhi socha hai Tor Browser tumhari identity hide kaise karta hai? Tum website open karte ho, lekin tumhari request seedha website tak nahi jaati!"

[SELEÇÃO DE ROTA — 7–16s | Empolgado + explicativo]
[explaining] "Instead, Tor apne network se teen computers select karta hai — Guard Node, Middle Node aur Exit Node. Aur in teeno se milkar banta hai tumhara secret route!"

O agente executa o pipeline:

# 1. Analisar seções, extrair expressões, mapear poses do apresentador
python scripts/process_vo.py

# 2. Validar design contra as 7 Leis e escrever tokens
python scripts/prepare.py

# 3. Montar cenas e compilar index.html mestre
python scripts/build_index.py

# 4. Renderizar quadros determinísticos a 30 FPS
python scripts/render_video.py

# 5. Mixar VO (-16 LUFS) com fundo (-29 LUFS) e SFX, e multiplexar
python scripts/mix_audio.py
python scripts/qc.py

---

3. A Arquitetura de Produção V7: Layouts e Transições

A skill adota o Pipeline V7 de Reel comprovado em produção (PARAMS.json -> prepare.py -> new_scene.py -> build_index.py -> mix_audio.py -> qc.py):

A. As Sete Leis de Layout e Movimento

1. Uma Grade de Âncora, Fixa na Parte Inferior:
   • Âncora 1 (Kicker): Tag de categoria/contexto em Y = 0.0667 com traço de acento <i></i>.
   • Âncora 2 (Herói): Palavra de exibição condensada de alto impacto (1–3 palavras) em Anton em Y = 0.1006.
   • Âncora 3 (Corpo de Prova): Cartão de prova dinâmico (A: card-led), odômetro (B: stat-led) ou declaração de 2 linhas (C: type-led) em Y = 0.3010.
   • Âncora 4 (O Chip): Cápsula de frase falada em Y = 0.5875 com ponto de acento <b></b>. Nunca se move entre cenas.
   • Âncora 5 (O Apresentador): Personagem cortado pela borda do quadro em Y = 0.6340 com brilho de halo adaptativo (#sX-glow). Nunca se move entre cenas.
2. O Herói é uma Palavra, o Chip é a Linha, o Cartão é o Detalhe:
   • Herói: 1–3 palavras (Anton, 17–25% da largura do quadro, altura de linha 0.88).
   • Chip: 3–6 palavras (a linha que um espectador móvel com som desligado lê).
   • Cartão: A prova concreta (lista de arquivos, diff de palavras-chave, terminal, progresso de upload, medidor de pontuação).
3. Ciclo de Cores de Seis Campos:
   • acento → fundo → tinta → secundário → terciário → quaternário. Nenhuma cena consecutiva pode compartilhar um fundo.
4. Prova, Não Decoração:
   • Cada cartão deve exibir prova real (4–6 linhas ou mockup preenchendo ≥ 55% do cartão). Se não houver prova, use type-led (Âncora 3C) e omita o cartão.
5. Quadro 0 é um Poster (data-cover="1"):
   • A cena 1 é composta em t = 0.0s: kicker, herói, cartão e apresentador já visíveis. O chip aterrissa em 0.65s. Zero quadros de introdução vazios.
6. Movimento Apenas por Transformação com Aterrissagem Antecipada:
   • As entradas aterrissam no primeiro terço de cada batida (0.24s – 0.34s, power3.out). Nunca faça tween de conteúdo de texto ou innerHTML.
   • Cenas longas apresentam uma deriva contínua sutil (tl.to("#sX-hero", { y: -14, duration: 0.7 })) para manter a vida visual.
7. Som como Pontuação:
   • SFX processual (pop em cada corte, click/key em linhas de UI, chime em revelações, notify em CTA). Masterizado para -14 LUFS e <= -1 dBTP.

B. A Transição de Wipe Inclinado Dupla-Banda (wipe.html)

• Geometria: Varredura angular de banda dupla inclinada a -11deg (transform: skewX(-11deg)).
• Estrutura: #w-main (a cor de fundo da cena que chega) + #w-edge (faixa de acento de 120px).
• Alternância de Direção: Inverte horizontalmente a cada cena (flip: 0 da esquerda para a direita, flip: 1 da direita para a esquerda).
• Agendamento: Acionado automaticamente 0.36s antes de cada corte por build_index.py, com duração adaptativamente escalada (0.34s – 0.62s) para caber no comprimento da cena.

---

4. Referências e Documentação

• references/voice_audio_and_cutout_guide.md: Direção vocal para expressões, alvos LUFS mestre, mixagem de fundo e o sistema de recorte de apresentador de 9 poses.
• references/v7_layout_and_transitions_guide.md: A especificação matemática completa do layout, fórmulas de derivação de tokens e mecânica de transição de wipe inclinado.
• references/animation_and_transitions_guide.md: Catálogo de física de transição, receitas de remoção de camadas de pacotes e regras de escalonamento de tempo de áudio.
• references/design_system.md: Cores CSS exatas, fontes, alturas de linha e zonas seguras.
• references/concept_animation_guide.md: Como projetar animações para Tor, bancos de dados, IA, Git, redes e design de sistemas.