Remotion Render

Was macht Remotion Render?

Steuere den Render-und-Iterationszyklus: verwandle eine Komposition in ein MP4, nimm natürliches Feedback auf, führe die minimal nötige Änderung durch und rendere erneut. Der teure Fehlermodus ist der gegenteilige Kreislauf – das Umschreiben ganzer Szenendateien für eine Textänderung oder das erneute Rendern in voller Qualität für jede Überprüfung – welcher die genehmigte Arbeit und die Iterationsgeschwindigkeit zerstört, die Remotion lohnenswert machen.

Betriebsanleitung

Schritt 1: Eingaben erfassen

• Kompositions-ID (die id auf dem <Composition>-Element in src/Root.tsx, kein Dateiname) und der Einstiegspunkt (die Datei, die registerRoot aufruft, normalerweise src/index.ts).
• Ziel: Plattform/Seitenverhältnis (Landschaft 16:9, vertikal 9:16, quadratisch), Auflösung (1080p Standard; 4K nur auf Anfrage) und ob Transparenz benötigt wird.
• Maschinenkerne (für Nebenläufigkeit) und ob es sich um einen einzelnen Render, eine Iterationssitzung oder einen Batch handelt.

Schritt 2: Der Basis-Render

npx remotion render src/index.ts <KompositionsId> out/video.mp4

Standardausgabe ist H.264 MP4 mit der eigenen Breite/Höhe/Bildrate der Komposition; Remotion erstellt out/ falls nötig.

Schritt 3: Auflösung, Bildrate und Codec-Presets

Auflösung und Bildrate leben auf dem <Composition> (width/height/fps) – ändere sie an der Quelle. Verwende Flags nur für Skalierung und Container:

# 1080p Landschaft - Komposition autorisiert 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - die 1080p-Leinwand hochskalieren ohne das Layout zu ändern
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 vertikal - eine Komposition rendern, die mit 1080x1920 autorisiert wurde
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Codec-Regeln:

• Social-/Web-Auslieferung bleibt H.264 MP4 (die Voreinstellung) – maximale Kompatibilität.
• Transparenz: --codec=vp8 oder vp9 (WebM), oder --codec=prores mit Alpha für Bearbeitungs-Pipelines. H.264 kann Alpha nicht transportieren.
• Echte 60fps bedeutet fps={60} auf dem Composition-Element mit entsprechend skalierten Bildanzahlen – eine reine Flag-Änderung der Bildrate desynchronisiert jede Animation, die in Bildern getimed ist.

Schritt 4: Nebenläufigkeit anpassen

Rendering ist CPU-gebunden (jeder Frame ist ein Screenshot von Headless-Chromium). Standardmäßig wird etwa die Hälfte der Kerne genutzt; explizite Anpassung ist der einfachste lokale Geschwindigkeitsvorteil:

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

Beginne mit der Anzahl physischer Kerne (--concurrency=50% akzeptiert einen Prozentsatz); reduziere, wenn die Maschine swapped oder thermisch drosselt – jenseits des Sweet Spots machen mehr Chromium-Tabs es langsamer, nicht schneller.

Schritt 5: Die iterative Verfeinerungsschleife ausführen

Halte Studio geöffnet (npx remotion studio, http://localhost:3000), damit der Benutzer sofort Vorschauen sieht; reserviere vollständige Render für die Freigabe.

1. Benutzer sieht im Studio eine Vorschau und gibt Feedback in einfacher Sprache.
2. Übersetze es in eine chirurgische Bearbeitung – ändere nur den relevanten Wert:
   • „Zu schnell“ → den interpolate-Eingabebereich erweitern oder die damping-Dämpfung des Spring-Elements erhöhen.
   • „Logo sollte poppiger sein“ → die damping-Dämpfung des Spring-Elements verringern / Überschwingen hinzufügen.
   • „CTA-Text ändern“ → die Prop / defaultProps bearbeiten, nichts anderes anfassen.
   • „Andere Akzentfarbe“ → einen Hex-Wert im Farbobjekt ändern.
   • „Letztes Feature länger halten“ → die durationInFrames des entsprechenden <Sequence>-Elements erhöhen UND die gesamte durationInFrames der Komposition neu ableiten.
3. Erneut rendern, oder Studio für die visuelle Überprüfung heiß nachladen lassen.

Chirurgische Bearbeitung vs. Umschreibung: bearbeite direkt, wenn die Änderung ein Wert, eine Prop, eine Farbe oder das Timing einer Szene ist; schreibe nur um, wenn sich die Szenenstruktur ändert (Hinzufügen/Entfernen/Neuordnen von Szenen – und leite strukturelle Erstellung an remotion-compose weiter). Standard ist chirurgisch: es bewahrt alles bereits Genehmigte.

Schritt 6: Batch-Varianten

Die Komposition ist datengesteuert, also N Varianten = N Prop-Sets in einer JSON-Datei:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props akzeptiert Inline-JSON oder einen Dateipfad; für mehr als ein paar Varianten schreibe ein kleines Node-Skript, das das JSON liest und pro Eintrag ein Shell-Kommando ausführt, oder verwende renderMedia() aus @remotion/renderer für eine typisierte Schleife. Lokalisiere oder A/B-Teste Text und Farben vollständig durch Bearbeiten des JSON.

Schritt 7: Lambda, wenn lokal der Engpass ist

Greife zu Lambda, wenn ein einzelner Render lokal Minuten dauert oder der Batch groß ist – es verteilt Frames auf serverlose Worker. Ansonsten ist lokal einfacher und kostenlos.

npx remotion lambda functions deploy            # einmalig pro AWS-Konto/Region
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

Erfordert AWS-Anmeldedaten und IAM-Berechtigungen gemäß Remotions Lambda-Setup.

Schritt 8: Die drei häufigsten Fehler beheben

1. Bildanzahl-Konflikt – Animation bricht frühzeitig ab oder der Clip hat einen toten Nachlauf. Ursache: Ein <Sequence>-Element wurde in der Dauer geändert, aber die Gesamt-durationInFrames der Komposition nicht. Lösung: Stelle sicher, dass die Gesamt-durationInFrames gleich der Summe ihrer Sequenzen ist; berechne sie nach jeder Timing-Änderung neu. Dies ist die #1 Render-Überraschung.
2. Fehlende staticFile()-Referenz – Render schlägt fehl oder ein Asset ist leer. Ursache: Ein Asset wird über einen Pfad oder außerhalb von public/ importiert. Lösung: Lege es in public/assets/ ab und referenziere es mit staticFile("assets/<name>").
3. Font-Flash/Ersatzschrift – Text wird in der falschen Schriftart gerendert oder verschoben. Ursache: loadFont() aus @remotion/google-fonts fehlt oder wird zu spät aufgerufen. Lösung: Rufe loadFont() auf Modulebene auf und wende das zurückgegebene fontFamily an; der Render wartet dann auf die Schriftart.

Liefergegenstand

Eine gerenderte Datei in out/ mit dem angeforderten Preset, plus – für Iterationssitzungen – das Schleifenangebot: nenne die einstellbaren Dimensionen (Tempo, Text, Farbe, Timing) und rendere auf Feedback hin erneut. Für Batches: das Varianten-JSON und die Ausgaben pro Variante.

NICHT

• NICHT eine Szenendatei für eine Änderung auf Wertebene umschreiben – chirurgische Änderungen bewahren genehmigte Arbeit.
• NICHT die Bildrate nur über Flags ändern – setze sie auf dem Composition-Element und skaliere die Bildanzahlen neu.
• NICHT eine Sequence-Dauer ändern, ohne die gesamte durationInFrames der Komposition neu abzuleiten.
• NICHT jede Iteration vollständig rendern – Studio-Hot-Reload ist die Vorschauschleife; rendere bei Freigabe.
• NICHT die Nebenläufigkeit über physische Kerne hinaus erhöhen bei einer Maschine die swapped oder drosselt.
• NICHT zu Lambda greifen, wenn lokale Render in Sekunden fertig sind – es fügt AWS-Setup und Kosten hinzu, ohne Nutzen.
• NICHT hier neue Szenen erstellen oder die Komposition umstrukturieren – das ist Aufgabe von remotion-compose.

Qualitätsstandard

• Die Ausgabe wird mit der angeforderten Auflösung/Seitenverhältnis/Bildrate abgespielt, ohne toten Nachlauf und ohne vorzeitigen Abbruch (Gesamt-durationInFrames der Komposition entspricht der Summe der Sequenzen).
• Assets und Schriftarten werden korrekt im ersten Frame gerendert – kein Flash von Ersatzschriften, keine leeren Assets.
• Eine Iteration änderte nur die Zeilen, die das Feedback erforderte; alles zuvor Genehmigte ist unberührt.
• Batch-Ausgaben unterscheiden sich nur durch ihre Prop-Sets.

Eskalation

Szenenerstellung, Animationsdesign und Komponentenstruktur gehen an remotion-compose; Projektscaffolding an remotion-setup; Scoring und Audio-Timing an sound-and-music-sync.