tzezhang1-crypto/claude-motion-explainer-video

Motion Explainer (Video-Erweiterung) – Animation erklärt Prinzipien, Fotos sind Belege, KI-Videos transportieren Emotionen

Dieses Skill verknüpft „Internet-Recherche → Skript → chinesischer Voice-Over → Frame-für-Frame-Animation → Untertitel → Farbschema → lizenzierte Fotos und generierte Diagramme → KI-Videos → Selbstprüfung → MP4-Ausgabe“ zu einem festen Workflow. Im Vergleich zur Basisversion motion-explainer enthält es die neuen Abschnitte 7.5 Bildebene, 7.6 KI-Videoebene und Abschnitt 4 Korrektur falsch ausgesprochener Wörter; alle anderen Schritte sind identisch. Video-Material wird überwiegend KI-generiert: Nachrichten, Werbeclips und Stock-Videos sind fast immer urheberrechtlich geschützt und werden nicht in Lehrvideos eingebaut. Es baut auf drei Säulen auf:

• HyperFrames (Open Source von HeyGen, HTML + GSAP → MP4) und dessen offizielle Skills, insbesondere den Einstieg /hyperframes und den Workflow /faceless-explainer. Die Vorgehensweise folgt strikt der offiziellen Dokumentation.
• Die Skills motion-design (Ästhetik-Regeln: Easing, Rhythmus, Pausen, chinesische Typografie) und review-loop (Contact-Sheet-Selbstprüfung) dieses Repos. Die Qualität orientiert sich an diesen beiden Skills.
• Die Tools im Ordner scripts/: Sie ergänzen, was der offizielle Workflow bei chinesischem Voice-Over, Untertiteln, Schrifteinheitlichkeit und Drei-Farben-Themen nicht optimal handhabt.

references/lessons.md enthält praktische Fallstricke – vor Arbeitsbeginn unbedingt lesen, jede Regel ist in mindestens einem ersten Video wirklich aufgetreten.

0. Umgebungsprüfung (bei erster Verwendung)

• Führe zuerst python scripts/hw_check.py --project <Projekt> aus: Es erkennt CPU, RAM, GPU und Festplatte und empfiehlt, welche Voice-Engine, wie viele --workers und ob Sub-Agents gestaffelt eingesetzt werden sollen. Erkläre dem Benutzer die Vorschläge gemäß references/hardware.md; die Angaben sind Schätzungen, keine Benchmark-Ergebnisse.
• Node.js 22+, ffmpeg/ffprobe, Python 3 + Pillow + fonttools (pip install fonttools; mit brotli werden Schriftarten als woff2 ausgegeben, sonst als ttf).
• HyperFrames CLI: npm install -g hyperframes, dann hyperframes doctor (Docker, Whisper, Kokoro, MusicGen sind optional).
• Offizielle Skills: hyperframes skills update, für diese Art von Videos zusätzlich hyperframes skills update faceless-explainer.
• Anonyme Nutzungsstatistiken sind standardmäßig aktiviert – frage den Benutzer, ob sie mit hyperframes telemetry disable deaktiviert werden sollen.
• TTS (eine Option auswählen, Benutzer fragen):
  • edge-tts (Standard): pip install edge-tts, benötigt keine GPU, erfordert Internetverbindung. Taiwanesische Stimmen sind zh-TW-HsiaoChenNeural (weiblich), zh-TW-HsiaoYuNeural (weiblich), zh-TW-YunJheNeural (männlich).
  • Breeze TTS 2 (Fortgeschritten): Lokale NVIDIA GPU (ca. 7,7 GB VRAM, empfohlen 12 GB+; Modelldateien ca. 7 GB). Ermöglicht stimmliches Design mittels Textbeschreibung sowie Voice-Cloning; feinste Kontrolle über Akzent und Emotion.
  • Andere Engines sind ebenfalls möglich: Solange für jeden Satz assets/voice/raw/NN.wav ausgegeben wird. Für englische Videos können die in HyperFrames integrierten Engines Kokoro/HeyGen verwendet werden.

1. Recherche (bei aktivierter Websuche)

• Suche die aktuellsten Informationen zum Thema von mindestens zwei unabhängigen Quellen. Notiere Abweichungen bei Zahlenwerten und übernimm den Wert, der konsistent erscheint.
• Kennzeichne jede Zahl in einer von drei Kategorien, die später im Video ausgewiesen werden: Offizielle Behauptung / Gemessener oder berichteter Wert / Eigene Schätzung.
• Führe eigene einfache physikalische oder mathematische Schätzungen durch, damit das Publikum „nachrechnen“ kann – das ist der wertvollste Teil eines Lehrvideos. Vergleiche Schätzungen stets mit der Realität (z. B.: „Normale Autos maximal 1,2 g“ wurde durch ein Serienauto mit 1,8 s auf 100 km/h widerlegt, also auf 1,5 g korrigieren).
• Keine Markenfotos oder Logos verwenden; Hauptobjekte werden als eigene Skizzen dargestellt, gekennzeichnet mit „Schematische Darstellung“.
• Notiere bereits während der Recherche Bildhinweise: Gibt es „Vorgänger“, „Altvordere“ oder „Experimentalfotos“ als Belege (z. B. historische NASA-Fotos, bereits existierende ähnliche Produkte)? Diese sind die echten Fotos, die in Abschnitt 7.5 gesucht werden.

2. Anforderungsinterview (gemäß /hyperframes Intent Layer, alles auf einmal abfragen)

Unbedingt klären: Abspielplattform (bestimmt das Seitenverhältnis – Unterricht/YouTube → 16:9), Länge (empfohlen 60–90 s, die Sprechdauer bestimmt die tatsächliche Videolänge), gewünschter Voice-Over (empfohlen), ob zuerst das Storyboard geprüft werden soll, sowie automatischer oder interaktiver Workflow.

Zusätzlich drei Farben abfragen (diese Erweiterung), ähnlich wie bei Präsentationsvorlagen:

• Hintergrundfarbe, Hauptfarbe (Text und Linien), Akzentfarbe (nur für Antworten, Schlussfolgerungen, Schlüsselzahlen, Kapitelkarten).
• Keine Präferenz? Empfehle: schwarzer Hintergrund #121212, weiße Schrift #F2F0EA, orangefarbener Akzent #FF7A1A.
• Schriftart: Im gesamten Video einheitliche Schriftart. Standard ist GenSeki Gothic Bold (OFL-lizenziert, für Chinesisch, Englisch, Zahlen und Untertitel). Hat der Benutzer eine bestimmte Schriftart, wechsle zu dieser, aber stelle sicher, dass sie frei verwendbar ist.
• Farben und Schriftart werden in der Projekteinstellungsdatei theme.json gespeichert (Format siehe templates/theme.example.json mit bg/fg/accent/font).

Fasse alle Anforderungen in einer Zusammenfassung zusammen, unterteilt in „Vom Benutzer beantwortet“ und „Von mir abgeleitet“. Starte erst, nachdem der Benutzer sie bestätigt hat.

3. Projekt aufsetzen und Storyboard erstellen

1. hyperframes init videos/<kebab-Name> --non-interactive --example=blank --skill=faceless-explainer, dann die BRIEF.md schreiben und gemäß /faceless-explainer Step 0–2 vorgehen (capture/extracted/ erstellen, ein Frame-Preset auswählen und frame.md generieren).
2. Wähle ein Preset mit klaren Linien (z. B. cobalt-grid). Es dient nur als „Quell-Farbschema“; später ersetzt theme.py alles mit den drei Farben des Benutzers.
3. Füge in frame.md traditionell chinesische Überschreibungen hinzu (Schriftart, Schriftstärke, Zeichenabstand, Zeilenhöhe, Mindestschriftgröße für Beamer), gemäß Abschnitt 5 von motion-design.
4. Führe bash scripts/fetch_fonts.sh <Projekt> aus, um GenSeki Gothic Bold (vom offiziellen GitHub-Release) sowie die Latin-Schriftart und Noto TC für die Frame-Worker in assets/fonts/ abzulegen. Verlasse dich nicht auf Google Fonts online.
5. Schreibe STORYBOARD.md und SCRIPT.md (Format gemäß offiziellem storyboard-format/script-format). Der Voice-Over muss in „Teilsätzen“ getrennt sein – jedes Komma markiert den Zeitpunkt für eine neue Bildanzeige. Schreibe Zahlen in chinesischen Schriftzeichen („零點八一秒“), damit der TTS sie nicht falsch ausspricht.

4. Voice-Over

1. Generiere assets/voice/raw/NN.wav (eine Datei pro Satz, NN = Storyboard-Framenummer):
   • edge-tts: python scripts/edge_tts_voice.py --project <p> --voice zh-TW-HsiaoChenNeural [--rate -5%]. Verwende im gesamten Video dieselbe Stimme für natürliche Konsistenz; --list zh-TW listet alle Stimmen auf.
   • Breeze TTS 2: python scripts/breeze_voice.py --project <p> --breeze-repo … --model … --voice "<Stimmbeschreibung>" --only-ref, erstelle zunächst eine Referenzstimme und lasse den Benutzer sie anhören. Nach Bestätigung entferne --only-ref und generiere alle Sätze (jeder Satz kopiert diese Referenzstimme). Falls ein Batch-Runner vorhanden ist, verwende scripts/tts_jobs.py zur Erstellung einer Aufgabenliste.
   • Falls der Benutzer noch nichts installiert hat oder unsicher ist: Gib Empfehlungen gemäß references/tts-setup.md und gehe Schritt für Schritt vor. Installiere nichts ohne Rückfrage.
2. Lasse den Benutzer zuerst 1–2 Sätze Probehören. Akzent und Emotion entscheidet das Ohr des Benutzers, keine Metrik. Bei Unzufriedenheit wechsle die Stimme oder passe die Sprechgeschwindigkeit an; lösche die alten WAV-Dateien und generiere neu.
   • Wird ein Wort erst am Ende des gesamten Videos als falsch ausgesprochen erkannt (z. B. englische Markennamen, Homophone)? Nimm den ganzen Satz nicht neu auf, sonst verschieben sich alle Animationszeiten dieses Frames. Stattdessen: Mit derselben Stimme 4–6 Kandidaten desselben Satzes erzeugen – durch Variieren des Seeds oder der Schreibweise (z. B. Road-ster oder homophone Zeichen; Untertitel bleiben im Original). Lege sie unter assets/voice/fix/cand/NN_X.wav ab. Führe dann python scripts/fix_voice.py --project . audition --line N --clauses <Teilsatz mit dem Wort> aus, um die Schlüsselsegmente zu einer Hörprobe zusammenzufügen. Nach Auswahl führe apply --line N --take NN_X aus: Es dehnt/staudt den neuen Satz als Ganzes proportional auf die ursprüngliche Länge, gleicht die Lautstärke an die ursprüngliche Zeile an und berechnet die Untertitelzeit neu – die Länge jedes Frames bleibt unverändert. Anschließend: Untertitel neu aufbauen → patch_captions.py → .hyperframes/pre-theme/compositions/captions.html löschen (sonst überschreibt theme.py mit alten Untertiteln) → theme.py → place_media.py → neu rendern. Schneide den neu aufgenommenen Satz nicht an Pausen in Teilsätze, um sie neu zu timen: Die Pausenpositionen unterscheiden sich, die Schnitte liegen mitten im Wort, was zu fehlenden oder doppelten Zeichen führt (praktisch beobachtet). ASR kann nur offensichtliche Fehler aussortieren; Tonhöhen – ob ein Zeichen richtig ausgesprochen ist – erkennt ASR nicht (Beispiel: „輪胎“ wurde von ASR als richtig erkannt, hörte sich für den Benutzer aber falsch an).
3. python scripts/voice_meta.py --project <p>: Entferne Stille am Anfang/Ende, miss die Zeit jedes Teilsatzes und schreibe audio_meta.json.
4. node <faceless-explainer>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
5. Lautstärke: Die finale Ausgabe sollte etwa −14 LUFS und einen True Peak ≤ −1 dBFS haben. Falls der Voice-Over zu leise ist, erhöhe den Gain gleichmäßig mit Limiter, wobei die relativen Lautstärken der einzelnen Sätze erhalten bleiben.

5. Kameradesign (Step 4)

• Schreibe in shots.json (Format siehe templates/shots.example.json) für jeden Frame: „Teilsatznummer → was auf dem Bildschirm erscheint“. Führe dann python scripts/apply_shots.py --project <p> aus, um in echte Sekunden umzurechnen und in STORYBOARD.md zurückzuschreiben.
• Das Feld blueprint darf nur <id> (Adapt), <id> (Reproduce) oder compose enthalten; Erläuterungen kommen in note.
• Suche zunächst mit hyperframes catalog --query nach vorhandenen Komponenten; erst wenn nichts gefunden wird, selbst zeichnen.
• Hauptobjekte, die in mehreren Frames wiederholt auftauchen (Auto, Person, Gerät), zeichne zuerst als gemeinsame SVG, mit festen Koordinaten aller Teile. Alle Worker müssen diese SVG exakt übernehmen. Sonst sieht das Hauptobjekt in jedem Frame anders aus.

6. Parallele Erstellung jedes Frames

1. node <faceless-explainer>/scripts/frame-packets.mjs --project <p> --storyboard <p>/STORYBOARD.md
2. Kopiere templates/dispatch_context.md nach .hyperframes/frame-packets/_dispatch_context.md und fülle die Projektwerte ein: Video-Richtung, gemeinsame Assets, Zeitregeln, Schriftart.
3. Weise jedem Frame einen Sub-Agenten zu, alle parallel. Der Prompt liest nacheinander: _role.md → _dispatch_context.md → das Frame-Paket → frame.md → gemeinsame Assets.
4. Wenn benachbarte Frames dieselbe Szene fortsetzen (z. B. dieselbe Maßskala), teilt der zuerst fertige Frame seine exakten Geometrien sofort dem noch in Arbeit befindlichen Frame mit.
5. Nach Abschluss aller Frames: python scripts/unify_frames.py --project <p> – vereinheitliche Schriftarten und Positionen von Haarlinien.

7. Zusammenbau, Untertitel, Farbschema

node <fe>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .
node <fe>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json
python scripts/patch_captions.py --project .     # chinesische Untertitel: Schriftart und -stärke (Standard Bold 700)
python scripts/theme.py --project .              # wende die drei Farben und Schriftart aus theme.json an (Index, Frames, Untertitel)
node <fe>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
node <fe>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
hyperframes lint && hyperframes check

(<fe> = Pfad des installierten faceless-explainer Skills.) Nach jeder Neuerstellung der Untertitel müssen patch_captions.py und danach theme.py erneut ausgeführt werden. In theme.json legt accents fest, welche Elemente in jedem Frame die Akzentfarbe erhalten (block/fill/text); font ersetzt in allen Frames und Untertiteln die Schriftart und -stärke, wobei die ursprünglichen Einstellungen der Worker überschrieben werden. Nach dem Schriftwechsel – die Buchstaben werden breiter – muss hyperframes check erneut laufen, um Überläufe oder Überlappungen zu prüfen.

Erst ganz am Ende die Schriftarten optimieren: python scripts/subset_fonts.py --project .. Es behält nur die im Video tatsächlich verwendeten chinesischen Zeichen (CJK-Schriftarten schrumpfen von 12–17 MB auf wenige hundert KB) und aktualisiert die @font-face-Referenzen in allen Frames. Jede Änderung an Text, Untertiteln oder Farbschema muss erneut durchlaufen: theme.py wendet die Farben jedes Mal von den unbearbeiteten Quelldateien an, die noch auf die vollständige Schriftart verweisen; neu hinzugekommene Zeichen, die nicht in der optimierten Schriftart enthalten sind, fallen auf die Systemschriftart zurück.

7.5 Bildebene (Neu in diesem Skill)

Vollständige Regeln in references/images.md. Kernpunkte:

1. Planung: 3–5 Bilder pro Video. Echte Fotos als Belegkarten („Das hat schon mal jemand gemacht“), Codex-generierte Bilder als Stimmungsbild für Intro und Outro. Die Animation bleibt der Hauptbestandteil; Bilder dürfen die durch Linien erklärten Prinzipien nicht überlagern.
2. Foto-Suche: python scripts/find_images.py search "<Schlüsselwort>" → get "File:…" --name <Kurzname> --project .. Nur Public Domain, CC0, CC BY, CC BY-SA akzeptieren; die Quellen werden automatisch in assets/images/web/CREDITS.md eingetragen. Nach dem Herunterladen jedes Bild persönlich prüfen: Passanten, andere Markenlogos, Wasserzeichen müssen entfernt werden.
3. Generierte Diagramme: Schreibe die Prompts in gen_prompts.json (Format siehe templates/gen_prompts.example.json) und führe python scripts/codex_images.py --project . aus. Erfordert eine lokal eingeloggte Codex CLI mit integrierter image_gen (kein API-Key). Nach der Generierung jedes Bild persönlich auf eingestreuten Text oder Logos prüfen. Falls Codex nicht verfügbar ist, teile dem Benutzer mit, dass andere Bildgenerierungstools verwendet werden können; die PNGs müssen dann in assets/images/gen/ abgelegt werden.
4. Farbgebung: Trage in media.json die Bildausschnitte, -größen und den Modus ein (Fotos: duotone, generierte Bilder: keep), führe python scripts/treat_images.py --project . aus.
5. Platzierung: Betrachte das endgültige Contact Sheet jedes Frames, suche echte freie Flächen und trage in media.json unter placements die Felder frame, mode (card/background), box, at, label, credit ein. Um die ursprüngliche Strichzeichnung durch ein Foto zu ersetzen, verwende hide. Führe dann nach theme.py python scripts/place_media.py --project . aus.
6. Bildbeschriftung: Bei Fotos „Foto: Autor · Lizenz · Quelle“, bei generierten Bildern „KI-generierte schematische Darstellung“.
7. Führe hyperframes check aus (Textkontrast auf den Bildern, Überlappungen), erst dann subset_fonts.py, da auch Bildunterschriften und Quellenangaben Schriftzeichen enthalten.

7.6 KI-Videoebene (Neu in diesem Skill)

Vollständige Regeln in references/ai-video.md. Kernpunkte:

1. Planung: 2–4 Videoclips pro Video. Verwende sie für den Einstiegshook, eine nicht filmbare, aber genau zum Voice-Over passende Aktion (z. B. „Es kann nur einmal springen“ → Auto setzt auf) oder die Schlussemotion. Szenen, die exakte Zahlen oder Kraftrichtungen erfordern, bleiben weiterhin Strichzeichnungen.
2. Erstes Frame mit Codex-Standbild: Generiere zunächst gemäß Abschnitt 7.5 ein thematisch passendes Bild; H3 startet dann von diesem Bild aus, sodass Stil und Farben des Videos konsistent bleiben.
3. Spezifikation schreiben: assets/videos/gen/specs/<name>.json (Beispiele in templates/video-specs/). Jeder Clip 4–15 s, das Hauptmotiv wird beschrieben als „keine Marken, kein Text“, die Aktion als ein klarer Ereignissatz, ergänzt um Kamerabewegung und Klangbeschreibung.
4. Generierung: python scripts/ai_video.py prompt --project . (offizielles 6-Formate-Format) → run (erfordert einen Runner aus video_config.json, siehe templates/video_config.example.json). Falls kein Runner vorhanden ist, übergib dem Benutzer prompt.txt und das erste Frame und bitte ihn, die offizielle MiniMax H3 R2V-ComfyUI-Vorlage zu verwenden; das Ergebnis wird als assets/videos/gen/<name>/clip.mp4 gespeichert.
5. Prüfung: python scripts/ai_video.py check --project ., jedes einzelne check-1.png persönlich ansehen: Gibt es Verformungen, zusätzliche Teile, Text oder Logos? Stimmt der zeitliche Ablauf mit dem Voice-Over überein? Bei Nichtbestehen mit anderem Seed neu generieren.
6. Platzierung: Trage in media.json unter placements das Feld "video": "assets/videos/gen/<name>/clip.mp4" sowie duration ein; füge bei Bedarf out hinzu (Karte vor Videoende ausblenden). Führe nach theme.py place_media.py aus, dann hyperframes lint (Video muss eine id haben und darf nicht in zeitgesteuerten Elementen platziert werden) und hyperframes check.
7. Bildschirmbeschriftung: „KI-generiertes Video (H3)“; alle Videos werden stumm geschaltet, einzige Audiospur ist der Voice-Over.

8. Qualitätsprüfung (review-loop)

• Zuerst hyperframes check, dann das gesamte Video in Draft-Qualität rendern (hyperframes render --quality draft --workers <von hw_check empfohlener Wert>; in der Prüfphase ausschließlich Draft). Erstelle 0,15 s vor jedem Teilsatzende (wenn das Bild stabil ist) einen Schnappschuss und setze sie mit review-loop/scripts/sheet.py --video … --at … zu einem Contact Sheet zusammen – jeden Schnappschuss persönlich ansehen.
• Gehe die Checkliste in references/lessons.md Punkt für Punkt durch, korrigiere, rendere neu, prüfe erneut – solange, bis eine Runde fehlerfrei ist.
• Erst nach der Prüfung die finale Version rendern: hyperframes render --skill=faceless-explainer --quality high --output renders/video.mp4, dann erneut die Lautstärke messen.

9. Auslieferung

Gib den MP4-Pfad, die Videolänge und ein zusammenfassendes Contact Sheet aus. Liste außerdem auf: Welche Quellen verwendet wurden, welche Zahlen Behauptungen sind, welche Schätzungen, welche Abweichungen von den Anforderungen (z. B. Länger als geplant) und was nicht umgesetzt wurde (z. B. keine Hintergrundmusik).