SaviourV2/video-storytelling

Was macht video-storytelling?

Wie man die visuelle Ebene eines langen Videos so aufbaut, dass der Zuschauer auch nach neun Minuten noch orientiert ist. Anwendbar für jedes Talking-Head-Video mit einem Skript: ein Nachrichtenbeitrag, ein tiefer Einblick in ein Thema, ein Vergleich, ein Tutorial, ein Listicle.

Der Fehler, den dies ersetzt, ist das Szenen-Denken. Eine neue Grafik alle paar Sekunden zwingt den Zuschauer, alle paar Sekunden neu zu verstehen, und keine einzelne Grafik ist schuld, weshalb das Feedback als vages „verwirrend“ oder „zu viel los“ zurückkommt, anstatt als spezifischer Fehler.

Für ein neutrales Übungs-Blatt lies docs/STORYTELLING-WORKBOOK.md im Repository-Stammverzeichnis. Das wiederverwendbare Designsystem befindet sich in dieser Fähigkeit unter reference/design-system.md; die ausgearbeitete offene Schleifen-Geometrie unter reference/patterns/wall-of-slots/. Private Quellvideos sind nicht erforderlich.

Dies ist nicht hyperframes-video-beats. Diese Fähigkeit platziert Overlay-Karten über einem sprechenden Kopf. Diese hier entwirft das, worum es in dem Video geht.

1 · Die vier Prinzipien

Eine persistente Welt

Das Video lebt in einem einzigen Raum und wird niemals zurückgesetzt. Alles, was der Zuschauer bereits gesehen hat, existiert noch dort, wo es war, 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 Fähigkeit hängt davon ab. Die Kamera hat keinen Ort, an den sie gehen kann, wenn sich der Raum ständig ändert, ein Scheinwerfer bedeutet nichts, wenn nichts anderes 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, in ihr zu bleiben. Entscheide daher die räumliche Grammatik, bevor du etwas baust, und halte sie für die gesamte Laufzeit ein. Im Referenzaufbau: von links nach rechts ist das Ziel, oben ist ein Mensch und das Einzige Warme auf dem Bildschirm, unten ist 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, bewusst, für eine Bedeutung. Die einzige Rechts-nach-links-Bewegung des Referenzaufbaus in zehn Minuten ist ein gelöster Ticket, das zurück in die Warteschlange wandert, bei den Worten „Reopen Rate“. 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. Eine Bewegung durch einen Raum, der bestehen bleibt, kostet nichts. Ein Hereinzoomen wird dann als „schau genauer auf den Teil der Sache, den du bereits verstehst“ gelesen, und das Herauszoomen ist der Moment, in dem sich die Arbeit auszahlt, weil alles, was bisher gebaut wurde, noch da ist.

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

Höhe	Zeigt	Verwendung
Welt	den gesamten Raum	Orientierung, Höhepunkte, „hier sind wir“
Region	den Teilgraphen, der besprochen wird	den größten Teil der Laufzeit
Detail	ein Element	eine Zahl, eine Zustandsänderung, eine Entscheidung

Ein Sprung von Detail zu Welt ist desorientierend, es sei denn, es ist ein bewusster Höhepunkt, in welchem Fall es der beste verfügbare Move ist.

Regeln, deren Missachtung jeweils einen Neubau kostet:

• Benenne Bildausschnitte als exakte Weltfenster, nicht als Skalierungsfaktoren. Fenstergrenzen müssen zwischen Labels fallen. Die Angabe eines Bildausschnitts als „Skalierung 0.6“ schneidet Wörter am Bildrand entzwei.
• Verwende dasselbe Fenster für denselben Zweck. Wenn der Orientierungsshot ein bestimmtes Fenster ist, verwende immer genau dieses Fenster. Fast identische Bildausschnitte wirken wie Drift.
• Variiere die Dauer mit der zurückgelegten Strecke, nicht mit einer globalen Voreinstellung.
• Kamera- und Vollbildwischer sequenziell, nie überlappend. Gleichzeitig guillotinieren sie den Inhalt. Zuerst die Kamera, dann der Wischer.
• Eine Abdeckebene wird undurchsichtig, bevor die Kamera sich darunter bewegt. Umgekehrt wird ein Teil der Bewegung sichtbar und wirkt wie ein Jump Cut.
• Kein Label innerhalb von 60px vom Bildrand. Ein Element kann über den Rand ragen und als „die Welt geht weiter“ gelesen werden; ein Wort, das mitten in der Glyphe abgeschnitten wird, wirkt wie ein Fehler. Löse es durch Platzierung, nicht durch Maskierung, da eine Weichzeichnung keine Klinge einfangen kann, die mit ~1800 px/s unterwegs ist.
• Zwei aufeinanderfolgende Bewegungen zum selben Motiv wirken wie ein Glitch. Ein Reframe, der endet, und DANN ein Wischer, der beginnt, ist ein Zoom, ein toter Stopp und eine zweite Bewegung – der Kunde nennt es „ein Glitch und eine Pause“. Verschmelze sie zu EINER Geste: gemeinsame symmetrische Easings (power2.inOut), die auf demselben Bild landen, sodass das Panel so wirkt, als würde es das Filmmaterial zur Seite schieben. Verwandt: Front-geladene Easings (power3/4.out) bei einer Bewegung von sichtbarem Filmmaterial front-laden ~90% der Bewegung und kriechen zum Stillstand; hebe sie für Element-Eingänge auf, wo das Kriechen wie ein Einrichten wirkt. (Hat eine kundenseitig beanstandete Revision in der Einleitung des Arbeitsbeispiels gekostet.)

Aufmerksamkeit ist ein Scheinwerfer

Genau ein Element zu jeder Zeit in voller Helligkeit. Alles andere, bereits Gezeichnete bleibt leise, aber lesbar. Nicht optional. Dies 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 Referenzaufbaus hatte einen hellsten Pixel von 101/255 und war bei 960x540 unlesbar; die Lösung war hellere Tinte, nicht noch mehr Abdunkeln.

Zustand	Ziel-Luma (Y, 16-235)	Opazität im Referenzaufbau
Aktiver Stroke + Label	200-235	1.0
Kontext, gezeichnet und noch relevant	120-150	0.56
Verbraucht, hat seinen Teil gesagt	85-105	0.33
Jedes Label, jeder Zustand	niemals unter 90

Die Implementierung ist eine Funktion, die bei jedem Erzählschlag mit den IDs aufgerufen wird, über die gesprochen 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:

• Ein Label erbt immer den Zustand seines Elements (die -l-Suffix-Faltung). Ein beleuchtetes Element mit einem unlesbaren Label darunter ist exakt der zu behebende Fehler.
• Ein Requisit, das fertig ist, tritt auf Opazität 0 zurück, über eine MUTED-Obergrenze, nicht auf 0.3. Das Stummschalten auf 0.3 hinterlässt unerklärliche Konfetti auf dem Bildschirm für den Rest des Abschnitts. Generator-Regel: Sende das mute() vor einem später beginnenden lit(), da sonst die Stummschaltung überschrieben wird, wenn ihr Tween abgeschlossen ist.
• Opazitätsereignisse müssen in der Timeline-Reihenfolge ausgegeben werden, da der Tracker sonst einen veralteten Zustand sieht und das falsche Ziel berechnet. Führe eine seq()-Wächterfunktion ein, die bei einer Ausgabe außerhalb der Reihenfolge eine Exception auslöst.
• Eine Opazitäts-Autorität pro Element pro Fenster. Zwei gleichzeitig aktive Tweens, die die Opazität desselben Elements auf unterschiedliche Werte treiben, rendern in einem eigenständigen Abschnitt flüssig, flackern aber mit ~10Hz im zusammengesetzten Master, wo das gewinnende Tween pro Frame wechselt. Der Referenzaufbau hatte diesen Fehler an jeder Andockstelle. Wenn eine Durchschleif wie lit() eine explizite Aufhellung oder Stummschaltung überlappt, ist das später startende Tween der alleinige Treiber und die Durchschleif überspringt diese IDs (lit(..., skip=(...))). Prüfe es: Scanne zusammengesetzte Renderings auf Ein-Frame-Hin-und-zurück-Luminanz-Pegel in jedem Übergangsfenster (qa/v4/flicker/qa-flicker.mjs im Referenzaufbau).

Offene Schleifen sind räumlich

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

Der Mechanismus ist identisch, unabhängig von der Form:

1. Pflanze es im Haken, im Raum, auf der Linie, die das Versprechen macht.
2. Zeige es erneut an jeder Grenze. Jede Abschnittsübergabe ist eine Grenze. Das erneute Zeigen dauert etwa zwei Sekunden und ist der Bindungsmechanismus; es zu überspringen führt dazu, dass eine Auszahlung nichts auszahlt.
3. Schreibe es sichtbar fort. Der Zuschauer muss sehen, wie die Unvollständigkeit schrumpft.
4. Schließe mit dem Bild, mit dem du eröffnet hast.

Wähle die Form aus dem Skript:

Skript-Form	Die Welt	Was ist unvollständig
N parallele Elemente	N Sockel auf einer Wirbelsäule	leere Slots (siehe reference/patterns/wall-of-slots/)
Ein Prozess, tiefgreifend	die gesamte Pipeline, ausgelegt	eine kaputte oder fehlende Verbindung
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 Mitbauen	die fertige Architektur, ausgegraut	jeder noch nicht gebaute Knoten

Das Einfügen eines Elements in seinen Slot ist eine Live-Kamerafahrt, ~1,4 s, niemals ein Schnitt zu einem vorgefertigten Bild des gefüllten Zustands. Der Zuschauer sieht, wie das Ding, das er gerade gelernt hat, zur Kachel wird. Wenn das Video eine Ziffer oder einen Zähler hat, rolle ihn innerhalb derselben Bewegung, wie einen Kilometerzähler, mit gleichem Start, gleicher Dauer und gleichem Easing für beide Ziffern, da sie sich sonst mitten im Rollen zu einem Band vereinen.

Der Zähler braucht einen Namen, nicht nur eine Nummer. Eine Eckziffer sagt dem Zuschauer, wo er sich in der Sequenz befindet, aber nicht, was das aktuelle Element ist; nach neun Minuten trägt „03“ nichts bei. Paare die Ziffer mit einem 1-2-Wort-Label, das das aktuelle Element benennt (SUPPORT, VOICE AI), in derselben Plattenchemie, die sich als eine starre Baugruppe mit der Ziffer bewegen, innerhalb desselben Kilometerzähler-Rollens austauschen. Die Kundenbewertung des Referenzaufbaus forderte genau dies: Die Bilder waren gut und der Zuschauer 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, eine Verbindung zwischen beschrifteten Elementen, das reisende Subjekt oder der ambienten Hintergrund. Nichts sonst.

Dies kam aus einer Stummschaltungs-Testbewertung, die das Verständnis mit 7/10 bewertete und die Ursache benannte: Das Diagramm war sauber, die Verzierungen waren es nicht. Ein Dutzend unbeschriftete Formen, gezeichnet im gleichen Strich und der gleichen 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 sichtbare Wörter pro Abschnitt. Keine Sätze. Labels sind 1-2 Wörter, unter ihrem Element. Der Referenzabschnitt 1 hat 21 Wörter in 84 Sekunden.

Korollar: 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 Rahmenfarbe ändert sich. Ein Zuschauer muss in der Lage sein, einem gesamten Abschnitt zu folgen, indem er dieses eine Objekt beobachtet, und es darf niemals teleportieren; es bewegt sich mit konstanter Geschwindigkeit entlang gezeichneter Verbindungen.

Ein globales Token-Set

Volle 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 feste Bedeutungen, null Verzierung. Warm bedeutet, dass ein Mensch beteiligt ist, und nichts anderes ist jemals warm. Niemals reines Weiß für Schrift; es halatiert auf dunklem Grund.

Der Fehler, den dies verhindert, aus der Handwerksbewertung des ersten Baus: „Jede Entscheidung wurde lokal und korrekt getroffen; keine Entscheidung wurde global getroffen.“ 18 Strichstärken und 9 Schriftgrößen, die meisten davon 0,2 auseinander, einzeln unsichtbar und kollektiv 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 Masse, sodass ein 290px-Knoten und ein 40px-Label nicht identisch abbremsen, und back.out genau einmal pro Abschnitt, auf dem Schlag, der es verdient.

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

3 · Build-Vertrag

• Ein Generator pro Abschnitt. scripts/build_<id>.py schreibt nur compositions/<id>.html. Bearbeite den Generator, niemals das generierte HTML. Abschnitts-Roots index-*.html werden manuell gepflegt, daher gehen Bildausschnittsä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 gemeinsamen Module zu berühren; abweichende Geometrie zerbricht stillschweigend jede Übergabe.
• Namespace die SVG-Defs vor dem Zusammenbau. Jeder Abschnitt definiert seine eigenen gEdge, shadow, edgeFade. In einem zusammengesetzten DOM löst url(#id) das erste Match in der Dokumentreihenfolge auf, sobald eine frühere Komposition ausgehängt wird, malt jede spätere Grafik nichts. Kosten im Referenzaufbau: 35 Sekunden leerer Bildschirm bei grünem Gate. Nur das Ansehen des zusammengesetzten Renderings hat es erwischt.
• Timing alles auf Wortanfänge aus einem wortgenauen Transkript, und zwar 0,15-0,25 s vor dem Ankerwort. Teile einen Abschnitt niemals gleichmäßig in Beats ein.
• Auditiere Lücken. Jeder Bereich von über ~1,5 s, in dem nichts passiert, ist ein toter Bildschirm; lasse den Generator sie ausgeben.
• Luft im Schnitt lassen. Aggressives Kappen von Pausen erzeugt nahezu null Lücken an Satzgrenzen, die der Kunde als „Stottern“ und Jump-Cuts hört. Kalibriere an der eigenen Norm des Sprechers: Markiere Satzgrenzenlücken, die etwa 10x enger sind als sein Median (der Referenzsprecher hatte 470ms; die markierten Übergänge lagen bei 20-40ms), und repariere sie durch Einfügen von 4-8 Frames Luft, Wörter werden nie berührt. Luft ist ein Donor-Slice des echten Raumtons der Spur mit 10ms Fades, niemals anullsrc: Digitale Stille auf einem -50dBFS-Boden ist ein hörbarer Dropout. Video hält das Bild; zwischen Sätzen ist ein sprechender Kopf nahezu still, und 4-8 Frames Halten sind unsichtbar. Änderungen nur durch Einfügen verschieben das Transkript deterministisch, sodass keine Neutranskription erforderlich ist. Die Kanten eines Einschubs müssen die Sprechhülle respektieren: Das Anstoßen von Donor-Ton an einen Wortschwanz in 1ms a…”

(Anmerkung: Die letzten Zeilen des Original-SKILL.md wurden aufgrund der Trunkierung nicht übersetzt, die Übersetzung folgt dem vorhandenen Text bis zum Ende der bereitgestellten Eingabe.)