stickerexplainer-video

Stickereklär-Video (Sticker Explainer)

Verwandle ein Sprachskript und ein Voiceover in ein Erklärvideo im Stil einer „Ermittlungstafel“. Das visuelle Gerüst: eine große, dunkelgraublaue Tafel, jeder Abschnitt ist ein Bereich (Panel) auf dieser Tafel, die Kamera gleitet entlang einer orangefarbenen gestrichelten Linie von einem Bereich zum nächsten; die Person ist ein ausgeschnittener Sticker mit weißem Rand, Orte und Objekte sind Fotosticker, Informationen sind Papierkarten und Etiketten mit Symbolen. Zu Beginn jedes neuen Kapitels stoppt das Bild kurz, eine Mindmap erscheint und hebt die nächste Linie hervor.

Dieses Skill baut auf motion-showreel (ConardLi/garden-skills) auf: Es stellt die render(t)-Seitenkonvention, die Frame-für-Frame-Rendering-Einrichtung, die Soundeffekt-Synthese und die Endkontrolle bereit. Stelle sicher, dass es installiert ist (npx skills add ConardLi/garden-skills oder kopiere es nach ~/.claude/skills/motion-showreel). Dieses Skill fügt nur Stil, Ablauf und Werkzeuge für lange chinesische Videos hinzu, ohne den Code zu duplizieren.

Vollständiges Beispiel: examples/huang-resignation/ (13 Minuten 43 Sekunden, siehe Release des Repos). Die Befehle für jeden Schritt findest du in references/workflow.md; die Zeichenfunktionen in references/engine-api.md; die visuellen Regeln in references/style.md.

Vor Arbeitsbeginn klären (auf einmal, maximal 4 Fragen)

1. Voiceover: Generiert der Benutzer es selbst mit ElevenLabs (empfohlen; [serious] [short pause] im Skript sind v3-Tags), oder soll es erst ohne Ton erstellt werden? Bei mehreren Sprachdateien: Absprache, wie sie zusammengeschnitten werden (z. B. „Am Anfang die kurze, dann die lange für den Rest“).
2. Seitenverhältnis: Standard 16:9, 1920×1080.
3. Personen: Standardmäßig nur Fotos aus der Public Domain oder unter CC-Lizenz verwenden (offizielle Fotos von US-Regierungsbeamten sind Public Domain). Personen ohne lizenzierte Fotos erhalten nur eine Namenskarte.
4. Untertitel: Standardmäßig chinesisch, einzeilig, maximal 14 Zeichen pro Zeile.

Wenn der Benutzer sagt: „Frag mich bei Unsicherheiten“, stelle nur die Fragen, die das Ergebnis wirklich verändern. Frage nicht nach Dingen, die aus Audio, Code oder allgemeinem Wissen klar sind.

Ablauf

Das Audio ist maßgeblich, nicht das Skript. Das Audio weicht oft vom eingereichten Skript ab (fehlende Sätze, geänderte Wörter, umgestellte Reihenfolge). Untertitel und Szenen folgen dem Audio, und die Unterschiede werden im Brief aufgelistet und dem Benutzer mitgeteilt. Wenn Kapitelpositionen im Skript keinen entsprechenden Satz finden, wird die nächstgelegene Stelle im Audio gewählt, mit einem Hinweis auf die Anpassung.

1. Projekt anlegen: export MOTION_SHOWREEL=$(realpath <Motion-Showreel-Verzeichnis>), dann sh scripts/new_project.sh <verzeichnis>, die Audiospur in audio/src/ ablegen, video.config.json ausfüllen. Alle Befehle verwenden absolute Pfade.
2. Audio zusammensetzen (bei mehreren Dateien): Zuerst mit transcribe.py <verz> --take <datei> die Sätze und Zeiten jeder Spur ansehen, an den Pausen zwischen den Sätzen die Schnittpunkte wählen und in voice.splice notieren, dann splice.py ausführen.
3. Transkribieren und Ausrichten: transcribe.py, dann align.py. Da die Zeitstempel von whisper.cpp bei längeren Aufnahmen nach einigen Minuten abweichen, werden die Aufnahmen in etwa 40-sekündige Segmente unterteilt und erneut transkribiert, um genaue Zeiten zu erhalten. Whisper gibt gelegentlich traditionelle chinesische Zeichen aus, das Skript wandelt sie mit opencc in vereinfachte um. Lies timeline/segments.json durch und füge falsch verstandene Personennamen, „er/sie/es“ usw. in die fixes-Liste ein, dann wiederhole den Vorgang.
4. Rhythmus bearbeiten: voedit.py. Kapitelpausen (7,5 Sekunden vor dem ersten Kapitel für den Überblick, sonst 4 Sekunden) und Geschwindigkeitsänderungen (z. B. Anfang mit 1,1-facher Geschwindigkeit) werden hier vorgenommen. Es fügt nur Stille ein und ändert die Geschwindigkeit, es entfernt oder vertauscht nie Sätze. Ausgabe: vomap.json; alle späteren Zeiten werden darüber umgerechnet, sodass Rhythmusänderungen die Szenen nicht verschieben.
5. Untertitel und Zeitachse: timeline.py erzeugt timeline.js. Untertitel: eine Zeile pro Bildschirm, ≤ 14 Zeichen (lateinische Buchstaben zählen als 0,55 Zeichen), Umbruch nur zwischen Wörtern. Namen, Institutionen, Beträge, Titel in Anführungszeichen und Titel werden in subtitles.protect aufgenommen und nicht getrennt.
6. Keyframes: Erstelle zuerst 3 Keyframes zur Bestätigung des Stils, dann das gesamte Video.
7. Szenen schreiben: Schreibe in episode.js die PANELS. Die Zeitpunkte für das Erscheinen der Elemente werden als V(Satznummer, Versatz) angegeben. Nach jedem Satz von Szenen einen Kontaktabzug erstellen (render.mjs --still … --sheet) und auf Überlappungen prüfen.
8. Audio: events.mjs liest die im Panel registrierten Soundeffekt-Zeiten aus; mit audio.mjs build score.mjs --raw --out audio/sfx.wav des Motion-Showreel-Skills Soundeffekte synthetisieren; mix.py mischt alles.
9. Rendern: build.sh führt nacheinander die deterministische Prüfung, das Frame-für-Frame-Rendering und die Endkontrolle durch (13 Minuten, 1080p, etwa 10 Minuten). Nach dem Rendern stichprobenartig prüfen, ob Mindmaps, Untertitel und Fotos verdecken.

Wiederholt genannte Anforderungen des Benutzers (standardmäßig so)

• Übergänge geschmeidig: Alle Szenen befinden sich auf einer Tafel, die Kamera gleitet entlang der Ermittlungslinie, der Hauptfiguren-Sticker folgt als actor in die nächste Szene, ohne harte Schnitte.
• Kapitel-Mindmap: An den Kapitelgrenzen pausiert das Voiceover, der Hintergrund wird abgedunkelt, Verbindungslinien werden gezeichnet, Knoten werden orange und zeigen einen Scan-Rahmen, Abschnitte sind abgehakt. Beim ersten Erscheinen wird eine „Übersicht“ gezeigt: Zweige erscheinen nacheinander, dann wird das erste Kapitel hervorgehoben, bevor der Inhalt des nächsten Abschnitts erscheint.
• Fortschrittsbalken unter den Untertiteln, zwischen den Kapiteln wird der Kapitelname angezeigt.
• Viele Symbole und Bilder verwenden: Etiketten und Karten mit Liniensymbolen; Orte und Institutionen als Fotosticker. Illustrative Fotos mit „Illustration“ kennzeichnen.
• Elemente dürfen Untertitel und den Kapiteltitel oben links nicht verdecken: Die unteren etwa 200 Pixel sind für Untertitel reserviert, die obere linke Ecke (etwa x < 700, y < 120) für den Titel; große Schrift darf nicht in diese Bereiche ragen.
• Soundeffekte dürfen das Voiceover und die Hintergrundmusik nicht übertönen: Mindmaps verwenden sanfte Marimba-„Panel“-Klänge (beim Überblick jede Verzweigung ein pentatonischer Ton), beim Hervorheben ein einzelner Klick. Keine Riser, Glitches oder andere „technologische“ Soundeffekte.
• Hintergrundmusik: Das letzte Stück sollte ein natürliches Ende haben, sodass der Schluss genau auf das Abspannende fällt; der Anfang blendet an einer Kapitelpause ein. Bei Kapitelpausen wird die Musik um 6 dB abgesenkt.
• Lautstärke: Nur lineare Verstärkung verwenden. Standard: Stimme −15 LUFS, Musik −26 LUFS (Stimme etwa 11 dB lauter als Musik). Soundeffekte etwa 12 dB leiser als die Stimme. Spitzenbegrenzung bei −1,5 dBFS. So besteht das gesamte Video den Lautheitscheck von −14 ± 1,5. Wenn der Benutzer „Stimme runter / BGM rauf“ sagt, die entsprechenden dB-Werte in levels und music.lufs ändern. Wenn die Gesamtlautstärke dadurch unter den Standard fällt, den Benutzer darauf hinweisen, dass dies beabsichtigt ist (im Beispielvideo wurde nach Autorenwunsch −19,3 / −30 verwendet).

Fakten, Urheberrecht und Sicherheit

• Bei Nachrichteninhalten liegen Ereignisse oft nach dem Wissensstand des Modells: Online-Recherche durchführen, die Quellen im Abspann angeben; nicht im Originaltext gefundene Zahlen in die „Zu prüfende Liste“ im Brief aufnehmen.
• Unbestätigte Anschuldigungen im Video kennzeichnen („noch in Untersuchung“, „von Behörde dementiert“, „illustrativ“). Assoziation ist kein Beweis. Niemandem neben einem Foto ein Etikett wie „Spion“ hinzufügen.
• Fotos nur aus Public Domain oder unter CC-Lizenz verwenden, Lizenzinformationen in assets/credits.json festhalten und im Abspann erwähnen. Musik von Pixabay etc. kann im fertigen Video verwendet werden, aber die Audiodateien selbst dürfen nicht weiterverteilt werden.
• Speicherplatz: Rendering, Audio-Zwischendateien und das fertige Video benötigen insgesamt etwa 1 GB. Vorher den Speicherplatz prüfen; bei Engpässen nur die neu erstellbaren Zwischendateien löschen. Vor dem Löschen von Benutzerdateien oder heruntergeladenen Modellen den Benutzer fragen.

Dateien

sticker-explainer-video/
├── SKILL.md
├── scripts/
│   ├── new_project.sh           Projekt anlegen (Motion-Showreel-Gerüst + Vorlage)
│   ├── cfg.py                   Gemeinsame Funktionen (video.config.json lesen, ffmpeg, Lautstärke, Pausen-Erkennung)
│   ├── splice.py                Mehrere Audiospuren zusammensetzen
│   ├── transcribe.py            Whisper.cpp zweistufige Transkription → Satztext + Wortzeit + Pausen
│   ├── align.py                 Ausrichten → timeline/sentences.json
│   ├── voedit.py                Kapitelpausen, Geschwindigkeitsänderung → audio/vo-edit.wav + vomap.json
│   ├── timeline.py              Zeitabbildung + Untertitel-Aufteilung → timeline.js
│   ├── events.mjs               Soundeffekt-Zeiten aus dem Panel auslesen
│   ├── mix.py                   Stimme + Musik + Soundeffekte → audio/final.wav
│   └── cutout.swift             Apple Vision Personen-Freistellung (macOS)
├── assets/template/             index.html, engine.js, episode.js (Beispielszenen), score.mjs, video.config.json, fonts
├── references/
│   ├── workflow.md              Befehle und Prüfpunkte für jeden Schritt
│   ├── engine-api.md            Zeichenfunktionen der engine.js und Parameter für start()
│   └── style.md                 Farben, Layout, Übergänge und Audioregeln
└── examples/huang-resignation/  Vollständiges Beispiel (Code, Konfiguration, Zeitachsen, Fotos, Voiceover)