Remotion Render

Was macht Remotion Render?

Steuere den Render-und-Iterations-Zyklus: Verwandle eine Composition in ein MP4, nimm natürlichsprachliches Feedback entgegen, führe die kleinste Änderung durch, die dem Feedback entspricht, und rendere erneut. Der teure Fehlermodus ist der umgekehrte Zyklus – das Umschreiben ganzer Szenendateien für eine kleine Textänderung oder das erneute Rendern in voller Qualität bei jedem Check – was die bereits genehmigte Arbeit und die Iterationsgeschwindigkeit zerstört, die Remotion eigentlich wertvoll macht.

Vorgehensweise

Schritt 1: Eingaben sammeln

• Composition-ID (die id auf der <Composition> in src/Root.tsx, kein Dateiname) und der Einstiegspunkt (die Datei, die registerRoot aufruft, normalerweise src/index.ts).
• Ziel: Plattform/Seitenverhältnis (Querformat 16:9, Hochformat 9:16, Quadrat), Auflösung (1080p Standard; 4K nur auf Anfrage) und ob Transparenz benötigt wird.
• CPU-Kerne (für Parallelität) und ob es sich um einen einzelnen Render, eine Iterations-Sitzung oder einen Batch handelt.

Schritt 2: Der Basis-Render

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

Standardausgabe ist H.264 MP4 mit der eigenen Breite/Höhe/fps der Composition; Remotion erstellt out/ bei Bedarf.

Schritt 3: Auflösung, fps und Codec-Voreinstellungen

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

# 1080p Querformat - Composition erstellt mit 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

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

# 9:16 Hochformat - rendere eine Composition, die mit 1080x1920 erstellt wurde
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Codec-Regeln:

• Für soziale Netzwerke/Web bleibt H.264 MP4 (der Standard) – maximale Kompatibilität.
• Transparenz: --codec=vp8 oder vp9 (WebM) oder --codec=prores mit Alpha für Bearbeitungs-Workflows. H.264 kann kein Alpha tragen.
• Echte 60 fps bedeuten fps={60} auf der Composition mit entsprechend skalierten Frame-Zahlen – eine reine Flag-Änderung der fps bringt alle in Frames animierten Abläufe aus dem Takt.

Schritt 4: Parallelität optimieren

Rendern ist CPU-intensiv (jeder Frame ist ein Headless-Chromium-Screenshot). Standard ist etwa die Hälfte der Kerne; explizites Tuning ist der einfachste lokale Geschwindigkeitsschub:

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

Beginne mit der Anzahl der physischen Kerne (--concurrency=50% akzeptiert einen Prozentsatz); reduziere die Parallelität, wenn der Rechner auslagert oder die Temperatur throttelt – jenseits des Sweet Spots machen mehr Chromium-Tabs es langsamer, nicht schneller.

Schritt 5: Den iterativen Verbesserungszyklus ausführen

Halte Studio offen (npx remotion studio, http://localhost:3000), damit der Benutzer sofort Vorschauen sehen kann; reserve vollständige Render für die Freigabe.

1. Benutzer sieht sich die Vorschau in Studio an und gibt Feedback in natürlicher Sprache.
2. Übersetze es in einen chirurgischen Edit – ändere nur den relevanten Wert:
   • "Zu schnell" → den interpolate-Eingabebereich erweitern oder die Spring-damping erhöhen.
   • "Das Logo sollte mehr hervorstechen" → Spring-damping reduzieren / Überschwingen hinzufügen.
   • "Ändere den CTA-Text" → die Prop / defaultProps bearbeiten, sonst nichts anfassen.
   • "Andere Akzentfarbe" → einen Hex-Wert im Farbobjekt ändern.
   • "Das letzte Feature länger anzeigen" → die durationInFrames dieser <Sequence> erhöhen UND die gesamte durationInFrames der Composition neu ableiten.
3. Erneut rendern oder Studio das Hot-Reload für die visuelle Überprüfung machen lassen.

Chirurgischer Edit vs. Umschreiben: Bearbeite direkt vor Ort, wenn die Änderung ein Wert, eine Prop, eine Farbe oder das Timing einer Szene ist; schreibe nur um, wenn sich die Struktur der Szene ändert (Szenen hinzufügen/entfernen/neu anordnen – und strukturelle Autorenarbeit an remotion-compose weiterleiten). Standardmäßig chirurgisch vorgehen: Das bewahrt alles bereits Genehmigte.

Schritt 6: Batch-Varianten

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

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

--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 @remotion/renderer's renderMedia() für eine typisierte Schleife. Lokalisiere oder A/B-Teste Texte und Farben ausschließlich durch Bearbeiten des JSONs.

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-Einrichtung.

Schritt 8: Die drei häufigsten Fehler beheben

1. Frame-Anzahl-Konflikt – Die Animation bricht vorzeitig ab oder der Clip hat ein totes Ende. Ursache: Eine <Sequence>-Dauer wurde geändert, aber die Gesamtlaufzeit der Composition nicht. Lösung: Setze die Gesamtlaufzeit gleich der Summe ihrer Sequenzen; berechne nach jeder Timing-Änderung neu. Das ist die häufigste Render-Überraschung.
2. Fehlende staticFile()-Referenz – Der Render schlägt fehl oder ein Asset ist leer. Ursache: Ein Asset, das über einen Pfad oder außerhalb von public/ importiert wurde. Lösung: Lege es in public/assets/ ab und referenziere es mit staticFile("assets/<name>").
3. Schrift-Flash/-Fallback – Text wird in der falschen Schriftart gerendert oder verschiebt sich. Ursache: @remotion/google-fonts loadFont() fehlt oder wird zu spät aufgerufen. Lösung: Rufe loadFont() auf Modulebene auf und wende die zurückgegebene fontFamily an; der Render wartet dann auf die Schriftart.

Liefergegenstand

Eine gerenderte Datei in out/ mit der angeforderten Voreinstellung, plus – für Iterations-Sitzungen – das Angebot für den Zyklus: Nenne die anpassbaren Dimensionen (Tempo, Text, Farbe, Timing) und rendere auf Feedback hin erneut. Für Batches: Das JSON der Varianten und die Ausgabedateien pro Variante.

NICHT

• NICHT eine Szenendatei für eine Änderung auf Wertebene umschreiben – chirurgische Edits bewahren genehmigte Arbeit.
• NICHT fps nur über Flags ändern – setze es auf der Composition und skaliere die Frame-Zahlen neu.
• NICHT die Dauer einer Sequence ändern, ohne die gesamte durationInFrames der Composition neu abzuleiten.
• NICHT jede Iteration vollständig rendern – Studio Hot-Reload ist der Vorschau-Zyklus; rendere erst bei Freigabe.
• NICHT die Parallelität über die Anzahl der physischen Kerne erhöhen, wenn der Rechner auslagert oder throttelt.
• NICHT zu Lambda greifen, wenn lokale Render in Sekunden fertig sind – es fügt nur AWS-Einrichtung und Kosten ohne Nutzen hinzu.
• NICHT hier neue Szenen erstellen oder die Composition umstrukturieren – das ist remotion-compose.

Qualitätskriterien

• Die Ausgabe spielt mit der angeforderten Auflösung/Seitenverhältnis/fps, ohne totes Ende und ohne vorzeitigen Abbruch (Gesamtlaufzeit der Composition entspricht der Summe der Sequenzen).
• Assets und Schriftarten werden korrekt im ersten Frame gerendert – kein Fallback-Schrift-Flash, keine leeren Assets.
• Eine Iteration hat nur die Zeilen geändert, die das Feedback erforderte; alles zuvor Genehmigte bleibt unberührt.
• Batch-Ausgaben unterscheiden sich nur durch ihre Prop-Sets.

Eskalation

Szenen-Autorenarbeit, Animationsdesign und Komponentenstruktur gehen an remotion-compose; Projekteinrichtung an remotion-setup; Scoring und Audio-Timing an sound-and-music-sync.