Communitygithub.com

Uerdong/remotion-explainer-video

Eine vollständige Pipeline zur Produktion von chinesischen Erklärvideos als Langfilme mit Remotion, die Themenaufbereitung, Skriptkomprimierung, TTS-Sprachausgabe, SRT-Untertitel, BPM-Analyse und Beat-Synchronisation von Hintergrundmusik, Szenenwechsel-Anpassung an Beats, synthetische Soundeffekte, TSX-Projektaufbau, Einzelbild-Prüfung, Rendering und Auslieferung in zwei Versionen sowie Cover, Beschreibung und Titel für die Veröffentlichung abdeckt.

Was ist remotion-explainer-video?

Diese Skill-Pipeline automatisiert die Erstellung langer, chinesischer Erklärfilme (z. B. populärwissenschaftliche oder lehrreiche Animationen) mit Remotion. Sie ist besonders nützlich, wenn Entwickler:innen oder Inhaltserstellende eine MG-Animation im Querformat produzieren, Szenenübergänge exakt an die Beats der Hintergrundmusik anpassen, gesprochene Texte mit Untertiteln versehen oder sogar einen bereits fertigen Film mit einem völlig neuen visuellen Stil (z. B. von flachem Weiß auf düsteres Kino) überarbeiten möchten. Der gesamte Workflow ist in zehn strikt aufeinanderfolgende Schritte unterteilt, von der Themenauswahl und Skripterstellung über TTS-Sprachausgabe, BPM-Messung und Beat-Synchronisation bis hin zum endgültigen Rendering und der Erstellung von Veröffentlichungsmaterialien wie Cover, Titel und Beschreibung. Die Pipeline legt großen Wert auf Determiniertheit: Jeder Frame wird pixelgenau gleich gerendert, zufällige Elemente sind verboten. Zudem gibt es klare Regeln für die Konfliktlösung, z. B. bei Abweichungen zwischen Benutzerangaben und gemessenen BPM-Werten. Die Ausgabe umfasst zwei Versionen des Films (mit und ohne Hintergrundmusik), eine SRT-Untertiteldatei, eine vollständige Dokumentation der Entscheidungen und ein Covergrafik. Die Skill nutzt Remotion, TypeScript, und Werkzeuge wie librosa für die Audioanalyse.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Uerdong/remotion-explainer-video/tree/HEAD/remotion-explainer-video

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Chinesischer Erklärfilm (Remotion Komplett-Workflow)

Führe die zehn Schritte in der angegebenen Reihenfolge aus. Das Ergebnis jedes Schritts ist die Eingabe für den nächsten. Es ist verboten, Schritte zu überspringen und später nachzuholen.

Zehn eiserne Regeln

  1. Die Länge wird durch die Sprachausgabe bestimmt, nicht durch das Skript. Das Referenzskript dient nur als Absichtserklärung. Schätze zuerst die Gesamtlänge basierend auf einer gemessenen Sprechgeschwindigkeit (für chinesisches TTS etwa 3,3 Zeichen/Sekunde); wenn die Ziellänge überschritten wird, reduziere die Zeichen und mache die Sprache mündlicher. Synthetisiere dann Abschnitt für Abschnitt und messe die tatsächliche Länge jedes Abschnitts.
  2. BPM muss gemessen werden, nicht der Benutzer- oder Referenzangabe geglaubt werden. Librosa gibt 104 BPM oft fälschlich als 51,7 (halbiert) aus. Verwende Autokorrelation oder wechsle die Onset-Parameter zur unabhängigen Überprüfung. Wähle den Takt, der mit dem Hörgefühl übereinstimmt.
  3. Alle Schnittpunkte werden auf den Beat gesnapt. Die Grenze eines Absatzes = das Ende der Sprachausgabe dieses Absatzes, das auf den nächstgelegenen Beat gesnapt wird; die Framenummer = round(beat * (60/BPM) * FPS). Dieser Wert wird fest in den Code geschrieben und nicht zur Laufzeit berechnet.
  4. Deterministisches Rendern. Date.now() und Math.random() sind verboten. Verwende für alle Oszillationen Math.sin(frame). Jedes Rendern desselben Frames muss pixelgenau identisch sein.
  5. Single Source of Truth für die Zeitachse. Absätze, Framenummern, Sprachverschiebungen und SFX-Keyframes existieren nur in einer einzigen timeline.ts. Änderungen an der Wortanzahl des Skripts → neues Ausführen des Generierungsskripts → Synchronisieren der TS-Datei. Niemals zwei Stellen manuell ändern.
  6. Untertitel werden an Satzzeichen ausgerichtet. Zerlege zuerst an ,;:。 in Klauseln und packe sie dann in Blöcke. Die Zeilenbreite wird mit einem festen Pixelcontainer definiert (z. B. width: 1460 + whiteSpace: "pre"). Verwende nicht maxWidth, da dies den Inhalt den Container bestimmen lässt.
  7. Audiospuren sind dreischichtig getrennt: Hintergrundmusik (BGM), Stimme und Soundeffekte haben jeweils eigene Lautstärkepegel. Starte mit Stimme 0,8, BGM 0,24. Miss nach dem Rendern die Spitzenpegel; Werte über 0,95 bedeuten ein Clipping-Risiko.
  8. Jede Einstellung wird als Einzelbild zur Qualitätskontrolle gerendert. Verwende npx remotion still, um die Komposition jedes Frames zu prüfen. Ein Film, der ohne diese Prüfung gerendert wird, ist Nacharbeit.
  9. Drei harte Einschränkungen unter Windows: --props muss eine Datei sein (z. B. --props=props-nobgm.json), da die Shell inline-JSON die Anführungszeichen entfernt. ffmpeg 9 verwendet -fps_mode passthrough anstelle von -vsync. Falls Stiländerungen nach einer TSX-Änderung nicht wirken, lösche zuerst node_modules\.cache.
  10. Zuerst ausliefern, dann bewerten. Gib die bereits gerenderten Filme und generierten Grafiken unverändert an den Benutzer weiter. Dokumentiere etwaige Probleme und erkläre sie, aber generiere sie nicht eigenmächtig neu.

Zehn-Schritte-Pipeline

#SchrittSchlüsselaktionErgebnis
1ThemenaufbereitungWissenskette, Ziellänge, Seitenverhältnis, Zielpublikumston festlegenEin-Satz-Thema + Vereinbarung zu Länge/Seitenverhältnis
2ErzähltextAuf "Haken → Modell → Ableitung → Schlussfolgerung → Erkenntnis" komprimieren, auf mündliche Sprache umstellenSegmentiertes Skript (ca. 6 Abschnitte, je 50–70 Zeichen)
3SprachausgabeJeden Abschnitt einzeln synthetisieren, gleiche Stimme, gleiche Parameter. Tatsächliche Länge und Grundfrequenz jedes Abschnitts messens1..sn.wav + Tabelle mit Abschnittslängen
4UntertitelAus den Abschnittslängen eine SRT-Datei generieren, die mit den Szenenschnittpunkten übereinstimmtsubtitles.srt
5Hintergrundmusik (BGM)Auswählen oder selbst synthetisieren. BPM und Beattabelle messen. Bei Unpassendem wechselnbgm.wav + bgm.json (beats_sec)
6Zeitachse neu anordnenAbschnittsgrenzen an Beats snappen, Gesamtframecount berechnentimeline.json + timeline.ts
7SoundeffekteSchlüsselaktionen jeweils ein Sounddesign zuordnen, per Code synthetisieren, auf den Beat heftensfx/*.wav + Keyframe-Tabelle
8BildkompositionTheme / components / timeline + Szenenkomponenten für jeden AbschnittRemotion-Projekt
9Qualitätssicherung & RenderingEinzelbilder pro Abschnitt → Gesamtfilm → Spitzenpegel messenout/*.mp4, QA-Einzelbilder
10VeröffentlichungsmaterialCover (Code oder Design-Tool), Titel, Beschreibung, ThemenCoverbild + release-text.md

Konfliktlösungsentscheidungen

KonfliktBehandlung
Skriptzeichenanzahl vs. ZiellängeSkript kürzen, Länge nicht ändern. Bei Kompressionsverhältnis > 1,3 in mündliche Kurzsätze umwandeln, dabei das gesamte Wissen erhalten
Vom Benutzer angegebenes BPM / Länge vs. gemessene WerteNach den gemessenen Werten arbeiten und den Benutzer aktiv über die Abweichung informieren (z. B. "Spezifikation sagt 110 BPM / 58s, gemessen 104 BPM / 53,65s"). Zusätzlich eine Option "nach Spezifikation neu anordnen" anbieten
Vom Benutzer angegebener Musikstil passt nichtZuerst das BPM / Spektrum / Spitzenpegel des angegebenen Stücks messen und Daten liefern. Dann ein alternatives Stück selbst synthetisieren. Bei der Auslieferung den Grund für die Abweichung offenlegen.
Konflikt zwischen Referenz-Visuals und Cover- oder PlattformstilBeide Angelegenheiten trennen: Hauptinhalt folgt den Benutzervorgaben, Cover folgt der Plattform-Logik zur Verbreitung. Entscheidung begründen

Lieferliste

  • Film in zwei Versionen: mit BGM / ohne BGM (für Plattformen mit eigener Musikbibliothek). Gleiche Framecounts, gleiche Länge.
  • Untertiteldatei (SRT, extern und eingebettet identisch)
  • Lieferdokumentation: Filmversionstabelle, BPM & Beat-Definition, Abschnittsgrenzen-Tabelle, Beat-Positionstabelle, Skript, Soundeffekte-Tabelle, Audiomischpegel, Projektstruktur, Ausführungsbefehle
  • Cover (horizontal + vertikal für die Zielplattform), mehrere Titelvarianten, mehrere Beschreibungsversionen, Hashtags

Referenzdateien

Verwandte Skills