Erklärvideo

Was macht Erklärvideo?

Verwandle eine einzelne Botschaft in ein getaktetes, vertontes 30–90-Sekunden-Video. Durchlaufe die gesamte Pipeline: Drehbuch → Storyboard → Szenenaufbau → Synchronisation von Erzählung und Untertiteln → Schnitt → Verfeinerung, mit einem konsistenten Stilsystem.

Wann verwenden

• Erstelle ein 30–90-Sekunden-Produkt-, Funktions-, Onboarding- oder Konzeptvideo.
• Gehe von einer groben Idee oder Funktion zu einem Drehbuch, Storyboard und fertigem Stück über.
• Synchronisiere Erzählung mit Bildern und füge Untertitel für stummgeschaltete Wiedergabe hinzu.

Geschichtsstruktur (zuerst entscheiden)

Ein Erklärvideo ist ein Argument, keine Funktionstour. Lege die Erzählung fest, bevor du einen Pipelineschritt ausführst, damit jede spätere Wahl ihr dient.

• Eine Kernidee. Ein einzelner Satz, den der Zuschauer danach wiederholen können sollte. Wenn du es nicht in einem Satz ausdrücken kannst, hat das Video keine Stütze – kürze den Umfang, bis du es kannst. Alles, was dieser Idee nicht dient, wird gestrichen, nicht verkleinert.
• Drehbuch zuerst. Die Erzählung ist das Rückgrat; Bilder veranschaulichen die gerade gesprochene Zeile, führen sie niemals an. Schreibe und bemesse die Wörter, bevor du storyboardest oder animierst – es ist weitaus billiger, einen Satz zu streichen als eine gebaute Szene.
• Verdiene das "Wie" mit Einsätzen. Springe nicht vom Problem zum Mechanismus. Lass den Zuschauer die Kosten des Problems fühlen; diese Spannung ist es, die ihn die Lösung sehen lässt.

Der Erzählbogen des Erklärvideos – ein Takt pro Phase, in der Reihenfolge:

Phase	Narrative Aufgabe	Was der Zuschauer denken soll
Problem	Benenne den Schmerz in seinen Worten	"Das bin ich."
Einsätze	Zeige, was der Schmerz kostet (Zeit, Geld, Risiko)	"Ich muss das reparieren lassen."
Lösung	Stelle das Produkt/die Idee als Lösung vor, in einem Satz	"Oh – das löst es."
Funktionsweise	Der Mechanismus in 1–3 konkreten Schritten	"Ich verstehe, wie das funktioniert."
Nutzen / CTA	Der Zustand danach + eine nächste Aktion	"Das will ich. Ich werde X tun."

(Die Tabelle Drehbuchformel weiter unten ordnet diesen Phasen Laufzeitanteile und Wortbudgets zu – dieser Abschnitt ist das Warum und die Reihenfolge; jener ist das Wie lange.)

Wähle eine Analogie und reite sie

Abstrakte Mechanismen verfangen, wenn sie auf etwas abgebildet werden, das der Zuschauer bereits kennt. Wähle eine einzige Metapher und halte sie konsistent über alle Szenen – der Wechsel der Analogie mitten im Video setzt das Verständnis zurück.

• Wähle eine Metapher aus der Welt des Zuschauers (eine Warteschlange, ein Thermostat, ein Fließband), nicht aus der Ingenieursdomäne.
• Eine Metapher pro Video; verwende sie sowohl für die visuelle Grammatik als auch für die Formulierung der Erzählung.
• Teste sie: Wenn die Analogie ihre eigene Erklärung braucht, ist es die falsche.

Tempo pro Takt

Das Tempo verfolgt die Spannung. Bewege dich schnell durch Problem/Einsätze, um zum Wert zu gelangen; verlangsame das "Wie", damit jeder Schritt sitzt; lass den Nutzen atmen.

Takt	Gefühl	Schnittrhythmus
Problem / Einsätze	Flott, etwas angespannt	Schnellere Schnitte, kurze Halte
Lösung	Ein Moment der Erleichterung	Ein klarer Halt
Funktionsweise	Bedächtig, Schritt für Schritt	Am langsamsten – jeden Schritt zum Lesen halten
Nutzen / CTA	Selbstbewusst, offen	Halte die Endkarte; ein CTA

Die Pipeline

1. Drehbuch – eine Kernbotschaft. Struktur: Problem → Lösung → Funktionsweise → Nutzen. Schreibe knappe Erzählung (VO); bemesse sie bei ~2,3 Wörtern/Sekunde (≈140 WpM). Ein 60-Sekunden-Video hat ~138 Wörter.
2. Storyboard – eine Idee pro Szene. Skizziere jedes Bild plus seinen Übergang; ordne jede VO-Zeile einem Bild zu.
3. Szenen aufbauen – animiere Diagramme/Daten, kinetischen Text/Schlüsselwörter und Hintergründe (Techniken unten eingebettet).
4. Erzählung und Untertitel – nimm VO auf / generiere sie, richte Szenenschnitte an VO-Takten aus, brenne Untertitel ein (die meisten Wiedergaben sind stummgeschaltet).
5. Schnitt – schneide auf die Erzählung, halte jede Idee lang genug, damit sie sitzt, entferne jede Szene, die die Botschaft nicht voranbringt.
6. Verfeinerung – Farbkorrektur, konsistentes Easing, Audio-Mix, Endkarte.

Drehbuchformel

Takt	Aufgabe	Anteil der Laufzeit
Problem	Benenne den Schmerz, den der Zuschauer fühlt	~20 %
Lösung	Stelle das Produkt/die Idee als Lösung vor	~15 %
Funktionsweise	Zeige den Mechanismus, 1–3 konkrete Schritte	~45 %
Nutzen	Das Ergebnis + ein klarer nächster Schritt (CTA)	~20 %

Schreibe VO zuerst, in gesprochener Sprache (Zusammenziehungen, kurze Sätze). Lese sie laut vor und stoppe sie, bevor du etwas baust.

VO-Timing-Mathematik

• Tempo: ~2,3 Wörter/Sek. (140 WpM) für klare, freundliche Erzählung; verlangsame technische Zeilen auf ~2,0.
• Schätze die Szenenlänge aus ihrer VO-Zeile: Sekunden = Wörter / 2,3, füge dann ~0,4 s Spielraum hinzu.
• Eine Szene ohne VO (reiner visueller Takt) braucht dennoch ≥1,0 s, um wahrgenommen zu werden.

Szenenbau-Techniken (eingebettet)

Diagramm-/Datenenthüllung (progressive Offenlegung: Knoten → Kanten → Beschriftungen):

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

Kinetisches Schlüsselwort (Wort erscheint auf der betonten Silbe):

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

Hochzähl-Statistik:

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

Rendere das zusammengesetzte Stück mit Remotion (datengetrieben, deterministisch) oder After Effects.

Untertitel-Synchronisation

Untertitel sind Pflicht – gehe von stummgeschalteter Autoplay aus. Verwende eine .srt/.vtt-Cue-Liste, die an die VO gebunden ist. Beschränke auf ≤2 Zeilen, ≤42 Zeichen/Zeile, auf dem Bildschirm ≥1,0 s, verschwunden, bevor die nächste Zeile beginnt.

1
00:00:00,300 --> 00:00:02,600
Releases manuell zu verwalten ist langsam.

2
00:00:02,800 --> 00:00:05,400
Shipfast automatisiert die gesamte Pipeline.

Treibe in Remotion Untertitel aus demselben Timing-Array, das für Szenenschnitte verwendet wird, damit sie nie abdriften.

Stilsystem-Konsistenz

Lege eine Typografie-Skala, eine Farbgrammatik (Farbe = Bedeutung, niemals neu zugewiesen) und eine Easing-Kurve fest, bevor du Szene 2 baust. Verwende dieselben Ein-/Aus-Übergänge szenenübergreifend, damit das Stück wie ein Objekt wirkt, nicht wie eine Sammlung von Experimenten. Bilder müssen die gerade gesprochene VO-Zeile veranschaulichen – zeige, dekoriere nicht.

Ausgabe-Checkliste

• Einzige klare Botschaft; jede Szene bringt sie voran.
• VO getimed (~2,3 W/s); Szenenlängen aus VO abgeleitet.
• Storyboard ordnet jede VO-Zeile einem Bild zu.
• Untertitel eingebrannt/verfügbar; ≤2 Zeilen, lesbar.
• Konsistentes Typografie-/Farb-/Bewegungssystem über alle Szenen.
• Endkarte mit einem klaren CTA.

Ausliefern und überprüfen (gerenderte Standbilder → MP4)

Verpackter Helfer (scripts/): kachele deine Standbilder mit scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, überprüfe dann die Kodierung mit scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Siehe scripts/README.md.

Das zusammengesetzte Erklärvideo ist eine Remotion-Komposition – bilddeterministisch, sodass jedes exakte Bild ohne Suchvorrichtung headless gerendert werden kann. Verwende diese Stufe, wenn das Ergebnis ein MP4/GIF ist, das eine eingebackene Erzählung und eingebrannte Untertitel enthält; für eine einzelne Web-Szene liefere stattdessen eigenständiges HTML aus.

Ausgabevertrag:

• Ein Remotion-Projekt mit der registrierten Komposition (<Composition> + zod schema + defaultProps), alle Bewegungen frame-gesteuert (keine Timer / Date.now() / Math.random()).
• Ergebnis = das gerenderte out/*.mp4 (plus das Projekt, sodass VO/Drehbuch/Daten neu gerendert werden können).
• Erzählung via <Audio src={staticFile()}>; VO-/Szenen-Timing in Props eingebacken (kein Echtzeit-Audio beim Rendern). Untertitel von demselben Timing-Array gesteuert, sodass sie nie abdriften.
• Dauer datenabhängig? Berechne sie in calculateMetadata, nicht von Hand.

Überprüfungsschleife – Standbilder rendern → inspizieren → kodieren. Rendere zuerst einzelne Bilder (günstig, keine Kodierung), inspiziere sie, kodiere erst, wenn die Bilder richtig sind.

# Bildgenaue Standbilder am Anfang / Mitte / Ende – mit den AUSGELIEFERTEN Props rendern, nicht nur den Standardwerten
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# Inspizieren: Drehbuch → Storyboard → Szene wird auf Bilder abgebildet – nimm ein Bild innerhalb des Haltens JEDER Szene als Stichprobe,
# bestätige, dass Erzählzeile und Untertitel mit dem Bild zu diesem Zeitpunkt synchron sind, kein Textüberlauf / außerhalb der Leinwand.

# Erst nachdem die Standbilder überprüft wurden, kodieren:
npx remotion render Explainer out/explainer.mp4 --props='{...}'

• npx remotion compositions liest durationInFrames/fps, um das Endbild und die Haltebilder pro Szene auszuwählen.
• README-Demo-GIF gratis: npx remotion render Explainer out/demo.gif --codec=gif.

Bevor du abschließt:

1. npx remotion still rendert sauber bei Bild 0, einem Bild innerhalb des Haltens jeder Szene und dem letzten – keine Fehler, keine fehlenden Assets/Schriftarten.
2. Bei jedem als Stichprobe genommenen Szenenbild stimmen der Untertitel und die gesprochene VO-Zeile mit dem angezeigten Bild überein (kein Abdriften).
3. Untertitel befinden sich innerhalb der sicheren Bereiche, ≤2 Zeilen, lesbar; Text ist exakt und nicht abgeschnitten.
4. Nur frame-gesteuert – kein Date.now() / Math.random() / Timer; die ausgelieferten Props rendern korrekt (nicht nur defaultProps).
5. Vollständiges MP4 kodiert und mit Erzählung abspielbar; (optional) GIF für die README gerendert.

Referenzdateien

• references/script-to-screen-workflow.md – vollständige Pipeline-Details: die Problem→Lösung→Funktionsweise→Nutzen-Drehbuchformel mit einem ausgearbeiteten Beispiel und Wortbudget, VO-Timing-Tabellen, eine ausfüllbare Storyboard-Vorlage mit Zeitcodes, eine szenenweise Bau-Checkliste, Anleitung zur Untertitel-Erstellung (VTT/SRT) und ein Stilsystem-Spezifikationsblatt für szenenübergreifende Konsistenz.