Whiteboard-Erklärvideos

Was macht Whiteboard-Erklärvideos?

Der Kern des Stils: Stimme und Bild bewegen sich gemeinsam. Alles wird gezeichnet, geschrieben, unterstrichen und eingekreist, während es gesprochen wird, und jede Folie wird schrittweise aufgebaut. Lies references/style-guide.md, bevor du das Storyboard schreibst; es enthält die Farben, die Regeln für Wörter auf dem Bildschirm, die schrittweise Enthüllung, die Sync-Zeittabelle und die gesamte Videostruktur.

Starte jedes Video von template/ aus (kopiere es, fange nicht von Grund auf neu an): Kopiere das template/ dieses Skills in <project>/video/, dann source env.sh && cargo build --release. Das Binary ist target/release/explainer (explainer.exe unter Windows; R ... in env.sh führt es aus). Die Vorlage ist ein ~95 s Demo („Binäre Suche in etwa einer Minute“) mit vier Szenen, die man kopieren kann; template/README.md enthält jeden Befehl. Führe die Python-Skripte aus dem Projektordner als python -I narration/<x>.py aus mit numpy, soundfile, librosa, faster-whisper und pillow installiert. Was darin enthalten ist:

• src/kit.rs: Das Zeichen-Kit (handgezeichnete Striche, hand/note-Text, underline, circle, arrow, stamp, counter, Card für Papierabbildungen mit mark/ring/spot/zoom, camera, shrink_aside, Icons). Verwende es vollständig.
• src/lib.rs: Szenen-Dispatch, Kapitel-Chips mit dem 0,1 s Dip, Bildtabelle, SceneCues (c.w(beat, "word") = wenn ein Wort gesprochen wird). Demo-Szenen: s_intro.rs (Kaltstart, Titel, Outro-Zusammenfassung), s_idea.rs (eine Folie, die auf gesprochenen Wörtern aufbaut), s_figure.rs (Abbildungskarte mit Ring/Markierung/Notiz/Spot und einem Zoom), s_quiz.rs (das mcq-Quiz mit einem Trap-Stempel).
• src/objs.rs: Wiederverwendbare Objekte (mcq, grid, token, vecbar, hbar, code_panel, chat_card, quote_card, axes/trace, vec_arrow, photo, ...) plus einen Bereich „Dieses Video“: Füge dort die wiederkehrenden Objekte jedes Videos ein, damit jede Szene sie identisch zeichnet.
• src/duck.rs: Das Host-Sprite (Fußposition, Sprechwippe aus der Sprachhüllkurve, szenenspezifische Positionen: groß im Kaltstart / Quiz / Outro, klein unten rechts sonst). Keine Sprites → kein Host.
• src/t3d.rs (optional): Immediate-Mode-Würfel und View3 für Tensor/Array 3D-Einschübe.
• narration/: script.py (Szenen → Beats, PAUSE für Quiz), tts.py (Spracheinstellungen; findet das lokale TTS say.py), build_vo.py (Sprache + zeilenweiser Cache + Pausenformung + Tempo + faster-whisper Wortausrichtung → audio/narration.wav, src/cues.rs, src/envelope.rs), words.py (prüft jeden c.w(...)-Schlüssel, fehlende Dispatch-Arme und übrig gebliebene Platzhalter; schreibt WORDS.md), est_cues.py (vorläufige Cues und eine stille Spur, bevor die Stimme existiert), audit_vo.py / tts_try.py (Aussprache-Prüfung), make_srt.py (Untertitel mit einer DISPLAY-Karte, OVERRIDE und --review), envelope.py, glitch.py (Enddatei-Prüfung).
• tools/: prep_figs.py (schreibt src/figs.rs aus figs/*.png), get_pet.py (lädt ein Host-Sprite herunter), font_metrics.py, make_demo_fig.py, lowprio.py (führt einen Job mit niedriger Priorität aus).
• media/: Die Schriftarten. Nur Mediendateien dürfen auf oberster Ebene liegen (include_media_dir! panikt bei anderen), daher liegen die Lizenztexte in media/licenses/.
• HELPERS.md: Die Anleitung für jeden Szenen-Helfer (Regeln, Dateizuordnung, Build-and-Check-Schleife).
• STORYBOARD.md: Das Storyboard der Demo, das den Detailgrad zeigt, den Helfer benötigen.
• THIRD_PARTY.md: Lizenzinformationen zu Schriftarten, Sprites, fframes und FFmpeg.

Anforderungen

• Rust (stable) und fframes 1.3.0 von crates.io (festgelegt in template/Cargo.toml; überprüfe die Lizenzbedingungen für deine Nutzung).
• FFmpeg shared libraries (FFmpeg 7+ „shared“-Build) und LLVM/libclang für den fframes-Build. template/env.sh liest FFMPEG_DIR und LIBCLANG_PATH; unter Windows füge auch FFmpegs bin zum PATH hinzu, sowohl für cargo als auch für das gebaute Binary (ohne die DLLs beendet es sich mit Exit-Code 127, still, wenn es gepiped wird).
• Python 3.10+ mit faster-whisper (Wortausrichtung, Prüfung) und numpy.
• Das local-tts-Skill (gleiches Plugin) für die Stimme. Eine GPU hilft sehr; alles läuft auch auf einer CPU.
• Ein Host-Sprite (optional): Ein Codex-Pet von github.com/gennadi-kuzmin/awesome-codex-pets (192×208 Zellen). python -I tools/get_pet.py --list, dann python -I tools/get_pet.py <pet-id> lädt eines herunter und schneidet es in sprites/. Die MIT-Lizenz dieses Repos deckt seinen Code ab; überprüfe die Kunstwerkrechte jedes Pets, bevor du ein Video veröffentlichst. Wähle ein helles (dunkle Pets verschwinden auf der schwarzen Tafel). Ohne Sprite wird das Video ohne Host gerendert.

fframes-Version und das offizielle Skill

Neue Videos verwenden fframes 1.3.0. Das offizielle Skill des Erstellers, fframes-video, deckt die allgemeine API ab und ändert sich mit jedem Release. Lies daher für alles, was dieses Skill nicht abdeckt: dessen SKILL.md, dann references/api.md, audio.md, design.md und 3d.md. Installiere es mit npx skills add https://fframes.studio -g -a claude-code -y (bitte den Benutzer, es auszuführen, wenn deine Berechtigungen Installationen blockieren); dieselben Dateien befinden sich in github.com/dmtrKovalenko/fframes unter skills/fframes-video/. Dieses Skill behält nur das, was für diesen Stil spezifisch ist: das Aussehen, die Pipeline und die folgenden Lektionen. Wenn die beiden beim Rendern widersprechen, gewinnen die untenstehenden Fallstricke.

Neu in 1.3 und empfehlenswert:

• 3D-Aufnahmen (fframes::three_d): Siehe nächsten Abschnitt.
• Schärfere Prüfungen: frame 3s --crop x,y,w,h (ein gezoomter Zuschnitt in Videopixeln, für berührende Striche und kleine Beschriftungen), frame --ids (umrandet und benennt jedes Element mit einer id), strip 2s,5s,9s (ausgewählte Zeiten nebeneinander) und inspect --pops (findet Dinge, die in einem Frame ein- oder ausblenden; gruppiert die Blinzler des Hosts). --pops prüft die Frames, nicht das kodierte mp4, also führe trotzdem glitch.py auf der endgültigen Datei aus.
• Lottie: Feature lottie, frame.play_lottie(ctx, "x.json", LottieOptions { .. }) für ein fertig animiertes Icon. Handgezeichnete Kit-Striche bleiben der Standard; verwende Lottie nur, wenn es zum Whiteboard-Look passt.
• include_media_dir!(pub struct M, "media", stereo) behält Stereo-Dateien in Stereo.

3D-Aufnahmen in einem Whiteboard-Video

Verwende 3D nur, wenn Tiefe oder eine bewegte Kamera die Erklärung ist: ein Stapel von Ebenen, aus dem eine herausgehoben wird, Tensorformen, eine Speicherhierarchie, ein physisches Gerät, eine Verlustfläche, eine Papierabbildungskarte, die sich neigt. Text, Beschriftungen, Diagramme und Pfeile bleiben handgezeichnete SVGs. Beschränke es auf ein oder zwei 3D-Momente pro Kapitel: Das Video ist immer noch ein Whiteboard. references/three_d_example.rs ist ein 4 s Test (ein sich drehender Ebenenstapel mit einer sich hebenden Ebene, einer handgezeichneten Beschriftung, die daran befestigt ist, einer Papierkarte, die in svgr auf einer 3D-Ebene gezeichnet wird).

• fframes = { version = "=1.3.0", features = ["compile-time-svgtree", "cli", "3d", "wgpu"] }. 3D funktioniert mit dem CPU-Frame-Renderer: Mit wgpu wird 3D auf der GPU gerendert und zurückgelesen (120 Frames bei 1080p: 1,4 s auf einem RTX 4070 Laptop, 4,2 s mit Renderer::cpu()). Wenn die GPU ausgelastet ist, wechsle die Renderer zu .cpu() (das Beispiel liest FF_3D=cpu) und nichts anderes ändert sich. Die wgpu-Typen benötigen möglicherweise #![recursion_limit = "256"] in main.rs.
• Tafel-Look: Background::Transparent über dem Kit-Hintergrund-Rechteck BG, Material::shadow_catcher-Boden, ToneMapping::Neutral, damit die Kit-Palette treu bleibt, und Material::standard(c).roughness(0.45).clearcoat(0.4) für klobige Objekte, die in Streifengröße lesbar sind.
• Handbeschriftungen auf 3D-Objekten: camera.project(scene.local_to_world(id, local), w, h) ergibt das Pixel innerhalb des Einschubs; füge das x/y des Einschubs hinzu. Zeichne die Beschriftung mit dem Kit, auf dem Auslösewort.
• Papierabbildungen in 3D: ctx.render_svgr(svgr!(..), w, h) → Texture::from_image(&img) auf einem Geometry::plane mit Material::unlit(0xffffff). Derselbe Weg legt ein Abbildungs-PNG auf eine Karte.
• Ein Objekt, das sich bewegt, muss innerhalb der Box seines Inset-Renderers bleiben, sonst wird es am Rand abgeschnitten.
• Baue die Szene einmal in new() auf, klone und positioniere sie pro Frame (siehe das offizielle 3d.md).
• Tensor-/Array-Visuals: Immediate Mode funktioniert gut. Die Szenenfunktion baut einen Vec<Cube> aus t pro Frame auf (Positionen sind einfache Arithmetik, sodass Blöcke kollabieren, teilen, abrollen, geisterfüllen), rendert einen Einschub mit einer gemeinsamen rounded_box-Geometrie und projiziert Punkte für handgezeichnete Pfeile. Schreibe Würfelnummern nur auf die vordere Ebene und überspringe Beschriftungen von verblassten Würfeln (Alpha < 0,6), sonst scheinen sie durch. Eine vollständige inspect mit 3D ist langsam (~10 min für 5.400 Frames): Führe sie im Hintergrund aus.
• Halte eine angeheftete Beschriftung über die gesamte Kamerabewegung hinweg frei von jedem Objekt (überprüfe ein Standbild zu Beginn und Ende der Aufnahme) und starte eine 3D-Aufnahme, nachdem ein shrink_aside abgeschlossen ist, nicht währenddessen.

Arbeitsablauf

1. Recherchiere die Quelle in research/paper_notes.md: jede Zahl mit ihrer Tabelle/Seite, plus Formulierungshürden (Prozent vs. Punkte usw.). Extrahiere die Abbildungen des Papers als Bilder (figs/, weiße Karten im Video). Zeige die eigenen Diagramme und Abbildungen des Papers auf dem Bildschirm.
2. Skript (narration/script.py): ~150 Wörter pro Minute, 1 Satz pro Beat, für die Stimme buchstabiert („Swee Bench“, „T zero“, Zahlen in Wörtern). Kaltstart mit der überraschendsten Zahl → Titel + Papierkarte → Roadmap → Kapitel → 3–4 Quiz (Frage, Optionen A-D, PAUSE, Antwort) → Fazit-Plakat, das dieselben zuvor gezeichneten Objekte wiederverwendet → Kleingedrucktes → Outro. Überprüfe die Länge nach dem Sprach-Build; kürze Zeilen oder erhöhe TEMPO (1,06 funktioniert), anstatt zu hetzen.
   • Quiz sind schwierig, präzise Multiple-Choice (Style-Guide Abschnitt 6): Denkfragen, vier Optionen, deren falsche echte Missverständnisse sind, genau eine verteidigbare Antwort. Schreibe research/quiz_keys.md (jede Option mit einem Seiten-/Tabellenverweis begründet, abgeleitete Zahlen in Python berechnet) und überprüfe es, bevor du die Stimme baust.
   • Lehre, fasse nicht zusammen. Baue jede Idee von Null auf mit einem durchgerechneten Beispiel in echten Zahlen. Definiere jeden Begriff in der Zeile, die ihn einführt, und reduziere Fachjargon auf eine alltägliche Sache („Ein Knoten ist nur ein Job“). Beginne die meisten Beats mit einem Verbindungswort („Also,“, „Nun,“, „Aber“), damit die Wendungen hörbar sind. Bleibe nahe bei 150 Wörtern pro Minute: Die Zeichnung braucht Zeit.
   • Führe jedes Symbol richtig ein, bevor es verwendet wird; wiederhole eine kurze Erinnerung in der Zeile, die es verwendet.
   • Mach es wie ein Mensch, nicht wie eine KI. Lies references/natural-narration.md vor dem Schreiben, dann führe python -I scripts/aispeak_scan.py <project>/narration/script.py aus. Behebe gestaffelte Anläufe („Hier ist der Kern“), Nicht-X-sondern-Y-Umrahmungen, zitierfähige Abschlüsse und selbstbeantwortete Fragen, bevor du die Stimme baust.
   • Vermeide Doppelpunkt-Fragment-Zeilen („Erstens: ...“, „Drei Benchmarks.“): Die Stimme macht dort eine Pause und die nächste Zeile klingt abrupt. Das erste Wort einer Szene allein („Sonde.“) könnte verschluckt werden: Schreibe „Als Nächstes: Sonde.“. Gib „Danke fürs Zuschauen!“ einen eigenen Beat.
3. Storyboard (STORYBOARD.md): Pro Szene, welches Element auf welchem Auslösewort erscheint, seine grobe Position (x, y), Größe und Farbe, welche Abbildung/ welcher Ausschnitt, und die wiederkehrenden Objekte + Farbbedeutungen. Konkret genug zum Implementieren, nicht zum Gestalten. Halte den Chip-Bereich (oben links) und den Host-Bereich (unten rechts) frei.
4. Stimme: narration/build_vo.py erzeugt die Stimme über das say.py des lokalen TTS-Skills, gefunden über LOCAL_TTS_SAY, dann ~/.claude/skills/local-tts/, dann ~/.claude/plugins/**. GPU ausgelastet? GGML_BACKEND=CPU und WHISPER_DEVICE=cpu. Pro Zeile zwischengespeichert; das Umformulieren einer Zeile erzwingt eine neue Aufnahme. shape() begrenzt jede Stille innerhalb eines Clips auf die Interpunktion davor (0,14 s ohne, 0,24 ,, 0,3 :;, 0,42 .?!), mit 0,5 s zwischen Zeilen (0,7 nach einer Frage). Prüfe die Stimme, bevor du Szenen zeichnest: audit_vo.py transkribiert jeden Clip ohne das Skript als Prompt (Whisper mit Prompt verbirgt Fehlaussprachen) und vergleicht es mit dem Skript. Ignoriere US-Schreibweisen und Homophone; behebe echte Fehllesungen, teste Korrekturen mit tts_try.py (innerhalb des gesamten Satzes: ein Name kann allein in Ordnung sein und in der Mitte der Zeile verstümmelt werden). Bekannte Fehllesungen stehen in den Fallstricken des lokalen TTS-Skills. Führe die Prüfung nach jeder Neusynchronisation erneut aus (Qwen verdoppelt gelegentlich ein Wort, „the the“). Stimme noch nicht fertig? est_cues.py schreibt vorläufige Cues und eine stille Spur, und Szenen passen ihre Zeitsteuerung an, wenn build_vo.py beide überschreibt.
5. Kit + 1–2 exemplarische Szenen, die von dir gezeichnet und in voller Größe überprüft werden, damit Helfer eine Qualitätsrichtlinie haben.
6. Verteile Szenengruppen an parallele Subagenten (kleine, schnelle Modelle mit hohem Denkaufwand machen das gut, wenn die Anweisungen eng sind; ein stärkeres Modell wird nur für die Beispiele benötigt). Füge die wiederkehrenden Objekte zuerst in objs.rs ein und fülle HELPERS.md aus, mit absoluten Pfaden zu research/. Kopiere das Projekt in work/<group>/ pro Agent (überspringe Renderings und den Sprech-Cache) mit dem Zielverzeichnis hard-verlinkt (cp -al target work/g/target, oder ein CARGO_TARGET_DIR pro Helfer; lösche dann die eigenen explainer-Crate-Artefakte dieser Kopie), um Speicherplatz und Build-Zeit zu sparen. Jeder Helfer bearbeitet nur seine src/s_<group>.rs, baut, führt words.py und inspect aus, überprüft Streifen und vollständige Frames. Merge, indem du ihre s_*.rs zurückkopierst; diff andere Dateien zuerst.
   • Halte Helfer schnell. Builds sind der Engpass: behalte [profile.release] incremental = true + codegen-units = 256 (Rebuild ~50 s → ~25 s) und führe höchstens ~4 Helfer gleichzeitig aus; gib spätere Gruppen demjenigen, der zuerst fertig ist. Eine Gruppe = 2 Szenen ähnlicher Größe; trenne ein Quiz oder eine dichte Szene ab. Budget: höchstens 3 Build-and-Check-Runden pro Szene, ein 12-Frame-Streifen plus @end, dann liste verbleibende Zweifel auf, anstatt zu polieren. Eine gezielte Korrekturrunde pro Helfer ist günstig.
   • Überprüfe ihre Fakten: Überprüfe jede Zahl auf dem Bildschirm mit paper_notes und berechne jedes durchgerechnete Beispiel (Helfer haben Zahlen erfunden, Übertragsfehler gemacht und eine Demo, die die Antwort auf ein späteres Quiz verriet). Überprüfe, ob Fotos mit der Erzählung übereinstimmen.
   • Überprüfe selbst die Streifen und Frames jedes Helfers (deren eigene Prüfbilder können veraltet sein), dann sende konkrete Korrekturen. Ihr häufiger Fehler ist, jede Phase in der oberen Hälfte in kleiner Schrift zu bündeln: gib y-Bereiche und px an.