Scroll-gesteuertes 3D-Erlebnis, das in 5 Akten fühlbar macht, wie Aphantasie sich anfühlt — gebaut mit React Three Fiber, WebGL-Postprocessing und Web Share API.
Stell dir vor, du sollst einem Menschen erklären, dass du dir einen roten Apfel vorstellen kannst — und er schaut dich ungläubig an. Nicht weil er zweifelt, sondern weil er schlicht keine Referenz hat. Menschen mit Aphantasie erzeugen kein inneres Bild. Das Konstrukt „sich etwas vorstellen" funktioniert bei ihnen nicht visuell.
Text erklärt das. Ein Erlebnis macht es spürbar.
„Through the Mind's Eye" ist eine scroll-gesteuerte 3D-Journey auf aphantasie.org/experience: Wer sie durchläuft, erlebt in etwa vier Minuten, wie sich der Übergang von voller Bildkraft bis zur völligen Dunkelheit im Kopf anfühlt — und landet danach direkt im wissenschaftlichen Selbsttest der Plattform.
Die Experience folgt einer klaren Dramaturgie. Jeder Akt ist eine eigene 3D-Szene, gesteuert durch einen einzigen Scroll-Kanal.
Akt 1 — Hyperphantasie
Ein leuchtend roter Apfel schwebt im Raum. 400 Staubpartikel treiben um ihn herum, 40 Wisps mit Glow-Sprites glühen weich. Das ist das Maximum mentaler Bildkraft — lebendig, warm, fast physisch greifbar.
Die gesamte Journey läuft über einen einzigen <ScrollControls pages={8} damping={0.3}>. Statt mehrerer paralleler Scroll-Handler gibt es eine zentrale useScroll()-Abfrage, die den normierten Scroll-Offset (0–1) an alle Szenen-Komponenten weitergibt. Jeder Akt interpoliert seine Uniforms, Materialien und Positionen aus diesem einen Wert.
Das Ergebnis: keine Race-Conditions zwischen Scroll-Listenern, keine State-Explosionen, eine einzige Timeline.
Der Bloom-Effekt ist das visuelle Herz von Akt 1. Er macht die Wisps warm und lebendig — und sein Verschwinden in Akt 2 fühlt sich deshalb so drastisch an. Beide Effekte laufen über @<a href="/glossar/react" class="glossary-link" data-glossary-term="react">react</a>-three/postprocessing direkt in der WebGL-Pipeline, nicht als CSS-Filter.
Immersive Web-Erlebnisse scheitern häufig auf Geräten außerhalb der Entwickler-Workstation. Vier Maßnahmen verhindern das:
Device-Tier-Heuristik — Beim Start wird die Hardware eingestuft. Schwache Geräte (niedriger hardwareConcurrency-Wert oder deviceMemory < 4) laden das Postprocessing nicht. Die Szene läuft trotzdem vollständig, nur ohne Bloom und Vignette als Shader-Pass.
DPR-Cap 1.5 — Das Canvas rendert maximal mit Device-Pixel-Ratio 1.5, selbst auf Retina-Displays. Der visuelle Unterschied ist minimal, der GPU-Aufwand sinkt erheblich.
Dynamic Import mit ssr: false — Three.js lädt ausschließlich auf /experience. Der Rest der Plattform trägt keine 3D-Abhängigkeiten im Bundle.
Statischer Fallback — Bei prefers-reduced-motion oder fehlendem WebGL-Kontext erscheint eine barrierefreie, statische Seite mit denselben Inhalten.
Die Experience ist in DE, EN, ES, FR und PL verfügbar. Alle Infopanel-Texte im Konstellation-Akt laufen über next-intl, sodass auch der Share-Screenshot in der Sprache des Nutzers erscheint.
Beim Teilen greift zuerst die Web Share API — das native Teilen-Sheet auf iOS und Android. Ist die API nicht verfügbar (Desktop-Browser ohne Unterstützung), kopiert ein Fallback-Handler die URL in die Zwischenablage. Ein dynamisch generiertes OG-Image stellt sicher, dass der geteilte Link in sozialen Netzwerken mit einer aussagekräftigen Vorschau erscheint.
Der letzte Akt der Experience führt direkt in den VVIQ-basierten Selbsttest der Plattform. Das ist kein zufälliger CTA — die Journey bereitet emotional vor. Wer gerade erlebt hat, wie sich Bildlosigkeit anfühlt, kommt mit echter Neugier in den Test.
Dieser Übergang ist der eigentliche Designgewinn: Die Experience ist kein Selbstzweck, sondern Einleitung.
Scroll-gesteuerte 3D-Erlebnisse funktionieren überall dort, wo ein Thema schwer zu beschreiben, aber leicht zu fühlen ist: Produkt-Launches, wissenschaftliche Kommunikation, Markenidentitäten.
Einen technischen Tiefer-Einblick in den Aufbau von Scrollytelling-Projekten findest du im Scrollytelling-Guide.
Wenn du eine ähnliche Experience planst, sprich uns an — Projekt anfragen.
Interesse an einer Zusammenarbeit?
Lassen Sie uns besprechen, wie wir Ihr Projekt zum Leben erwecken können.
