ccreator-space/video-storytelling

Was macht video-storytelling?

Wie man die visuelle Ebene eines langformatigen Videos so aufbaut, dass ein Zuschauer auch in der neunten Minute noch orientiert ist. Gilt für jedes Talking-Head-Video mit einem Skript: eine Nachrichtenaufnahme, ein thematischer Deep Dive, ein Vergleich, ein Tutorial, ein Listicle.

Der Fehler, den dies ersetzt, ist das Szenendenken. Eine neue Grafik alle paar Sekunden zwingt den Zuschauer, alle paar Sekunden das Verständnis neu aufzubauen, und keine einzelne Grafik ist schuld, weshalb das Feedback als vages „verwirrend“ oder „zu viel los“ zurückkommt, anstatt als ein spezifischer Defekt.

Eine neutrale Übungs-Beat-Sheet findest du in docs/STORYTELLING-WORKBOOK.md im Repository-Stammverzeichnis. Das wiederverwendbare Designsystem befindet sich in reference/design-system.md dieser Skill; die ausgearbeitete Open-Loop-Geometrie in reference/patterns/wall-of-slots/. Private Quellvideos sind nicht erforderlich.

Dies ist nicht hyperframes-video-beats. Diese Skill platziert Overlay-Karten über einem Talking Head. Diese hier entwirft das Ding, worum es in dem Video geht.

1 · Die vier Prinzipien

Eine beständige Welt

Das Video lebt in einem einzigen Raum und wird nie zurückgesetzt. Alles, was der Zuschauer bereits gesehen hat, existiert noch dort, wo es verlassen wurde, und neues Material wird hinzugefügt, anstatt es zu ersetzen. Ein einmal gezeichnetes Element wird nie neu gezeichnet, verschoben oder umbenannt.

Alles andere in dieser Skill hängt davon ab. Die Kamera hat keinen Ort, an den sie gehen kann, wenn sich der Raum ständig ändert, ein Spotlight bedeutet nichts, wenn sonst nichts auf dem Bildschirm ist, und eine offene Schleife kann in einer Welt, die zurückgesetzt wird, nicht offen bleiben.

Die Welt muss es auch wert sein, darin zu verweilen, also lege die räumliche Grammatik fest, bevor du etwas baust, und halte sie für die gesamte Laufzeit ein. Im Referenz-Build: von links nach rechts geht es auf das Ergebnis zu, nach oben geht es zu einem Menschen und ist die einzige warme Sache auf dem Bildschirm, nach unten geht es in ein System of Record. Ein Zuschauer, der das in den ersten zwei Minuten lernt, liest den Rest des Videos kostenlos.

Brich die Grammatik genau einmal, absichtlich, um eine Bedeutung zu erzeugen. Die einzige Rechts-nach-Links-Bewegung des Referenz-Builds in zehn Minuten ist ein gelöstes Ticket, das auf die Wörter „Reopen Rate“ zurück in die Warteschlange zurückgesetzt wird. Es landet ohne ein Wort, weil die Richtung in den vorherigen drei Minuten etwas bedeutet hatte.

Die Kamera ist der Schnitt

Ein Schnitt zu einer neuen Grafik kostet den Zuschauer jedes Mal seine Orientierung. Die Bewegung durch einen Raum, der an Ort und Stelle bleibt, kostet nichts. Ein Hereinzoomen wird dann als „schau genauer auf den Teil des Dings, den du bereits verstehst“ gelesen, und das Herauszoomen ist der Ort, an dem sich die Arbeit auszahlt, weil alles, was bisher gebaut wurde, noch da ist.

Arbeite in drei Höhenstufen und bewege dich zwischen benachbarten:

Höhenstufe	Zeigt	Verwendet für
Welt	den gesamten Raum	Orientierung, Auszahlungen, „hier sind wir“
Region	den Teilgraphen unter Diskussion	den Großteil der Laufzeit
Detail	ein Element	eine Zahl, eine Zustandsänderung, eine Entscheidung

Ein Sprung vom Detail zur Welt ist desorientierend, es sei denn, es ist ein bewusster Auszahlungsbeat, in welchem Fall es der beste verfügbare Move ist.

Regeln, die jeweils einen Neubau kosten, um sie zu lernen:

• Benenne Framings als exakte Weltfenster, nicht als Skalierungsfaktoren. Fenstergrenzen müssen zwischen Beschriftungen fallen. Die Angabe eines Framings als „Skalierung 0.6“ schneidet Wörter am Bildrand entzwei.
• Verwende dasselbe Fenster für denselben Zweck wieder. Wenn der Orientierungsschuss ein bestimmtes Fenster ist, verwende immer genau dieses Fenster. Beinahe identische Framings wirken wie Drift.
• Variiere die Dauer mit der zurückgelegten Distanz, nicht mit einer globalen Voreinstellung.
• Kamera- und Vollbild-Wipes sequenzieren, niemals überlappen. Gleichzeitig guillotinieren sie den Inhalt. Zuerst Kamera, dann Wipe.
• Eine Deckschicht wird undurchsichtig, bevor sich die Kamera darunter bewegt. Umgekehrt wird ein Teil der Bewegung sichtbar und wirkt wie ein Jump Cut.
• Keine Beschriftung innerhalb von 60px vom Bildrand. Ein Element kann über den Rand ragen und als „die Welt geht weiter“ gelesen werden; ein Wort, das in der Mitte einer Glyphe abgeschnitten wird, wirkt wie ein Bug. Löse es durch Platzierung, nicht durch Maskierung, da eine Weichzeichnung keine Klinge einfangen kann, die mit ~1800 px/s reist.
• Zwei aufeinanderfolgende Bewegungen zum selben Subjekt wirken wie ein Glitch. Ein Reframe, der endet, und DANN ein Wipe, der beginnt, ist ein Zoom, ein toter Stopp und eine zweite Bewegung – der Kunde nennt es „einen Glitch und eine Pause“. Verschmelze sie zu EINER Geste: gemeinsame symmetrische Beschleunigung (power2.inOut), die auf demselben Frame landet, sodass das Panel das Filmmaterial zur Seite schiebt. Verwandt: Frontgeladene Eases (power3/4.out) bei einer sichtbaren Filmmaterial-Bewegung laden ~90 % des Wegs vor und kriechen zum Stillstand; reserviere sie für Elementeingänge, wo das Kriechen als Setzen gelesen wird. (Hat eine vom Kunden markierte Revision in der bearbeiteten Beispiel-Einleitung gekostet.)

Aufmerksamkeit ist ein Spotlight

Genau ein Element zu jeder Zeit in voller Helligkeit. Alles andere, das bereits gezeichnet wurde, bleibt leise, aber lesbar. Nicht optional. Das ist die Regel, die es einer Welt erlaubt, auf ein Dutzend Elemente anzuwachsen, ohne sich jemals überladen anzufühlen, und die das Herauszoomen lesbar macht, anstatt überwältigend.

Hierarchie entsteht aus dem VERHÄLTNIS zwischen aktiv und leise, niemals dadurch, alles dunkel zu machen. Der erste Prototyp des Referenz-Builds hatte einen hellsten Pixel von 101/255 und war bei 960x540 unlesbar; die Lösung war hellere Tinte, nicht mehr Dunkelheit.

Zustand	Zielluma (Y, 16-235)	Deckkraft im Referenz-Build
Aktiver Strich + Beschriftung	200-235	1.0
Kontext, gezeichnet und noch relevant	120-150	0.56
Erledigt, hat seinen Beitrag geleistet	85-105	0.33
Jede Beschriftung, jeder Zustand	niemals unter 90

Implementierung ist eine Funktion, die bei jedem Erzähl-Beat mit den besprochenen IDs aufgerufen wird (build_s01.py, lit()):

def lit(t, active, warm=(), dur=0.5, floor=FLOOR):
    active = list(active) + [g + "-l" for g in active if g + "-l" in order]
    for gid in order:
        if gid not in opac:      # nie gezeichnet: nichts zu beleuchten
            continue
        tgt = 1.0 if gid in active else (WARM if gid in warm else floor)
        if gid not in active:
            tgt = min(tgt, MUTED.get(gid, 1.0))
        ...

Drei Details darin sind tragend:

• Eine Beschriftung erbt immer den Zustand ihres Elements (die -l Suffix-Zusammenführung). Ein beleuchtetes Element mit einer unlesbaren Beschriftung darunter ist genau der Defekt, der behoben wird.
• Ein Requisit, das fertig ist, geht auf Deckkraft 0 zurück, über eine MUTED-Begrenzung, nicht auf 0.3. Das Dimmen auf 0.3 hinterlässt unerklärliche Konfetti für den Rest des Abschnitts auf dem Bildschirm. Generator-Regel: Gib das mute() vor jedem später startenden lit() aus, sonst wird die Stummschaltung überschrieben, wenn ihre Überblendung abgeschlossen ist.
• Deckkraft-Ereignisse müssen in der Chronologie-Reihenfolge ausgegeben werden, sonst sieht der Tracker veralteten Zustand und berechnet das falsche Ziel. Verwende eine seq()-Wache, die bei einer Ausgabe außerhalb der Reihenfolge einen Fehler auslöst.
• Eine Deckkraft-Autorität pro Element pro Fenster. Zwei gleichzeitig aktive Überblendungen, die dasselbe Ziel für die Deckkraft eines Elements antreiben, rendern in einem eigenständigen Abschnitt glatt, aber stroben im zusammengesetzten Master mit ~10 Hz, wo die gewinnende Überblendung pro Frame wechselt. Der Referenz-Build hatte diesen Defekt an jedem Andockpunkt. Wenn eine Abtastung wie lit() eine explizite Aufhellung oder Stummschaltung überlappt, ist die später startende Überblendung der alleinige Treiber und die Abtastung überspringt diese IDs (lit(..., skip=(...))). Prüfe es: Scanne zusammengesetzte Renderings auf Ein-Frame-Hin-und-zurück-Luminanz-Pops in jedem Übergangsfenster (qa/v4/flicker/qa-flicker.mjs im Referenz-Build).

Offene Schleifen sind räumlich

Sage niemals „darauf kommen wir zurück.“ Lasse etwas sichtbar Unvollständiges in der Welt zurück und kehre dorthin zurück. Ein Versprechen, das der Zuschauer sehen kann, ist ein Versprechen, dessen Erfüllung er spüren kann.

Der Mechanismus ist unabhängig von der Form identisch:

1. Pflanze es im Haken, im Raum, in der Zeile, die das Versprechen macht.
2. Zeige es an jeder Grenze erneut. Jede Abschnittsübergabe ist eine Grenze. Das erneute Zeigen kostet etwa zwei Sekunden und ist der Bindungsmechanismus; es zu überspringen ist der Weg, wie eine Auszahlung letztlich nichts auszahlt.
3. Mache es sichtbar voran. Der Zuschauer muss sehen, wie die Unvollständigkeit schrumpft.
4. Schließe mit dem Bild, mit dem du geöffnet hast.

Wähle die Form aus dem Skript:

Skript-Form	Die Welt	Was ist unvollständig
N parallele Elemente	N Steckplätze auf einer Wirbelsäule	leere Slots (siehe reference/patterns/wall-of-slots/)
Ein Prozess, tief	die gesamte Pipeline, ausgelegt	ein defektes oder fehlendes Glied
Ebenen oder Stufen	ein Stapel, der nach oben wächst	die Spitze des Stapels ist ein Geist
Vergleich	zwei Spalten auf einer gemeinsamen Achse	eine Spalte leer oder eine ungefüllte Bewertungstafel
Nachricht oder Ankündigung	eine Zeitleiste oder eine Landschaftskarte	die rechte Seite, die Zukunft, ist leer
Tutorial oder Build-Along	die fertige Architektur, ausgegraut	jeder noch nicht gebaute Knoten

Das Einfügen eines Bildes in seinen Steckplatz ist eine Live-Kamerabewegung, ~1,4 s, niemals ein Schnitt zu einem vorgefertigten Bild des gefüllten Zustands. Der Zuschauer sieht zu, wie das Ding, das er gerade gelernt hat, zur Kachel wird. Wenn das Video eine Zahl oder einen Zähler hat, rolle ihn innerhalb derselben Bewegung, wie einen Kilometerzähler, mit demselben Start, derselben Dauer und derselben Beschleunigung für beide Ziffern, sonst verschmelzen sie in der Mitte der Rolle zu einem Band.

Der Zähler braucht einen Namen, nicht nur eine Nummer. Eine Eckzahl sagt dem Zuschauer, wo in der Sequenz er sich befindet, aber nicht, was das aktuelle Element ist; nach neun Minuten trägt „03“ nichts bei. Kombiniere die Zahl mit einer 1-2-Wort-Beschriftung, die das aktuelle Element benennt (SUPPORT, VOICE AI), in derselben Plattenchemie, bewegt sich als eine starre Einheit mit der Zahl und wechselt innerhalb derselben Kilometerzähler-Rolle. Die Kundenprüfung des Referenz-Builds hat genau danach gefragt: die Bilder waren gut und der Zuschucher verlor trotzdem den Überblick, welcher Anwendungsfall auf dem Bildschirm war.

2 · Disziplin

Wenn es kein Wort bekommt, wird es nicht gezeichnet

Jede Form ist ein beschriftetes Element, ein Verbinder zwischen beschrifteten Elementen, das reisende Subjekt oder der ambienten Hintergrund. Nichts sonst.

Dies kam von einer Stummschaltungstest-Überprüfung, die das Verständnis mit 7/10 bewertete und die Ursache benannte: Das Diagramm war sauber, die Dekorationen nicht. Ein Dutzend unbeschrifteter Formen, gezeichnet in derselben Strichstärke und Palette wie die bedeutungsvollen, sodass ein Erstzuschauer Signal nicht von Textur unterscheiden kann und echte Aufmerksamkeit darauf verwendet, Dinge zu entschlüsseln, die nie entschlüsselt werden sollten. Das ist „zu viel los“, verlagert von Wörtern in Formen.

Budget: ~20 Wörter auf dem Bildschirm pro Abschnitt. Keine Sätze. Beschriftungen sind 1-2 Wörter, unter ihrem Element. Der Referenzabschnitt 1 hat 21 Wörter in 84 Sekunden.

Folgerung: Ein Anti-Pattern-Visual überlagert niemals die Empfehlung. Bringe die Welt zuerst nahe an Schwarz oder platziere das Gegenbeispiel dort, wo das gute Diagramm nicht ist.

Gib dem Zuschauer eine Sache, der er folgen kann

Trage die Geschichte auf einem einzigen reisenden Subjekt, dessen Zustand sich sichtbar ändert: ein Chip mit Datenzeilen und einer Bewertungsleiste, ein Dokument, eine Anfrage. Zeilen füllen sich, eine Leiste bewegt sich, eine Grenze ändert ihre Farbe. Ein Zuschauer muss einen gesamten Abschnitt verfolgen können, indem er dieses eine Objekt beobachtet, und es darf niemals teleportieren; es bewegt sich entlang gezeichneter Verbinder mit konstanter Geschwindigkeit.

Ein globaler Token-Satz

Vollständige Details in reference/design-system.md.

Token	Werte
Strich	1.5 / 2.5 / 4 / 7 und nichts sonst
Schrift	22 / 30 / 42 / 60 / 84
Radius	10 / 22 / 40, immer superellipse(2)

Fünf Farben, fünf festgelegte Bedeutungen, null Dekoration. Warm bedeutet, dass ein Mensch beteiligt ist, und nichts anderes ist jemals warm. Niemals reines Weiß für Schrift; es überstrahlt auf Dunklem.

Der Fehler, den dies verhindert, aus der handwerklichen Überprüfung des ersten Baus: „Jede Entscheidung wurde lokal und korrekt getroffen; keine Entscheidung wurde global getroffen.“ 18 Strichstärken und 9 Schriftgrößen, die meisten 0,2 auseinander, einzeln unsichtbar und gemeinsam tödlich. Das Auge bekommt Rauschen statt Hierarchie. Prüfe es mit einem Token-Linter, der den Build fehlschlagen lässt.

Bewegung

Eingänge mit cubic-bezier(0.16,1,0.3,1), Ausgänge schneller als Eingänge, Dauer variiert mit der Masse, sodass ein 290px-Knoten und eine 40px-Beschriftung nicht identisch abbremsen, und back.out genau einmal pro Abschnitt, auf dem Beat, der es verdient.

Niemals einen Crossfade. Vollflächige Ebenen betreten und verlassen die Szene durch eine Beschneidung auf einem bereits undurchsichtigen Hintergrund. Zu jedem Zeitpunkt ist ein Pixel entweder Grafik oder Filmmaterial.

3 · Bauvertrag

• Ein Generator pro Abschnitt. scripts/build_<id>.py schreibt nur compositions/<id>.html. Bearbeite den Generator, niemals das generierte HTML. Abschnitts-Wurzeln index-*.html werden manuell gepflegt, daher gehen Framing-Änderungen dorthin.
• Geteilte Module bleiben geteilt. Alles, was gemeinsame Geometrie definiert, wird von jedem Abschnitt importiert. Wenn Abschnitte von parallelen Agenten gebaut werden, verbiete ihnen, die geteilten Module zu berühren; abweichende Geometrie bricht stillschweigend jede Übergabe.
• Namespace die SVG-Defs vor der Montage. Jeder Abschnitt definiert seine eigenen gEdge, shadow, edgeFade. In einem zusammengesetzten DOM löst url(#id) den ersten Treffer in der Dokumentenreihenfolge auf, sobald eine frühere Komposition ausgehängt wird, malt jede spätere Grafik nichts. Kosten im Referenz-Build: 35 Sekunden leerer Bildschirm, bei dem jedes Gate grün war. Nur der Blick auf das zusammengesetzte Rendering hat es erwischt.
• Timing auf Wortanfänge aus einem Wort-für-Wort-Transkript, 0,15-0,25s vor dem Ankerwort eintretend. Teile einen Abschnitt niemals gleichmäßig in Beats auf.
• Überprüfe Lücken. Jeder Abschnitt von über ~1,5 s, in dem nichts passiert, ist ein toter Bildschirm; lass den Generator sie ausgeben.
• Lasse Luft im Schnitt. Aggressives Begrenzen von Pausen erzeugt nahezu Null-Lücken an Satzgrenzen, die der Kunde als „Stottern“ und Jump Cuts hört. Kalibriere gegen die eigene Norm des Sprechers: Markiere Satzgrenzen-Lücken, die ~10x enger sind als ihr Median (der Referenzsprecher hatte 470 ms; die markierten Übergänge lagen bei 20-40 ms), und repariere sie, indem du 4-8 Frames Luft einfügst, Wörter werden nie berührt. Luft ist eine gespendete Scheibe des echten Raumklangs der Spur mit 10 ms Ein- und Ausblendungen, niemals anullsrc: Digitale Stille bei einem Pegel von -50 dBFS ist ein hörbarer Aussetzer. Das Video hält das Bild; zwischen Sätzen ist ein Talking Head nahezu still und 4-8 Frames Halten sind unsichtbar. Änderungen nur durch Einfügen verschieben das Transkript deterministisch, daher ist keine erneute Transkription erforderlich. Die Kanten einer Einfügung müssen die Sprachhülle respektieren: Das Ansetzen von gespendetem Ton an ein Wortende in 1 ms am

...

[abgeschnitten für die Übersetzung]