Was macht Daten-Erklärvideo (Tatakye-Stil)?

Erstelle ein kurzes, von chinesischen Untertiteln getriebenes Erklärvideo als eine eigenständige HTML-Datei, die der Nutzer im Browser abspielt und per Bildschirmaufnahme erfasst.

Wofür das gut ist

Einen Artikel, Aufsatz oder eine Forschungserkenntnis in ein 3–6-minütiges Video verwandeln
Minimalistische Schwarz-Gold-Ästhetik (in der Tradition von 3Blue1Brown / Veritasium / Tatakye)
Ergebnisse für Xiaohongshu / WeChat Video / Bilibili / YouTube
Null externe Assets – keine Schriftarten zu kaufen, kein Stockmaterial, keine Lizenzprobleme, kein Server

Bevor eine einzige Zeile Code geschrieben wird

Unverhandelbare Vorabfragen – stelle diese mit AskUserQuestion, nicht erst später. Fehler bedeuten eine Neufassung.

Kernaussage in einem Satz: Nicht „worum es in dem Artikel geht“ – die Behauptung, die das Video verteidigt. Wenn du sie nicht in einem Satz formulieren kannst, hast du noch kein Video, sondern eine Leseliste.
Das Rückgrat: Welches einzelne Objekt auf dem Bildschirm verankert das gesamte Video? (Siehe Abschnitt „Das Rückgrat“ – das ist die wichtigste Designentscheidung und die, die in den meisten Erklärvideos komplett fehlt.)
Länge: 3–4 Min. (Höhepunkte) vs. 5–6 Min. (Standard-Tatakye-Länge) vs. 8–10 Min. (tiefgehend). Die Länge bestimmt, wie viele Abschnitte überleben. Bei einem 10-Abschnitt-Artikel für 5 Minuten musst du 60–70 % der Abschnitte streichen.
Erzählmodus: Nur Untertitel (textgetriebener Rhythmus) vs. KI-Sprachausgabe vs. selbst aufgezeichnet. „Nur Untertitel“ ist die Voreinstellung – die Untertitel selbst geben den Takt vor.
Quellenangabe: Wie der ursprüngliche Autor genannt wird. „原文 · [Name]“ oben rechts ist der saubere Standard. Falls du ein Rückgrat hast, kommt die Quellenangabe unter das Rückgrat, nicht stattdessen.
Die Erkenntnis (keine rhetorische Frage): Was genau nimmt der Zuschauer mit? Eine umformulierte Frage ist keine Erkenntnis. „Sind sie es?“ klingt kraftvoll, gibt dem Zuschauer aber nichts mit nach Hause. Eine echte Erkenntnis ist eine kurze benannte Liste (2–4 Punkte), die er am nächsten Tag wiederholen kann. Siehe „Erkenntnis, nicht Rhetorik“ unten.

Überspringe diese niemals. Der erste Versuch scheitert fast immer an #1 (Thema) und #5 (Abschluss). Du kannst frei umschreiben, sobald diese Punkte feststehen.

Das Rückgrat – die mit Abstand wichtigste Designentscheidung

Ein großartiges Erklärvideo hat ein Rückgrat: ein persistentes Objekt auf dem Bildschirm, das die meiste Zeit sichtbar bleibt, und jeder Abschnitt beleuchtet einen anderen Teil davon.

Tatakyes Video „股市回报“ ist das kanonische Beispiel. Das Rückgrat ist die Formel p = E[mx], von 1:00 bis 3:30 oben rechts fixiert. Jeder Abschnitt hebt ein Symbol hervor – x, dann m, dann π_s – und erklärt dessen Bedeutung. Am Ende „entschlüsselt“ sich die Formel in drei konkrete Erkenntnisse (x → „welche Zukunft“, m → „welche Welt“, π_s → „wie lange warten“).

Warum das funktioniert und warum Videos ohne Rückgrat schwach wirken:

Das Rückgrat ist ein visueller Anker. Schaut der Zuschauer weg und kommt zurück, weiß er sofort, „was wir gerade zerlegen.“
Es verwandelt einen abstrakten Rahmen in ein physisches Objekt auf dem Bildschirm. Die Idee bekommt Koordinaten.
Kapitelbeschriftungen können dem Zuschauer nur sagen, wo in der Struktur er sich befindet. Das Rückgrat sagt ihm, welche Komponente der Idee gerade erklärt wird – ein stärkeres Signal.
Die Erkenntnis am Ende kann buchstäblich „das Rückgrat, gelöst“ sein. Du beginnst mit einer Frage, baust jeden Teil des Rückgrats auf und schließt, indem du das Rückgrat als Antwort zurückgibst.

Was ein gutes Rückgrat ausmacht

Ein Kandidat für das Rückgrat muss:

In eine Zeile passen (damit es die ganze Zeit in einer Ecke leben kann)
3–5 benannte Komponenten haben, die jeweils einen Abschnitt des Videos abbilden
Visuell stabil sein – keine Animation, sondern ein statischer Referenzrahmen
Die These tragen – wenn du jeden Teil des Rückgrats verstehst, verstehst du das Stück

Häufige Formen (nach Wirkung geordnet):

Eine Gleichung: Arbeit = Muskel × Verstand, p = E[mx], Wert = Knappheit × Aufmerksamkeit
Ein Diagramm mit benannten Pfeilen: Produzent → Produkt → Nutzer, Knoten, die du einzeln hervorheben kannst
Ein beschriftetes Verhältnis oder ein Vergleich: Vergangenheit : Gegenwart : Zukunft
Eine kurze Sequenz: Beobachten → Hypothese → Experiment → Schlussfolgerung

Vermeide als Rückgrat:

Eine einzelne Zahl (keine Komponenten zum Beleuchten)
Einen langen Satz (zu lang für eine Ecke, verfehlt den Zweck)
Ein Diagramm (Diagramme sind Schlüsselvisualisierungen, sie leben in der Mitte, nicht als Rückgrat)

Das Rückgrat muss VOR Ende von Akt I erscheinen und bleiben

Wirf das Rückgrat dem Zuschauer nicht zu Beginn hin und kehre nie zurück. Warte nicht bis Akt II, um es einzuführen. Die Struktur ist:

0:00–0:30 Aufhänger: noch kein Rückgrat; die Frage etablieren
~0:30 Rückgrat-Enthüllung: die Gleichung/das Diagramm erscheint oben rechts
Akt I–III: das Rückgrat bleibt, jeder Akt beleuchtet eine Komponente
Erkenntnis: das Rückgrat löst sich auf und wird zur Dreierliste der Erkenntnisse

Hervorhebung von Rückgrat-Begriffen (visuelles Rezept)

Jeder Rückgrat-Begriff sollte drei Zustände haben:

gedimmt (Standard): color: var(--dim) – grau, vorhanden aber dezent
beleuchtet (gerade erklärt): color: var(--gold) + Textschatten-Glühen – unmissverständlich „wir sind jetzt hier“
erledigt (bereits erklärt): color: var(--fg) – weiß, gelehrt, abgeschlossen

Wenn ein neuer Abschnitt beginnt, stufe das vorherige .lit zu .done herab, befördere den neuen Begriff zu .lit. Immer nur ein Begriff gleichzeitig beleuchtet. Der visuelle Effekt: Das Rückgrat leuchtet von links nach rechts auf, und am Ende ist alles weiß (vollständig gelehrt), bereit, sich in die Erkenntnis aufzulösen.

Narrative Struktur – eine Behauptung, wenige Abschnitte

Die einzige harte Regel: Das Stück verteidigt eine Behauptung, und jeder Abschnitt dient ihr. Wenn ein Abschnitt die Behauptung nicht voranbringt oder einen späteren Abschnitt, der das tut, nicht vorbereitet, streiche ihn.

Darüber hinaus ist die Struktur ein Werkzeug, keine Vorlage. Wähle die Form, die zur Behauptung passt:

Dreiakter (Aufhänger → Muster → Wendung → Kosten) – gut, wenn die Behauptung eine überraschende Umkehrung hat (z. B. „Das haben wir schon einmal gemacht, aber diesmal gibt es einen Preis“)
Problem → Mechanismus → Implikation – gut, um zu erklären, warum etwas so funktioniert
Zeitstrahl / Aufbau – gut, wenn der Punkt Kumulation ist („sieh, wie weit das gekommen ist“)
Vergleich – gut für „A vs. B, und warum das wichtig ist“
Frage → Versuche → Auflösung – gut für Forschungsergebnisse oder investigatives Material
Eine einzige Einsicht entfalten – eine überraschende Tatsache, langsam aufgebaut und dann platziert (Tatakyes Video „股市回报“ ist das)

So wählst du aus: Sprich den Ein-Satz-Kernsatz laut aus. Was ist der natürliche Rhythmus, dieses Argument vorzubringen? Das ist deine Struktur.

Die Anzahl der Abschnitte skaliert mit der Länge, nicht mit der Struktur:

3–4 Min. → 3–4 Schlüssel-Abschnitte
5–6 Min. → 5–7 Abschnitte
8–10 Min. → 8–12 Abschnitte

Jeder Abschnitt braucht:

Eine Schlüsselvisualisierung (eine Kurve, ein Vergleich, ein Diagramm, ein Partikelereignis)
Eine Schlüsselzahl ODER einen Schlüsselsatz
Einen Übergang, der zum nächsten Abschnitt führt (nicht nur „und nun Abschnitt 2“)

Warnsignal: Wenn deine Gliederung wie „Abschnitt 1, Abschnitt 2, Abschnitt 3...“ als flache Liste aussieht, führst du den Nutzer durch eine Leseliste. Komprimiere oder ordne neu, sodass die Abschnitte verkettet sind – jeder macht den nächsten unvermeidlich.

Szenen-Ökonomie – weniger Szenen, längere Entwicklungen

Ein häufiger Fehler: Jeden Abschnitt zu einer neuen Szene zu machen. Ergebnis: Sieben unzusammenhängende Bilder hintereinander, jedes 30 Sekunden lang, der Zuschauer bekommt einen Schleudertrauma und erinnert sich an nichts.

Das Tatakye-Prinzip: Ein visuelles Objekt, das sich über 2–3 Minuten entwickelt. Im Video „股市回报“ ist das „Wahrscheinlichkeitsraum-Gitter“ von etwa 0:40 bis 2:30 auf dem Bildschirm – fast zwei Minuten. In dieser Zeit:

Erscheint es nur als Linien („alle möglichen Welten“)
Wachsen goldene Balken (x, Auszahlung in jeder Welt)
Balken werden eingefärbt (m, Gewicht jeder Welt)
Die Formel erscheint darüber (Erwartungswert)
Spezifische Zahlen werden eingeblendet (konkretes Beispiel: 0,86, +16,9 %)
Verbale Beschriftungen werden eingeblendet („Rezession/Boom“)

Sechs Iterationen, ein visuelles Objekt. Die Augen des Zuschauers müssen nie neu justieren.

Faustregeln

Ziel: 3–5 Szenen insgesamt für ein 5-minütiges Video. Mehr bedeutet wahrscheinlich zu viel Wechsel.
Minimale Szenendauer: 60–90 Sekunden für substanzielle Szenen. Weniger als eine Minute gehört wahrscheinlich als Schicht in eine andere Szene, nicht als eigene Szene.
Bevorzuge „Szene wächst in nächste Szene“ gegenüber Schnitt. Beispiel: Ein Doppelkurven-Plot entwickelt eine schattierte Fläche zwischen den Kurven, aus der Balken emporwachsen – drei „Abschnitte“ Inhalt, null Szenenschnitte.
Szenenwechsel erfolgen an Akt-Grenzen, nicht innerhalb von Akten. Innerhalb eines Aktes verwende Überlagerungen, Hervorhebungen, Zahlen-Hochzählungen, Beschriftungen – keine Szenenwechsel.

Wann ein Szenenwechsel GERECHTFERTIGT ist

Aufhänger → erste Inhalts-Szene
Akt N → Akt N+1, wenn die visuelle Metapher die nächste Idee grundsätzlich nicht tragen kann
Inhalt → Erkenntnis (das Ende verdient einen visuellen Neustart)

Das war’s. Maximal drei Szenenwechsel in einem 5-minütigen Video.

Erkenntnis, nicht Rhetorik

Großartige Erklärvideos enden mit einer spezifischen, benannten Liste von 2–4 Dingen, die der Zuschauer mitnehmen kann. Keine Frage. Kein Gefühl. Eine Liste.

Tatakyes Video „股市回报“ endet damit, dir drei Dinge (x, m, π_s) mit konkreten Interpretationen zu übergeben: „welche Zukunft kaufen, in welcher Welt du bist, wie lange warten.“ Der Zuschauer kann das am Abend beim Abendessen wiederholen.

Häufige Anti-Muster:

„Sind sie?“ / „Are you them?“ – umformulierte Frage. Fühlt sich kraftvoll an. Lehrt nichts. Der Zuschauer schließt das Video, erinnert sich an die Stimmung, vergisst den Inhalt.
„Was denkst du?“ – rhetorischer Ausweicher. Das Video hat sich zu nichts bekannt.
„Nur die Zeit wird es zeigen.“ – journalistische Floskel. Gleiches Problem.
Ein einzelner tröstender Satz. „Das hatten wir schon einmal.“ – platt, nicht handlungsorientiert.

Wie sich eine gute Erkenntnis anfühlt: Wie das Entsperren des Rückgrats. Das Rückgrat war A = B × C. Die Erkenntnis ist „worauf es also ankommt: (1) B, (2) C, (3) das Zusammenspiel zwischen ihnen.“ Das Video löst sich buchstäblich in seine Antwort auf.

Der 3-Punkte-Antwort-Bildschirm (Rezept)

     01            02            03
      X             Y             Z
    label         label         label
   caption       caption       caption

Drei vertikale Spalten, gleicher Abstand
Punkte erscheinen nacheinander, ~1 Sekunde Abstand (ein Klang pro Punkt)
Jeder Punkt: Indexnummer (01/02/03), Ein-Glyphen-Emblem (ein chinesisches Schriftzeichen oder mathematisches Symbol), kurze Beschriftung (2–4 Zeichen), ein-Satz-Untertitel
3–4 Sekunden halten, nachdem alle drei erschienen sind, dann ausblenden
Dann ein abschließender Satz, der kann der umformulierte, als gelöst dargestellte Aufhänger sein: „Wo stehst du?“ funktioniert NACHDEM du die Seiten benannt hast.

Kapitelbeschriftungen als Wegweiser zum Inhalt

Schwache Kapitelbeschriftungen: AKT I, AKT II, AKT III – sagen dem Zuschauer, wo in der Struktur er sich befindet. Das interessiert ihn nicht.

Starke Kapitelbeschriftungen: Muskel · erste Auslagerung, Verstand · zweite Auslagerung, × · Multiplikation, = · Preis, Antwort · drei Dinge – jede Beschriftung ist ein Begriff aus dem Rückgrat oder ein direkter Inhaltsteil. Beim Lesen der Beschriftung weiß der Zuschauer sofort, welche Idee gerade zerlegt wird.

Regel: Die Kapitelbeschriftung sollte ein Wort sein, das das Rückgrat hervorheben würde. Wenn „AKT II“ deine Kapitelbeschriftung ist, aber dein Rückgrat „Verstand“ sagt, ändere die Kapitelbeschriftung in „Verstand“. Verdopple nicht das strukturelle Gerüst in der Kapitelbeschriftung – Struktur ist implizit, Inhalt ist, was der Zuschauer braucht.

Visuelles System (Tatakye-Stil)

Farbe

--bg:    #0a0a0f   /* NICHT #000000 – reines Schwarz wirkt tot auf dem Bildschirm */
--fg:    #eceae4   /* warmes Weiß, 2 % Blauanteil; niemals reines Weiß */
--dim:   #8a8a90   /* für Achsenbeschriftungen und Untertitel */
--gold:  #d4a85a   /* EINZIGE Farbe für Hervorhebungen */
--red:   #c15b4e   /* nur für „negative“ Statistiken (Löhne hinken hinterher) */

Verwende niemals mehr als diese 5. Widerstehe dem Drang, Blau/Grün für Abwechslung hinzuzufügen.

Typografie – hier sterben Videos

Chinesisch oder Englisch, wähle eines pro Element. Niemals „AKT II · THE PARALLEL · 第二幕 · 现在轮到心智“ – das ist redundant, schwer lesbar und schreit „KI-generierte zweisprachige Folie“. Wähle eine Sprache pro Beschriftung.
Minimiere Kursivschrift. Kursiv auf CJK sieht in fast jedem Browser schlecht aus (künstlich schräge Zeichen). Verwende Farbe (var(--gold)) für Hervorhebungen, nicht Kursivschrift.
Minimale Größen für mobile Ansicht:
- Achsenstriche: 17px Basislinie (skaliert durch fontPx())
- Achsenbeschriftungen: 17–19px
- Kurvenend-Beschriftungen: 19px
- Kapitelbeschriftung (oben links): 1.1rem
- Untertitel (unten Mitte): 1.15rem
- Schlagzeilenzahlen (Mitte): 4.5rem+
- Mega-Eröffnungs-/Abschlusstext: 1.9rem+
Serif für Anzeigezahlen (EB Garamond Fallback → Noto Serif SC). Serifenlos für alles andere (Inter → PingFang/Noto Sans).

Vier-Schichten-Informationsarchitektur (Tatakye-Signatur)

Jede Szene hat bis zu vier Textebenen an festen Positionen:

Oben links: Kapitelbeschriftung (klein, mit Buchstabenabstand, gedimmt)
Oben rechts: Autorenangabe (klein, gedimmt)
Mitte: Große Zahl / Schlagzeile (groß, Serif)
Unten Mitte: Untertitel-Erzählung (mittel, serifenlos)
Unten links kursiv (optional): Akademisches Zitat (Engels-Stagnation · Robert Allen)

Kernmotive (3–5 im gesamten Stück wiederverwenden)

Erfinde nicht ein neues Bild pro Abschnitt – wähle eine kleine Menge aus und variiere sie:

Partikelfeld mit Perspektive: 120×36-Gitter, ferne Reihen nahe Horizont, leichte Sinuswelle
Steigende Kurve auf Zeitachse: flach für den größten Teil von X, exponentieller Abheber; beschrifte Zeitanker als narrative Wörter („jetzt“, „Zukunft“) nicht spezifische Jahre (2000 ist bereits Vergangenheit)
Fallende Kurve mit Flächenfüllung: Preisverfall / Wertverlust
Horizontale Zeitbalken: proportionaler Längenvergleich (40 Jahre vs. 5 Jahre im Maßstab 1/8)
Code-Regen: kurze domänenspezifische Zeilen, die fallen, für „Maschine übernimmt kognitive Arbeit“
Punkt-/Partikelzertrümmerung: für „etwas bricht“-Momente

Kamera-Atmung

Füge jeder statischen Szene Mikro-Parallaxe hinzu: camBreath = sin(t*0.14)*6, camSway = sin(t*0.09)*4, angewendet mit tiefengewichtetem Multiplikator, sodass nahe Elemente sich mehr bewegen als ferne. Verhindert das Gefühl eines „toten Bildes“.

Szenenübergänge

Verwende immer Schwarzblenden zwischen Szenen – niemals harte Schnitte. sceneBlink(cb, {dark:0.45, hold:0.08, light:0.5}): Überblendung zu Schwarz in 0,45 s → Szenenwechsel ausführen → zurückblenden in 0,5 s. Insgesamt ~1 s pro Übergang. Fühlt sich wie Filmschnitte an, nicht wie Folienwechsel.

Zahlen-Hochzählen

Jede große Zahl animiert 0 → Ziel mit easeOutCubic über ~1,1 s beim Einblenden. Verwende <span class="count" data-to="…"> – die Klasse enthält die gesamte Logik (requestAnimationFrame, Dauer, Formatierung). Keine Bibliotheken.

Benutzerinteraktion – Pause und Fortsetzen nach Bedarf

Das Video muss jederzeit pausierbar und fortsetzbar sein – ein Klick auf die Leinwand schaltet paused um. Während der Pause: Die Leinwand bleibt sichtbar (eingefrorener Rahmen), aber alle Timer (count-up, Partikel, Pfeile) pausieren. Keine Steuerung außer Click-to-Pause.

Technische Umsetzung: Ein zentrales paused-Flag, das von draw() und allen setTimeout-/setInterval-Callbacks gelesen wird. Wenn paused ist, setzt draw() den aktuellen Zustand (kein neuer Frame) fort und Timer-Callbacks überspringen Zustandsänderungen bis zum Fortsetzen.

Kein Play/Pause-Button. Keine Fortschrittsleiste. Keine Überspringen-Schaltfläche. Das Video ist für Bildschirmaufnahme und Wiedergabe ohne UI-Steuerelemente konzipiert.

Produktions-Workflow

Erstelle die Datei in einem Schritt: Gib die vollständige HTML-Datei aus, nachdem die unverhandelbaren Fragen beantwortet sind. Der Nutzer speichert sie als .html und öffnet sie in einem Browser. Das Video startet automatisch.

Nützliche CLI-Befehle für den Nutzer:

xdg-open video.html (Linux)
open video.html (macOS)
start video.html (Windows)

Farbcodierung – ein optionales, aber kraftvolles Hilfsmittel

In Tatakye-Kreisen wird eine rote Farbe (--red) fast nur für negative/verfehlte Werte verwendet, nicht für Branding oder Abwechslung. Wenn deine Kernaussage beispielsweise lautet: „Löhne sind in den letzten 40 Jahren weniger gestiegen als die Produktivität“, dann ist die Lohnkurve rot und die Produktivitätskurve gold. Das ist eine semantische Farbe, keine dekorative.

Regel: Wenn du Rot verwenden möchtest, frage dich: „Ist das negative (schlechte Nachricht) oder neutral (alternativ)?“ Wenn es nur abwechselnd ist, verwende Gold/Schatten/Weiß – die zusätzliche semantische Kanalkapazität von Rot ist zu wertvoll, um sie für Kontrast zu verschwenden.

Vorlage und Metaphern – wiederverwenden, nicht neu erfinden

Jedes Video ist eine Instanz derselben Metaphernfamilie. Beginne nicht jedes Mal mit einem leeren HTML-Körper. Beginne mit dem vorherigen Ausgabe-HTML als Grundlage und ändere: Daten/Argumente/Visualisierungs-Details.

Diese Wiederverwendung ist in Ordnung – die Motive sind absichtlich generisch. Kreativität steckt in der Struktur (welche Metapher trägt welchen Teil des Arguments), nicht in der Erfindung einer neuen visuellen Sprache. Ein neues Video sollte an einer anderen Stelle im selben morphologischen Raum landen, nicht in einem neuen Universum.

Fehlerbehandlung und Erwartungsmanagement

Keine Browsergarantien: getestet auf Chromium-basierten Browsern (Edge, Chrome, Opera). Safari und Firefox können Abweichungen bei der Audiowiedergabe, currentTime-Behandlung und Schriftdarstellung aufweisen.
Audio: Verwende Web Audio API (nicht <audio>-Tag). Erzeuge Low-Fidelity-Samples (Sinustöne, gedämpftes weißes Rauschen, kurze FX). Keine MP3-Dateien – das ist reine Synthese.
Leistung: Canvas-Rendering bei 30 fps, Partikelsysteme bei 500–1500 Partikeln. Halte Transparenz auf ein Minimum (ein zusammengesetzter Durchlauf).
Fehlerzustand: Wenn ein Datensatz ungültig ist (z. B. leeres Array), zeige „Ungültige Daten“ auf dem Bildschirm an, kein Absturz.
Mobil: Teste auf 390 px breitem Viewport (iPhone 12/13/14). Text muss lesbar sein. Halte Partikeldichte auf diesem Viewport niedriger.

Beispiel-Daten – statische Arrays, keine APIs

Alle Daten werden als statische JavaScript-Array-ähnliche Objekte übergeben. Kein Fetch, kein JSON-Parse, kein GraphQL. Das Video wird zur Build-Zeit versiegelt.

Minimale Struktur:

const data = {
  title: "Mindestlohn: Ein Experiment",
  spine: { expr: "Lohn = Minimum × Deckel", terms: ["Minimum", "Deckel", "×", "Lohn"] },
  acts: [
    { id: "minimum", label: "Minimum", visual: "risingCurve", value: 12, unit: "€", … },
    { id: "cap", label: "Deckel", visual: "fallingCurve", value: 8, unit: "€", … },
    { id: "product", label: "×", visual: "codeRain" },
    { id: "result", label: "Lohn", visual: "particleField", value: 96, unit: "€" }
  ],
  payoff: [
    { idx: "01", glyph: "M", label: "Minimum", caption: "Untergrenze des Marktes" },
    { idx: "02", glyph: "C", label: "Deckel", caption: "Obergrenze des Marktes" },
    { idx: "03", glyph: "×", label: "Wechselwirkung", caption: "Das Zusammenspiel beider" }
  ],
  credits: "原文 · Max Planck",
  hook: "Mindestlohn vs. Höchstlohn: Ein Diagramm, das alles verändert",
  closing: "Mindest- und Höchstlohn – zwei Seiten derselben Medaille."
};

Audio-Design – sparsam, atmosphärisch

Das Audio-Modell ist absichtlich einfach – kein Soundtrack, keine Sprachausgabe, keine komplexe Mischung. Fokussiere auf drei Funktionen:

Hintergrund-Brummen (optional): Ein einzelner leiser Sinuston (45–65 Hz) oder gefiltertes Rauschen, mit sehr niedriger Lautstärke. Nicht in einem geschlossenen Raum hörbar, aber verhindert, dass Stille sich „leer“ anfühlt. Beginne mit audioCtx.createOscillator().
Einblende-/Ausblende-Klänge: Kurze, klare Töne bei wichtigen Übergängen (Rückgrat-Enthüllung, Szenenwechsel, Erkenntnis). Einfach: angeschlagene Klaviertöne (sinusförmiger Abfall) oder kurze Stille (für Subtitle-Impulse).
Stille als Werkzeug: Die Abwesenheit von Ton erträgt der Zuschauer 5–15 Sekunden lang, bevor sie unbehaglich wird. Nutze das als Taktgeber für emotionale Momente (so wie Tatakye den Aufhänger mit 10 Sekunden Stille beginnt, während das Partikelfeld erscheint).

Vermeide:

Laufende Schleifen oder „Loops“ – sie lenken nach 30 Sekunden ab
Percussion/Schlagzeug – das Video hat keinen Beat, dem man folgen kann; alles ist textgetrieben
Sprecher-Samples – du hast keine Stimmrechte/deine Stimme ist nicht trainiert; verwende stattdessen Untertitel

Subtitle-Impuls: Jedes Mal, wenn ein Untertitel erscheint, erzeuge einen leisen, kurzen „Clip“ oder ein Rauschen, das den Übergang markiert. Das verankert die Aufmerksamkeit des Zuschauers auf dem neuen Text.

Beispiel einer vollständigen Szene (Code-Skizze)

Dies ist eine minimale, aber vollständige Einzelszene, die das visuelle System und das Rückgrat demonstriert:

<canvas id="c"></canvas>
<script>
// Setup
const c = document.getElementById('c'), ctx = c.getContext('2d');
c.width = 1080; c.height = 1920;

// Farben
const bg = '#0a0a0f', fg = '#eceae4', gold = '#d4a85a', dim = '#8a8a90';

// Rückgrat
const spine = { expr: 'A = B × C', terms: ['A', 'B', 'C', '×'], lit: 1 };

// Beispielszene: Aufhänger
function drawHook() {
  ctx.fillStyle = bg; ctx.fillRect(0, 0, 1080, 1920);
  // Rückgrat oben rechts
  ctx.fillStyle = dim; ctx.font = '24px Inter, sans-serif';
  ctx.fillText('原文 · Autor', 800, 40);
  ctx.font = '28px EB Garamond, serif';
  ctx.fillStyle = gold; ctx.fillText(spine.terms[spine.lit], 900, 80);
  // Aufhänger-Text Mitte
  ctx.font = '56px EB Garamond, serif'; ctx.fillStyle = fg;
  ctx.textAlign = 'center'; ctx.fillText('Mindestlohn: Ein Experiment', 540, 600);
  // Untertitel unten
  ctx.font = '28px Inter, sans-serif'; ctx.fillStyle = dim;
  ctx.fillText('Dies ist die Geschichte eines Diagramms.', 540, 1650);
}
drawHook();
</script>

Erweitere dies um Partikelfelder, Kurven, count-up und alle 4–6 Szenen. Die Ausgabe ist immer eine Datei, die der Nutzer speichert und abspielt.

Umsetzungshinweise

Keine Komprimierung, kein Minifizierung. Die Ausgabe ist lesbares, von Menschen bearbeitbares HTML mit Leerzeichen und Kommentaren. Die Nutzer sollten in der Lage sein, Daten, Farben und Visualisierungen zu ändern, ohne die Ausgabe durch einen Beautifier laufen zu lassen.
Keine CDNs, keine Ladebalken. Wenn Date A von Datei B abhängt, dann definiere B vor A in derselben <script>-Datei. Kein externer Zustand.
Audio: beginne mit der minimalen Implementierung (Oszillator → Verstärker → AudioCtx). Füge Effekte nur hinzu, wenn die Erkenntnis dadurch klarer wird (2–3 Klänge sind genug).
Datumsstempel als Kommentar am Ende der Datei:

Wichtig: Das Video muss ohne Eingabe des Nutzers starten – kein Klick auf „Start“. Verwende audioCtx.resume() nach der ersten Benutzerinteraktion (Klick auf Leinwand), um Autoplay-Beschränkungen zu umgehen. Das Video beginnt als pausiert mit einem Einblende-Splash, der den Nutzer auffordert, zum Starten zu klicken. Nach einem Klick läuft es automatisch bis zum Ende durch.

Warum nur eine Datei?

Bereitstellungs-Metapher: Der Nutzer speichert sie in einem Ordner, doppelklickt darauf – sie funktioniert. Keine Ordnerstruktur, kein npm install, kein Bundler.
Portabilität: In eine E-Mail einfügen, an Dropbox senden, auf einen USB-Stick kopieren. Funktioniert offline.
Langlebigkeit: In 10 Jahren öffnest du sie in einem Browser – sie funktioniert immer noch.

Vermeide diese häufigen Fehler

Zu viele Szenen: 4–6 für 5 Minuten ist das Maximum. Halte dich daran.
Zu viele visuelle Motive: Wähle 3–5 aus der Liste und wiederhole sie. Ein Teilchenfeld für Abschnitt 1, eine Kurve für Abschnitt 2, Code-Regen für Abschnitt 3.
Sprache mischen: Entscheide dich von Anfang an für Chinesisch oder Englisch für Untertitel und Kapitelbeschriftungen. Nicht mischen.
Rückgrat vergessen: Kein Rückgrat = keine Struktur. Punkt.
Rhetorische Frage als Erkenntnis: Siehe Abschnitt „Erkenntnis“. Gib dem Zuschauer eine Liste.
Harte Schnitte: Verwende stattdessen Blenden. Fühlt sich sofort professioneller an.
Text zu klein: Teste immer auf einem 390 px breiten Viewport. Wenn du es nicht lesen kannst, ist es zu klein.
Zu viele große Zahlen: Eine Schlüsselzahl pro Abschnitt. Nicht vier.

Zusammenfassung – Das vidEO-Layout-Diagramm

+------------------------------------------+
| [Kapitelbeschriftung]       [Quellenangabe]|
|                                            |
|          +-----+                           |
|          |     |                           |
|          |     |                           |
|          +-----+                           |
|         Kurve / Diagramm                    |
|                                            |
|       *** GROSSE ZAHL ***                  |
|                                            |
|                                            |
|         Untertitel-Erzählung               |
+------------------------------------------+

Jede Szene hat eine vertikale Hierarchie: Kapitelbeschriftung (oben links) → Hauptvisualisierung (Mitte) → große Zahl (darunter) → Untertitel (unten). Das Rückgrat (oben rechts) bleibt über Akte hinweg konstant. Die Quellenangabe (oben rechts unter dem Rückgrat) bleibt über das gesamte Video hinweg.

Wenn diese Vorlage es nicht erlaubt, ein Argument zu visualisieren, überdenke das Argument – nicht die Vorlage. Die Vorlage ist erprobt.

In Ihrer bevorzugten KI fragen

Dokumentation