Ein Scrollytelling-Projekt über LLMs, RAG und Agents. Was dahintersteckt, wie es technisch funktioniert, und warum ich glaube, dass das die ehrlichste Form von Content-Marketing ist.
Ich hätte einfach drei Blogartikel schreiben können. Einen über LLMs, einen über RAG, einen über Agents. 3000 Wörter pro Stück, SEO-optimiert, ordentlich strukturiert. Fertig. Wäre schneller gegangen.
Habe ich nicht gemacht. Weil ich glaube, dass diese Konzepte eine bestimmte Art zu leiden haben, wenn man sie nur in Text gießt: Sie bleiben abstrakt. Und abstrakt bedeutet in der Praxis, dass der Leser nickt, aber nichts versteht. Nicken ist billig. Verstehen ist Arbeit.
Meine Einschätzung nach zwei Jahren Beratungsarbeit mit EPU und KMU in Österreich und der DACH-Region: Die größte Bremse bei der KI-Adoption ist nicht fehlendes Budget und nicht fehlendes Interesse. Es ist fehlendes Bild. Die Leute haben keinen mentalen Film davon, was ein Sprachmodell wirklich tut, wenn sie einen Prompt abschicken. Was ein RAG-System ist, wenn es ihnen jemand empfiehlt. Was ein Agent bedeutet, der eigenständig Werkzeuge einsetzt. Ohne diesen Film bleibt alles Buzzword-Bingo.
Deswegen habe ich digitalhandwerk.rocks/wissen/ gebaut. Eine 3D-Wissensbasis. Und in diesem Artikel erkläre ich, was genau ich gebaut habe, wie es technisch funktioniert, und was mich dabei überrascht hat.
Was du auf digitalhandwerk.rocks/wissen/ findest
Der Wissens-Hub ist die Übersicht. Mobile-First-Cards, jede Karte ein Konzept, mit Status-Pill: Live oder In Arbeit. Wer die Seite kennt, weiß: Ich verspreche nichts, was noch nicht fertig ist. Aber ich zeige, wohin ich steuere.
Drei Konzepte sind live, als eigene interaktive Erklärungs-Seiten:
/wissen/llm/ zeigt, wie ein Large Language Model funktioniert. Tokens, Embeddings, Attention-Mechanismus, Transformer-Schichten, Wahrscheinlichkeitsverteilungen, autoregressive Generation. Das klingt nach Vorlesungsverzeichnis. Auf der Seite sieht es so aus: Du scrollst, und ein 3D-Objekt bricht auf. Der Text links erklärt, was du rechts siehst. Sieben Phasen, eine klare Erzählung vom „Was ist das Ding?“ bis zum „So erzeugt es einen Output-Token nach dem anderen.“
Das konkrete Beispiel auf der Seite: fünf Input-Tokens, „Die Hauptstadt von Österreich ist“, und sechs Output-Kandidaten mit Wahrscheinlichkeiten. Wien liegt bei 94 Prozent. Das ist kein Diagramm aus einem Paper. Das ist eine echte Szene aus dem, was im Modell passiert.
/wissen/rag/ ist meine persönliche Lieblingsseite, weil RAG das Konzept ist, das ich am häufigsten erklären muss. Retrieval-Augmented Generation. Eine Vektor-Datenbank zerfällt in 120 schwebende Kapseln. Zwölf davon haben Labels, die ich mir dabei gedacht habe: Honig-Marzipan-Tarte, Renaissance-Madrigal, Hochmoor-Mikrobiom. Das klingt absurd. Es ist Absicht. Diese Labels machen klar, dass eine Vektor-Datenbank keine Suchmaschine mit Stichwörtern ist, sondern ein Raum, in dem semantische Ähnlichkeit gilt. Haute Cuisine und Patisserie landen geometrisch nebeneinander, weil sie es inhaltlich tun.
/wissen/agents/ zeigt, wie ein KI-Agent mit Werkzeugen arbeitet. Sechs Tools im Inventar: web.search, db.query, fs.read, code.exec, mail.send, cal.book. Jedes mit einer JSON-Schema-Signatur. Der Reasoning-Loop eines Agents ist für viele das abstrakteste Konzept überhaupt. Auf der Seite ist es ein animierter Kreislauf: Frage reinkommt, Werkzeug wird ausgewählt, Werkzeug wird ausgeführt, Ergebnis fließt zurück, nächste Entscheidung. Bis zur Antwort.
Vier weitere Konzepte stehen als „In Arbeit“-Cards vorbereitet: Embeddings, MCP, Workflow-Automatisierung, Vektor-DB als eigenständiges Konzept. Kommt.
Warum 3D, wenn ein PDF reichen würde?
Die ehrliche Antwort ist: wegen Aufmerksamkeit. Nicht wegen Spektakel um des Spektakels willen, sondern wegen etwas Konkreteres. Wer heute auf seiner vierten Tab landet, wer bereits drei andere Artikel über LLMs überflogen hat, wer seinen Scroll-Reflex gut trainiert hat, den stoppt ein statisches Diagramm nicht mehr.
Aber das Ding, das sich bewegt, wenn man scrollt? Das hält an.
Und hier ist der wichtigere Teil: Bewegung erzeugt Verständnis, wenn die Bewegung semantisch ist. Wenn der Server nicht zufällig explodiert, sondern in genau dem Moment aufgeht, in dem der Text erklärt, was im Attention-Mechanismus passiert, dann ist die Animation kein Dekor. Sie ist die Erklärung.
Das ist der Unterschied zwischen visueller Dekoration und visueller Kognition. Scrollytelling kann kognitive Arbeit leisten, die Text alleine nicht schafft. Nicht immer. Aber bei abstrakten technischen Konzepten, wo das Problem ist, dass der Leser kein Bild hat: oft.
Ich sage das nicht, weil ich React Three Fiber interessant finde. Ich sage das, weil ich seit Monaten beobachte, wie Kundengespräche kürzer und produktiver werden, nachdem ich jemandem etwas Ähnliches gezeigt habe. Das Bild läuft. Der Rest des Gesprächs baut darauf auf.
Wie das technisch funktioniert: Stack und Entscheidungen
Der Tech-Stack ist bewusst gewählt. Vite plus React plus TypeScript als Build-Basis. Lokal builden, statische Files per FTP auf Mittwald hochladen. Kein Node.js am Server, kein Docker, kein Build-Prozess auf dem Hosting. Mittwald ist PHP-Hosting, und das ist völlig ausreichend, wenn man versteht, was WebGL wirklich braucht: einen HTTP-Server, der statische Files ausliefert. Mehr nicht.
Das ist auch ein Prinzip, das ich in meiner Beratungsarbeit immer wieder betone: Nicht jedes Problem braucht die maximale Infrastruktur. Wer eine WebGL-Site auf einem Shared-Hosting betreibt, macht nichts falsch. Er macht etwas richtig.
Für die 3D-Szenen kommt React Three Fiber zum Einsatz, das deklarative R3F-Layer über Three.js. Die Scroll-Animation treibt GSAP ScrollTrigger. Die Scroll-Position wird zur Animations-Zeitachse: Wie weit der User gescrollt hat, bestimmt, in welcher Phase das 3D-Objekt ist. Lenis übernimmt das Smooth Scrolling, das sich anfühlt wie auf einer professionellen Produktions-Site.
Eine Entscheidung, die nach außen unsichtbar ist, aber viel ausmacht: Studio-Lighting in-memory statt externer HDR-Files. Lightformer-Komponenten erzeugen die Reflexionen direkt im Browser. Kein File-Download, kein zusätzliches Netzwerk-Request, keine 4 MB HDR, die sich in die Ladezeit fressen.
Postprocessing liefert Bloom für die Akzent-LEDs und SMAA für Anti-Aliasing. Der Hintergrund ist #050505, fast schwarz, mit warmen Amber-Akzenten, #F59E0B. Off-White #E2E0DD für den Text. Dieses Farbschema ist das gleiche, das ich auf dem gesamten digitalhandwerk.rocks-Relaunch eingesetzt habe. Amber und Anthrazit, Dark-native, keine weißen Flächen, die nachts blenden.
Das Bundle ist aufgeteilt. Die App-Logik plus GSAP kommt auf 55 KB gzip. Der Three.js-Block plus R3F plus Postprocessing, die 470 KB gzip, wird lazy nachgeladen. Das bedeutet: First Paint und LCP passieren, bevor der schwere 3D-Code da ist. Der User sieht die Seite, bevor die Animation läuft. Das ist kein Zufall, das ist Performance-Architektur.
Was beim Bauen hängt bleibt, das kein Kurs lehrt
Ich war kurz davor, Depth of Field einzusetzen. Sieht toll aus in Previews. Ist im Praxisbetrieb, wo GSAP ScrollTrigger den Frame antreibt, ein Flackerproblem. DoF und Scroll-getriebene Szenensteuerung reagieren nicht gut aufeinander: Per-Frame-Lerp läuft gegen den GSAP-Scrub. Ergebnis: sichtbares Zittern. Lösung: DoF komplett raus. Bloom-Threshold höher, dafür sauber.
Das ist das Wissen, das in keinem React-Three-Fiber-Tutorial steht. Nicht weil es geheim wäre, sondern weil Tutorials selten echte Kombinations-Probleme zeigen. Sie zeigen Features in Isolation. Ich baue kein Demo. Ich baue etwas, das auf Mobilgeräten, auf langsameren Laptops und auf Tablets funktioniert, und da ist der Unterschied zu einem Studenten-Demo nicht die 3D-Qualität, sondern das Weglassen.
Das gleiche gilt für die Camera-Steuerung. Sieben Scroll-Phasen pro Konzept, jede Phase eine eigene Camera-Station mit definierter Position und Look-at. Keine freie Orbit-Kamera. Kontrolle statt Freiheit, weil Freiheit auf mobilen Touchscreens bedeutet, dass der User aus Versehen dreht und nichts mehr versteht. Der Benutzer führt keine Kamera. Er scrollt.
Auf Mobile füllt der Canvas 100vh. Der Text ist ein Glass-Overlay am unteren Rand, Backdrop-Blur, die Animation bleibt durch den Text durch sichtbar. Auf Desktop sitzt die Camera leicht nach links geshiftet, das 3D-Objekt steht visuell in der rechten Bildhälfte, der Text ist ein halbtransparenter Layer links. Das Bild zeigt, der Text erklärt. Links lesen, rechts sehen.
Das Pattern dahinter: Einmal bauen, immer wieder einsetzen
Das vielleicht Nützlichste an diesem Projekt ist nicht das Ergebnis. Es ist das Muster.
Ich habe einmal das Skelett gebaut: Scroll-getriebene Sieben-Phasen-Struktur, Camera-Stations, Text-Panel-System, Lenis plus GSAP plus R3F, Mobile-First-Canvas-Layout. Dieses Skelett ist eine Vorlage. Jedes neue Konzept braucht jetzt nur noch zwei Dinge: eigene 3D-Geometrie und eigenen Text. Das Drumherum ist fertig.
Das bedeutet, dass Embeddings, MCP, Workflow-Automatisierung und Vektor-DB nicht vier neue Projekte sind. Sie sind vier neue Inhalte in einem bestehenden System. Das ist der Unterschied zwischen einem Einzelprojekt und einem skalierbaren Pattern. Ich übertreibe nicht, wenn ich sage, dass jede neue Konzept-Seite jetzt deutlich schneller entsteht als die erste. Das Grundgerüst steht.
Für meine eigene Positionierung als KI-Berater bedeutet das: Die Wissensbasis wächst. Nicht als Marketing-Versprechen, sondern als real besuchbare Infrastruktur. Wer mich googelt, findet nicht nur Texte über KI. Er findet animierte Erklärungen, die zeigen, dass ich verstanden habe, wovon ich rede.
Was Suchmaschinen und KI damit anfangen
Diese Seiten sind nicht nur für Besucher gebaut. Sie sind für Suchmaschinen und für KI-Retrieval-Systeme gebaut.
Jede Konzept-Seite trägt TechArticle-Schema mit Autor-Attribution auf alexjanuschewsky.at als Person-Schema. BreadcrumbList ist implementiert, damit Google den Pfad digitalhandwerk.rocks → wissen → llm versteht und nicht erst raten muss. Das ist Search Everywhere Optimization in der Praxis: Nicht nur den Text für Menschen schreiben, sondern die Maschinen-Lesbarkeit als technische Pflichtaufgabe behandeln.
LLMs wie ChatGPT, Perplexity und Gemini zitieren Quellen, die klar zugeordnet sind, eine erkennbare Autorschaft haben und eigenständige, nicht-generische Aussagen treffen. Eine 3D-Erklärseite mit konkreten Zahlen, 120 Vektor-Kapseln mit spezifischen Labels, echten JSON-Schema-Signaturen für die Agent-Tools, ist das Gegenteil von generischem Content. Ich beobachte das regelmäßig in meiner Beratungsarbeit: Was zitiert wird, hat Ecken. Was glattgeschliffen ist, wird übergangen.
Beratung ist Filtern, nicht Verkaufen
Ich schreibe das hier zum Abschluss, weil ich es für das Ehrlichste halte.
Diese Wissensbasis ist Content-Marketing, ja. Aber sie ist zuerst etwas anderes: Sie ist ein Filter. Wer durch die RAG-Seite scrollt und versteht, was da passiert, kann danach eine informierte Entscheidung treffen. Ob RAG für seinen Anwendungsfall Sinn macht. Ob er das bauen lassen will. Ob die Komplexität den Nutzen rechtfertigt.
Manchmal ist die Antwort Nein. Das ist völlig in Ordnung. Beratung, die Kunden zuerst filtert, produziert bessere Ergebnisse für beide Seiten. Wer nach dem Besuch der Agent-Seite versteht, dass er keinen Agenten braucht, spart sich Geld, und ich spare mir ein Projekt, das nicht funktioniert hätte.
Wer scrollt und sieht, dass er genau das braucht: Den Link zu meiner Kontaktseite gibt es auf jeder Konzept-Seite. Dezent, am Ende, ohne Pop-up.
Schau dir die Seiten an: digitalhandwerk.rocks/wissen/. Dann weißt du, worum es geht.
