Kurzvideo (Short-Form Video)
Ein 9:16-Video entwickeln, das den Wisch überlebt. Kurzvideo ist kein kleiner Launch-Film – es ist eine Retentionsmaschine: ein Hook, der die erste Sekunde verdient, Pattern-Interrupts, die die Aufmerksamkeit alle paar Sekunden zurücksetzen, und oft ein Loop, der die Wiedergabezeit auf über 100 % treibt. Die Kunst liegt im Timing, nicht in der Perfektion.
Wann verwenden
- Reels / TikTok / YouTube Shorts (7–60s, vertikal 9:16).
- Retentions-Editing: Drop-off beheben, Pattern-Interrupts hinzufügen, Tempo straffen.
- Hooks, nahtlose Loops, wiederverwendbare Kurzvideo-Vorlagen (ein Design, viele Themen).
Geschichtsstruktur (der Retentionsvertrag)
Kurzvideo-Erzählung ist ein Vertrag mit dem Daumen des Betrachters: Jede Sekunde muss die nächste wieder verdienen. Die Erzählung wird rückwärts von der Retentionskurve aus geformt, nicht vorwärts von einer Einleitung aus. Stelle diese sicher, bevor du die Zeitleiste berührst.
- Eine Idee pro Video. Ein Kurzvideo enthält genau einen Payoff. Eine zweite Idee teilt die Aufmerksamkeit und die Kurve sackt in der Mitte ab – mach stattdessen ein zweites Video daraus. Wenn du die einzelne Kernaussage nicht in einem Satz benennen kannst, hast du noch kein Kurzvideo.
- Öffne einen Loop in den ersten ~3s, schließe ihn am Ende. Der Hook stellt eine Frage oder eine Lücke (den offenen Loop); der Payoff beantwortet sie. Der Betrachter bleibt, weil der Loop offen ist – also beantworte ihn nie früh, und begrabe den Payoff nie unter einem Aufbau.
- Keine tote Luft. Jeder Beat treibt entweder die Idee voran oder setzt die Aufmerksamkeit zurück. Schneide alles, was keins von beidem tut. Stille, langsame Rampen, räuspernde Intros („Hey Leute, in diesem Video...“) sind der Moment, in dem Zuschauer weiterswipen.
- Warum die Kurve, nicht der Schnitt, die Arbeitseinheit ist. Der Algorithmus verteilt, was die Retentionskurve pro Sekunde flach hält; ein „guter“ Schnitt, der die Kurve abflacht, verliert gegen einen hässlichen, der sie oben hält. Du bearbeitest die Kurve, und der Hook bestimmt alles, was danach kommt – repariere ihn zuerst.
Das narrative Rückgrat (der Hook → Aufbau → Hauptteil → Payoff/Loop-Bogen ist in der folgenden Tabelle budgetiert):
| Bewegungsabschnitt | Story-Aufgabe | Fehler, wenn verfehlt |
|---|---|---|
| Hook | Loop öffnen; Payoff versprechen | Wischen in den ersten 3s |
| Spannung halten | Lücke im Hauptteil offen halten | Flache Mitte, mittlerer Abfall |
| Payoff | Loop schließen – die eine Idee, geliefert | „Zeitverschwendung“, kein Teilen |
| Loop / CTA | Zurück zu Frame 0 führen, oder eine klare Aufforderung | Kein erneutes Ansehen, keine Aktion |
(Der Retentionsbogen-Tabelle unten weist jeder Bewegungsabschnitt Sekunden zu; dieser Abschnitt ist die narrative Logik und Reihenfolge dahinter. Die Hook-Grammatik listet die Hook-Archetypen auf.)
Die eine Metrik, die alles antreibt
Retention, nicht Produktionswert. Der Algorithmus verteilt, was die Zuschauer hält; ~87 % entscheiden sich innerhalb von 3 Sekunden zu bleiben oder zu wischen, und die Schwelle für die Verteilung liegt bei etwa 70 %+ durchschnittlicher View-Through-Rate (Shorts ~73 %, TikTok ~78 %, Reels ~65 %). Jede Entscheidung unten wird gegen diese Kurve abgewogen. Eine makellose Einstellung, die bei 0:04 langweilt, verliert gegen eine hässliche, die die Zuschauer hält.
Der Retentionsbogen
| Beat | Aufgabe | Budget (eines 20s-Kurzvideos) |
|---|---|---|
| Hook (0–1s) | Ein Frame + ein Satz, der einen offenen Loop erzeugt | 0–1s |
| Aufbau | Einlösen, warum zuschauen – Versprechen, Einsatz oder Lücke | 1–4s |
| Hauptteil | Wert in Beats liefern; eine Idee pro Beat | 4–17s |
| Payoff / Loop | Loop schließen – oder zurück zu Frame 0 führen | 17–20s |
Skaliere den Hauptteil, niemals den Hook. Ein 60s-Kurzvideo hat einen längeren Hauptteil und mehr Beats – denselben 1-Sekunden-Hook.
Hook-Grammatik (erste ~1s)
Der Hook ist ein Satz + ein Bild, das eine Neugierde-Lücke öffnet, die das Gehirn schließen muss. Wähle ein Muster aus und bleibe dabei:
| Hook-Typ | Form | Am besten geeignet für |
|---|---|---|
| Offener Loop | „Der Grund, warum dein X weiterhin Y tut...“ (Antwort verzögert) | die meisten Inhalte |
| Direktes Versprechen | „3 Wege, um ___ in 30 Sekunden“ | Lehrreich / Liste |
| Pattern Interrupt | Snap-Zoom / Whip-Pan / visuelle Diskrepanz in Frame 1 | Unterhaltung |
| Negation | „Hör auf, ___ zu tun“ / „Du machst ___ falsch“ | starke Meinungen |
Zwei Regeln: Der Hook-Satz ist als Text auf dem Bildschirm ab Frame 1 (85 % schauen stumm), und das auffälligste Bild ist auch der erste Frame – niemals eine langsame Einblendung. Halte einen starken Eröffnungsframe; blende nicht aus Schwarz hoch.
Pattern Interrupts & Schnittrhythmus
Ein Pattern Interrupt ist jede Änderung, die die Aufmerksamkeit zurücksetzt: ein harter Schnitt, Zoom-Impuls, B-Roll-Einschub, Soundeffekt, Caption-Pop, Winkelwechsel. In Kurzvideos ist die Dichte hoch – eine visuelle Änderung alle ~3-4 Sekunden; Videos mit einem Interrupt etwa alle 4s halten ~58 % vs. ~41 % für einen statischen Sprecherkopf. Der Killer ist eine flache Mitte: TikTok drosselt die Verteilung, wenn die Zuschauerkurve abflacht, also setze den Hauptteil nie aus energiearmen Takes zusammen.
// Jeden Interrupt am FRAME ausrichten, nicht an der Wanduhr – läuft deterministisch.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // Sekunden – absichtlich ungleichmäßig
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);
Variiere das Intervall – ein Metronom wirkt langweilig; ungleichmäßige Schnitte wirken wie Dynamik. Ein Punch-In-Zoom ist der günstigste Interrupt, der kein neues Material benötigt:
import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
const frame = useCurrentFrame(); const { fps } = useVideoConfig();
const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
const scale = interpolate(s, [0, 1], [1, 1.12]); // auf 112 % auf den Takt springen
return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};
Captions
Die meisten Zuschauer schauen stumm, daher sind Bildschirm-Captions nicht optional – sie tragen den Inhalt und dienen gleichzeitig als Pattern Interrupt, wenn jede Phrase eingeblendet wird. Halte 4–7 Wörter pro Zeile, hohen Kontrast, innerhalb der Safe Area. Die Caption-Animation hier nicht neu implementieren – verwende das caption-animation-Skill für die wortweise Zeitsteuerung, Karaoke-Hervorhebung und Styling; dieses Skill platziert Captions nur auf der Retentionszeitleiste und innerhalb der 9:16-Safe-Zone.
Loops & erneutes Ansehen
Ein nahtloser Loop zählt jedes erneute Ansehen als frische Wiedergabezeit – ein sauberer 8s-Loop, der 3× angesehen wird, ergibt 300 % View-Through, das stärkste mögliche Signal. Zwei Techniken: den letzten Frame an den ersten anpassen (gleiche Komposition, Position, Farbe), sodass der Schnitt unsichtbar ist, und einen Satz-Loop schreiben – den Hook so formulieren, dass der Payoff zurück zu Frame 0 führt („...und deshalb habe ich nie – “ → loopt zum Anfang). Beste Länge für erneutes Ansehen ist ~7–15s.
9:16-Safe-Areas
Komponiere innerhalb der universellen Safe Zone, damit die Plattform-UI niemals Text oder Gesichter verdeckt.
| Zone | Pixel (1080×1920) | Vermeiden |
|---|---|---|
| Universell sicher (alle Plattformen) | Mitte 900×1400 | alles Kritische außerhalb |
| Oben | ~120px frei lassen | Profil / Sound-UI |
| Unten | ~320px frei lassen | Captions, CTA, Hashtags, Audio-Leiste |
| Rechts | ~120px frei lassen | Like / Kommentar / Teilen-Leiste |
Platziere den Hook-Text und das Schlüsselsubjekt im mittleren 900×1400-Box. Halte die unteren ~320px frei, auch wenn es im Editor leer aussieht – dort platziert die Plattform ihre eigenen Captions und Buttons.
Ausgabe-Checkliste
- Hook-Satz ist als Bildschirmtext ab Frame 1 sichtbar; stärkstes Bild ist der erste Frame (keine Einblendung).
- Ein offener Loop / Versprechen in den ersten ~4s gesetzt.
- Ein visueller Pattern Interrupt alle ~2–4s; Intervalle ungleichmäßig; keine flache Mitte.
- Captions vorhanden (via
caption-animation), 4–7 Wörter, innerhalb der Safe Area. - Loop geschlossen – angepasster erster/letzter Frame oder ein Satz, der zu Frame 0 führt.
- In der mittleren 900×1400-Box komponiert; untere 320px / obere 120px / rechte 120px freigehalten.
- Jeder animierte Wert von
useCurrentFrame()abgeleitet – keine CSS/Bibliotheks-Timer.
Ausliefern & überprüfen (gerenderte Standbilder → MP4)
Verpacktes Hilfsprogramm (
scripts/): Deine Standbilder mitscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.pngnebeneinander anordnen, dann die Kodierung mitscripts/probe-mp4.sh out.mp4 [WxH] [fps]überprüfen. Siehescripts/README.md.
Das Kurzvideo wird als Remotion-Komposition (<Composition> + zod schema + defaultProps) ausgeliefert – jeder Schnitt, Punch-In und Interrupt gesteuert von useCurrentFrame(), niemals von Date.now() / Math.random() / Timern. Liefergegenstand = out/*.mp4 + das Projekt (erneutes Rendern pro Thema). 9:16 Vertikal (1080×1920) ist der Standard.
Überprüfungsschleife – Standbilder rendern → inspizieren → kodieren. Drei Frames testen die drei Dinge, die die Retention ausmachen oder brechen: den Hook, das Tempo und die Loop-Naht.
# Standbilder bei Hook / Mitte / letztem Frame – MIT AUSGELIEFERTEN PROPS (dem echten Thema, nicht den Standardeinstellungen)
npx remotion still Short out/f-hook.png --frame=10 --props='{"topic":"...","hook":"..."}' # ~erste 3s sind sofort lesbar
npx remotion still Short out/f-mid.png --frame=N --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png --frame=L --props='{"topic":"...","hook":"..."}' # L = durationInFrames-1
# Jedes PNG inspizieren:
# - HOOK-Frame (~Frame 0 / erste 3s): Hook-Satz ist Bildschirmtext und sofort lesbar; stärkstes Bild bereits oben (keine Einblendung)
# - LOOP-Naht: f-hook(Frame 0) vs f-end( letzter Frame) vergleichen – gleiche Komposition/Position/Farbe für einen unsichtbaren Loop-Schnitt
# - 9:16-Safe-Area: Hook + Schlüsselsubjekt innerhalb der mittleren 900×1400-Box; frei von oben ~12 %, unten ~20-35 % (Captions/CTA/Audio), rechter Action-Rail
npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}' # Einmal kodieren, sobald Standbilder verifiziert sind
npx remotion render Short out/demo.gif --codec=gif # README-Proof-Clip
Pro Thema / Batch: Ein Thema über Standbilder überprüfen, bevor alle gerendert werden. Verwende npx remotion compositions für durationInFrames/fps, um die mittleren und letzten Frames auszuwählen.
Bevor du abschließt:
- Standbilder rendern sauber am Hook, in der Mitte und am letzten Frame – keine Fehler.
- Der Hook-Frame ist sofort lesbar (Bildschirmtext + stärkstes Bild vorne, keine Einblendung); erster vs. letzter Frame stimmen für eine saubere Loop-Naht überein.
- Hook + Subjekt + Captions sitzen bei jedem überprüften Frame innerhalb der 9:16-Mitte 900×1400 Safe Box.
- Nur Frame-gesteuert – keine
Date.now()/Math.random()/ Timer; Schnitte ungleichmäßig, keine flache Mitte. - Die ausgelieferten Props eines echten Themas (nicht
defaultProps) rendern korrekt; MP4 kodiert, GIF optional.
Referenzdateien
references/retention-pacing.md– eine vollständig ausführbare Remotion<Short>-Komposition: ein Frame-gesteuerter Shot-Planer mit ungleichmäßigen Schnitten, dem PunchIn-Pattern-Interrupt, einem Bildschirm-Hook, einer 9:16-Safe-Area-Überlagerung und einem nahtlosen Loop aus erstem/letztem Frame. Dazu eine Hook-Pattern-Bibliothek, eine Retentionskurve-Debugging-Methode, plattformspezifische Safe-Zone-Karten und das Vorlagen×Thema-Batch-Render-Muster.