Remotion-Videoproduktion

Programmierbare Videoproduktion mit Remotion. Erstelle automatisierte Videos aus Textanweisungen und produziere konsistente, markenkonforme Videos in großem Maßstab.

Wann diese Skill verwendet werden soll

Automatisierte Videogenerierung: Erstelle Videos aus Textanweisungen
Markenvideoproduktion: Hochvolumige Videos mit konsistentem Stil
Programmierbare Inhalte: Kombiniere Erzählung, visuelle Elemente und Animation
Marketinginhalte: Produktvorstellungen, Onboarding, Werbevideos

Anleitung

Schritt 1: Das Video-Spezifikation definieren

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

Schritt 2: Szenen skizzieren

Vorlage für die Szenenstrukturierung:

## Szenenplan

### Szene 1: Aufhänger (0:00 - 0:05)
- **Visuell**: Produktlogo einblenden
- **Audio**: Fröhlicher Intro-Ton
- **Text**: „Transformieren Sie Ihren Workflow“
- **Übergang**: Einblenden → Szene 2

### Szene 2: Problem (0:05 - 0:15)
- **Visuell**: Illustration des Problemzustands
- **Audio**: Erzählung beginnt
- **Text**: Text-Overlay mit Kernbotschaft
- **Ü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
Schriftarten: Webfont oder lokale Schriftdateien

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>Transformieren Sie Ihren Workflow</Title>
    </AbsoluteFill>
  );
};

Schritt 5: Rendern und Qualitätssicherung

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

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

# 3. Finaler Render
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Beispiele

Beispiel 1: Produktvorstellungsvideo

Eingabeaufforderung:

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

Erwartete Ausgabe:

## Szenenaufteilung
1. Aufhänger (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): Wichtigste Vorteile (3 Punkte)
5. Sozialer Beweis (0:45-0:55): Testimonial/Statistiken
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, Pfeile für Hervorhebungen)
Texteinblendungen und Übergänge
Mobil-sichere Ränder angewendet

Best Practices

Kurze Szenen: Halte jede Szene klar bei 5-10 Sekunden
Konsistente Typografie: Definiere eine Typografie-Skala
Audio-Synchronisation: Stimme Erzählhinweise mit visuellen Elementen ab
Wiederverwendung von Vorlagen: Speichere wiederverwendbare Kompositionen
Sicherheitszonen: Halte Ränder für mobile Seitenverhältnisse frei

Häufige Fehler

Textüberladung: Begrenze die Textmenge pro Szene
Ignorieren mobiler Sicherheitszonen: Überprüfe Ränder für 9:16 Ausgaben
Finaler Render vor Qualitätssicherung: Überprüfe immer zuerst in der Vorschau

Fehlerbehebung

Problem: Audio und Video sind nicht synchron

Ursache: Zeitlicher Versatz im Frame Lösung: Frames neu berechnen und Zeitstempel angleichen

Problem: Render läuft langsam oder schlägt fehl

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

Problem: Text ist unleserlich

Ursache: Schriftgröße zu klein oder unzureichender Kontrast Lösung: Verwende Schriftarten ab 24px und kontrastreiche Farben

Ausgabeformat

## Videoproduktionsbericht

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

### Szenenplan
| Szene | Dauer | Visuell | Audio | Übergang |
|-------|-------|---------|-------|----------|
| Aufhänger | 0:00-0:05 | Logoeinblendung | BGM start | Einblenden |
| ...   | ...   | ...     | ...   | ...      |

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

### Render-Checkliste
- [ ] Vorschau-Qualitätssicherung bestanden
- [ ] Audio-Synchronisation überprüft
- [ ] Sicherheitszonen geprüft
- [ ] Finaler Render abgeschlossen

Multi-Agent-Workflow

Validierung und Retrospektiven

Runde 1 (Orchestrator): Vollständigkeit der Spezifikation, 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, Renders durchführen

Metadaten

Version

Aktuelle Version: 1.0.0
Zuletzt aktualisiert: 2026-01-21
Kompatible Plattformen: Claude, ChatGPT, Gemini, Codex

JEO-tech-ai/oh-my-unity3d

Was ist oh-my-unity3d?

In Ihrer bevorzugten KI fragen

Dokumentation