pedro-cmyks/explainer-video-skill

Explainer Video – Hausstil

Jedes Video teilt sich ein einheitliches Erscheinungsbild und eine gemeinsame Bewegungssprache, die ursprünglich für einen CRM-Erklärfilm entwickelt wurde. Die goldene Referenz ist reference/desk-crm-explainer.html (84,5 s, 9 Szenen, ein fiktives Produkt namens Desk CRM) und ihr Bildraster reference/contact.png. Öffne bei Unklarheiten die Referenz und kopiere das Muster.

Dateien in diesem Skill:

Pfad	Beschreibung
templates/explainer-template.html	Starte hier. Vollständiges Hilfsmittel-Kit plus 3 Beispielszenen (Titel, Karten mit Cursor-Klick, Outro).
templates/apply-theme.mjs	Stempelt ein Theme aus themes/ in das Video-HTML ein (--theme studio --html explainer.html, --list). Wird vor Ort ausgeführt.
themes/*.json	Look & Sound pro Theme (house, studio, ember, tide): Farben, Farbverläufe, Schriftart, Kartenradius, Logo-Marke, Musik-Tonart, Progression, Tempo, Arpeggio. house ist der Standardwert.
templates/render.mjs	Playwright-Frame-Stepper weitergeleitet an ffmpeg. Video, Poster, Kontaktbogen, Standbilder. Wird vor Ort ausgeführt, niemals kopiert.
templates/compose.py	Numpy-Musikbett plus SFX, synchronisiert mit den lokalen Szenenzeiten, gemastert und gemuxt. Für jedes Video kopieren.
templates/voiceover.sh	Optionales macOS say-Voiceover, unter die Musik gemixt. Wird vor Ort mit Argumenten ausgeführt.
checklist.md	Kritik-Checkliste. Jeder Punkt muss vor der Auslieferung bestanden werden.
reference/	Das Referenz-HTML und sein Kontaktbogen. Niemals bearbeiten.
examples/tidy-tasks/	Ein kurzes, fertiges Video (20 s) aus der Vorlage: HTML, compose.py und Kontaktbogen.

Einrichtung, einmal pro Maschine: npm install und npx playwright install chromium im Skill-Ordner (er enthält eine package.json), plus ffmpeg und Python 3 mit numpy. render.mjs erklärt, was fehlt, wenn es nicht starten kann.

Das Erscheinungsbild

Eine Bewegungssprache, viele Looks. Alles Folgende beschreibt das Standard-Theme house. Ein Theme ändert die Paletten-Tokens, die Farbverläufe, die Schriftart, den Kartenradius, die Logo-Marke und die Musik; es ändert niemals die Bewegung, den Cursor, die Untertitel oder die Checkliste. Gleiches Theme plus gleiche Szenen ergibt das gleiche Video, Frame für Frame. Themes befinden sich in themes/*.json (house, studio, ember, tide); node $SK/apply-theme.mjs --list zeigt sie an, und --theme <name> --html explainer.html stempelt einen in den THEME-Block oben im HTML ein. compose.py liest die Musikeinstellungen aus demselben Block. Das Briefing nennt das Theme; ohne Angabe wird house verwendet. Für ein neues Theme eine JSON-Datei kopieren, die Tokens ändern, gr, am und rd als grün, gelb und rot erkennbar halten, eine auf dem renderten Rechner vorhandene Schriftart wählen und vor der Verwendung den Kontaktbogen auf Kontrast prüfen. Theme pro Szene (optional): füge weitere Theme-Objekte in THEMES ein und gib einer Szene theme: 'studio'. Palette, Farbverläufe und Kartenradius verändern sich über den 1-Sekunden-Überblendung; Schriftart und Logo-Marke wechseln an der Grenze; die Musik bleibt beim ersten Theme. Verwende dies, wenn das Video selbst die Abwechslung zum Thema hat; ein Theme ist der Normalfall.

Bühne: 1920x1080 SVG, Schriftart 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif (Theme font).

Hintergrund, drei Ebenen, innerhalb eines Themes niemals geändert:

• radialer Verlauf zentriert bei 50 % / 30 %, r 75 %: #172638 -> #111b26 (60 %) -> #0f1720
• Punktgitter: 40 px Muster, r 1,6 Punkte #22303f bei 70 % Deckkraft
• Untertitelband: untere 200 px (y 880..1080) ausgeblendet nach #0b121a bei 90 %

Paletten-Tokens (C in der Vorlage, Namen beibehalten):

Token	Hex	Verwendung
bg	#0f1720	Seite, Ziel für Ausblendung nach Schwarz
s1	#141d27	Kartenoberfläche
s2	#1b2733	Zeilen, Einsätze, innere Panels
bd	#2a3a4b	Rahmen, Gitternetzlinien, leere Punkte
tx	#e6edf3	Primärtext
mu	#a0b1c5	Sekundärtext, Spaltenüberschriften
bl	#3b82f6	Aktion, Auswahl, Pakete, Cursor-Ausbruch, Marken-Akzentwort
gr	#2fca73	Erledigt, live, Gewinn, Erfolg
am	#f59e0b	Aufmerksamkeit, heiß, Ausreißer
rd	#ef4444	nur Verlust oder Fehler
off	#3a4a5c	Inaktiver Status-Punkt
paper / ink	#f3f6fa / #1b2733	Helle Dokumentenseiten
light blue	#93c5fd, core #dbeafe	Lasso, Hervorhebungen, Paketkern
click spark	#ffd166	Alternative Speichen des Klick-Ausbruchs

Farbverläufe: logoG blau #3b82f6 nach grün #2fca73 (diagonal) für die Kachel und den Unterstrich des Logos; hotG gelb nach rot für „heiße“ Balken; blueBar #2563eb bis #3b82f6; areaG grün 38 % bis 0 unter Diagrammen.

Formen:

• Karte: Radius 26, Füllung s1, 2 px bd Strich, Schatten dy 16, blur 20, schwarz 42 % (card()).
• Zeile: Radius 14..18, Füllung s2, Höhe 52..80, Abstand 64..96 px.
• Chip: volle Pille, Höhe 40, Farbe bei 16 % Füllung, Beschriftung 24 px / 600 in der Farbe (chip()).
• Primär-Button: Radius 22, Höhe 84, volle bl, weiß 34 px / 700 Beschriftung, sanftes Leuchten bis zum Klick.
• Kleiner Schatten für Symbole und Pillen: dy 8, blur 8, schwarz 45 % (#shs).
• App-Fenster (Referenz dashboard()): 66 px obere Leiste in s2 mit Ampel-Punkten r 8 (rd, am, gr bei 80 %), 214 px Seitenleiste in #111922, Navigationselemente 48 hoch Radius 14, aktives Element bl bei 20 %, KPI-Kacheln Radius 18.
• Status-Punkt r 14; Avatar-Ring 4 px plus 25 %-Halo; Vorhängeschloss von lock().
• Marken-Logo: Logo 46 px plus Name 28 / 700 bei (56, 40), 85 % Deckkraft, sichtbar von Szene 2 bis zum Outro.

Schriftgrößen (px / Gewicht): Wortmarke 132 / 700 (Outro 96), Tagline 58 / 500 mu, Schlusszeile 56 / 600, Untertitel 50 / 600, große Zahlen 52..64 / 700 Tabellenziffern, Kartentitel 34..40 / 700, Zeilentext 26..28 / 600, Beschriftungen und Chips 24 / 600, nichts unter 22. Wortmarke Laufweite -1 %.

Kompositionsregeln:

• Inhalt befindet sich in y 120..860 und x 140..1780. Das Untertitelband und die Ecke der Marken-Logo bleiben frei. Dies schließt den ruhenden Cursor ein: Halte seine Spitze bei y <= 800 (der Pfeil reicht etwa 75 px unter die Spitze).
• Alles, was an Text gebunden ist (Durchstreichungen, Unterstreichungen, Hervorhebungsboxen, Pillen), entnimmt seine Breite von textW(str, size, weight), niemals einem geschätzten konstanten Wert.
• Lasse niemals zwei Drittel des Rahmens leer. Wenn sich der Inhalt auf links und rechts aufteilt, verbinde die Mitte mit Flusslinien, Paketen oder einem Fächer von Seiten. Verschiebe eine gesamte Szenengruppe (G(s, {x: SX})), um sie neu zu zentrieren.
• Eine Idee pro Szene. Maximal zwei Karten nebeneinander plus eine Detailkarte.
• Daten sind immer fiktiv: Client A, Northwind, Maple Ridge, Bluebird, Harbor Point, ACC 01.

Bewegungssprache

Easing-Kit (in der Vorlage): E cubic in out (Standard für alles), EO cubic out (beruhigend), EB back out mit ~10 % Überschwingen (Pops: Karten, Chips, Abzeichen, Symbole), esine für gezeichnete Pfade, fadeIO(t, a, b, 0.35) für Cursor-Deckkraft, ease out quint 1 - (1 - x)^5 für Zähler. Deterministisch: nur rng(seed), niemals Math.random oder Wanduhr.

Eingänge:

• Karten: weich über 0,5 s plus Aufstieg 20 px über 0,6 s oder Skalierung mix(0.92, 1, EB) über 0,7 s.
• Listenzeilen: gestaffelt 0,08..0,12 s, von x -20 / -30 oder y +16 einschieben, je 0,5 s.
• Pops: EB über 0,5..0,7 s. Abzeichen skalieren 0,7 -> 1.
• Wortmarke: Clip-Ausblendung öffnet sich von der Mitte aus über 0,8 s mit einem Anstieg von 34 px; das Logo-Symbol wird mit pathLength gezeichnet.

Cursor-Kit (drawCursor, curPos):

• Weißer Pfeil-Pfad ARROW, #0b1118 3,4 px Kontur, Schlagschatten dx 4 dy 7 blur 4 bei 50 %, Basisskalierung 1,1.
• keys: [[t, x, y], ...] in lokalen Sekunden, (x, y) ist die Pfeilspitze. Gleiten verwendet cubic in out plus einen seitlichen Bogen von 12 % der Entfernung (max. 110 px). Neigung folgt der horizontalen Geschwindigkeit (0,35 Grad pro px, max. 14 Grad).
• Typisches Gleiten 0,7..1,5 s. Komme etwa 1,5 s nach Szenenbeginn außerhalb des Rahmens bei (1880, 1080) an.
• Spätestens 0,15 s vor dem Klick ankommen und genau auf der Mitte des Steuerelements sitzen.
• Klick: x um +16 % und y um -22 % stauchen, das Maximum zum Zeitpunkt des Klicks (Fenster 0,34 s, beginnt 0,1 s früher), dann ein 0,6 s-Ausbruch: blauer Ring r 8 -> 54 dünner werdend 6 -> 1 px, plus 8 Speichen abwechselnd weiß / #ffd166.
• Das angeklickte Steuerelement senkt sich mit press() auf Skalierung 0,93 und sein Leuchten-Puls stoppt.
• Nach der Aktion gleiten zu einem ruhigen Ruhepunkt (zwischen Karten, z. B. (1010, 800)) und halten. Mit der Szene ausblenden.
• trail fügt einen blauen Kometen mit 12 Punkten hinzu, während gezeichnet wird; pos ersetzt keys für benutzerdefinierte Pfade (das Lasso).

Signature-Moves (Referenzszene zum Kopieren):

• Lasso: Cursor zeichnet eine wackelige Ellipse mit esine, gestrichelt #93c5fd 5 px (16 12, fließend), schließt durchgehend mit einem 0,35 s Leuchtenblitz und 7 % Füllung, dann fliegen Symbole entlang gekrümmter Pfade in einen Geisterrahmen, der sich in das App-Fenster verfestigt (sBefore).
• Pakete: Leuchtpunkt (r 22 Leuchten plus r 12 #dbeafe Kern) mit einem 6-Punkt-Kometenschweif auf einer S-Kurve, cubic in out über 1,2..1,45 s, gestrichelte Führungslinie fließend bei 24 px/s, Absender blinkt blau, grüner Ring bei Ankunft (packet(), sClose).
• Status-Punkte: grau -> grün mit einem Ring-Ausbruch (r 14 -> 40, 0,6 s) und einem 1,25x-Pop, dann atmendes Leuchten 0,25 + 0,2 sin(3t). Warnung: gelb, wiederholter Ring alle 1,3 s, kurzes Wackeln (statusDot(), sStatus).
• Diagramme zeichnen: pathFrom zeigt die Linie über 1,5..3,7 s, 6..7 px grün, areaG Füllung, leuchtender Kopfpunkt (r 18 Leuchten plus r 10 weiß). Balken wachsen von Null gestaffelt 0,18 s. Heatmap-Zellen erscheinen pop-artig gestaffelt (sAlgos, sHistory).
• Zähler: hochzählen mit ease out quint über 1,0 s, Tabellenziffern.
• Seitenfächer: Seiten verlassen den Button, fächern sich durch die Mitte (Rotationen -10, -3,5, 3,5, 10 Grad, 60 px Sprung), dann springt jede Seite um 110 px in ein Tablett bei Skalierung 0,56, gestaffelt 0,55 s; Tablett leuchtet grün, wenn voll (sReports).
• Org-Fächer: Linien zeichnen von einem angeklickten Avatar zu Team-Spalten, Schlösser schnappen zu, eine gestrichelte Umrandung gruppiert den Schreibtisch (sBook).
• Checklisten (Vorlagen-Kit): checkbox() runder Check, der sich senkt, grün aufpoppt und seinen Haken beim Klick zeichnet; strike(x, y, textW(...) + 8, u) streicht das Label durch; jeder Check sendet ein packet() an einen progressRing(), der pro Ankunft einen Schritt weicher ausführt und leuchtet, wenn geschlossen. Eine Listenszene ist Checkbox + Strike + Packet + Ring (siehe examples/tidy-tasks/).

Übergänge: Szenen sind nahtlos aneinandergereiht. Jede blende in ihren letzten 0,5 s aus und die nächste in ihren ersten 0,5 s ein, mit einem Skalierungs-Absetzen von 0,985 -> 1 (ein Eintauchen durch den Hintergrund). Die erste Szene beginnt fest, das Outro endet mit seinem eigenen 0,6 s Ausblenden auf bg. Ein Übergangsbild ist absichtlich fast leer; „repariere“ es nicht.

Halte- und Ruhebewegungen: In jedem Frame bewegt sich etwas. Verwende fließende Strich-Offsets, atmende Leuchteffekte (sin(3t)), bob()-Schwebungen von 3..5 px, langsame Dreher (60 Grad/s), driftende Symbole (18 / 14 px). Halte mindestens 1,5 s Haltezeit nach dem letzten Schlag einer Szene ein, damit der Untertitel fertig gelesen werden kann.

Kopierregeln

• Englische Untertitel, Satzfall, endend mit einem Punkt. Ein oder zwei Zeilen, maximal etwa 48 Zeichen pro Zeile.
• Zeit auf dem Bildschirm (Untertitel blendet ein 0,45..1,05 s, aus bei dur - 0,75) muss mindestens 1 s pro 4 Wörter betragen und niemals unter 2,5 s liegen. In der Praxis ist eine Szene nie kürzer als etwa 5 s.
• Keine Gedankenstriche als Satzzeichen (kein Em-Dash, En-Dash oder Leerzeichen-Bindestrich) in Untertiteln oder auf dem Bildschirm. Verwende Kommas und Punkte.
• Nur wahre Behauptungen. Zahlen auf dem Bildschirm (Kunden, Konten, Intervalle) stammen vom Benutzer oder Produkt, niemals erfunden. Vorlagenzahlen sind als PLACEHOLDER markiert. Keine echten Zahlen (Teaser, fiktives Produkt)? Gestalte das Outro STATS als einfache Worte, z. B. ['Simple lists', 'Daily focus', 'Clear progress']: die Pillen poppen dann anstatt zu zählen.
• Keine echten Kundendaten: keine echten Namen, Kontonummern, Salden, E-Mails oder Logos von Kunden. Verwende das fiktive Set.
• Titel und Outro tragen keinen Untertitel; die Tagline und Schlusszeile übernehmen diese Aufgabe.

Architektur

• Eine eigenständige HTML-Datei, kein Netzwerk, keine Bibliotheken. SVG-Bühne plus ein IIFE-Skript.
• render(t) ist rein: es baut das #frame-innerHTML nur aus t auf. Verfügbar als window.renderAt(t), mit window.TOTAL_DURATION und window.SCENES_INFO. Ohne #manual in der URL läuft es in Echtzeit als Schleife.
• SCENES = [{ id, start, dur, fn, cap }], nahtlos aneinandergereiht. Halte jeden Eintrag auf einer Zeile in dieser Schlüsselreihenfolge und const TOTAL = <number>; als Literal: compose.py parst beides mit Regex.
• Eine Szene ist fn(lt, dur) -> { svg, cursor? } mit lokaler Zeit lt. Alle Beat-Zeiten innerhalb einer Szene sind lokale Konstanten (click, send(i), onT(i)), was das Audio-Skript widerspiegelt.
• Hilfsfunktionen: Math (clamp lin E EO EB mix f rng fadeIO bob), SVG (T G R Ci card chip check avatar lock logo wordmark textW), Diagramme (pathFrom walk scalePts spark areaChart bez), Bewegung (ring statusDot packet press progressRing checkbox strike), Cursor (curPos drawCursor), caption. G() gibt '' zurück, wenn die Deckkraft ~0 ist, daher sind versteckte Ebenen kostenlos.
• Zeichnungsreihenfolge: Szeneninhalt, Untertitel, Marken-Logo, Cursor zuletzt.
• const STATS = [...] bleibt eine Zeile am Anfang einer Zeile: compose.py liest sie für die Outro-Klänge.

Arbeitsablauf

1. Briefing. Zielgruppe, Produkt, 3..6 wahre Behauptungen mit echten Zahlen, Länge (60..90 s voll, 20..40 s Teaser), wo es veröffentlicht wird, und das Theme (house, studio, ember, tide, oder eine neue JSON-Datei).
2. Storyboard. Eine Tabelle mit Szenen-ID, Dauer, Untertitel, visueller Metapher, Cursor-Aktion und Beat-Zeiten. Bogen: Haken (Logo, Tagline) -> vorher (der Schmerz) -> eine Funktion pro Szene -> Outro (Statistiken oder Wort-Pillen, Schlusszeile). Überprüfe die Untertitel-Timings gegen die Kopierregeln vor dem Bau.
3. Bauen. Im Arbeitsordner, mit SK gesetzt auf den templates-Ordner dieses Skills (z. B. SK=~/.claude/skills/explainer-video/templates): cp $SK/explainer-template.html explainer.html && cp $SK/compose.py . Bearbeite niemals die Skill-Kopien. Wende das Theme an: node $SK/apply-theme.mjs --theme <name> --html explainer.html (für house überspringen). Setze BRAND, ersetze die Beispielkarten-Szene, füge Szenen im markierten Block hinzu, aktualisiere Starts und TOTAL, setze STATS. Hebe Muster aus der Referenz hervor.
4. Vorschau. Öffne das HTML in einem Browser (es läuft als Schleife), rendere dann Standbilder bei jedem Klick, Landepunkt und Grenze: node $SK/render.mjs --html explainer.html --stills 3.2,4.9,8.6 --stills-dir critique/v1.
5. Rendern. node $SK/render.mjs --html explainer.html --out name.mp4 schreibt das MP4, -poster.png und -contact.png.
6. Kritik. Lies den Kontaktbogen und die Standbilder anhand von checklist.md. Jeder Punkt muss bestanden werden; korrigiere, rendere erneut und prüfe erneut, bevor du --frames ausgibst.