Claude Code als Video Regisseur mit Remotion: So geht's

Remotion hat gerade Agent Skills veröffentlicht, und das ändert alles bei der Videoerstellung mit KI.

npx skills add remotion-dev/skills

Das war's. Ein einziger Befehl, und Claude Code wird zu einem Experten für Videoerstellung, der Remotions React-basiertes Video-Framework in- und auswendig versteht.

Was sind Remotion Agent Skills?

Agent Skills sind „Bedienungsanleitungen“, die KI-Agenten wie Claude Code beibringen, wie man bestimmte Tools und Frameworks richtig verwendet. Die offiziellen Remotion Skills vermitteln Claude fundierte Kenntnisse über:

Remotions Komponentenarchitektur (<Composition>, <Sequence>, <AbsoluteFill>)
Animations-APIs (interpolate, spring, useCurrentFrame)
Best Practices für Timing, Leistung und Rendering
Gängige Muster für Intros, Übergänge und Effekte

Ohne Skills könnte Claude fehlerhaften oder falschen Remotion-Code generieren. Mit Skills schreibt er auf Anhieb produktionsreife Videokomponenten.

💡

Möchten Sie eine Video-Generierungs-API erstellen? Dieses Tutorial behandelt auch die Erstellung von REST-Endpunkten für das On-Demand-Video-Rendering. Verwenden Sie Apidog, um Ihre Video-Generierungs-APIs mit automatisierten Tests und Echtzeit-Zusammenarbeit zu entwerfen, zu testen und zu dokumentieren.

button

Was Sie erstellen werden

In diesem Tutorial werden Sie:

Remotion Agent Skills mit einem Befehl installieren
Ein komplettes Intro-Video mit natürlicher Sprache generieren
Animationen durch Konversation verfeinern
Ihr Video als MP4 rendern
Mit Remotion Lambda skalieren (optional)

Kurz gesagt

# 1. Ein Remotion-Projekt erstellen
npx create-video@latest my-video && cd my-video

# 2. Agent Skills installieren (der entscheidende Schritt!)
npx skills add remotion-dev/skills

# 3. Claude Code starten und Ihr Video beschreiben
claude

# 4. Rendern
npx remotion render <composition-name> out/video.mp4

Das ist der gesamte Workflow. Agent Skills bringen Claude bei, wie man korrekten Remotion-Code schreibt, sodass Sie sich darauf konzentrieren können, zu beschreiben, was Sie wollen, anstatt React-Komponenten zu debuggen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Anforderung	Version	Prüfbefehl
Node.js	18+	`node --version`
npm or yarn	Latest	`npm --version`
Claude Code	Latest	`claude --version`
Code editor	VS Code empfohlen	-

Sie sollten außerdem Folgendes haben:

Grundlegende Vertrautheit mit der Befehlszeile
Grundlegendes Verständnis von React (hilfreich, aber nicht erforderlich)

Schritt 1: Remotion installieren und Ihr Projekt erstellen

Erstellen Sie zuerst ein neues Remotion-Projekt mit dem offiziellen CLI.

1.1 Öffnen Sie Ihr Terminal und führen Sie aus:

npx create-video@latest my-first-video

1.2 Wenn Sie dazu aufgefordert werden, wählen Sie diese Optionen aus:

? Wie möchten Sie Ihr Projekt nennen? my-first-video
? Wählen Sie eine Vorlage: blank
? TypeScript verwenden? Ja
? Abhängigkeiten installieren? Ja

1.3 Navigieren Sie zu Ihrem Projekt:

cd my-first-video

1.4 Überprüfen Sie die Installation:

npm run dev

Dies öffnet Remotion Studio in Ihrem Browser unter http://localhost:3000. Sie sollten eine leere Leinwand mit einer Zeitleiste am unteren Rand sehen.

Erwartetes Ergebnis: Ein Browserfenster mit der Remotion Studio-Oberfläche.

Schritt 2: Remotion Agent Skills installieren

Hier geschieht die Magie. Ein einziger Befehl verleiht Claude Code Expertenwissen über Remotion.

2.1 Führen Sie in Ihrem Projektverzeichnis Folgendes aus:

npx skills add remotion-dev/skills

Wenn Added skill: remotion angezeigt wird, war die Installation erfolgreich.

2.2 Was ist gerade passiert?

Der Befehl hat einen Skill zu .claude/skills/remotion/ in Ihrem Projekt hinzugefügt. Dieser Ordner enthält SKILL.md – die Bedienungsanleitung, die Claude beibringt, wie man korrekten Remotion-Code schreibt.

2.3 Überprüfen Sie die Installation:

Überprüfen Sie, ob die Skill-Datei existiert:

ls .claude/skills/remotion/

Erwartete Ausgabe:

SKILL.md

2.4 Ihre Projektstruktur sieht nun wie folgt aus:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # Das "Gehirn", das Claude Remotion beibringt
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Pro-Tipp: Wenn der Skill nicht erkannt wird, führen Sie npx skills add remotion-dev/skills erneut aus oder starten Sie Claude Code neu.

Schritt 3: Erstellen Sie Ihr erstes Video mit Claude Code

Lassen Sie uns nun Claude Code verwenden, um ein komplettes Video zu generieren. Öffnen Sie Ihr Terminal im Projektverzeichnis.

3.1 Claude Code starten:

claude

3.2 Beschreiben Sie Ihr Video:

Geben Sie diesen Prompt in Claude Code ein:

Erstellen Sie ein 5-sekündiges Intro-Video für ein Technologieunternehmen namens „DevFlow“.

Anforderungen:
- Auflösung: 1920x1080
- Bildrate: 30fps
- Hintergrund: Dunkler Verlauf von #1a1a2e nach #16213e
- Animationssequenz:
  1. Logo-Text „DevFlow“ wird von Deckkraft 0 auf 1 eingeblendet (Frames 0-30)
  2. Logo wird leicht vergrößert mit einem Bounce-Effekt (Frames 15-45)
  3. Slogan „Build faster. Ship smarter.“ wird darunter eingeblendet (Frames 45-90)
  4. Alles bleibt für die restlichen Frames bestehen

Verwenden Sie eine moderne, klare Typografie mit der Schriftfamilie Inter.

3.3 Claude Code generiert die Dateien:

Claude Code erstellt oder modifiziert diese Dateien:

src/Root.tsx - Kompositionsdefinition:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

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

src/DevFlowIntro.tsx - Hauptvideo-Komponente:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 Vorschau Ihres Videos:

Wenn Remotion Studio nicht läuft, starten Sie es:

npm run dev

Wählen Sie „devflow-intro“ aus dem Kompositions-Dropdown. Verwenden Sie die Zeitleiste, um Ihr Video zu durchsuchen und die Animationen in der Vorschau anzuzeigen.

Erwartetes Ergebnis: Ihr Intro-Video wird mit den Einblendungs-Logo- und Tagline-Animationen abgespielt.

Schritt 4: Ihr Video mit Folge-Prompts verfeinern

Die Stärke von Claude Code liegt in der iterativen Verfeinerung. Lassen Sie uns unser Video verbessern.

4.1 Einen Partikelhintergrund-Effekt hinzufügen und das Farbschema ändern

Fügen Sie einen dezent animierten Partikelhintergrund mit kleinen weißen Punkten hinzu,
die langsam nach oben schweben. Halten Sie ihn minimalistisch – etwa 20-30 Partikel,
sehr geringe Deckkraft (0,1-0,2) und langsame Bewegung.
Ändern Sie den Verlauf zu einem blau-violetten Thema:
- Startfarbe: #0f0c29
- Mittlere Farbe: #302b63
- Endfarbe: #24243e
Machen Sie daraus einen 3-Stufen-Verlauf.

4.3 Eine Soundeffekt-Markierung hinzufügen (optional):

Fügen Sie einen Marker-Kommentar ein, wo ein „Whoosh“-Soundeffekt abgespielt werden soll,
wenn das Logo hüpft. Ich werde den Audio später hinzufügen.

Jedes Mal, wenn Sie Feedback geben, modifiziert Claude Code den entsprechenden Code, und Sie können die Änderungen sofort in Remotion Studio in der Vorschau anzeigen.

Schritt 5: Dynamischen Inhalt mit Props hinzufügen

Machen Sie Ihr Video wiederverwendbar, indem Sie dynamische Props akzeptieren. Dies ermöglicht es Ihnen, mehrere Videos mit unterschiedlichem Inhalt zu generieren.

5.1 Bitten Sie Claude Code, Props hinzuzufügen:

Refaktorieren Sie das Video, um diese Props zu akzeptieren:
- companyName (string) - ersetzt „DevFlow“
- tagline (string) - ersetzt den Slogan-Text
- primaryColor (string) - Hauptverlaufsfarbe
- secondaryColor (string) - Sekundärverlaufsfarbe

Fügen Sie außerdem eine Zod-Schema-Validierung für Typsicherheit hinzu.

5.2 Claude Code generiert das Schema:

src/DevFlowIntro.tsx (aktualisiert):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... component uses these props
};

src/Root.tsx (aktualisiert):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 Testen Sie mit verschiedenen Props in Remotion Studio:

Klicken Sie in Remotion Studio auf das Props-Panel und ändern Sie die Werte:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

Die Vorschau wird in Echtzeit aktualisiert.

Schritt 6: Ein Video mit mehreren Szenen erstellen

Lassen Sie uns ein komplexeres Video mit mehreren Szenen erstellen.

6.1 Claude Code auffordern:

Erstellen Sie ein 30-sekündiges Produkt-Demo-Video mit diesen Szenen:

Szene 1 (0-5 Sekunden): Logo-Intro-Animation
Szene 2 (5-12 Sekunden): Feature-Präsentation mit 3 Icons, die nacheinander erscheinen
  - Icon 1: Rakete (Geschwindigkeit)
  - Icon 2: Schild (Sicherheit)
  - Icon 3: Diagramm (Analysen)
  Jedes Icon sollte von links mit einem Fade-Effekt eingeblendet werden

Szene 3 (12-22 Sekunden): Mockup des Produkt-Dashboards
  - Zeigen Sie ein einfaches UI-Mockup
  - Heben Sie verschiedene Abschnitte nacheinander hervor

Szene 4 (22-30 Sekunden): Call-to-Action
  - „Starten Sie Ihre kostenlose Testversion“
  - Website-URL wird eingeblendet

Verwenden Sie die <Sequence>-Komponente, um Szenen zu organisieren.
Gesamtdauer: 900 Frames bei 30fps.

6.2 Claude Code generiert die Szenenstruktur:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Szene 1: Logo Intro (Frames 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Szene 2: Feature Showcase (Frames 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Szene 3: Dashboard Mockup (Frames 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Szene 4: Call to Action (Frames 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code erstellt individuelle Szenenkomponenten:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Schritt 7: Audio zu Ihrem Video hinzufügen

7.1 Eine Hintergrundmusikspur hinzufügen:

Legen Sie Ihre Audiodatei im Ordner public ab:

public/
└── audio/
    └── background-music.mp3

7.2 Bitten Sie Claude Code, Audio zu integrieren:

Hintergrundmusik aus public/audio/background-music.mp3 hinzufügen
- Über die ersten 30 Frames einblenden
- Über die letzten 30 Frames ausblenden
- Lautstärke auf 0.5 setzen

7.3 Claude Code fügt die Audio-Komponente hinzu:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Audio Ein-/Ausblendung
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... restliche Szenen */}
    </AbsoluteFill>
  );
};

Schritt 8: Ihr Video rendern

Exportieren wir nun Ihr Video in eine Datei.

8.1 Vom Befehlszeilen-Interface rendern:

# Als MP4 rendern (für die meisten Anwendungsfälle empfohlen)
npx remotion render company-intro out/company-intro.mp4

# Mit benutzerdefinierten Props rendern
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Rendering-Optionen:

# Hohe Qualität (langsamer)
npx remotion render company-intro out/video.mp4 --crf=18

# Geringere Qualität (schneller, kleinere Datei)
npx remotion render company-intro out/video.mp4 --crf=28

# Als GIF rendern
npx remotion render company-intro out/video.gif --codec=gif

# Als WebM rendern
npx remotion render company-intro out/video.webm --codec=vp8

# Spezifischen Frame-Bereich rendern
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Rendering-Fortschritt:

Sie sehen eine Ausgabe wie diese:

ℹ Frames 0-150 rendern
████████████████████████████████████████ 100% | 150/150 Frames
✓ 150 Frames in 12,3s gerendert (12,2 fps)
✓ Video in 3,2s kodiert
✓ Video in out/company-intro.mp4 gespeichert

Erwartetes Ergebnis: Eine gerenderte Videodatei in Ihrem out/-Verzeichnis.

Schritt 9: Mit Remotion Lambda skalieren (Optional)

Für das Rendern von Videos in großem Maßstab (Hunderte oder Tausende) verwenden Sie Remotion Lambda.

9.1 Lambda-Abhängigkeiten installieren:

npm install @remotion/lambda

9.2 AWS-Anmeldeinformationen konfigurieren:

# AWS-Anmeldeinformationen einrichten
aws configure

# Remotion Lambda-Rolle erstellen
npx remotion lambda policies role

9.3 Ihre Lambda-Funktion bereitstellen:

# Die Render-Funktion bereitstellen
npx remotion lambda functions deploy

# Ihre Video-Website bereitstellen
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Via Lambda rendern:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 Programmatisches Rendern:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('Video-URL:', result.url);

Schritt 10: Eine Video-Generierungs-API erstellen

Erstellen Sie einen API-Endpunkt, der Videos bei Bedarf generiert.

10.1 Bitten Sie Claude Code, einen Express-Server zu erstellen:

Erstellen Sie einen Express.js API-Server mit diesen Endpunkten:

POST /api/videos/generate
- Akzeptiert: template, props, format
- Löst ein Remotion Lambda-Rendering aus
- Gibt zurück: jobId, status

GET /api/videos/status/:jobId
- Gibt Rendering-Fortschritt und Download-URL bei Fertigstellung zurück

Fügen Sie eine ordnungsgemäße Fehlerbehandlung und Zod-Validierung hinzu.

10.2 Claude Code generiert den Server:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('Video-API läuft auf http://localhost:3001');
});

10.3 Testen Sie Ihre API mit Apidog:

Verwenden Sie Apidog, um Ihre Endpunkte zur Videoerstellung zu testen:

Einen neuen Request erstellen zu POST /api/videos/generate
Den Body festlegen:

{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}

Senden und überprüfen, dass die Antwort eine jobId enthält
Den Status-Endpunkt abfragen, bis status: "completed"

Apidogs Funktionen für automatisierte Tests helfen Ihnen, die zuverlässige Funktion Ihrer Video-Generierungspipeline zu validieren.

Vollständiges Beispiel: Marketing-Video-Generator

Hier ist ein vollständiges Beispiel, das Sie als Vorlage verwenden können.

Prompt für Claude Code:

Erstellen Sie einen vollständigen Marketing-Video-Generator mit diesen Funktionen