madhavsomani/animation-skills

Explicateur Case File (Salle des preuves)

Une enquête racontée comme un dossier de preuves : qui, où, quand et ce que dit le dossier, avec un accent rouge qui signifie toujours « ceci est la preuve ». La tension vient d'une retenue calme : pas de mots accrocheurs, pas de coupes rapides. À la place, une caméra qui ne cesse jamais de dériver, une musique qui ne devient jamais silencieuse, et des faits qui tombent exactement sur les mots du narrateur.

Exécutez-le à l'intérieur du skill animated-video de cstack (Remotion ; lisez-le d'abord) et conservez ses arrêts d'approbation, sa livraison en pleine qualité et ses quatre états de QA distincts (technique, factuel, créatif, acceptation du propriétaire). Ce skill ajoute la direction artistique, le vocabulaire des plans, la recette audio et un kit de travail.

• Exemple de travail à copier : template/ (la démo xz-backdoor de 30 s : src/kit/casefile.tsx = le kit, src/scenes/* = une scène par type de plan, audio/score.py = la musique). Captures d'écran : ../../docs/case-file-explainer/.

Concevez du neuf pour chaque histoire. Copiez la méthode et le kit, pas les plans du film xz.

La clarté passe en premier. Notre deuxième Case File (une histoire d'exécution de code à distance PHP) était soignée mais difficile à suivre. Pour toute vidéo qui explique comment quelque chose fonctionne, planifiez-la avec le skill decode-explainer (échelle de concepts, modèle jouet d'abord, légende à l'écran, une idée par écran, jargon seulement après l'avoir défini, échelle de police ≥ 44 px) et n'utilisez ce skill que pour l'apparence de salle des preuves et les temps forts de l'enquête.

1. Histoire : la colonne vertébrale de l'enquête

Les histoires d'enquête ne fonctionnent que lorsque les enjeux sont réels et que chaque affirmation est sourcée.

• Accroche (0-3 s) : l'anomalie, énoncée comme un fait avec un chiffre (« ses connexions étaient lentes d'une demi-seconde »). L'image 0 est la couverture : un titre serif plus l'objet de la preuve, jamais noir.
• Piste (milieu) : suivez la preuve à travers les lieux et les personnes. Un temps fort par 2-4 s : tampon de date, puis carte de personne, puis l'itinéraire sur la carte, puis l'objet qui a été trouvé.
• Révélation : le moment de bascule. La musique s'évanouit et une seule chose rouge s'embrase.
• Procès-verbal : une carte de témoignage citant la source primaire réelle (email, témoignage, rapport), avec l'auteur et la date en dessous, plus un numéro de note de bas de page. N'inventez jamais une citation ; marquez les reconstitutions comme « reconstitution ».
• Fin : un titre serif qui réaffirme l'accroche comme un verdict (« Une demi-seconde. »), une règle rouge et le numéro de dossier. Maintenez-le, puis fondu intentionnel. N'ajoutez un appel à l'action (CTA) parlé que lorsque le créateur le souhaite ; s'il y a un CTA, il est prononcé en entier.
• Format court : 30-45 s, 4-6 plans. Format long (YouTube) : chapitres avec des cartes titres serif « Chapitre I ».
• Mettez chaque fait dans NOTES.md avec sa source et son état de vérification avant qu'il n'atteigne l'écran. Les faits sont la porte d'entrée du film.

Variante éducative (incidents de sécurité) : le défaut pour ce format

Rendez-les éducatifs : aidez les gens à comprendre ce que c'est, pourquoi c'est arrivé et ce qu'ils peuvent faire pour se protéger. Colonne vertébrale (~55-60 s, 6 plans) :

1. Couverture/accroche : tampon de date, nom de l'incident en serif, tampon de sévérité et balises CVE, tous visibles à l'image 0.
2. Échelle : pourquoi c'est important (quelle partie du web ou combien d'utilisateurs), avec une statistique sourcée et une note de bas de page.
3. Ce que c'est : un diagramme de pipeline montrant où se trouve le bug (internet, serveur web, moteur, application). La requête descend le long de la route rouge, l'étape cassée devient rouge, et la conséquence apparaît (par exemple, une invite de commande d'un inconnu). Définissez le jargon à l'écran (« shell = une ligne de commande sur votre serveur »).
4. Pourquoi c'est arrivé : la cause racine sous forme de métaphore 3D en argile blanche (la mémoire comme des blocs : piles à moitié construites, blocs fantômes libérés avec des pointeurs survivants), plus une carte de code bénin de 3 lignes (malloc/free).
5. Chronologie + vérification de la réalité : des épingles datées (code affecté le plus ancien, première attaque, fuite, correctif), puis une carte de témoignage d'une source primaire qui maintient le risque en perspective.
6. Protection : un terminal « comment vérifier » (php -v et la version corrigée), une liste de contrôle numérotée synchronisée avec la voix off, et un pied de page pour les cas particuliers (versions en fin de vie, WAF comme solution de contournement uniquement).
7. Verdict + CTA : un verdict serif de deux lignes et un CTA de sauvegarde/abonnement.

Sécurité éducative : expliquez conceptuellement la classe d'attaque. Ne montrez jamais de charges utiles, de corps de requête, d'offsets ou d'exploitation étape par étape. Nommez le correctif et comment le vérifier.

2. Aspect (bible artistique)

Élément	Règle
Fond	Charbon #0d0d0e avec un léger dégradé radial ; vignette et grain fin toujours activés
Accentuation	Un rouge #ff2d2a, toujours lumineux (triple text-shadow + bloom). Rouge = preuve : l'itinéraire, l'anomalie, le suspect, le mot clé. Rien d'autre n'est coloré
Contenu	Monochrome : blanc cassé #f2f0ea, terne #8d8b86 ; photos d'archives en N/B
Police	Titres Serif (Source Serif 4 700) ; corps/étiquettes machine à écrire (Courier Prime 700) ; tampons de données/dates (IBM Plex Mono 700, capitales espacées)
Carte photo	Photo N/B, bordure blanche aux bords légèrement déchirés, lueur blanche ; ligne de rôle en capitales mono ; étiquette noire avec un bord blanc déchiré. Personne inconnue = carte floutée avec « AUCUNE PHOTOGRAPHIE CONNUE »
Carte système	Carte de rues sombre avec des lignes grises fines, quelques artères épaisses et autoroutes courbes, filigrane de quartier en serif largement espacé (« D E B I A N ») ; le tracé se dessine en rouge lumineux avec une tête blanche ; les épingles sont des étiquettes avec un pointeur
Diorama	Modèles 3D en argile blanche (three.js) : blocs blancs mats sur un fond gris clair, ombres douces, brume. Le seul objet rouge éclaire son environnement lorsqu'il s'embrase
Carte de citation	Grands guillemets serif, règles blanches, texte mono tapé, mot clé rouge, ligne de source et date en dessous
Tampon de date	Horloge rouge lumineuse + « VENDREDI 29 MARS 2024 » + une ligne de contexte
Notes de bas de page	[n] en mono terne en haut à droite chaque fois qu'une affirmation sourcée est à l'écran

Zones de sécurité pour le 9:16 : conservez le contenu dans x 60-960 et y 240-1440. Les légendes se situent à y ~1470, en mono sur une étiquette sombre avec les mots clés en rouge. Ne les placez jamais sur un visage.

3. Mouvement

• Peu de coupes franches. Les longs documentaires de ce registre ne coupent que quelques fois en dix minutes. Les plans s'enchaînent par le contenu : plongez dans le tampon rouge, qui devient le nœud de départ de la carte ; plongez dans le nœud rouge de la carte, qui devient le bloc 3D rouge.
• La caméra ne s'arrête jamais : zooms avant lents (5-8 % par plan), zooms arrière pour révéler le contexte, et panoramiques suivant l'itinéraire. Adoucissez chaque mouvement en entrée et en sortie ; zoomez dans l'espace logarithmique.
• Les cartes apparaissent avec un ressort amorti (échelle 0,82 à 1) ; les étiquettes tombent de 18 px à leur place ; le texte apparaît en tapant.
• La route rouge se dessine au rythme du narrateur : la tête atteint chaque nœud sur son mot.
• Changez quelque chose toutes les 1,5 à 3 s et faites correspondre chaque effet à moins de 2 images de son mot.

4. Recette audio

• La musique ne s'arrête jamais. Pas de silence en dessous de -45 dB dans les 5 premières minutes. Un drone/pad ambient sombre en tonalité mineure ; ouverture à froid uniquement musicale (~12 s en format long, ~0 s en Reels).
• Narration par-dessus, musique environ 10 dB en dessous. Baissez le volume à partir de l'enveloppe de la VO (style sidechain). Augmentez la musique dans les trous de VO de 0,6 s ou plus, et coupez-la juste avant le mot de la révélation.
• Cible format long : environ -16 LUFS intégré, LRA environ 6 LU. Calme et dense, pas dynamique. Livrez les Reels à -14 LUFS / -1,5 dBTP.
• Les effets sonores sont rares et physiques : tics de frappe pour le texte tapé, bruits sourds lorsque les cartes et étiquettes atterrissent, bruit de données pendant qu'un itinéraire se dessine, un sub-drop sur la révélation, un ping de verre ou un carillon sur le verdict.
• Voix : un narrateur calme, grave, posé : déclaratives courtes, pauses après les faits. Utilisez d'abord l'enregistrement du créateur ; un clone vocal nécessite une approbation de dépense. Un substitut TTS est uniquement pour les brouillons et doit être étiqueté.
• audio/score.py dans l'exemple construit toute la musique et le mixage à partir des timings des mots.

5. Pipeline

1. Les faits et sources vont dans NOTES.md ; obtenez l'approbation du script et du tableau des temps forts (arrêt 1 d'animated-video).
2. VO, puis words.json (Whisper ou les limites de mots du TTS) ; corrigez les divisions de tokens dans audio/fix_words.py.
3. Définissez les actes dans src/lib.ts à partir de cue() ; construisez la musique avec audio/score.py en utilisant les mêmes repères.
4. Copiez src/kit/casefile.tsx et les motifs de scène ; rendez un tableau d'images clés avec snap.sh (arrêt 2 : images de style / images clés).
5. Rendez à --scale=1.3333333333333333 (1440x2560), puis effectuez un loudnorm à deux passes jusqu'à -14 LUFS, H.264 High, CRF 14, maxrate 24M, yuv420p limited range, balises BT.709, faststart.
6. QA : décodage complet, blackdetect, loudness, une planche contact, des images denses autour de chaque transition, et Whisper sur la VO. Rapportez les 4 états de QA séparément.

Pièges rencontrés lors de la construction du premier

• Une exécution edge-tts de l'ensemble du script est lente (88 s pour 180 mots). Utilisez scripts/tts_lines.py (un appel TTS par ligne, pauses contrôlées, « | » démarre une section), puis scripts/squeeze.py (raccourcit les pauses de plus de 0,45 s et remappe les timings des mots) : 68,6 s sont devenus 58,5 s.

• cue("Avant"), cue("PHP") et d'autres mots répétés posent problème. Utilisez des phrases de 2 mots, ou passez nth.

• Dans le plan large 3D, une seule rangée de blocs laisse le cadre vide. Ajoutez des rangées arrière (z = -1,6, -3,2, -4,8) pour la profondeur.

• Maintenez la caméra sur l'emplacement d'un bug jusqu'à environ 6 images avant le prochain temps fort. Bouger plus tôt pousse le sujet hors du cadre en milieu de phrase.

• Une carte superposée doit être à l'écran pendant au moins 1,5 s. Commencez-la sur le mot précédent, pas sur le dernier.

• Via un navigateur partagé, la navigation peut atterrir dans l'onglet actuel, y compris les propres onglets de l'utilisateur. Sélectionnez d'abord votre propre onglet.

• edge-tts renvoie « March 2024 » comme une seule limite de mot. Divisez-le avant chunk(), sinon les légendes dysfonctionnent.

• cue("Il") et d'autres mots répétés nécessitent nth, ou une phrase plus longue (cue("Il avait")).

• Un cube rouge émissif plus la finition bloom vire à l'orange/jaune. Maintenez l'émissif à 0,5 ou moins, la couleur de base foncée (#b8120c) et le bloom de la scène à 0,5.

• En 3D portrait, la tour doit se situer entre la bande de carte (y 300-750) et les légendes (y 1470). Reculez la caméra d'environ 23 unités pour un modèle de 6 unités de haut.

• Le zoom HTML sur le terminal coupe ses bords au-delà d'environ 1,12x. Zoomez sur l'affichage, pas sur un coin.

• Une étiquette de nœud de carte plus large qu'environ 300 px sort du cadre. Centrez-la sous le nœud.