Remotion Einrichtung

Was macht Remotion Einrichtung?

Du richtest ein frisches Remotion-Projekt ein und verdrahtest es so, dass der restliche Workflow nur noch "Claude etwas prompten" ist. Dies ist die einmalige Umgebungsarbeit. Führe sie einmal pro Projekt durch; danach springen remotion-compose und remotion-render direkt zur kreativen Schleife.

Führe die Skill proaktiv aus. Wenn der Benutzer etwas über Videos mit Claude erstellen sagt – "Remotion einrichten", "ein Remotion-Projekt erstellen", "ich möchte Produktvideos mit Claude machen", "ein Videoprojekt starten" – führe diese Skill aus.

Schritt 1 – Toolchain überprüfen

Remotion rendert mit Headless Chromium, also prüfe Node vor dem Scaffolding:

node --version   # benötigt >= 16; bevorzuge ein aktives LTS-Release

Wenn Node älter als 16 ist, stoppe und sage dem Benutzer, er solle upgraden (nvm: nvm install --lts && nvm use --lts). Bestätige auch, dass npx verfügbar ist (wird mit npm 5.2+ ausgeliefert).

Schritt 2 – Projekt erstellen

npx create-video@latest

Dies ist interaktiv. Empfehle die Blank (Hello World) Vorlage – sie ist die sauberste Basis für Produktvideos. Die CLI fragt nach einem Projektverzeichnis und einem Paketmanager; lass den Benutzer wählen, wechsle dann ins neue Verzeichnis und installiere:

cd <projektname>
npm install

Schritt 3 – Remotion Agent Skills installieren

Damit Claude Code den eigenen Skill-Kontext von Remotion in diesem Repository verfügbar hat:

npx remotion skills add remotion

Dies fügt die Agent-Skill-Dateien von Remotion in das Projekt ein. Falls der Befehl in der installierten Remotion-Version nicht verfügbar ist, verweise den Benutzer auf eine neuere Version von @remotion/cli und fahre fort – es ist eine Bequemlichkeit, keine feste Abhängigkeit.

Schritt 4 – Ordnerstruktur festlegen

Standardisiere das Layout, damit spätere Skills immer wissen, wo was liegt:

src/
  Root.tsx              # registriert jede <Composition> (das Eintragsregister)
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # eine .tsx-Datei pro Video – remotion-compose schreibt hierhin
public/
  assets/               # Bilder, Logos, Audio – via staticFile() referenziert

Erstelle die Ordner, falls die Vorlage sie nicht angelegt hat:

mkdir -p src/compositions public/assets

src/Root.tsx ist das Register. Jedes Video ist eine hier registrierte <Composition>:

// src/Root.tsx
import { Composition } from "remotion";
import { HelloWorld } from "./compositions/HelloWorld";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

Sinnvolle Standardeinstellungen zum Registrieren: 30 fps und 1920x1080 für Querformat-Produktvideos (1080x1920 für Hochformat-Social-Media), und kurze Dauern – 90 Bilder bei 30 fps sind 3 Sekunden, und die meisten Produktdemo-Videos liegen zwischen 15 und 60 Sekunden (450–1800 Bilder).

Schritt 5 – Google Font laden

Remotion hat erstklassige Google Fonts, damit Text deterministisch gerendert wird. Einmal installieren und laden:

npm install @remotion/google-fonts

// ganz oben in einer Kompositionsdatei laden
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// dann verwenden: <div style={{ fontFamily }}>...</div>

loadFont() blockiert den Render, bis die Schriftart bereit ist, sodass Text auf dem Bildschirm nie in einer unstyled Fallback-Schriftart aufblitzt. Wähle die Schriftart, die zur Marke passt – ersetze Inter durch Poppins, Roboto usw.

Schritt 6 – Rauchtest-Komposition

Schreibe eine triviale Komposition, um zu beweisen, dass die Umgebung Ende-zu-Ende rendert:

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        Es funktioniert.
      </h1>
    </AbsoluteFill>
  );
};

Stelle sicher, dass sie in src/Root.tsx registriert ist (Schritt 4), und rendere sie dann:

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

Der erste Render lädt Headless Chromium herunter (einige hundert MB – rechne bei einer normalen Verbindung mit einem einmaligen Warten von einigen Minuten); danach sollte dieser 90-Bilder-Rauchtest in deutlich weniger als einer Minute rendern. Wenn out/smoke-test.mp4 einen einblendenden Titel abspielt, ist die Umgebung in Ordnung. Wenn der Render fehlschlägt, liegt es fast immer an (a) Chromium-Download/-Berechtigungen, (b) die Komposition ist nicht in Root.tsx registriert, oder (c) einem Node-Versionsproblem aus Schritt 1.

Schritt 7 – Remotion Studio zur Vorschau starten

Für die interaktive Vorschau (Zeitleiste durchsuchen, Hot-Reload bei Änderungen):

npx remotion studio

Dies stellt das Studio unter http://localhost:3000 bereit. Die create-video-Vorlage verdrahtet auch npm run dev mit demselben. Lasse das Studio während der Iteration laufen – Änderungen an Kompositionsdateien werden sofort hot-reloaded.

Ergebnis

Der Benutzer geht mit einem funktionierenden Remotion-Projekt: dem erstellten Repository mit der src/compositions/ + public/assets/-Layout, installierten Remotion Agent Skills, einem eingebundenen Google Font, einer registrierten Rauchtest-Komposition, einem gerenderten out/smoke-test.mp4, das tatsächlich abspielbar ist, und dem laufenden Remotion Studio zur Vorschau. Nichts ist "eingerichtet", bis das Rauchtest-MP4 existiert und abspielbar ist.

NICHT

• Überspringe nicht die Node-Prüfung und erstelle trotzdem das Projekt – eine Node-Version unter 16 scheitert tief im Chromium-Render mit einem verwirrenden Fehler, nicht zur Installationszeit.
• Erkläre die Einrichtung nicht ohne den Rauchtest-Render für abgeschlossen; ein Projekt, das kompiliert, aber noch nie ein MP4 produziert hat, hat nicht bewiesen, dass die Chromium-Pipeline funktioniert.
• Lege Kompositionen oder Assets nicht an irgendwelchen Orten ab – spätere Skills (remotion-compose, remotion-render) verlassen sich darauf, dass src/compositions/ und public/assets/ existieren.
• Referenziere Assets nicht über relative Pfade oder URLs; verwende staticFile() aus public/, sonst funktionieren Render lokal, aber brechen woanders.
• Verwende keine systemeigenen oder per CSS importierten Schriftarten für Text auf dem Bildschirm – ohne blockierendes loadFont() kann Text auf der Rendermaschine in einer Fallback-Schriftart gerendert werden.
• Wähle keine funktionsreiche Vorlage für Produktvideos; die Blank-Vorlage vermeidet Demo-Code, den der Benutzer später löschen muss.

Qualitätskriterien

• node --version ist >= 16 und wurde vor dem Erstellen des Projekts überprüft.
• out/smoke-test.mp4 existiert und spielt einen einblendenden Titel ab.
• Die Ordnerstruktur existiert genau wie angegeben, und die Rauchtest-Komposition ist in src/Root.tsx registriert.
• Text wird durch @remotion/google-fonts mit loadFont() gerendert, nicht durch einen System-Fallback.
• Remotion Studio startet unter localhost:3000 und lädt Änderungen hot-reloaded.

Übergabe

Sobald der Rauchtest gerendert ist und Studio läuft, teile dem Benutzer mit, dass das Projekt bereit ist, und übergebe: "Die Einrichtung ist abgeschlossen. Beschreibe das gewünschte Video – Dauer, Szenen, Markenfarben – und ich schreibe die Komposition (remotion-compose), rendere und iteriere dann (remotion-render)."