Skills

remotion-motion-graphics: Logos und Texte mit Remotion in exportierbare Motion-Graphics-MP4s verwandeln

Am besten geeignet für Teams oder Einzelpersonen, die aus Referenzvideos und Logos codebasierte Kinetic-Typography bzw. Marken-Motion Graphics erzeugen und als MP4 exportieren wollen; vorab müssen Node.js 18+ sowie ffmpeg/ffprobe im PATH vorhanden sein, beim ersten Rendern wird automatisch Chrome heruntergeladen.

Official source · agent-skill-remotion-motion-graphics

Install

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

Für wen geeignet

Dieses Skill richtet sich an alle, die Motion Graphics wie Code pflegen möchten: Markenverantwortliche, Creator von Kurzvideos oder Frontend-Entwickler, die aus einem Referenzvideo plus einem Logo kinetic-typography, Logo-Animationen oder Marken-Promovideos erzeugen und direkt als MP4 exportieren wollen. Laut offizieller Beschreibung werden aus derselben Codebasis sowohl 9:16- als auch 16:9-Formate unterstützt.

Nicht geeignet ist es in folgenden Fällen: In Umgebungen ohne Node.js 18+ (Remotion 4 benötigt das) oder ohne ffmpeg / ffprobe im PATH lassen sich die Analyse- und Prüf-Skripte nicht ausführen; beim ersten Rendern lädt Remotion automatisch Chrome herunter, was in Netzwerken mit Einschränkungen hängen bleiben kann. Aus der offiziellen Evidenz geht nicht hervor, ob andere Laufzeitumgebungen oder Plattformen unterstützt werden oder welche Sprachen der Agent-Oberflächen unterstützt werden – das bleibt unbekannt.

Erster Versuch in 3 Minuten

Empfohlener Hauptweg ist die lokale Installation in Claude Code:

  1. Voraussetzungen: Node.js 18+ sowie ffmpeg / ffprobe im PATH.
  2. Führen Sie den offiziellen Installationsbefehl im Terminal aus, um das Skill nach ~/.claude/skills/ zu kopieren:
git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg
  1. Lösen Sie in Claude Code eine risikoarme Aufgabe aus: Geben Sie ein Referenzvideo und ein Logo (SVG oder Website) an und verlangen Sie zunächst nur eine Analyse – der Agent soll aus den Contact Sheets des Referenzvideos einen Beat Map erstellen, Farben, Schriften und Text aus dem Branding-Material extrahieren und die Logo-Pfade zuordnen, damit Text und Grafiken getrennt animiert werden. Fordern Sie in der Analysephase noch kein Rendern des fertigen Videos an.

Erfolgssignal: Der Agent hat das Material gelesen und liefert einen Beat Map sowie die extrahierten Branding-Elemente – damit ist der Workflow des Skills wirksam. Beachten Sie: In der Renderphase werden Befehle ausgeführt, Dateien geschrieben und Chrome heruntergeladen; die Evidenz sagt nicht, ob der Rendervorgang eine zusätzliche Bestätigung erfordert. Klären Sie vorab mit dem Agenten den Ausgabepfad. Nutzer von claude.ai / Cowork haben diesen Weg nicht; offiziell wird dort angeboten, dist/remotion-motion-graphics.skill herunterzuladen und unter Settings → Capabilities → Skills hochzuladen – das ist ein zweitrangiger Weg auf einer anderen Plattform.

Anwendungsfälle

Fall 1: Rhythmus aus einem Referenzvideo ableiten. Übergeben Sie dem Agenten einen Kurzfilm eines Wettbewerbers und Ihr eigenes Logo, fordern Sie einen Beat Map sowie die Extraktion von Farben und Schriften an und lassen Sie am Ende gemäß dem Skill-Workflow codebasierte Motion Graphics erzeugen und als 9:16-MP4 exportieren. Verlässlich bestätigbare Schritte sind das Einlesen des Materials und der Beat Map; Rendering und Qualität des Endvideos hängen von der tatsächlichen Ausführung des Agenten ab.

Fall 2: Logo-Intro-Animation. Geben Sie das Logo als SVG an und verlangen Sie, dass Text und Grafiken getrennt animiert werden, um eine Version eines Marken-Promovideos zu erstellen. Das Skill ordnet die Logo-Pfade zu, damit sich Elemente einzeln bewegen. Vor dem Export den offiziellen Validierungsablauf einhalten: tsc muss durchlaufen, ein Testrendern bei 0.3-Skalierung, eine prüfende Durchsicht der Contact Sheets, für verdächtige Frames Einzelbild-Renderings erstellen und beheben – dann endgültig rendern und aus dem Endvideo Frames extrahieren als Nachweis. Verlässliches Endsignal ist das erhaltene MP4 inklusive Frame-Extraktions-Nachweis.

Grenzen der Nutzung

Das Rendern führt tsc- und Remotion-Renderbefehle aus, schreibt Projektdateien und lädt beim ersten Lauf Chrome herunter – dies sind offiziell beschriebene Verhaltensweisen. Die Analyse- und Prüf-Skripte des Skills benötigen ffmpeg / ffprobe. Aus der offiziellen Evidenz geht nicht hervor: ob das Rendern eine Nutzerbestätigung erfordert, in welche konkreten Pfade geschrieben wird, ob ein Offline-Betrieb möglich ist, welcher Sprachumfang unterstützt wird (nicht allein daraus schließen, dass das README englisch ist, dass nur englische Materialien unterstützt werden). Das Skill liefert gerenderte MP4s und Code; laut Evidenz verändert es nicht direkt bestehende Dateien des Nutzers. Wie weit die Auswirkungen auf das Dateisystem reichen, richtet sich nach dem tatsächlichen Verhalten des Agenten. Die Installationswege der beiden Plattformen unterscheiden sich: In Claude Code per git clone plus Kopieren des Verzeichnisses, in claude.ai / Cowork durch Hochladen der .skill-Datei – beides ist nicht gegenseitig austauschbar.