jdrurka/explainer-skill

Explainer

Ein gesichtsloser Erklärer ist eine Sprachaufnahme über einer einzigen, durchgehend in Code gebauten animierten Welt (ein Querschnitt, ein vergrößerter Mechanismus, eine Hand, die ein Objekt hält), mit Kopfzeilen oben und ohne Musik. Die Ausgabe ist ein 1080×1920 mp4.

Lies dies vor dem Schreiben:

• script-craft.md: Wie das Skript geformt ist (Hook, Twist, Imagine, Mechanism, Flip, CTA) und sein Tempo.
• craft-rules.md: Was die Visuals lebendig und räumlich wirken lässt. Ein kompetenter erster Durchlauf bricht die meisten dieser Regeln.

Der schwierige Teil ist die visuelle Metapher für jeden Takt. Der zweitschwierigste ist, jeden Frame in Bewegung und mit Tiefe beleuchtet zu halten. Code ist der einfache Teil.

Modi

• One-Shot (Standard): Vom Konzept zum finalen Video ohne Unterbrechung. Triff die Urteile selbst und berichte sie am Ende.
• Review: Wenn der Benutzer um Überprüfung oder Genehmigung bittet, halte zweimal an: nach dem Skript und nach dem Storyboard. Überarbeite auf Basis seiner Notizen und fahre fort.

Einrichtungsprüfung (einmalig)

ffmpeg im PATH, remotion/node_modules vorhanden (andernfalls npm install in remotion/ ausführen) und FISH_API_KEY in .env (.env.example kopieren). Ohne Schlüssel baust du alles auf voice --placeholder auf und teilst dem Benutzer mit, dass der letzte Schritt ein erneuter voice-Durchlauf plus ein Render ist.

Layout

projects/<concept>/ (das Konzept ist ein Slug, z.B. how-fridges-work):

• script.txt, storyboard.md
• composition.tsx (Ebenenstapel), timeline.ts (TL), captions.ts, words.ts (generiert), scenes/S01.tsx …
• public/vo.wav, vo/ (Rohaufnahme und Alignment), out/ (Rendern, Standbilder)

Die Kernbibliothek ist remotion/src/core (Szenen importieren es als ../../../remotion/src/core):

• makeTimeline → TL.at("phrase"), TL.end("phrase")
• Captions, Drift, Bokeh, Vignette, handheld, Backdrop, Dust, Footnote
• Camera (WorldSvg, camAt, toScreen), Label, Sparks, Snow / Rain
• Easings, ramp, keys, rand, Schriften SANS / MONO

Werkzeuge: python3 bin/explainer.py … (führe -h aus)

Befehl	Tut
new <c>	Erstellt das Projektgerüst
voice <c> [--voice-id ID] [--speed 1.0]	Fish Audio Aufnahme mit Wort-Zeitstempeln → words.ts, plus public/vo.wav bei −14 LUFS. Gibt die wpm aus
voice <c> --placeholder [--wpm 200]	Stiller Ton und synthetische Timings ohne API-Aufruf
stills <c> <sec>…	Frames zu diesen Sekunden → ein Kontaktbogen in out/. Sieh es dir an
studio <c>	Live-Vorschau im Remotion Studio (für den Benutzer)
render <c> [--blur]	60 fps mp4 in out/. --blur rendert mit 240 fps und mittelt auf 60 für Bewegungsunschärfe (~4× langsamer)
qa <c>	Lebendigkeitsprüfung: eingefrorene Frames < 10 %, kein eingefrorener Lauf ≥ 0,3 s. Beendet mit 1 bei FEHLER und benennt jeden eingefrorenen Abschnitt

Arbeitsablauf

1. Skript. Führe new <c> aus.

   • Wenn der Benutzer ein Skript geliefert hat, verwende es Wort für Wort (korrigiere nur Zahlen und Symbole in Wörter).
   • Andernfalls schreibe script.txt gemäß script-craft.md: Standardmäßig Alltagsgegenstand-Format (270–320 Wörter), Systemformat für Produkte und Netzwerke. Führe seine Checkliste aus.
   • Review-Modus: Stopp zur Freigabe.

2. Stimme. Führe voice <c> aus, überprüfe dann die ausgegebenen wpm (Ziel 190–215; falls abweichend, mit dem vorgeschlagenen --speed erneut ausführen).

   • Die Stimme ist --voice-id, sonst FISH_VOICE_ID, sonst Fishs Standard. Eine geklonte Stimmen-ID funktioniert genauso.
   • Das Modell ist --model, sonst FISH_MODEL, sonst s2.1-pro.
   • Arbeite gegen words.ts, nicht script.txt. Die Stimme spricht Zahlen aus, und TL.at() sowie Untertitelphrasen müssen mit den gesprochenen Wörtern übereinstimmen.

3. Storyboard (storyboard.md). Fülle zuerst den Abschnitt „World“, dann eine Zeile pro Takt. Um die Metapher eines Taktes zu erfinden, frage dich, was der Betrachter sehen würde, wenn er könnte:

   • Vergrößern: Ein Querschnitt oder eine Explosionszeichnung.
   • Röntgen: Das Innere des Objekts.
   • Zeitlupen: Eine sich bewegende Welle, ein schaltendes Teil.
   • Messen: Ein sich erhöhender oder fallender Messwert.

   Das „Imagine“-Szenario wird zur Exkursionswelt, und jeder Mechanismus-Takt kehrt zum Home-Diagramm zurück. Führe die Storyboard-Prüfungen aus.

   • Review-Modus: Stopp zur Freigabe.

4. Bauen. Schreibe eine Szenendatei pro Storyboard-Einstellung in scenes/ und füge jede zu composition.tsx hinzu.

   • Jede Szene ist eine reine Funktion von t, die außerhalb ihres Fensters null zurückgibt.
   • Timing: Jedes Ereignis ist an TL.at("exakte Wörter") gebunden. Schreibe niemals rohe Sekunden.
   • Kontinuität: Takte, die ein Diagramm teilen, leben in EINER Szene mit EINEM Kamerapfad (A4).
   • Bewegungen: Jede Szene tritt ein, indem sie sich bewegt und den Exit der vorherigen Szene überlappt (A2).
   • Präfixiere SVG-IDs pro Szene.

5. Iterieren. Führe stills zu den Schlüsselwörtern jeder Einstellung aus und betrachte sie gegen die Craft-Regeln A und B. Führe dann render und qa aus. Behebe jeden eingefrorenen Abschnitt in seiner eigenen Einstellung, indem du ihm einen Bewegungsträger gibst (A1b). Schreibe captions.ts-Phrasen von Hand: ein hervorgehobenes (bernsteinfarben, erscheint beim Sprechen) Schlüsselnomen pro Phrase.

6. Ausliefern. Der finale render muss qa bestehen (verwende --blur, wenn der Benutzer maximale Perfektion wünscht). Gib dem Benutzer:

   • den mp4-Pfad
   • das Skript
   • eine einzeilige Zusammenfassung des Storyboards pro Takt
   • jede Platzhalter-Stimme, die noch eine echte Aufnahme benötigt

Rote Flaggen: Anhalten und korrigieren

Gedanke	Regel
„Eine neue Umgebung für diesen Takt hält es frisch“	C1: Ein Home-Diagramm plus 1–2 Exkursionswelten. Zähle sie
„Starr stillhalten auf dem Höhepunkt für Spannung“	A1c: Das Subjekt anhalten, Kamera und Umgebung in Bewegung halten
„Einen Musikbett, Korn oder einen Drop auf dem Höhepunkt hinzufügen“	D, B8: Nur Stimme, kein Korn; Tiefe kommt von Beleuchtung
„Einblenden“ / „Überblenden zur nächsten Szene“	A2: Eintritt, Austritt und Übergang durch Bewegung
„Die globale Drift wird es lebendig halten“	A1b: Jede Einstellung benötigt einen mittelgroßen Beweger mit 10–60 px/s
„Für diesen Takt zu einer näheren Kamera wechseln“ (gleiches Diagramm)	A4: Eine Welt, eine Kamera; Keyframes weitergeben
„Gleichmäßige Beleuchtung ist in Ordnung, es ist ein Diagramm“	B1: Abfall ins Dunkle, Randlicht, Vignette
„Das Ganze färben, wenn es aktiviert wird“	B4: Von der Ursache ausbreiten, mit einer Vorder- und Fließrichtung
„Ein Rechteck ist für das Objekt in Ordnung“	B2: Ein Anatomie-Durchlauf; baue so, dass ein Herauszoomen etwas enthüllt
„Sieht für mich gut aus, überspringe qa“	E: qa muss BESTEHEN; Augen übersehen eingefrorene Bilder