Communitygithub.com

madhavsomani/animation-skills

Madhavs „Fallakte“ Investigativ-Erklärvideo: Ein dokumentarischer „Beweisraum“-Look, optimiert für Reels / Shorts / YouTube (Holzkohle-Hintergrund, weiß-glühende Fotokarten mit zerissenen Namensschildern, dunkle Straßenkarten mit glühender roter Route, weiße 3D-Dioramen aus Ton, Zitatkarten mit echten Quellen, rote Datumsstempel, Fußnotenmarkierungen, Serifen-Kapitelüberschriften), getragen von einem ruhigen Erzähler über einer durchgehend dunkel-ambienten Musik. Verwenden Sie ihn, wenn nach einem „Fallakte“, „Beweisraum“, „Ermittlung“, „True-Crime/Dokumentarstil“ oder einem Video über „wie X entdeckt / gehackt / geleakt wurde“ gefragt wird, für einen Tech-Vorfall, eine Sicherheitslücke, einen Ausfall, einen Skandal oder eine Historie. Läuft innerhalb der Stages und Genehmigungsstopps des Skills „animated-video“. Nicht geeignet für optimistische Konzept-Erklärvideos (vector-world-explainer), Papiercollage über Sprechermaterial (paper-lab-reel) oder reine Filmmaterial-Schnitte (video-use).

Was ist animation-skills?

Der Skill „Case File Explainer“ ist eine Spezialisierung des übergeordneten Skills „animated-video“ (Remotion) und dient zur Erstellung investigativer, dokumentarischer Erklärvideos. Er eignet sich für Geschichten über Sicherheitsvorfälle, Hacks, Leaks, Ausfälle oder Skandale in der Technologiebranche und folgt einem strengen „Beweisraum“-Look mit einer charcoalfarbenen Grundierung, einem markanten roten Akzent für Beweise und einem ruhigen, gemessenen Erzählstil. Der Skill definiert eine klare narrative Struktur (Hook, Spur, Enthüllung, Bericht, Ende), eine detaillierte künstlerische Bibel (Farben, Typografie, Karten, Dioramen), Bewegungsregeln (wenige harte Schnitte, langsame Kamerafahrten) und ein vollständiges Audio-Rezept (dunkle Ambient-Musik, sparsame Soundeffekte, ruhige Stimme). Er enthält alle notwendigen Vorlagen und ein Arbeitskit für die Produktion, inklusive Pipeline-Schritten von der Skripterstellung über den Bau der Szene und die Musikgenerierung bis hin zur Qualitätssicherung. Besonderer Wert wird auf Quellentreue und Klarheit gelegt: Jede Behauptung muss mit einer Quelle belegt sein, und der Skill enthält eine spezielle „Educational Variant“ für Sicherheitsvorfälle, die erklärt, was passiert ist, warum es geschah und wie man sich schützt. Die Implementierung erfolgt in Remotion und wird durch Python-Skripte (z. B. für die Musik und die Optimierung der Sprachausgabe) ergänzt, wobei der Skill auch Fallstricke und Lösungen aus der Praxis dokumentiert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madhavsomani/animation-skills/tree/HEAD/skills/case-file-explainer

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Case File Erklärvideo

Eine Ermittlung, erzählt als Beweismaterial: Wer, wo, wann und was die Aufzeichnung sagt, mit einem roten Akzent, der immer bedeutet „dies ist der Beweis“. Die Spannung entsteht aus ruhiger Zurückhaltung: keine Übertreibungen, keine schnellen Schnitte. Stattdessen eine Kamera, die nie aufhört zu schweben, eine Musik, die nie verstummt, und Fakten, die auf die exakten Worte des Erzählers fallen.

Führen Sie es innerhalb des cstack animated-video-Skills (Remotion; lesen Sie ihn zuerst) aus und behalten Sie seine Genehmigungsstopps, die Auslieferung in voller Qualität und die vier separaten QA-Zustände (technisch, inhaltlich, kreativ, Eigentümer-Freigabe) bei. Dieser Skill fügt die künstlerische Leitung, das Shot-Vokabular, das Audio-Rezept und ein einsatzbereites Kit hinzu.

  • Arbeitsbeispiel zum Kopieren: template/ (die 30-Sekunden-xz-backdoor-Demo: src/kit/casefile.tsx = das Kit, src/scenes/* = eine Szene pro Shot-Typ, audio/score.py = die Musik). Screenshots: ../../docs/case-file-explainer/.

Gestalten Sie für jede Geschichte neu. Kopieren Sie die Methode und das Kit, nicht die Shots des xz-Films.

Klarheit kommt zuerst. Unser zweites Case File (eine PHP-Remote-Code-Execution-Geschichte) sah poliert aus, war aber schwer zu folgen. Planen Sie für jedes Video, das erklärt, wie etwas funktioniert, mit dem decode-explainer-Skill (Konzeptleiter, zuerst ein Spielzeugmodell, Legende auf dem Bildschirm, eine Idee pro Bildschirm, Fachjargon erst, nachdem er definiert wurde, Schriftgröße ≥ 44 px) und verwenden Sie diesen Skill nur für den Beweisraum-Look und die Ermittlungs-Beats.

1. Geschichte: die Ermittlungsspinne

Ermittlungsgeschichten funktionieren nur, wenn die Einsätze real sind und jede Behauptung belegt ist.

  • Aufhänger (0-3 s): die Anomalie, als Tatsache mit einer Zahl formuliert („seine Logins waren eine halbe Sekunde langsam“). Frame 0 ist das Cover: eine Serifen-Überschrift plus das Beweisobjekt, niemals schwarz.
  • Spur (Mitte): dem Beweis durch Orte und Personen folgen. Ein Beat pro 2-4 s: Datumsstempel, dann Personenkarte, dann die Route auf der Karte, dann das gefundene Objekt.
  • Enthüllung: der Moment des Ausstiegs. Die Musik bricht weg und ein rotes Ding entzündet sich.
  • Bericht: eine Zeugniskarte, die die echte Primärquelle zitiert (E-Mail, Aussage, Bericht), mit Autor und Datum darunter, plus einer Fußnotennummer. Erfinden Sie niemals ein Zitat; kennzeichnen Sie Rekonstruktionen als „Rekonstruktion“.
  • Ende: ein Serifen-Titel, der den Aufhänger als Urteil wiederholt („Eine halbe Sekunde.“), eine rote Linie und die Fallnummer. Halten Sie es, dann blenden Sie gezielt aus. Fügen Sie einen gesprochenen CTA nur hinzu, wenn der Ersteller einen wünscht; wenn ein CTA vorhanden ist, wird er vollständig gesprochen.
  • Kurzform: 30-45 s, 4-6 Shots. Langform (YouTube): Kapitel mit „Kapitel I“ Serifen-Titelkarten.
  • Setzen Sie jede Tatsache in NOTES.md mit ihrer Quelle und dem Überprüfungsstatus, bevor sie auf den Bildschirm kommt. Die Fakten bestimmen den Film.

Bildungsvariante (Sicherheitsvorfälle): der Standard für dieses Format

Machen Sie diese lehrreich: Helfen Sie den Leuten zu verstehen, was es ist, warum es passiert ist und was sie tun können, um geschützt zu sein. Spinne (~55-60 s, 6 Shots):

  1. Cover/Aufhänger: Datumsstempel, Serifen-Vorfallname, Schweregrad-Stempel und CVE-Tags, alle in Frame 0 sichtbar.
  2. Umfang: warum es wichtig ist (wie viel des Webs oder wie viele Benutzer), mit einer belegten Statistik und Fußnote.
  3. Was es ist: ein Pipeline-Diagramm, wo der Fehler lebt (Internet, Webserver, Engine, App). Die Anfrage wandert die rote Route entlang, die kaputte Stufe wird rot, und die Konsequenz erscheint (z. B. ein fremder Shell-Prompt). Definieren Sie den Fachjargon auf dem Bildschirm („Shell = eine Kommandozeile auf Ihrem Server“).
  4. Warum es passiert ist: die Grundursache als weiße 3D-Ton-Metapher (Speicher als Blöcke: halb aufgebaute Stapel, befreite Geisterblöcke mit überlebenden Zeigern), plus eine 3-zeilige harmlose Code-Karte (malloc/free).
  5. Zeitleiste + Realitätscheck: datierte Pins (ältester betroffener Code, erster Angriff, Leck, Patch), dann eine Zeugniskarte von einer Primärquelle, die das Risiko in Proportion hält.
  6. Schützen: ein „Wie zu überprüfen“-Terminal (php -v und die korrigierte Version), eine nummerierte Checkliste, die auf die VO abgestimmt ist, und eine Fußnote für Randfälle (EOL-Versionen, WAF nur als Notlösung).
  7. Urteil + CTA: ein zweizeiliges Serifen-Urteil und ein Speichern/Folgen-CTA.

Bildungssicherheit: Erklären Sie die Angriffsklasse konzeptionell. Zeigen Sie niemals Payloads, Request-Bodies, Offsets oder Schritt-für-Schritt-Ausnutzung. Nennen Sie den Fix und wie Sie ihn überprüfen können.

2. Look (Kunstbibel)

ElementRegel
GrundierungHolzkohle #0d0d0e mit einem weichen radialen Anheben; Vignette und feines Korn immer an
AkzentEin Rot #ff2d2a, immer glühend (dreifacher Textschatten + Bloom). Rot = Beweis: die Route, die Anomalie, der Verdächtige, das Schlüsselwort. Nichts anderes ist farbig
InhaltMonochrom: gebrochenes Weiß #f2f0ea, schwach #8d8b86; Archivfotos in S/W
TypografieSerifen-Titel (Source Serif 4 700); Schreibmaschinen-Körper/-Etiketten (Courier Prime 700); Daten/Datumsstempel (IBM Plex Mono 700, Buchstabenabstand in Großbuchstaben)
FotokarteS/W-Foto, weißer Rand mit leicht ausgefransten Kanten, weißer Glanz; Rollenzeile in Großbuchstaben Mono; schwarzes Namensschild mit einer weißen ausgerissenen Kante. Unbekannte Person = unscharfe Karte mit „KEINE BEKANNTEN FOTOGRAFIEN“
SystemkarteDunkle Straßenkarte aus dünnen grauen Linien, ein paar dicken Hauptstraßen und geschwungenen Autobahnen, riesige Buchstabenabstand-Serifen-Bezirkswasserzeichen („D E B I A N“); der Pfad zeichnet sich in glühendem Rot mit einem weißen Kopf; Pins sind Namensschilder mit einem Zeiger
DioramaWeiße 3D-Tonmodelle (three.js): matte weiße Blöcke auf einem hellgrauen Grund, weiche Schatten, Nebel. Das eine rote Objekt beleuchtet seine Umgebung, wenn es sich entzündet
ZitatkarteGroße Serifen-Anführungszeichen, weiße Linien, Mono-Text eingetippt, Schlüsselwort rot, Quellenzeile und Datum darunter
DatumsstempelRote glühende Uhr + „FREITAG, 29. MÄRZ 2024“ + eine Kontextzeile
Fußnoten[n] in schwachem Mono oben rechts, wann immer eine belegte Behauptung auf dem Bildschirm ist

Sicherheitszonen für 9:16: Inhalt in x 60-960 und y 240-1440 halten. Untertitel sitzen bei y ~1470, in Mono auf einem dunklen Tag mit Schlüsselwörtern in Rot. Platzieren Sie sie niemals über einem Gesicht.

3. Bewegung

  • Wenige harte Schnitte. Lange Dokumentarfilme in diesem Register schneiden in zehn Minuten nur eine Handvoll Mal. Shots verbinden sich durch Inhalt: eintauchen in den roten Stempel, der zum Startknoten der Karte wird; eintauchen in den roten Knoten der Karte, der zum roten 3D-Block wird.
  • Die Kamera stoppt nie: langsame Push-Ins (5-8 % pro Shot), Herauszoomen, um Kontext zu enthüllen, und Routen folgende Schwenks. Jede Bewegung ein- und ausblenden; Zoom in logarithmischem Raum.
  • Karten erscheinen mit einer gedämpften Feder (Skalierung 0,82 auf 1); Tags fallen 18 px an ihren Platz; Text tippt sich ein.
  • Die rote Route zeichnet sich im Tempo des Erzählers: Der Kopf erreicht jeden Knoten auf seinem Wort.
  • Ändern Sie alle 1,5-3 s etwas und lassen Sie jeden Treffer innerhalb von 2 Frames seines Wortes landen.

4. Audio-Rezept

  • Die Musik stoppt nie. Keine Stille unter -45 dB in den ersten 5 Minuten. Ein dunkel-ambienter Drone/Pad in einer Moll-Tonart; nur Musik als kalter Einstieg (~12 s in der Langform, ~0 s in Reels).
  • Erzählung oben, Musik etwa 10 dB darunter. Ducken aus der VO-Hüllkurve (Sidechain-artig). Die Musik in VO-Lücken von 0,6 s oder mehr anschwellen lassen und kurz vor dem Enthüllungswort ausblenden.
  • Ziel Langform: etwa -16 LUFS integriert, LRA etwa 6 LU. Ruhig und dicht, nicht dynamisch. Reels mit -14 LUFS / -1,5 dBTP ausliefern.
  • SFX sind spärlich und physisch: Tippgeräusche für getippten Text, sanfte dumpfe Schläge, wenn Karten und Tags landen, Datenplaudern, während eine Route zeichnet, ein Sub-Drop auf die Enthüllung, ein Glas-Ping oder -Klingeln auf das Urteil.
  • Stimme: ein ruhiger, tiefer, gemessener Erzähler: kurze Aussagesätze, Pausen nach Fakten. Verwenden Sie zuerst die eigene Aufnahme des Erstellers; ein Sprachklon benötigt eine Ausgabengenehmigung. Ein TTS-Platzhalter ist nur für Entwürfe und muss gekennzeichnet sein.
  • audio/score.py im Beispiel erstellt die gesamte Musik und den Mix aus den Wortzeitsteuerungen.

5. Pipeline

  1. Fakten und Quellen gehen in NOTES.md; Skript und Beat-Sheet genehmigen lassen (animated-video Stopp 1).
  2. VO, dann words.json (Whisper oder die TTS-Wortgrenzen); Token-Splits in audio/fix_words.py korrigieren.
  3. Die Akte in src/lib.ts aus cue() definieren; die Musik mit audio/score.py unter Verwendung derselben Cues erstellen.
  4. src/kit/casefile.tsx und die Szenenmuster kopieren; ein Keyframe-Board mit snap.sh rendern (Stopp 2: Stil-Frames / Key-Frames).
  5. Mit --scale=1.3333333333333333 (1440x2560) rendern, dann einen Two-Pass-Loudnorm auf -14 LUFS, H.264 High, CRF 14, maxrate 24M, yuv420p Limited Range, BT.709-Tags, faststart durchführen.
  6. QA: voller Dekodierung, Blackdetect, Lautstärke, ein Kontaktbogen, dichte Frames um jeden Übergang, und Whisper auf der VO. Die 4 QA-Zustände separat melden.

Fallstricke beim Bau des ersten (Praxis-Fehler)

  • Ein edge-tts-Durchlauf über das gesamte Skript ist langsam (88 s für 180 Wörter). Verwenden Sie scripts/tts_lines.py (ein TTS-Aufruf pro Zeile, kontrollierte Lücken, „|“ beginnt einen Abschnitt), dann scripts/squeeze.py (verkürzt Pausen über 0,45 s und ordnet Wortzeitsteuerungen neu zu): 68,6 s wurden zu 58,5 s.

  • cue("Before"), cue("PHP") und andere wiederholte Wörter werfen Fehler. Verwenden Sie 2-Wort-Phrasen oder übergeben Sie nth.

  • In der 3D-Weitaufnahme lässt eine einzelne Blockreihe den Rahmen leer. Fügen Sie hintere Reihen hinzu (z = -1,6, -3,2, -4,8) für Tiefe.

  • Halten Sie die Kamera auf einen Bug-Steckplatz bis etwa 6 Frames vor dem nächsten Beat. Ein früheres Bewegen drückt das Motiv mitten im Satz aus dem Rahmen.

  • Eine Overlay-Karte muss mindestens 1,5 s auf dem Bildschirm sein. Starten Sie sie auf dem früheren Wort, nicht dem letzten.

  • Navigation in einem gemeinsam genutzten Browser kann in dem Tab landen, der gerade aktiv ist, einschließlich der eigenen Tabs des Benutzers. Wählen Sie zuerst Ihren eigenen Tab.

  • edge-tts gibt „March 2024“ als eine Wortgrenze zurück. Teilen Sie es vor chunk(), sonst werden die Untertitel falsch.

  • cue("It") und andere wiederholte Wörter benötigen nth oder eine längere Phrase (cue("It had")).

  • Ein emittierender roter Würfel plus der Bloom-Finish bläst zu Orange/Gelb aus. Halten Sie die Emission bei 0,5 oder darunter, die Basisfarbe dunkel (#b8120c) und den Szenen-Bloom bei 0,5.

  • Im Hochformat-3D muss der Turm zwischen dem Kartenband (y 300-750) und den Untertiteln (y 1470) sitzen. Ziehen Sie die Kamera etwa 23 Einheiten zurück für ein 6 Einheiten hohes Modell.

  • HTML-Zoom auf dem Terminal beschneidet seine Ränder ab etwa 1,12x. Zoomen Sie auf die Ausgabe, nicht auf eine Ecke.

  • Ein Kartenknoten-Etikett breiter als etwa 300 px läuft aus dem Rahmen. Zentrieren Sie es unter dem Knoten.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Verwandte Skills