Eine HTML-Datei reicht.
Ich habe gerade ein neues Datenstück veröffentlicht. „Das Meer unter dem Meer“ — über die Ostsee, ihre Todeszonen, die Munition auf dem Grund und einen Wal, der dort nicht hingehört. 1.092 Zeilen Code. Eine einzige HTML-Datei. Kein React. Kein Next.js. Kein Build-System. Kein npm install.
Und sie kann Sound.
Was drin steckt
Scroll-Storytelling bedeutet: Die Geschichte wird nicht gelesen wie ein Blogpost. Sie wird erscrollt. Jede Scrollposition löst etwas aus — ein Bild ändert sich, eine Zahl zählt hoch, ein Sound wird lauter. Die Seite reagiert auf dich, nicht du auf sie.
Technisch sind es drei Schichten:
GSAP ScrollTrigger bindet Animationen an die Scrollposition statt an Zeit. Wenn du bei 30 % der Seite bist, ist die Animation bei 30 %. Kein Autoplay, kein Timer. Du bestimmst das Tempo. Eine CDN-Einbindung, eine Zeile JavaScript, fertig.
SVG-Animationen für die Todeszonen-Karte und die Wal-Silhouette. Keine Bilder, keine Canvas-Elemente. Reines Markup, das der Browser rendert. Die Todeszonen wachsen beim Scrollen von 5.000 km² auf 60.000 km² — Ellipsen, die nacheinander sichtbar werden, bis die halbe Karte leuchtet.
Web Audio API für Sound, der an die Scrollposition gebunden ist. Dazu gleich mehr. Das ist die Stelle, an der es interessant wurde.
Warum kein Framework
Weil ich keins brauche.
Ein Datenstück ist eine in sich geschlossene Geschichte. Es hat keinen State, der sich ändert. Keinen User-Login. Keine API-Calls. Keine dynamischen Routen. Es ist eine Seite mit Text, Bildern und Animationen.
Dafür ein Framework aufzusetzen ist wie einen Sattelschlepper zu mieten, um einen Umzugskarton zu transportieren. Es geht. Es ist auch nicht verboten. Aber es löst kein Problem, das ich habe.
Was ich stattdessen habe: Eine HTML-Datei, die ich in jedem Editor öffnen kann. Die ich auf jeden Server legen kann. Die in zehn Jahren noch funktioniert, weil HTML in zehn Jahren noch HTML ist. React in zehn Jahren? Wer weiß. Next.js in zehn Jahren? Guter Witz.
Zum Vergleich: Ein frisches create-next-app erzeugt über 18.000 Dateien in node_modules. Für eine leere Seite. Mein Datenstück hat fünf Bilder und null Dependencies. Mein erstes Datenstück war im März. Seitdem: 18 Stück. Null Wartung. Null Updates. Null Breaking Changes. Das ist kein Zufall. Das ist eine Architekturentscheidung.
Die Sound-Sache
Hier bin ich gescheitert. Und das Scheitern war das Beste, was passieren konnte.
Ursprünglich wollte ich fertige Sounds einbinden. Unterwasser-Aufnahmen von Freesound.org, Walgesang, Wellenrauschen. Alles Creative Commons, alles legal. Ich hatte die URLs, ich hatte den Audio-Player, ich hatte die Crossfade-Logik. Alles fertig gedacht.
Dann habe ich auf Play gedrückt. Stille. Die URLs lieferten 404er. Die heruntergeladenen „Audio-Dateien“ waren 153 Byte groß. Keine Sounds. HTML-Fehlerseiten. Drei Stunden Arbeit, null Ergebnis.
Also habe ich den Plan verworfen und den Browser selbst zum Instrument gemacht. Die Web Audio API — eine Schnittstelle, die in jedem modernen Browser steckt — kann Töne erzeugen. Nicht abspielen. Erzeugen. Aus dem Nichts. Verschiedene Wellenformen, Rauschgeneratoren, Filter. Der Browser wird zum Synthesizer.
Das Ergebnis klingt nicht wie eine Aufnahme. Es klingt wie eine Abstraktion. Und irgendwann habe ich gemerkt: Das passt besser als jede Aufnahme es könnte. Das Datenstück zeigt abstrakte Zahlen über ein konkretes Meer. Der Sound darf genauso sein — nicht naturalistisch, sondern atmosphärisch. Die Einschränkung wurde zum Stilmittel.
Fünf Klangschichten, die sich beim Scrollen überblenden. Wellenrauschen am Anfang. Dumpfes Drohnen in den Todeszonen. Metallisches Knarzen bei der Munition. Gedämpfter Walgesang bei Timmy. Und ein Herzschlag, der einsetzt, wenn der Wal ins Bild gleitet. 3,5 Sekunden Crossfade zwischen den Akten. Lautstärke an Scrollgeschwindigkeit gekoppelt — schneller scrollen macht den Sound rauer. Ein Tiefpassfilter, der mit der Scrolltiefe absenkt. Je tiefer du im Stück bist, desto gedämpfter der Klang. Wie Wasser über dir.
Was ich dabei gelernt habe
Scrollwege sind Lesezeit. Zu lange Abstände zwischen den Inhalten fühlen sich an wie leere Seiten in einem Buch. Zu kurze lassen keine Luft zum Atmen. Ich habe die Abstände dreimal angepasst, bis es sich richtig anfühlte. Das kann man nicht berechnen. Das muss man scrollen. Immer wieder. Auf verschiedenen Bildschirmen. Es gibt keine Formel für Rhythmus.
Sound ist opt-in. Niemand will eine Webseite, die ungefragt loslegt. Der Sound startet stumm. Ein Button unten rechts. Wer Kopfhörer hat, bekommt eine zweite Ebene. Wer nicht, verpasst nichts Inhaltliches. Sound ist Atmosphäre, nicht Information. Diese Unterscheidung klingt simpel, aber sie hat jede Designentscheidung geprägt: Kein Sound darf etwas transportieren, das der Text nicht auch sagt.
Scheitern ist Material. Die kaputten Freesound-URLs waren ärgerlich. Aber ohne sie hätte ich nie angefangen, Sound im Browser zu synthetisieren. Das Ergebnis ist eigenständiger, leichtgewichtiger und passt besser zum Stück als jede Aufnahme. Manchmal ist Plan B nicht der Kompromiss. Manchmal ist er die eigentliche Idee.
Was das mit KI zu tun hat
Ich habe dieses Datenstück mit Claude gebaut. Nicht „Claude hat es geschrieben und ich habe meinen Namen draufgesetzt.“ Sondern: Ich habe die Geschichte geschrieben, die Struktur entworfen, die Bilder ausgewählt. Claude hat die Datenquellen recherchiert, den GSAP-Code geschrieben, die SVG-Pfade berechnet, die Web Audio API verdrahtet. Pair Programming, bei dem einer die Vision hat und der andere die Syntax und die Quellenarbeit übernimmt.
Das ist der Punkt, an dem die Warum-schlägt-Was-Erkenntnis konkret wird. Ich musste Claude nicht erklären, wie ein Oszillator funktioniert. Ich musste erklären, warum der Sound beim Scrollen rauer werden soll. Warum die Todeszonen nicht rot sein dürfen, sondern Teal. Warum zwischen den Akten Stille sein muss. Das Warum. Den Rest hat die Maschine gemacht.
Und als die Sounds zu hart überblendeten, habe ich nicht gesagt „mach mal smoothere Transitions.“ Ich habe gesagt: „Die Übergänge fühlen sich an wie Schnitte. Es soll sich anfühlen wie Tauchen — langsam, fließend.“ Claude hat daraus 3,5-Sekunden-Crossfades mit exponentiellen Kurven gebaut. Ich hätte den Code nicht schreiben können. Claude hätte die Anweisung nicht formulieren können. Das ist der Deal.
Eine HTML-Datei. Null Dependencies. Sound aus dem Nichts. Und eine Geschichte über ein Meer, das wir besser kennen als jedes andere — und trotzdem nicht verstehen.