Remotion-Videoproduktion

Programmierbare Videoproduktion mit Remotion. Generieren Sie automatisierte Videos aus Textanweisungen und produzieren Sie konsistente, markenkonforme Videos in großem Umfang.

Wann diese Fähigkeit einsetzen

Automatisierte Videogenerierung: Videos aus Textanweisungen erstellen
Markenvideoproduktion: Videos in hoher Stückzahl mit einheitlichem Stil
Programmierbare Inhalte: Erzählung, Bilder und Animation kombinieren
Marketinginhalte: Produktvorstellungen, Onboarding, Werbevideos

Anleitung

Schritt 1: Die Videospezifikation definieren

video_spec:
  audience: [Zielpublikum]
  goal: [Videoziel]
  duration: [Gesamtlänge - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "dynamisch" | "ruhig" | "cinematic"
  voice:
    style: [Erzählstil]
    language: [Sprache]

Schritt 2: Szenen skizzieren

Szenenstruktur-Vorlage:

## Szenenplan

### Szene 1: Aufmerksamkeit (0:00 - 0:05)
- **Visuell**: Produktlogo einblenden
- **Audio**: Energischer Einstieg
- **Text**: "Optimieren Sie Ihren Workflow"
- **Übergang**: Einblenden → Szene 2

### Szene 2: Problem (0:05 - 0:15)
- **Visuell**: Illustration des Problemzustands
- **Audio**: Erzählung beginnt
- **Text**: Schlüsselbotschaft als Overlay
- **Übergang**: Nach links schieben

### Szene 3: Lösung (0:15 - 0:30)
...

Schritt 3: Assets vorbereiten

# Asset-Checkliste
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Asset-Vorbereitungsregeln:

Logo: SVG oder hochauflösendes PNG
Screenshots: Auf das Ziel-Seitenverhältnis normalisieren
Audio: MP3 oder WAV; Lautstärke normalisieren
Schriften: Webfont oder lokale Schriftartdateien

Schritt 4: Remotion-Komposition implementieren

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s bei 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Szenenkomponente – Beispiel
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Optimieren Sie Ihren Workflow</Title>
    </AbsoluteFill>
  );
};

Schritt 5: Rendern und QA

# 1. Vorschau-Rendering (niedrige Qualität)
npx remotion preview src/Video.tsx

# 2. QA-Prüfungen
- [ ] Timing
- [ ] Audio-Synchronisation
- [ ] Textlesbarkeit
- [ ] Sanfte Übergänge

# 3. Finales Rendern
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Beispiele

Beispiel 1: Produktvorstellungsvideo

Eingabeaufforderung:

Erstelle ein 60-sekündiges Produktvorstellungsvideo mit 6 Szenen,
energischer Ton und 16:9-Ausgabe. Füge am Ende einen Call-to-Action hinzu.

Erwartete Ausgabe:

## Szenenaufteilung
1. Aufmerksamkeit (0:00-0:05): Logo + Slogan
2. Problem (0:05-0:15): Visualisierung des Schmerzpunkts
3. Lösung (0:15-0:30): Produktdemo
4. Funktionen (0:30-0:45): Hauptvorteile (3 Punkte)
5. Sozialer Beweis (0:45-0:55): Testimonial/Statistik
6. CTA (0:55-1:00): Handlungsaufforderung + Kontakt

## Remotion-Struktur
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Beispiel 2: Onboarding-Durchlauf

Eingabeaufforderung:

Generiere einen 45-sekündigen Onboarding-Durchlauf mit Screenshots,
mit Hervorhebungen und 9:16-Format für Mobilgeräte.

Erwartete Ausgabe:

Szenenplan mit 5 Schritten
Asset-Liste (Screenshots, Hervorhebungspfeile)
Textüberlagerungen und Übergänge
Mobil sichere Ränder angewendet

Best Practices

Kurze Szenen: Jede Szene klar und prägnant in 5-10 Sekunden
Konsistente Typografie: Eine Typografieskala festlegen
Audio-Synchronisation: Erzählhinweise mit Bildern abgleichen
Vorlagenwiederverwendung: Wiederverwendbare Kompositionen speichern
Sicherheitszonen: Ränder für mobile Seitenverhältnisse freihalten

Häufige Fehler

Textüberladung: Begrenzen Sie die Textmenge pro Szene
Ignorieren mobiler Sicherheitszonen: Ränder bei 9:16-Ausgaben prüfen
Finales Rendern vor QA: Immer zuerst in der Vorschau überprüfen

Fehlerbehebung

Problem: Audio und Bilder sind nicht synchron

Ursache: Frame-Zeitstempel stimmen nicht überein Lösung: Frames neu berechnen und Zeitstempel angleichen

Problem: Rendern ist langsam oder schlägt fehl

Ursache: Schwere Assets oder Effekte Lösung: Assets komprimieren und Animationen vereinfachen

Problem: Text ist nicht lesbar

Ursache: Schriftgröße zu klein oder unzureichender Kontrast Lösung: Mindestens 24px Schriftgröße und kontrastreiche Farben verwenden

Ausgabeformat

## Videoproduktionsbericht

### Spezifikation
- Dauer: 60s
- Seitenverhältnis: 16:9
- FPS: 30

### Szenenplan
| Szene | Dauer | Visuell | Audio | Übergang |
|-------|-------|---------|-------|----------|
| Aufmerksamkeit | 0:00-0:05 | Logoeinblendung | BGM startet | Einblenden |
| ...   | ...   | ...     | ...   | ...      |

### Assets
- [ ] logo.svg
- [ ] screenshots (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Render-Checkliste
- [ ] Vorschau-QA bestanden
- [ ] Audio-Synchronisation überprüft
- [ ] Sicherheitszonen geprüft
- [ ] Finales Rendern abgeschlossen

Multi-Agenten-Workflow

Validierung & Retrospektiven

Runde 1 (Orchestrator): Spezifikationsvollständigkeit, Szenenabdeckung
Runde 2 (Analyst): Narrative Konsistenz, Tempobewertung
Runde 3 (Executor): Render-Bereitschafts-Checkliste validieren

Agentenrollen

Agent	Rolle
Claude	Szenenplanung, Drehbuchschreiben
Gemini	Asset-Analyse, Optimierungsvorschläge
Codex	Remotion-Code generieren, Render ausführen

Metadaten

Version

Aktuelle Version: 1.0.0
Letzte Aktualisierung: 2026-01-21
Kompatible Plattformen: Claude, ChatGPT, Gemini, Codex

Marve10s/Better-Fullstack

Was ist Better-Fullstack?

In Ihrer bevorzugten KI fragen

Dokumentation