Remotion Video Creator

Was macht Remotion Video Creator?

Erstelle programmatische Videos mit Remotion – React-Komponenten, die zu Video rendern. Dieser Skill kodiert den visuellen Stil von Skill Stack und die Erkenntnisse aus der Erstellung von Erklärinhalten.

Zweck

Erstelle kurze Videoinhalte (10-60 Sekunden), die Konzepte von Skill Stack mit einer unverwechselbaren, von der Risographie inspirierten Ästhetik erklären. Videos sind Code, daher versioniert, reproduzierbar und unendlich editierbar.

Wann dieser Skill verwendet werden sollte

• Erstellen von Erklärvideos für Skill Stack-Konzepte
• Erstellen animierter Social-Media-Inhalte (Hochformat 9:16, Quadrat 1:1, Querformat 16:9)
• Visualisieren von technischen Workflows oder schrittweiser Offenlegung
• Jedes Video, bei dem präzises Timing und Typografie wichtig sind

Nicht geeignet für:

• Bearbeiten von Live-Aufnahmen (verwende herkömmliche Videotools)
• Komplexe 3D-Grafiken (Remotion ist 2D-fokussiert)
• Schnelle einmalige Grafiken (verwende Figma oder Canva)

---

Projekteinrichtung

Schnellstart

# Neues Remotion-Projekt erstellen
npx create-video@latest my-video

# Abhängigkeiten installieren
cd my-video && npm install

# Google Fonts hinzufügen
npm install @remotion/google-fonts

# Studio starten
npm run start  # Öffnet http://localhost:3000

Dateistruktur

my-video/
├── src/
│   ├── Root.tsx           # Kompositionsdefinitionen
│   ├── Main.tsx           # Hauptvideokomponente
│   └── components/        # Wiederverwendbare Elemente
├── package.json
├── remotion.config.ts
└── out/                   # Gerenderte Videos

Einrichtung der Komposition (Root.tsx)

Erstelle immer mehrere Seitenverhältnisse für jedes Video:

import { Composition, Folder } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (
  <>
    <Folder name="MyVideo">
      <Composition
        id="MyVideo-Vertical"
        component={MyVideo}
        durationInFrames={600}  // 20 Sekunden bei 30fps
        fps={30}
        width={1080}
        height={1920}  // 9:16
      />
      <Composition
        id="MyVideo-Square"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1080}
        height={1080}  // 1:1
      />
      <Composition
        id="MyVideo-Landscape"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1920}
        height={1080}  // 16:9
      />
    </Folder>
  </>
);

---

Visueller Stil: Skill Stack Risographie

Farbpalette

const C = {
  paper: "#FAF8F5",    // Warmer, leicht weißer Hintergrund
  coral: "#D4694A",    // Akzente, CTA, Hervorhebungen
  teal: "#1E4D4D",     // Überschriften, ausgewählte Zustände
  ink: "#1C1C1C",      // Fließtext
  muted: "#666666",    // Sekundärtext
  dimmed: "#AAAAAA",   // Tertiärtext, deaktiviert
  white: "#FFFFFF",    // Karten, Container
};

Typografie

import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
import { loadFont as loadPlayfair } from "@remotion/google-fonts/PlayfairDisplay";
import { loadFont as loadJetBrains } from "@remotion/google-fonts/JetBrainsMono";

// Fließtext, UI-Bezeichnungen
const { fontFamily: inter } = loadInter("normal", {
  weights: ["400", "500", "600"],
  subsets: ["latin"],
});

// Überschriften, Zitate, emotionaler Text
const { fontFamily: playfair } = loadPlayfair("normal", {
  weights: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

// Code, technischer Inhalt, Skill-Namen
const { fontFamily: mono } = loadJetBrains("normal", {
  weights: ["400", "500"],
  subsets: ["latin"],
});

Schriftgrößen-Richtlinien

Mindestgrößen für die Lesbarkeit im Video:

Element	Quadrat (1080)	Hochformat (1080w)	Querformat (1920w)
Überschriften	64-84px	64-84px	72-96px
Skill-Namen	36-40px	36-40px	40-48px
Fließtext	28-32px	28-32px	32-36px
Bezeichnungen	24-28px	24-28px	28-32px
Annotationen	22-24px	22-24px	24-28px

Wichtige Erkenntnis: Immer größer als du denkst. Video komprimiert Details.

Korn-Overlay

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

  return (
    <AbsoluteFill
      style={{
        pointerEvents: "none",
        opacity: 0.04,
        mixBlendMode: "multiply",
      }}
    >
      <svg width="100%" height="100%">
        <defs>
          <filter id="grain">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.8"
              numOctaves="4"
              seed={Math.floor(frame / 4)}  // Korn animieren
            />
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#grain)" />
      </svg>
    </AbsoluteFill>
  );
};

---

Animationsmuster

Kernwerkzeuge

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

Ein-/Ausblenden

const fadeIn = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

const fadeOut = interpolate(frame, [150, 180], [1, 0], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

// Kombinieren für Szenendeckkraft
<div style={{ opacity: fadeIn * fadeOut }}>

Spring-Animationen

const { fps } = useVideoConfig();

// Sanfter Eintritt
const entrance = spring({
  frame: frame - 20,  // Verzögerung um 20 Frames
  fps,
  config: { damping: 100 },  // Sanft, kein Hüpfen
});

// Hüpfende Auswahl
const selectPulse = spring({
  frame: frame - 15,
  fps,
  config: { damping: 12, stiffness: 100 },  // Hüpfend
});

// Auf Transformation anwenden
<div style={{
  opacity: interpolate(entrance, [0, 1], [0, 1]),
  transform: `translateY(${interpolate(entrance, [0, 1], [20, 0])}px)`,
}}>

Typewriter-Effekt

const ScenePrompt: React.FC<{ frame: number }> = ({ frame }) => {
  const text = "Dein Aufforderungstext hier";
  const charsToShow = Math.floor(frame / 2);  // 15 Zeichen/s bei 30fps
  const visibleText = text.slice(0, charsToShow);
  const isTyping = charsToShow < text.length;
  const cursorBlink = Math.floor(frame / 18) % 2 === 0;

  return (
    <div>
      "{visibleText}
      {(isTyping || cursorBlink) && (
        <span style={{
          backgroundColor: C.coral,
          marginLeft: 4,
          opacity: cursorBlink ? 1 : 0,
        }}>
          {"\u00A0"}
        </span>
      )}
      {!isTyping && '"'}
    </div>
  );
};

Gestaffelte Listenanimation

const ITEMS = ["item-1", "item-2", "item-3"];

{ITEMS.map((item, i) => {
  const delay = i * 25;  // 25 Frames zwischen jedem
  const s = spring({
    frame: Math.max(0, frame - delay - 20),
    fps,
    config: { damping: 100 },
  });

  return (
    <div
      key={item}
      style={{
        opacity: interpolate(s, [0, 1], [0, 1]),
        transform: `translateY(${interpolate(s, [0, 1], [20, 0])}px)`,
      }}
    >
      {item}
    </div>
  );
})}

---

Richtlinien für das Szenen-Timing

Dauerberechnung

• 30 fps = 30 Frames pro Sekunde
• 10 Sekunden = 300 Frames
• 20 Sekunden = 600 Frames

Gelernte Erkenntnisse zum Tempo

Zu schnell ist der häufigste Fehler. Zuschauer brauchen Zeit, um:

1. Einen Szenenwechsel zu bemerken
2. Text zu lesen
3. Die Bedeutung zu verarbeiten
4. Sich auf den nächsten Wechsel vorzubereiten

Mindestszenendauer:

Szenentyp	Minimum	Angenehm
Typewriter-Text	3-4 Sek.	5-6 Sek.
Liste erscheint	4-5 Sek.	6-8 Sek.
Auswahl/Hervorhebung	3-4 Sek.	5 Sek.
Technisches Diagramm	4-5 Sek.	6-8 Sek.
Höhepunkt/CTA	2-3 Sek.	3-4 Sek.

Szenen-Überlappungsmuster

Szenen sollten überblenden, nicht hart geschnitten werden:

// Szenen-Timing für ein 20-Sekunden-Video (600 Frames)
{frame < 200 && <ScenePrompt frame={frame} />}
{frame >= 160 && frame < 340 && <SceneScan frame={frame - 160} />}
{frame >= 300 && frame < 460 && <SceneSelect frame={frame - 300} />}
{frame >= 420 && frame < 560 && <SceneLoad frame={frame - 420} />}
{frame >= 520 && <ScenePunchline frame={frame - 520} />}

Die 40-Frame-Überlappung (1,3 Sekunden) erzeugt in Kombination mit fadeIn/fadeOut-Interpolationen sanfte Überblendungen.

---

Workflow

Phase 1: Storyboard

Definiere vor dem Programmieren:

1. Kernbotschaft – Was ist die eine Sache, die die Zuschauer lernen sollen?
2. Szenenaufteilung – 4-6 Szenen, jede mit einer Idee
3. Gesamtdauer – 10-20 Sekunden für Social Media, 30-60 für Erklärvideos
4. Textinhalt – Genaue Wörter für jede Szene

Phase 2: Gerüst

1. Erstelle eine Komposition mit der richtigen Dauer
2. Baue Szenenkomponenten mit Platzhalterinhalt
3. Richte grundlegendes Timing ein (Szenenbereiche)
4. Teste, ob alle Szenen erscheinen

Phase 3: Stil

1. Wende die Farbpalette und Schriftarten an
2. Füge das Korn-Overlay hinzu
3. Stelle sicher, dass die Schriftgrößen lesbar sind
4. Teste auf dem Handy (Hochformat) und Desktop (Querformat)

Phase 4: Animieren

1. Füge Ein-/Ausblendungen zu jeder Szene hinzu
2. Füge Spring-Animationen für Eintritte hinzu
3. Verfeinere das Timing – fast immer muss es langsamer sein
4. Teste die vollständige Wiedergabe mehrmals

Phase 5: Rendern

# Bestimmte Komposition rendern
npx remotion render MyVideo-Square out/square.mp4

# Alle Formate rendern
npx remotion render MyVideo-Vertical out/vertical.mp4
npx remotion render MyVideo-Square out/square.mp4
npx remotion render MyVideo-Landscape out/landscape.mp4

---

Häufige Fehler

❌ Zentrierungsprobleme

Problem: Inhalt erscheint in der oberen linken Ecke.

Lösung: Verwende AbsoluteFill mit Flexbox, nicht position: absolute.

// ✅ Richtig
<AbsoluteFill style={{
  justifyContent: "center",
  alignItems: "center",
}}>

// ❌ Falsch
<div style={{ position: "absolute", left: "50%", top: "50%" }}>

❌ Winzige Schriftarten

Problem: Text ist im Studio lesbar, aber auf dem Handy unleserlich.

Lösung: Mindestens 28px für Fließtext, 64px für Überschriften.

❌ Zu schnell

Problem: Text kann nicht gelesen werden, bevor er verschwindet.

Lösung: Verdoppele deine anfängliche Dauerschätzung. Jede Szene benötigt mindestens 4-8 Sekunden.

❌ Harte Schnitte

Problem: Ruckartige Übergänge zwischen den Szenen.

Lösung: Überlappe die Szenen um 30-50 Frames mit Ein-/Ausblendungen.

❌ Keine Unterstützung für Seitenverhältnisse

Problem: Video sieht auf verschiedenen Plattformen falsch aus.

Lösung: Erstelle von Anfang an alle drei Kompositionen (Hochformat, Quadrat, Querformat).

---

Untertitel-Integration

Remotion bietet erstklassige Untertitelunterstützung. Drei Optionen nach Kosten:

Option 1: Natives Whisper (Empfohlen – Kostenlos)

npm install @remotion/captions @remotion/install-whisper-cpp
npx @remotion/install-whisper-cpp --model large-v3-turbo

import { transcribe } from "@remotion/captions";

const result = await transcribe({
  inputPath: "/path/to/audio.mp3",
  model: "large-v3-turbo",
  language: "en",
});
// result.captions = [{ text: "Hello", startTime: 0, endTime: 0.5 }, ...]

Option 2: ZapCap API ($0,10/Min.)

Für die Stapelverarbeitung ohne lokale Modelleinrichtung.

Option 3: Submagic API ($0,69/Min.)

Vorgestylte „virale" Untertitelvorlagen, aber teuer.

Vollständiger Workflow: Siehe references/caption-workflow.md

---

Community-Ressourcen

Discord

Remotion Discord – Über 6.000 Mitglieder. Aktive Kanäle #help und #showcase. Der Ersteller (Jonny Burger) antwortet direkt.

Wichtige Vorlagen zum Studieren

Vorlage	Anwendungsfall	Link
TikTok	Vertikales Social-Video	remotion-dev/template-tiktok
Audiogram	Podcast-Clips	remotion-dev/template-audiogram
GitHub Unwrapped	Datengetriebenes Video	remotion-dev/github-unwrapped
claude-remotion-kickstart	KI-gestützter Workflow	Community-Startvorlage für Claude + Remotion

Wichtige Pakete

# Untertitel
npm install @remotion/captions @remotion/install-whisper-cpp

# Grafiken
npm install @remotion/skia  # 2D-Vektorgrafiken
npm install @remotion/three # 3D mit Three.js
npm install @remotion/lottie # Lottie-Animationen

# Rendern
npm install @remotion/lambda  # AWS serverloses Rendern
npm install @remotion/player  # In Web-Apps einbetten

Vollständige Ressourcenliste: Siehe references/community-resources.md

---

Mitgelieferte Ressourcen

• references/what-is-a-skill.tsx – Vollständiges Beispielkomponente aus dem Video „Was ist ein Skill"
• references/caption-workflow.md – Vollständige Anleitung zur Untertitelintegration (Whisper, ZapCap, Submagic)
• references/community-resources.md – Vorlagen, Pakete, Lernpfad

---

Verwandte Skills

• video-caption-creation – Untertitel und Hashtags für das gerenderte Video
• youtube-scriptwriting – Für längere Erklärvideo-Skripte
• social-content-creation – Videokonzepte für statische Beiträge wiederverwenden

---

Versionsgeschichte

• v1.1 (22.01.2026): Untertitel- und Community-Integration

  • Nativer Whisper-Untertitel-Workflow über @remotion/captions hinzugefügt
  • Untertitel-Stilvorlagen hinzugefügt (minimal, fett, Karaoke, Marke)
  • Community-Ressourcen hinzugefügt (Discord, Vorlagen, Pakete)
  • Neue Referenzdateien: caption-workflow.md, community-resources.md
  • Kostenvergleich: Whisper (kostenlos) vs. ZapCap ($0,10/Min.) vs. Submagic ($0,69/Min.)

• v1.0 (21.01.2026): Erstellung des initiale Skills

  • Visueller Risographie-Stil
  • Animationsmuster (Spring, interpolate, Typewriter)
  • Timing-Richtlinien (gelernt aus der Iteration „zu schnell")
  • Szenen-Überlappungsmuster

---

Videos sind Code. Versioniere sie, iteriere an ihnen und baue eine Bibliothek wiederverwendbarer Komponenten auf.