Was macht Remotion-Demo-Video?

Ein optimierter Workflow für die Erstellung von Promo-/Demo-/Trailer-Videos mit Remotion 4.x. Enthält die Projektstruktur, Animationsprimitiven, Renderbefehle und die häufigsten Fallstricke, die in der Praxis viel Zeit kosten.

Wann dieser Skill eingesetzt werden sollte

Auslösen, wenn der Benutzer ein Remotion-Video erstellen, bearbeiten, rendern oder debuggen möchte. Insbesondere:

Bootstrap eines neuen Remotion-Projekts für eine Produkt-/Paper-/Repo-Demo
Hinzufügen einer neuen Szene zu einem bestehenden Remotion-Projekt
Zusammenfügen von vorab aufgezeichneten Bildschirmaufnahmen zu einem polierten Video mit Overlays, Titeln, Übergängen
Rendern – einzelne Szene, vollständige Timeline, transparente (Alpha-)Overlays, PNG-Sequenzen
Debugging von Remotion-spezifischen Eigenheiten (composition-id mismatch, nicht synchronisierte defaults, useCurrentFrame liefert unerwartete Werte innerhalb von <Sequence>, Windows EPERM bei ffmpeg-Bereinigung usw.)

Wie man den Workflow verstehen sollte

Ein poliertes Remotion-Video ist nicht „eine riesige Timeline, die man als ein MP4 rendert“. Es ist eine Reihe von kleinen, einzeln renderbaren Szenen – jede wird als eigener Clip gerendert und in einem nachgelagerten Editor (DaVinci Resolve, Premiere, Final Cut) zusammengebaut, wo man Musik, Voiceover und szenenübergreifende Übergänge hinzufügt.

Dies ist die wichtigste Erkenntnis aus der Veröffentlichung der SimWorld-Promo, und der Skill sollte den Benutzer standardmäßig zu diesem Workflow führen. Zu versuchen, alles in Remotion zu erledigen – endgültiges Timing, Audiomischung, Überblendungen – ist mühsam und langsam; in einem Editor ist es trivial.

Jedes Werkzeug für das nutzen, was es gut kann

Remotion ist großartig für: programmatische, wiederholbare, parametrische Szenen – animierte Titel, datengesteuerte Diagramme, UI-Mockups, alles, was man sonst von Hand in After Effects keyframen würde. Szenenlogik lebt im Code; „denselben Titel mit 30 verschiedenen Produktnamen“ neu zu erstellen, ist eine einzige Props-Änderung.
Nachgelagerte Editoren sind großartig für: Timing, Audio, Überblendungen, Farbkorrektur, „diese Szene 1,2 Sekunden länger machen“. Alles, was in einem Editor sofort geht und in Remotion eine Code-Änderung und ein erneutes Rendern erfordert.

Der Kreislauf

Lege das Drehbuch fest. Takt-für-Takt-Gliederung mit Zielsekunden für jeden Takt. Gesamtlänge typischerweise 30–90s.
Richte die Projekt-Shell einmal ein. theme.ts (Palette, Schriftarten, fps, Abmessungen), Root.tsx (Composition-Registry), gemeinsam genutzte Komponenten (Reveal, ProgressBar, Easings).
Baue Szenen nacheinander. Jede Szene ist eine eigenständige <AbsoluteFill>-React-Komponente, die gegen frame 0 designed ist, mit einer eigenen <Composition>, sodass du sie solo rendern kannst. Iteriere im Studio (npm run dev) mit dem Props-Panel; rendere zu MP4 (npm run render:<scene>), wenn es dir gefällt.
Rendere jede fertige Szene als eigenen Clip – das ist das eigentliche Deliverable, nicht das vollständige Timeline-MP4. Szenen-Clips pro Szene können in die Timeline eines beliebigen Editors gezogen werden. Verwende --codec=prores --pixel-format=yuva444p10le --prores-profile=4444 für Clips, die Alpha haben sollen (Lower Thirds, Logos, die über Bildschirmaufnahmen gelegt werden).
Optional: Verkabele Szenen in Main.tsx mit <Sequence>-Blöcken, die eine TIMELINE-Konstante in theme.ts lesen. Dies gibt dir eine vollständige Timeline-Vorschau (npm run render) zum Überprüfen des Gesamtablaufs – behandle sie aber als Vorschau, nicht als Master.
Baue in DaVinci / Premiere / Final Cut zusammen. Lege die Szenen-Clips in der richtigen Reihenfolge auf eine Spur, passe die Trim-Handles für das exakte Timing an, füge Musik / Voiceover / Sounddesign hinzu, wende Übergänge zwischen den Szenen an (1-Frame-Überblendungen fühlen sich für diese Ästhetik meist richtig an), führe die Farbkorrektur durch, exportiere.

Wann das vollständige Remotion-Rendering empfohlen werden sollte

Das vollständige Timeline-Rendering ist NUR dann die richtige Ausgabe, wenn:

Der Benutzer keinen nachgelagerten Editor hat und heute ein einzelnes Deliverable benötigt.
Das Video vollständig stumm ist (überhaupt keine Musik oder Voiceover).
Es keinen szenenübergreifenden Übergang gibt, der komplexer ist als harte Schnitte (und selbst die sind mit dem szenenweisen Ansatz einfacher im Code anzupassen).

Ansonsten standardmäßig die Empfehlung: szenenweise Render & Editor-Assembly.

Dieses Skill-Bundle enthält ein funktionierendes Gerüst unter scaffold/ – kopiere es als Ausgangspunkt für ein neues Projekt und lies dann die folgenden Referenzen nach Bedarf.

Der eigentliche End-to-End-Kreislauf (wenn die Eingabe ein Paper / ein Lastenheft / ein Repo ist)

Dies ist der Workflow, für den dieser Skill wirklich entwickelt wurde. Der Benutzer kommt normalerweise nicht herein und sagt „Ich möchte einen animierten Titel, der X sagt“. Sie kommen mit einem Paper-PDF, einem Projektspezifikation oder einem bestehenden Repo herein, und die Frage lautet: „Mach daraus ein 60-Sekunden-Video“. Der Skill existiert, um diesen Kreislauf schnell und handhabbar zu machen.

1. Quellmaterial        →  Paper-PDF / Lastenheft / existierendes Repo / README
        ↓
2. Claude analysiert   →  extrahiere narrative Schritte; identifiziere, was jeder
                            Schritt ZEIGEN muss (UI-Bildschirm, Experiment-
                            aufnahme, Diagramm, Agent-POV usw.)
        ↓
3. Claude erstellt      →  Szenencode + <VideoPlaceholder slot="..." />
   mit Platzhaltern       in jedem visuellen Bereich, plus eine ASSETS.md,
                          die jeden Clip auflistet, den der Benutzer aufnehmen
                          muss (Slot-Name, Dauer, was er zeigen soll)
        ↓
4. Benutzer nimmt       →  legt mp4s in public/clips/<slot>.mp4 ab,
   Filmmaterial auf       passend zu den Slot-Namen aus dem Gerüst
        ↓
5. Claude tauscht        →  ersetzt <VideoPlaceholder> durch
   Platzhalter gegen       <OffthreadVideo src={staticFile("clips/<slot>.mp4")}>
   Clips
        ↓
6. Iteriere szenenweise →  npm run render:<scene>, beobachten, Text /
                             Timing / Animation anpassen, erneut rendern.
                             Code-Änderungen sind schnell; wenn Filmmaterial
                             neu aufgenommen werden muss, ist das der
                             langsamste Teil des Kreislaufs.
        ↓
7. Im Editor zusammenbauen  →  Szenen-MP4s in DaVinci / Premiere / FCP,
                             füge Musik + Voiceover + szenenübergreifende
                             Übergänge hinzu, exportiere.

Schritt 2 im Detail – Quellmaterial analysieren

Wenn der Benutzer ein Paper / Lastenheft übergibt, mache dies, BEVOR du Code schreibst:

Extrahiere die Erzählung. Was ist der 3–5 Takt-Bogen? („Problem → unsere Methode → wichtige Ergebnisse → Auswirkung“ ist eine Startvorlage; variiere sie für das tatsächliche Paper.) Die Erzählung treibt die Szenenliste an.
Entscheide für jeden Takt, was GEZEIGT werden soll. Animierter Text allein ist langweilig. Jeder Takt sollte ein konkretes visuelles Element haben – einen UI-Bildschirm, eine Experimentaufnahme, ein Diagramm, einen Vergleich, ein Systemdiagramm. Ordne Visuals den Behauptungen zu: wenn das Paper behauptet „Methode X ist 3× schneller“, zeige den Side-by-Side-Timing.
Unterscheide, was Remotion generiert vs. was der Benutzer aufnehmen muss. Remotion ist großartig für: Titel, Übergänge, Diagramme, UI-Mockups, Layouts, animierte Diagramme. Remotion KANN NICHT generieren: echte Bildschirmaufnahmen des Produkts des Benutzers, Experimentaufnahmen, Agent-POV, alles, was außerhalb des Projekts liegt. Liste diese als benutzergeliefertes Filmmaterial auf.
Skizziere die Timeline vor dem Gerüstbau. Takt-für-Takt mit Zieldauern, die sich auf 30–90s summieren. Aktualisiere TIMELINE in theme.ts, um dies abzugleichen. Die Gesamtlänge sollte festgelegt werden, bevor Szenen gebaut werden, damit jede Szene ihr Budget kennt.

Schritt 3 im Detail – Gerüstbau mit Platzhaltern

Die wichtigste Übergabekonvention des Skills: Slot-Namen. Jeder Clip, den der Benutzer aufnehmen muss, erhält einen stabilen slot-String. Der Platzhalter und der echte Clip teilen sich diesen Slot-Namen.

// Während des Gerüstbaus:
<VideoPlaceholder
  slot="agent-loop"
  description="Durchgehende Agentenaufnahme: läuft, scheitert, wiederholt sich mit aktualisierter Richtlinie."
  accent={COLORS.blue}
/>

// Nachdem der Benutzer public/clips/agent-loop.mp4 aufgenommen hat, ersetze durch:
<OffthreadVideo
  src={staticFile("clips/agent-loop.mp4")}
  muted
  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
/>

Schreibe immer eine ASSETS.md im Stammverzeichnis des Gerüsts (das Gerüst enthält eine Vorlage). Sie listet jeden Slot auf, den der Benutzer füllen muss, mit: Slot-Name (= Dateiname), was er zeigen soll, Zieldauer, Seitenverhältnis-Empfehlung und alle Timing-Hinweise (z. B. „Fehlerereignis etwa bei 7s-Marke“). Dies ist die einzige Quelle der Wahrheit für die Aufnahmeaufgabe des Benutzers.

Schritt 4–5 im Detail – die Asset-Übergabe

Der Benutzer kommt mit Dateien zurück, die in public/clips/ abgelegt wurden. Drei Dinge zu überprüfen:

Dateinamen stimmen genau mit den Slot-Namen überein. agent-loop.mp4, nicht agent_loop.mp4 oder AgentLoop.mp4.
Die Dauer beträgt mindestens die Szenenlänge (oder verwende <Loop>, wenn sie kürzer ist und wiederholt werden soll).
Das Seitenverhältnis ist sinnvoll – für Vollbild-Szenen, passe zur Composition 1920×1080. Für Karten in einem 2×2-Raster sind 4:3 oder 16:9 beide in Ordnung; bleibe einfach konsistent.

Ersetze dann mechanisch jedes <VideoPlaceholder> durch <OffthreadVideo>. Das ist ein einzeiliger Austausch pro Slot; keine Animationslogik ändert sich. Wenn die Aufnahme des Benutzers timingempfindlich ist (z. B. „Fehlerereignis bei 7s“), setze es als Szenen-Prop, damit timingabhängige Overlays (FAIL-Stempel, Belohnungsnummer) abgestimmt werden können, ohne neu aufzunehmen.

Warum dieser Kreislauf für den Skill wichtig ist

Die Aufgabe des Skills ist nicht „Remotion-Code auf Abruf schreiben“ – es ist den Kreislauf vom Quellmaterial zum ausgelieferten Video handhabbar machen. Das Platzhalter-Muster ist es, was Claude ermöglicht, in einem Durchgang die gesamte Videostruktur zu erstellen und dann eine ASSETS.md zurückzugeben, damit der Benutzer genau weiß, was er aufnehmen muss. Ohne sie gerät der Kreislauf ins Stocken – der Benutzer nimmt die falschen Dinge auf, oder das Gerüst wartet auf Filmmaterial, oder die Codestruktur muss nachträglich angepasst werden.

Wenn ein Benutzer mit Quellmaterial auftaucht, ist der richtige erste Schritt normalerweise:

„Lass mich zuerst das Paper / Lastenheft lesen. Dann schlage ich eine szenenweise Gliederung mit Zieldauern vor, eine Liste der Clips, die du aufnehmen musst, und erstelle das Gerüst mit Platzhaltern, damit du mit der Aufnahme beginnen kannst, während ich weiter Szenen baue.“

Schnellstart für ein neues Projekt

# 1. Kopiere das Gerüst
cp -r <skill-verzeichnis>/scaffold ./my-demo
cd my-demo
npm install

# 2. Öffne Remotion Studio für Live-Bearbeitung
npm run dev    # öffnet http://localhost:3000

# 3. Rendere eine einzelne Szene während der Iteration
npm run render:opening

# 4. Rendere die vollständige Timeline, wenn bereit
npm run render

Das Gerüst enthält eine funktionierende Szene (OpeningTitle), das cremig-warme Theme, Reveal + Easings, eine ProgressBar, eine Platzhalter-Main-Timeline und eine package.json mit vorkonfigurierten Render-Skripten.

Projektstruktur (die Form, die funktioniert)

my-demo/
├── package.json                      # Render-Skripte, Prerender-Hooks
├── remotion.config.ts                # Codec / Pixel-Format-Standards
├── tsconfig.json
├── public/
│   ├── assets/                       # Logos, statische Bilder (staticFile("assets/..."))
│   └── clips/                        # Bildschirmaufnahmen / Videoquellen
├── scripts/
│   └── sync-clips.mjs                # Normalisiere Clips vor jedem Rendern
└── src/
    ├── index.ts                      # registerRoot(Root)
    ├── Root.tsx                      # <Composition>-Registry – id, schema, defaultProps
    ├── theme.ts                      # COLORS, FONT_STACK, RADIUS, SHADOWS, TIMELINE
    ├── fonts.ts                      # @remotion/google-fonts + lokale @font-face
    ├── Main.tsx                      # Vollständiger Timeline-Komponist (<Sequence>-Blöcke)
    ├── components/
    │   ├── Reveal.tsx                # Fade + Rise-Wrapper (delay/duration/rise)
    │   ├── Easing.ts                 # EASE_OUT, EASE_IN_OUT (Bézier)
    │   ├── ProgressBar.tsx           # 4-stufiger Phasenindikator, unten fixiert
    │   └── VideoPlaceholder.tsx      # Graue Karte mit Slot-Beschriftung, später gegen OffthreadVideo austauschen
    └── scenes/
        ├── OpeningTitle.tsx          # eine Szene pro Datei, jede ist ein <AbsoluteFill>
        ├── ProductReveal.tsx
        ├── AgentLoop.tsx
        └── ...

Warum diese Form: Szenen sind unabhängig (einfach solo zu rendern und zu iterieren), die gemeinsame visuelle Sprache lebt in theme.ts + components/, sodass der Look konsistent bleibt, und Root.tsx ist die einzige Quelle der Wahrheit dafür, was renderbar ist.

Das Composition-Muster (lies dies sorgfältig)

Jede Szene exportiert drei Dinge:

Ein Zod-Schema – definiert die Props-Panel-UI in Remotion Studio (Schieberegler, Dropdowns).
Eine *_DEFAULTS-Konstante – die Werte, die von Main.tsx verwendet werden, wenn diese Szene in die vollständige Timeline eingebettet ist.
Die React-Komponente selbst, typisiert als React.FC<Props>.

// src/scenes/ProductReveal.tsx
import { z } from "zod";

export const productRevealSchema = z.object({
  titleSize:     z.number().min(40).max(280),
  subtitleSize:  z.number().min(14).max(80),
  outerPaddingV: z.number().min(0).max(200),
});
export type ProductRevealProps = z.infer<typeof productRevealSchema>;

export const PRODUCT_REVEAL_DEFAULTS: ProductRevealProps = {
  titleSize: 168,
  subtitleSize: 64,
  outerPaddingV: 80,
};

export const ProductReveal: React.FC<ProductRevealProps> = (p) => { ... };

Dann registriere es in Root.tsx mit einer Inline-Kopie der Standards:

<Composition
  id="ProductReveal"
  component={ProductReveal}
  durationInFrames={120}
  fps={30}
  width={1920}
  height={1080}
  schema={productRevealSchema}
  defaultProps={{
    // ⚠ INLINE-KOPIE von PRODUCT_REVEAL_DEFAULTS – Remotion Studios
    // „Save default props“ schreibt über AST-Manipulation zurück in
    // dieses Objekt. Halte es synchron mit der exportierten Konstante
    // oben.
    titleSize: 168,
    subtitleSize: 64,
    outerPaddingV: 80,
  }}
/>

Warum die Duplizierung: Der Button „Save default props“ von Remotion Studio bearbeitet das Literal defaultProps={…} in Root.tsx über AST-Manipulation. Es kann eine importierte Konstante nicht neu schreiben. Daher ist die Inline-Kopie die, die Studio mutiert, und die exportierte *_DEFAULTS ist die, die Main.tsx liest. Wenn Studio neue Werte schreibt, kopiere sie in die exportierte Konstante, damit das vollständige Timeline-Rendering sie ebenfalls verwendet. Dies ist Fallstrick #4 in references/pitfalls.md.

Animationsprimitiven (der kleine Satz, den du wirklich brauchst)

Jede Animation in Remotion ist useCurrentFrame() + interpolate(). Es gibt keine interne Uhr, kein „Abspielen“ – jeder Frame ist eine reine Funktion von frame.

Die wichtigsten Animationen, die du brauchst:

import { interpolate, Easing, useCurrentFrame } from "remotion";

// Einblenden: Skalierung von 0,8 auf 1,0, mit Verzögerung
const scale = interpolate(
  frame - delay,
  [0, duration],
  [0.8, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.bezier(0.25, 0.1, 0.25, 1)) }
);

// Vertikale Verschiebung: 50px nach oben bis 0px
const translateY = interpolate(
  frame - delay,
  [0, duration],
  [50, 0],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.bezier(0.25, 0.1, 0.25, 1)) }
);

// Sichtbarkeit: 0 bis 1 (für Opazität)
const opacity = interpolate(
  frame - delay,
  [0, 10],
  [0, 1],
  { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
);

Der Reveal-Wrapper im Gerüst kapselt diese drei. Verwende ihn, anstatt interpolate für jede einzelne Sache zu tippen.

Szenenweise Rendern (der Befehl, den du am meisten brauchst)

Das package.json-Gerüst enthält ein render:<scene>-Skript pro Composition. Führe Folgendes aus, nachdem du einen compositionId registriert hast:

npm run render:ProductReveal

Das rendert einen 1920×1080 MP4-Clip nach out/ProductReveal.mp4. Wenn du in einer einzigen Szene iterierst, rendere jedes Mal eine Szene – das dauert Sekunden, nicht Minuten.

Rendere für die vollständige Timeline (Vorschau):

npm run render

definiere das Render-Skript in package.json:

{
  "scripts": {
    "dev": "remotion studio",
    "render": "remotion render Main out/Main.mp4",
    "render:ProductReveal": "remotion render ProductReveal out/ProductReveal.mp4"
  }
}

Rendern mit Alphakanal (für Lower Thirds / Overlays):

remotion render ProductReveal out/ProductReveal.mov --codec=prores --pixel-format=yuva444p10le --prores-profile=4444

Häufige Fallstricke und sofortige Korrekturen

compositionId-Tippfehler – npm run render:ProductReveal schlägt fehl, wenn Root.tsx id="ProductReveal" nicht genau so hat. Groß-/Kleinschreibung beachten.
defaultProps stimmen nicht mit dem Schema überein – Remotion Studio validiert gegen das Schema. Wenn defaultProps einen Wert außerhalb des zulässigen min/max-Bereichs hat, wird Studio sie nicht laden. Überprüfe zuerst das Schema.
useCurrentFrame() gibt innerhalb von <Sequence> einen Offset zurück – <Sequence from={120}> setzt den Frame innerhalb der Szene zurück auf 0, aber die from-Verschiebung bewirkt, dass der globale Frame größer ist. Die Animation sollte gegen den lokalen Frame erfolgen; der Unterschied ist nur für das Timing von Übergängen relevant.
AST kann importierte Konstanten nicht umschreiben – Der Button „Save default props“ schreibt nur das Literal defaultProps={...} in Root.tsx um. Die exportierte *_DEFAULTS-Konstante muss manuell synchronisiert werden.
staticFile()-Pfade sind relativ zu public/ – Verwende staticFile("assets/logo.png"), nicht staticFile("../public/assets/logo.png").
Windows EPERM während ffmpeg-Bereinigung – Remotion erstellt temporäre Dateien und kann sie unter Windows nicht löschen, wenn sie noch von einem anderen Prozess verwendet werden. Schließe alle Explorer-Fenster, die auf out/ zeigen. Wenn das nicht hilft, starte deinen PC neu.

Referenzen (innerhalb dieses Skills)

scaffold/ – funktionierendes Projektgerüst, das als Startpunkt kopiert werden kann
ASSETS.md – Vorlage für die Auflistung von Filmmaterial-Slots
package.json – vorkonfigurierte Skripte für Studio + Rendern

Siehe auch:

references/pitfalls.md – ausführliche Beispiele + Lösungen für jeden Fallstrick
references/render-profiles.md – Codec / Pixel-Format-Kombinationen
references/editing-workflow.md – Tipps zur Integration des Editors (mit Beispielen für DaVinci Resolve)

Remotion-Demo-Video

Was ist Remotion-Demo-Video?

In Ihrer bevorzugten KI fragen

Dokumentation