Communitygithub.com

levVan2/remotion-video-skill

🎥 Erstelle programmatisch Videos mit dem Remotion-Framework, inklusive KI-gestützter TTS, Animationen und automatischer Szenenzeitsteuerung.

Was ist remotion-video-skill?

Diese Fähigkeit (Skill) ermöglicht es dir, mit dem Remotion-Framework programmatisch Videos zu erstellen. Du kannst Szenen mit Text, Bildern und KI-gestütztem Text-to-Speech (TTS) definieren, wobei Animationen und die zeitliche Steuerung der Szenen automatisch berechnet werden. Der Skill ist ideal für Entwickler, die dynamische Videoinhalte wie Erklärvideos, Slideshows oder personalisierte Kurzfilme aus Code generieren möchten. Er wird typischerweise mit Claude Code und ähnlichen KI-Agenten-Plattformen verwendet, bei denen der Agent die Fähigkeitsdokumentation (SKILL.md) nutzt, um Remotion-Komponenten zu erstellen und zu rendern. Der Workflow umfasst das Definieren von Szenen in JSON oder TypeScript, das Konfigurieren von TTS-Stimmen und das automatische Timing der Szenen basierend auf der Audiospur.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add levVan2/remotion-video-skill

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht remotion-video-skill?

🎥 Erstelle programmatisch Videos mit dem Remotion-Framework, inklusive KI-gestützter TTS, Animationen und automatischer Szenenzeitsteuerung.

Übersicht

Dieser Skill ermöglicht es KI-Agenten, mit dem Remotion Framework programmatisch Videos zu generieren. Du definierst Szenen mit Text, Bildern und Sprache, und der Skill kümmert sich um die zeitliche Steuerung, Animationen und das Rendering.

Funktionen

  • KI-gestütztes Text-to-Speech (TTS) – Verwende OpenAI TTS oder andere Anbieter, um Voiceovers zu generieren.
  • Automatisches Szenen-Timing – Die Dauer jeder Szene wird basierend auf der Länge des TTS-Audios automatisch berechnet.
  • Animationen – Text- und Bildeinblendungen mit CSS-Animationen oder Lottie-Dateien.
  • Unterstützung mehrerer Szenen – Erstelle Diashows, Erklärvideos oder personalisierte Inhalte.

Unterstützte Plattformen

  • Claude Code
  • Cursor
  • Codex CLI
  • Andere KI-Agenten, die SKILL.md unterstützen

Verwendung

  1. Installiere Remotion in deinem Projekt:
npm init video
  1. Definiere Szenen in einer JSON-Datei:
{
  "scenes": [
    {
      "text": "Willkommen zu meinem Video!",
      "image": "https://example.com/background.jpg",
      "ttsVoice": "nova",
      "ttsInput": "Willkommen zu meinem Video! Wir starten jetzt."
    },
    {
      "text": "Das ist Szene 2",
      "image": null,
      "ttsVoice": "nova",
      "ttsInput": "Und hier ist der zweite Teil."
    }
  ]
}
  1. Führe den Remotion-Befehl aus:
npx remotion render src/index.ts out/video.mp4

Konfiguration

Setze die Umgebungsvariable OPENAI_API_KEY, um TTS zu aktivieren. Alternativ kannst du einen anderen TTS-Anbieter in der Konfiguration angeben.

Beispiel

Ein vollständiges Beispiel findest du im Ordner examples/ dieses Repositories.

Lizenz

MIT

Verwandte Skills