aminghaseminia/remotion-motion-graphics

Remotion Motion Graphics — Framebasierte 2D-Videos

Remotion rendert React zu Video. Jeder Frame ist eine reine Funktion des Frame-Index, sodass die Ausgabe deterministisch, diffbar und überprüfbar ist. Es eignet sich am besten für text- und datengetriebene Videos sowie als Compositing-Werkzeug für die Zusammenstellung von Blender- oder Manim-Pässen mit Typografie, Untertiteln und Übergängen.

Lies references/REMOTION-PLAYBOOK.md für Konventionen und references/REMOTION-RECIPES.md für kopierfertige Komponenten. Die offizielle Dokumentation und die installierte CLI bieten die aktuelle API: https://www.remotion.dev/docs/

1. Einrichtung

node --version          # 18+ erforderlich, 20/22 LTS bevorzugt
npx create-video@latest mein-video    # wähle die leere Vorlage
cd mein-video
npx skills add remotion-dev/skills  # offizielle Remotion-Agenten-Skills (empfohlen)
npm run dev                         # Remotion Studio unter http://localhost:3000

Rendern:

npx remotion render <Eintrag> <CompositionId> out/video.mp4 --codec=h264
npx remotion render <Eintrag> <CompositionId> out/preview.mp4 --scale=0.5
npx remotion render <Eintrag> <CompositionId> out/frames --sequence --image-format=png

Genaue Flags variieren je nach Version; prüfe mit npx remotion render --help.

Lizenzierung: Remotion ist quellcodeoffen, aber keine OSI-Open-Source-Lizenz. Für Einzelpersonen und berechtigte kleine Organisationen unter den aktuellen Bedingungen kostenlos; größere oder kommerzielle/automationsbezogene Nutzungen erfordern möglicherweise eine kostenpflichtige Lizenz. Prüfe https://www.remotion.dev/docs/license/pricing für den tatsächlichen Anwendungsfall, bevor du ein Lieferversprechen abgibst. Beschreibe es nicht als „MIT" oder „kostenlos für jedes Unternehmen".

2. Projektstruktur

Passe sie an den Starter an, anstatt dagegen zu arbeiten:

src/
  Root.tsx                  # registriert Kompositionen
  compositions/
    MainVideo.tsx           # sequenziert Szenen
  scenes/
    Intro.tsx  Feature.tsx  Outro.tsx
  components/
    AnimatedTitle.tsx  Background.tsx  Grid.tsx  Caption.tsx  Transition.tsx
  animations/
    easing.ts  timing.ts  reveal.ts
  data/
    content.ts              # Text und Zahlen, getrennt vom Layout
  styles/
    tokens.ts               # Palette, Schriftgrößen-Skala, Abstände
public/
  audio/  fonts/  images/  video/

Regeln:

• Eine Szene pro Datei; MainVideo sequenziert sie nur.
• Text und Daten leben in data/, niemals inline in fünf Szenen.
• Design-Tokens in styles/tokens.ts; keine magischen Hex-Werte verteilt.
• Wiederverwendbare Primitive in components/, niemals pro Szene dupliziert.
• staticFile("...") für alles unter public/.

3. Determinismus (die harte Regel)

Der gesamte visuelle Zustand leitet sich vom aktuellen Frame ab:

import { useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";

const frame = useCurrentFrame();
const { fps, durationInFrames, width, height } = useVideoConfig();

Als Animationstreiber verboten: Date.now(), setTimeout, setInterval, requestAnimationFrame, CSS-Keyframes, ungesähtes Math.random(), asynchrone Daten, die sich zwischen Renderings ändern.

Gesähte Zufälligkeit, wenn Variation gewünscht ist:

export const rand = (seed: number) => {
  const x = Math.sin(seed * 12.9898) * 43758.5453;
  return x - Math.floor(x);
};

Asynchrone Assets müssen aufgelöst werden, bevor der Frame gerendert wird. Verwende delayRender/continueRender korrekt und führe immer in einem catch fort, oder lade Assets außerhalb des Frames vor (empfohlen).

4. Timing

• durationInFrames ist explizit. Bei 30 FPS entsprechen 10 s = 300 Frames, Indizes 0–299.
• Einmal umrechnen: const s = (n: number) => Math.round(n * fps).
• Szenengrenzen stammen aus einer kumulativen Zeitleiste, niemals aus szenenweiser Rundung.
• Verwende <Sequence from={start} durationInFrames={len}>; stelle sicher, dass nichts über die Komposition hinausragt.
• Überschneidungen müssen beabsichtigt sein; eine Lücke von einem Frame ist ein sichtbarer Blitz.
• Verwende calculateMetadata, wenn Dauer oder Abmessungen von Props abhängen.

5. Animations-Handwerk

Bewegung	Primitive
Eintritt/Einschwingen	spring oder interpolate mit Easing.out(Easing.cubic)
Austritt	Easing.in(Easing.cubic)
Symmetrische Bewegung	Easing.inOut(Easing.cubic)
Mechanisch/kontinuierlich	Easing.linear
Zahl/Farbe/Rotation	interpolate mit clamped Extrapolation
Staffelung	offset from pro Element (30–80 ms)

const enter = spring({ frame, fps, config: { damping: 18, stiffness: 120, mass: 0.8 } });
const opacity = interpolate(frame, [0, 12], [0, 1], {
  extrapolateLeft: "clamp", extrapolateRight: "clamp",
});

Nicht alles federn lassen. Nicht jede Eigenschaft animieren. Bevorzuge Transforms und Opacity (GPU-freundlich) gegenüber Layout-Eigenschaften. Stelle mindestens ~0,8–1,2 s Verweildauer für eine kurze Schlagzeile sicher, mehr für Fließtext.

6. Typografie und Design

• Lege eine Schriftgrößen-Skala fest (z. B. 96/64/40/28/20 px bei 1080p) und verwende sie überall.
• Lade Schriftarten aus public/fonts mit @remotion/fonts oder dem dokumentierten Muster des Starters und warte auf die Bereitschaft vor dem Rendern. Vermeide die Abhängigkeit von Systemschriftarten.
• Prüfe Zeilenlänge (≈45–75 Zeichen), Zeilenhöhe (1,1–1,4 für Auszeichnungsschriften) und Laufweite.
• Halte 5–8 % sichere Ränder ein; prüfe UI-Overlays der Plattform für vertikale/Social-Formate.
• Für Persisch/Arabisch: korrektes dir="rtl", eine formbare Schriftart, gemischte Zahlen/URLs prüfen und den gerenderten Frame inspizieren – Headless Chrome formt Text anders als einige Design-Tools.
• Überprüfe den endgültigen Text Zeichen für Zeichen. Tippfehler in Videos sind ausliefernde Fehler.

7. Komposition und Übergänge

• Ein Brennpunkt pro Schlag; animiere das Auge, nicht den gesamten Bildschirm.
• Verwende ein Übergangsvokabular: Schnitt, 6–10 Frame Crossfade, Masken-Wipe, Skalieren-Durch, Blur-Durch. Verwende es gezielt.
• Bevorzuge Schnitte auf einen Beat gegenüber dem Auflösen von allem.
• Erstelle für lange Videos zuerst eine Timing-Tabelle (Sekunden → Frames → Szene) und kodiere sie in einer Datei.

8. Audio und Untertitel

import { Audio, staticFile } from "remotion";
<Audio src={staticFile("audio/musik.mp3")} volume={0.6} />

• Importiere nur in eine Sequenz, die dort beginnt, wo der Ton starten soll.
• Ein-/Ausblenden mit interpolate auf volume; vermeide Klicks.
• Ducke Musik unter Voice-Over; halte Dialoge verständlich.
• Untertitel: für Social mit <Caption> einbrennen oder für Plattformen als .srt exportieren. Achte auf sichere Bereiche und Lesegeschwindigkeit (~15–20 Zeichen/Sek.).
• Überprüfe den Mix in der codierten Datei, nicht nur in der Vorschau.

9. Leistung

• Reduziere die Parallelität auf speicherbegrenzten Maschinen: --concurrency=4.
• Vermeide große Unschärfen, Filterketten, riesige SVGs und Tausende von DOM-Knoten; verwende Canvas für dichte Grafiken.
• Cache statische Hintergründe (<Freeze> oder vorgerendertes Bild).
• Optimiere Bilder (korrekte Größe, WebP/AVIF wenn unterstützt) und kürze Video-Assets.
• Rendere Vorschauen zuerst mit --scale=0.5 und kurzen Frame-Bereichen.

10. Batch- und datengetriebene Videos

1. Definiere ein Props-Schema und validiere es vor dem Rendern.
2. Halte Daten in JSON/CSV; Layout in Komponenten.
3. Passe Text an: maximale Zeilen, fallback Schriftgröße, Abschneidungsregeln, Überlauftests.
4. Rendere jede Variante aus derselben Komposition mit unterschiedlichen --props.
5. Schreibe ein Manifest und überprüfe die Dauer und nicht-leere Größe jeder Ausgabe.

npx remotion render src/index.ts Main out/acme.mp4 --props='{"brand":"Acme","tagline":"Schneller bauen"}'

11. Hybrid mit Blender

• Rendere den Blender-Shot mit derselben FPS, Auflösung und Frame-Anzahl wie die Remotion-Komposition.
• Bilde Blender-Frame 1 → Remotion-Frame-Index 0 ab, es sei denn, das Projekt definiert einen Offset.
• Verwende für Transparenz eine PNG-Sequenz oder ProRes 4444 und überprüfe Alpha über einem Schachbrett; MP4 hat kein Alpha.
• Gleiche die Farb-Pipeline an: Kodiere den Blender-Pass mit denselben Annahmen für Transfer/View-Transform wie die Browser-Ausgabe, inspiziere dann das Composite.
• Platziere den Pass mit <OffthreadVideo> (nicht <Video>) innerhalb einer <Sequence> und setze startFrom/Frame-Offsets aus der Frame-Map.

12. Validierung vor Auslieferung

npx remotion compositions src/index.ts          # IDs und Abmessungen auflisten
ffprobe -v error -show_entries format=duration,size \
  -show_entries stream=codec_name,width,height,r_frame_rate,pix_fmt,channels \
  -of json out/video.mp4

Dann überprüfe Frame 0, jede Szenengrenze, jeden Übergang, jeden textlastigen Frame und den letzten Frame. Achte auf abgeschnittenen Text, fehlende Schriftarten, schwarze Frames und Audio-Drift. Siehe video-composition für Encode/Normalize-Rezepte und motion-studio/references/QUALITY-CHECKLIST.md für das vollständige Gate.

13. Häufige Fehlermodi

• Komposition nicht gefunden → Eintragsdatei oder ID ist falsch; führe npx remotion compositions aus.
• Leerer Render, aber funktionierende Vorschau → Asset-Pfad wird im Studio aufgelöst, aber nicht im Headless-Modus; verwende staticFile, überprüfe die Groß-/Kleinschreibung in public/.
• Schriftarten fallen auf Times zurück → Schriftart wurde vor dem Rendern nicht geladen; warte auf Bereitschaft.
• Unterschiedliche Ausgabe zwischen Renderings → Wanduhrzeit oder ungesähte Zufälligkeit.
• OOM oder extrem langsam → niedrigere --concurrency, reduziere Unschärfe/Skalierung, teile den Render.
• Audio aus dem Takt → falsches startFrom, FPS-Konflikt oder Quelle mit variabler Bildrate.