Remotion-Tutorial für Anfänger (mit ChatGPT)

2026-10-30 20:3313 min lesen

Das Skript ist ein Tutorial, das zeigt, wie man ChatGPT Codex mit Remotion verwendet, um professionelle Animationen zu erstellen, ohne manuell Code schreiben zu müssen. Es führt durch das Einrichten eines Projekts, die Installation des Remotion-Plugins und das Prompting von Codex, um eine animierte Einleitung, eine transparente Lower-Third-Grafik und ein animiertes Balkendiagramm aus Verkaufsdaten zu erzeugen. Außerdem zeigt es das Vorschauen, Bearbeiten und Rendern zu MP4 oder ProRes 4444 für Transparenz sowie den Import der fertigen Animation in Videobearbeitungsprogramme wie DaVinci Resolve oder Adobe Premiere. Das Video betont, dass ChatGPT das Programmieren übernimmt und dadurch Motion Graphics sowie datengetriebene Animationen einfacher und schneller zu erstellen sind.

Wichtige Informationen

  • Das Video erklärt, wie man mit Remotion und ChatGPT/Codex professionelle Animationen und Motion Graphics erstellt, ohne Code manuell zu schreiben.
  • Es zeigt, wie man ein Projekt in ChatGPT Codex einrichtet, das Remotion-Plugin installiert und einen neuen Remotion-Projektordner erstellt.
  • Das erste Beispiel erstellt eine animierte Einführung für ein kleines Unternehmen namens Kevin Cookie Company mithilfe eines einfachen Prompts.
  • Codex generiert die Animation in wenigen Minuten, und das Ergebnis kann in Remotion Studio in der Vorschau angezeigt werden.
  • Das Tutorial zeigt die Bearbeitung der Animation, indem Codex gebeten wird, Effekte wie einen herunterfallenden Keks und Bildschirmruckeln hinzuzufügen.
  • Es erklärt, wie man die Animation als MP4 exportiert, indem man in Remotion Studio die Render-Option für die Komposition verwendet.
  • Ein zweites Beispiel erstellt einen animierten Lower-Third-Titelblock mit transparentem Hintergrund zum Überlagern auf vorhandenes Video.
  • Das Video zeigt, dass transparente Exporte in Editoren wie Adobe Premiere oder DaVinci Resolve importiert und über Aufnahmen gelegt werden können.
  • Es demonstriert auch die Erstellung eines animierten Balkendiagramms aus Verkaufsdaten und zeigt, dass Remotion Daten in Motion Graphics umwandeln kann.
  • Das Tutorial betont, dass Codex das Programmieren übernimmt und Remotion für Untertitel, Demos, Social-Media-Videos und andere Animationen verwendet werden kann.

Zeitlinienanalyse

Inhaltsstichwörter

**Remotion** **Remotion**

Ein kostenloses Video-Erstellungs-Framework, das verwendet wird, um professionelle Animationen und Motion Graphics mit Code zu erstellen. Das Skript zeigt, wie man animierte Intros, Untertitel, Bauchbinden, Diagramme und andere Assets erstellt und sie dann als MP4- oder transparente ProRes-Dateien rendert und exportiert, um sie in Bearbeitungssoftware zu verwenden.

ChatGPT Codex

ChatGPTs Coding-Agent wurde früher verwendet, um Remotion-Projekte zu erstellen und zu verändern, ohne Code manuell zu schreiben. Er kann Dateien erstellen, das Remotion-Plugin installieren, Animationscode schreiben, auf Eingaben reagieren und schnelle Änderungen vornehmen, etwa Namen ändern, Effekte hinzufügen und benutzerdefinierte Motion Graphics erstellen.

Animierte Einführung

Eine kurze gebrandete Intro-Animation, erstellt für Kevin Cookie Company mit Remotion und Codex. Das Tutorial erklärt, wie man das Tool promptet, Text und visuelle Elemente anpasst und das fertige Intro für die Verwendung in anderen Videobearbeitungsprogrammen exportiert.

Untere Drittel-Animation

Ein animiertes Lower-Third-Blockelement mit transparentem Hintergrund, das dazu entworfen wurde, auf bestehendes Videomaterial gelegt zu werden. Das Skript zeigt, wie Codex die Grafik generiert und wie sie in Remotion Studio mit einem Namen und einem Titel angepasst werden kann.

Animiertes Balkendiagramm

Eine Datenvisualisierung, die aus monatlichen Verkaufsdaten erstellt wurde, um zu zeigen, wie Remotion Zahlen in animierte Diagramme verwandeln kann. Das fertige Diagramm kann exportiert und in Präsentationen, Social-Media-Beiträgen oder Videos wiederverwendet werden.

Transparenter Videoexport

Der Prozess des Renderns von Animationen in Remotion Studio mithilfe von ProRes 4444, um Transparenz zu bewahren. Dies ermöglicht es, die erzeugten Grafiken in Adobe Premiere, DaVinci Resolve oder andere Videobearbeitungsprogramme zu importieren und sauber über Filmmaterial zu legen.

Verwandte Fragen & Antworten

Remotion ist ein Framework, mit dem man Videos mit React erstellen kann. Es wird verwendet, um Videos programmatisch zu generieren, etwa für Social-Media-Clips, Erklärvideos, personalisierte Videos oder automatisierte Render-Pipelines.

Remotion ist ein Framework zur Erstellung von Videos mit Code, einschließlich professioneller Animationen, Motion Graphics, Untertiteln und datengetriebener Visualisierungen.

Muss ich selbst Code schreiben, um Remotion mit ChatGPT zu verwenden?

Nein. Das Video erklärt, dass Codex, auf das man über ChatGPT zugreifen kann, die Dateien erstellen, den Code schreiben und das Projekt für dich ausführen kann.

Wie starte ich ein Remotion-Projekt in ChatGPT Codex?

Ich kann die ChatGPT-App nicht öffnen oder darin Aktionen ausführen. Wenn du möchtest, kann ich dir aber Schritt für Schritt erklären, wie du in der App zu Codex gehst, einen neuen Projektordner erstellst und das Remotion-Plugin installierst.

Warum wird das Remotion-Plugin benötigt?

Das Plugin gibt Codex die Werkzeuge und Anweisungen, die es benötigt, um ordnungsgemäß mit Remotion zu arbeiten.

Welche Art von Animation wurde zuerst im Video erstellt?

Zuerst wurde eine kurze animierte Einführung für die Kevin Cookie Company erstellt.

Ja — ChatGPT kann sehr gut dabei helfen, Prompts für Remotion-Projekte zu schreiben.Es kann dir zum Beispiel helfen bei:- der Ideenfindung für Videosequenzen- dem Formulieren von Szenenbeschreibungen- dem Erstellen von Prompt-Vorlagen für KI-generierte Inhalte- dem Schreiben von Texten für Animationen, Sprechertexte oder Untertitel- der Strukturierung eines kompletten Video-Workflows in RemotionWenn du möchtest, kann ich dir auch direkt helfen mit:1. einem Prompt für ein bestimmtes Remotion-Video,2. einer Prompt-Vorlage zum Wiederverwenden,3. oder einem kompletten Beispielprojekt.Wenn du magst, beschreibe kurz dein Remotion-Projekt, und ich formuliere dir einen passenden Prompt.

Ja. Das Video sagt, dass ChatGPT dir helfen kann, einen Prompt für dein eigenes Projekt zu schreiben.

Kann ich auswählen, welches KI-Modell Codex verwendet?

Ja. Das Video zeigt, dass Sie das KI-Modell auswählen können, das Sie verwenden möchten, bevor Sie die Anfrage senden.

Wie lange hat es Codex gedauert, die erste Animation zu erstellen?

Die erste Animation wurde in etwas mehr als 4 Minuten erstellt.

Wie exportiere ich eine Remotion-Animation?

In Remotion Studio das Kompositionsmenü öffnen, „Rendern“ auswählen und das Video exportieren.

Welches Format sollte ich für den Export eines transparenten Overlays verwenden?

Das Video empfiehlt ProRes 4444, damit die exportierte Datei einen transparenten Hintergrund behält.

Ja — **Remotion-Animationen können in Videoeditoren verwendet werden**, aber **nicht direkt als editable Remotion-Projekte**. In der Praxis gibt es ein paar gängige Wege:1. **Als fertiges Video exportieren** Du rendert die Remotion-Animation als MP4/WebM und importierst die Datei dann in deinen Videoeditor (z. B. Premiere Pro, Final Cut, DaVinci Resolve).2. **Als Bildsequenz exportieren** Falls dein Workflow mehr Kontrolle braucht, kannst du einzelne Frames als PNG/JPG exportieren und im Editor als Sequenz zusammensetzen.3. **Als Greenscreen / Alpha-Video, wenn unterstützt** Wenn du Transparenz brauchst, kannst du je nach Setup ein Format mit Alpha-Kanal nutzen oder den Hintergrund separat rendern und im Editor darüberlegen.Wichtig ist: **Remotion ist selbst ein React-basiertes Rendering-Tool**, kein klassischer NLE-Editor. Das heißt, du baust die Animation in Remotion und bringst das Ergebnis dann in den Editor weiter.Wenn du magst, kann ich dir auch sagen, **welcher Exportweg für Premiere, DaVinci oder Final Cut am besten ist**.

Ja. Die exportierte Datei kann in Editoren wie Adobe Premiere oder DaVinci Resolve importiert werden.

Wie kann ich eine Animationsüberlagerung über ein anderes Video legen?

Exportiere die Remotion-Komposition mit einem transparenten Hintergrund und platziere sie dann in deinem Editor auf einer Spur über dem vorhandenen Filmmaterial.

Welche Art von Motion Graphics kann Remotion erstellen?

Das Video zeigt Beispiele wie Untertitel im unteren Drittel, animierte Untertitel, Produktdemos und animierte Diagramme.

Ja. Remotion kann Daten in animierte Diagramme oder Charts umwandeln, weil es dir erlaubt, Videos mit React zu erstellen und dabei jede beliebige Grafik dynamisch zu rendern und zu animieren.Typische Anwendungsfälle:- Balken-, Linien- und Kreisdiagramme- Datenvisualisierungen mit animierten Übergängen- Dashboard- oder KPI-Animationen- Infografiken mit eingeblendeten Zahlen und TrendsDu kannst also z. B. Daten aus JSON, CSV oder APIs laden und sie direkt in animierte Visualisierungen umsetzen. Remotion selbst bringt kein fertiges „Chart-Paket“ wie eine spezialisierte Visualisierungsbibliothek mit, aber du kannst Bibliotheken wie:- Recharts- D3- Visx- Chart.jsin deine Remotion-Komposition integrieren und dann die Animationen darüber steuern.Wenn du möchtest, kann ich dir auch ein kleines Remotion-Beispiel für ein animiertes Balkendiagramm zeigen.

Ja. Das Video zeigt, wie monatliche Verkaufsdaten in ein animiertes Balkendiagramm umgewandelt werden.

Kann ich Remotion-Animationen bearbeiten, ohne zu Codex zurückzugehen?

Ja. Das Video sagt, dass du Änderungen direkt in Remotion Studio vornehmen kannst, zum Beispiel Namen, Untertitel und Farben aktualisieren.

Weitere Videoempfehlungen

Teilen mit: