madhavsomani/animation-skills

Explicador Case File

Uma investigação contada como evidência: quem, onde, quando e o que o registro diz, com um acento vermelho que sempre significa "isto é a evidência". A tensão vem da contenção calma: sem palavras de exagero, sem cortes rápidos. Em vez disso, uma câmera que nunca para de se mover, uma trilha sonora que nunca fica em silêncio e fatos que caem exatamente nas palavras do narrador.

Execute-o dentro da skill animated-video do cstack (Remotion; leia-a primeiro) e mantenha seus pontos de aprovação, entrega em qualidade total e quatro estados de QA separados (técnico, factual, criativo, aceitação do cliente). Esta skill adiciona a direção de arte, o vocabulário de cena, a receita de áudio e um kit funcional.

• Exemplo funcional para copiar: template/ (a demo de 30 s do xz-backdoor: src/kit/casefile.tsx = o kit, src/scenes/* = uma cena por tipo de plano, audio/score.py = a trilha). Capturas de tela: ../../docs/case-file-explainer/.

Projete algo novo para cada história. Copie o método e o kit, não os planos do filme do xz.

Clareza em primeiro lugar. Nosso segundo Case File (uma história de execução remota de código em PHP) parecia polido, mas era difícil de acompanhar. Para qualquer vídeo que explique como algo funciona, planeje-o com a skill decode-explainer (escada conceitual, modelo de brinquedo primeiro, legenda na tela, uma ideia por tela, jargão apenas depois de definido, escala de tipo ≥ 44 px) e use esta skill apenas para o visual de sala de evidências e os beats de investigação.

1. História: a espinha da investigação

Histórias de investigação só funcionam quando os riscos são reais e cada afirmação tem fonte.

• Gancho (0-3 s): a anomalia, declarada como um fato com um número ("seus logins estavam meio segundo lentos"). O quadro 0 é a capa: um título serifado mais o objeto de evidência, nunca preto.
• Rastreio (meio): siga a evidência através de lugares e pessoas. Um beat a cada 2-4 s: carimbo de data, depois cartão de pessoa, depois a rota no mapa, depois o objeto que foi encontrado.
• Revelação: o momento de queda. A música desaparece e uma única coisa vermelha se acende.
• Registro: um cartão de depoimento citando a fonte primária real (e-mail, depoimento, relatório), com o autor e a data abaixo, mais um número de nota de rodapé. Nunca invente uma citação; marque reconstruções como "reconstrução".
• Final: um título serifado que reafirma o gancho como um veredito ("Meio segundo."), uma régua vermelha e o número do caso. Segure-o e, em seguida, desvaneça propositalmente. Adicione um CTA de comentário falado apenas quando o criador quiser; se houver um CTA, ele é falado por completo.
• Formato curto: 30-45 s, 4-6 planos. Formato longo (YouTube): capítulos com cartões de título serifados "Capítulo I".
• Coloque cada fato em NOTES.md com sua fonte e estado de verificação antes que ele chegue à tela. Os fatos controlam o filme.

Variante educacional (incidentes de segurança): o padrão para este formato

Torne-os educacionais: ajude as pessoas a entender o que é, por que aconteceu e o que podem fazer para se proteger. Espinha (~55-60 s, 6 planos):

1. Capa/gancho: carimbo de data, nome do incidente em serifado, carimbo de gravidade e tags CVE, todos visíveis no quadro 0.
2. Escala: por que isso importa (quanto da web ou quantos usuários), com uma estatística com fonte e nota de rodapé.
3. O que é: um diagrama de pipeline de onde o bug vive (internet, servidor web, motor, aplicativo). A solicitação viaja pela rota vermelha, o estágio quebrado fica vermelho e a consequência aparece (por exemplo, um prompt de shell de um estranho). Defina o jargão na tela ("shell = uma linha de comando no seu servidor").
4. Por que aconteceu: a causa raiz como uma metáfora 3D de argila branca (memória como blocos: pilhas meio construídas, blocos fantasmas liberados com ponteiros sobreviventes), mais um cartão de código benigno de 3 linhas (malloc/free).
5. Linha do tempo + verificação da realidade: pins datados (código afetado mais antigo, primeiro ataque, vazamento, correção), depois um cartão de depoimento de uma fonte primária que mantém o risco em proporção.
6. Proteja: um terminal "como verificar" (php -v e a versão corrigida), uma lista de verificação numerada sincronizada com a locução e um rodapé para casos extremos (versões EOL, WAF como paliativo apenas).
7. Veredito + CTA: um veredito serifado de duas linhas e um CTA de salvar/seguir.

Segurança educacional: explique a classe de ataque conceitualmente. Nunca mostre payloads, corpos de requisição, offsets ou exploração passo a passo. Nomeie a correção e como verificá-la.

2. Visual (bíblia de arte)

Elemento	Regra
Fundo	Carvão #0d0d0e com um leve levantamento radial; vinheta e granulação fina sempre ativas
Destaque	Um vermelho #ff2d2a, sempre brilhante (triplo text-shadow + bloom). Vermelho = evidência: a rota, a anomalia, o suspeito, a palavra-chave. Nada mais é colorido
Conteúdo	Monocromático: off-white #f2f0ea, dim #8d8b86; fotos de arquivo em P&B
Tipografia	Títulos serifados (Source Serif 4 700); corpo/rótulos de máquina de escrever (Courier Prime 700); carimbos de data/dados (IBM Plex Mono 700, maiúsculas com espaçamento)
Cartão de foto	Foto P&B, borda branca com bordas ligeiramente rasgadas, brilho branco; linha de função em mono maiúsculas; etiqueta de nome preta com borda branca rasgada. Pessoa desconhecida = cartão desfocado com "NENHUMA FOTOGRAFIA CONHECIDA"
Mapa do sistema	Mapa de ruas escuro com linhas cinzas finas, algumas arteriais grossas e rodovias curvas, marca d'água de distrito serifada com espaço enorme ("D E B I A N"); o caminho se desenha em vermelho brilhante com uma cabeça branca; pins são etiquetas de nome com um ponteiro
Diorama	Modelos 3D de argila branca (three.js): blocos brancos foscas em um fundo cinza claro, sombras suaves, nevoeiro. O único objeto vermelho ilumina seus arredores quando se acende
Cartão de citação	Aspas serifadas grandes, réguas brancas, texto mono digitado, palavra-chave vermelha, linha de fonte e data abaixo
Carimbo de data	Relógio vermelho brilhante + "SEXTA-FEIRA, 29 DE MARÇO DE 2024" + uma linha de contexto
Notas de rodapé	[n] em mono dim no canto superior direito sempre que uma afirmação com fonte estiver na tela

Zonas seguras para 9:16: mantenha o conteúdo em x 60-960 e y 240-1440. As legendas ficam em y ~1470, em mono, em uma etiqueta escura com palavras-chave em vermelho. Nunca as coloque sobre um rosto.

3. Movimento

• Poucos cortes secos. Documentários longos neste registro cortam apenas algumas vezes em dez minutos. Os planos se conectam através do conteúdo: mergulhe no carimbo vermelho, que se torna o nó inicial do mapa; mergulhe no nó vermelho do mapa, que se torna o bloco 3D vermelho.
• A câmera nunca para: push-ins lentos (5-8 % por plano), afastamentos para revelar contexto e pans de acompanhamento de rota. Suavize cada movimento de entrada e saída; zoom em espaço logarítmico.
• Os cartões aparecem com uma mola amortecida (escala 0,82 para 1); as etiquetas caem 18 px no lugar; o texto é digitado.
• A rota vermelha se desenha no ritmo do narrador: a cabeça atinge cada nó em sua palavra.
• Mude algo a cada 1,5-3 s e faça cada batida cair dentro de 2 quadros de sua palavra.

4. Receita de áudio

• A trilha nunca para. Sem silêncio abaixo de -45 dB nos primeiros 5 minutos. Um drone/pad ambiente escuro em tom menor; abertura apenas com música (~12 s no formato longo, ~0 s no Reels).
• Narração por cima, música cerca de 10 dB abaixo. Duck a partir do envelope da locução (estilo sidechain). Aumente a música nas lacunas de locução de 0,6 s ou mais, e corte-a pouco antes da palavra de revelação.
• Alvo do formato longo: cerca de -16 LUFS integrado, LRA cerca de 6 LU. Calmo e denso, não dinâmico. Entregue Reels a -14 LUFS / -1,5 dBTP.
• Efeitos sonoros são esparsos e físicos: tiques de digitação para texto digitado, baques suaves quando cartões e etiquetas pousam, burburinho de dados enquanto uma rota é desenhada, um sub-drop na revelação, um ping de vidro ou sininho no veredito.
• Voz: um narrador calmo, grave e comedido: declarativas curtas, pausas após os fatos. Use a própria gravação do criador primeiro; um clone de voz precisa de aprovação de gasto. Um substituto TTS é apenas para rascunhos e deve ser rotulado.
• audio/score.py no exemplo constrói toda a trilha e mixagem a partir das marcações de tempo das palavras.

5. Pipeline

1. Fatos e fontes vão para NOTES.md; obtenha aprovação do roteiro e da folha de beats (parada 1 do animated-video).
2. Locução, depois words.json (limites de palavras do Whisper ou TTS); corrija divisões de token em audio/fix_words.py.
3. Defina os atos em src/lib.ts a partir de cue(); construa a trilha com audio/score.py usando os mesmos cues.
4. Copie src/kit/casefile.tsx e os padrões de cena; renderize um quadro-chave com snap.sh (parada 2: quadros de estilo / quadros-chave).
5. Renderize em --scale=1.3333333333333333 (1440x2560), depois faça um loudnorm de duas passadas para -14 LUFS, H.264 High, CRF 14, maxrate 24M, yuv420p limited range, tags BT.709, faststart.
6. QA: decodificação completa, blackdetect, loudness, uma folha de contato, quadros densos em torno de cada transição e Whisper na locução. Relate os 4 estados de QA separadamente.

Armadilhas encontradas ao construir o primeiro

• Uma execução de edge-tts de script inteiro dita lentamente (88 s para 180 palavras). Use scripts/tts_lines.py (uma chamada TTS por linha, lacunas controladas, "|" inicia uma seção), depois scripts/squeeze.py (encurta pausas acima de 0,45 s e remapeia temporizações de palavras): 68,6 s tornaram-se 58,5 s.

• cue("Antes"), cue("PHP") e outras palavras repetidas causam erro. Use frases de 2 palavras ou passe nth.

• No plano amplo 3D, uma única fileira de blocos deixa o quadro vazio. Adicione fileiras de trás (z = -1,6, -3,2, -4,8) para profundidade.

• Segure a câmera no slot de um bug até cerca de 6 quadros antes do próximo beat. Mover-se antes empurra o assunto para fora do quadro no meio da frase.

• Um cartão sobreposto deve ficar na tela por pelo menos 1,5 s. Comece-o na palavra anterior, não na última.

• Através de um navegador compartilhado, a navegação pode cair em qualquer aba que esteja ativa, incluindo as abas do próprio usuário. Selecione sua própria aba primeiro.

• edge-tts retorna "Março 2024" como um único limite de palavra. Divida-o antes de chunk(), ou as legendas erram.

• cue("Isso") e outras palavras repetidas precisam de nth, ou uma frase mais longa (cue("Isso tinha")).

• Um cubo emissivo vermelho mais o acabamento bloom estoura para laranja/amarelo. Mantenha o emissivo em 0,5 ou abaixo, a cor base escura (#b8120c) e o bloom da cena em 0,5.

• Em 3D retrato, a torre tem que ficar entre a faixa do cartão (y 300-750) e as legendas (y 1470). Afaste a câmera cerca de 23 unidades para um modelo de 6 unidades de altura.

• O zoom HTML no terminal corta suas bordas além de cerca de 1,12x. Dê zoom na leitura, não em um canto.

• Um rótulo de nó do mapa mais largo que cerca de 300 px sai do quadro. Centralize-o sob o nó.