Aphantasie.org - Das innere Auge verstehen

Können Sie sich einen roten Apfel vorstellen?

Die meisten Menschen sehen sofort ein Bild vor ihrem inneren Auge. Doch 2-5% der Bevölkerung können das nicht – sie haben Aphantasie, die Unfähigkeit, mentale Bilder zu erzeugen. Viele wissen es nicht einmal.

Aphantasie.org ist unsere Antwort auf diese Wissenslücke: Eine wissenschaftliche Plattform, die jedem ermöglicht, seine Vorstellungskraft zu testen und zu verstehen.

Das Projekt auf einen Blick

Die Herausforderung

Bestehende Ressourcen zu Aphantasie waren entweder:

• Zu akademisch – Wissenschaftliche Paper, die Laien nicht verstehen
• Nicht validiert – Fragwürdige Online-Quizze ohne wissenschaftliche Basis
• Nicht barrierefrei – Englischsprachig, nicht DSGVO-konform
• Visuell langweilig – Trockene Textwüsten ohne Engagement

Wir wollten eine Plattform schaffen, die wissenschaftlich fundiert und gleichzeitig einladend und zugänglich ist.

Screenshots & Impressionen

Startseite mit interaktivem 3D-Gehirn

Dark Mode für Konzentration

Wissenschaftliche Tests

Touch-optimiert

Features im Detail

3D-VisualisierungWissenschaftliche TestsMehrsprachigkeitDSGVO-Compliance

3D-Visualisierung

Ein interaktives 3D-Gehirn begrüßt Besucher auf der Startseite. Es reagiert auf Mausbewegungen und visualisiert das Thema sofort – ohne langweilige Textwände.

• Three.js mit React Three Fiber
• Conditional Loading für Mobile
• Optimierte 3D-Assets für Performance
• Smooth 60fps Animationen

Mobile Experience

Touch-optimiert

Auf Mobile wird das 3D-Gehirn durch ein optimiertes statisches Bild ersetzt. Die Tests sind vollständig touch-optimiert mit großen Tap-Targets und klarem Fortschrittsindikator.

• ✓ Responsive von 320px bis 4K
• ✓ Touch-optimierte Test-UI
• ✓ Reduzierte Animationen auf Mobile
• ✓ Offline-fähig (PWA)

Tech Stack

Architektur-Entscheidungen

Warum Supabase?

Row Level Security (RLS) war der Hauptgrund. Bei Gesundheitsdaten müssen wir sicherstellen, dass Nutzer nur ihre eigenen Ergebnisse sehen können. Mit RLS definieren wir das einmal auf Datenbankebene:

-- Jeder User sieht nur eigene Testergebnisse
CREATE POLICY "Users can view own results"
ON test_results FOR SELECT
USING (auth.uid() = user_id);

Kein zusätzlicher Backend-Code nötig. Die Datenbank erzwingt die Regeln automatisch.

Warum Three.js?

Das 3D-Gehirn ist kein Gimmick – es visualisiert das Thema sofort. Die Herausforderung war Performance:

• Bundle Size: Three.js ist groß. Wir laden es nur auf Desktop.
• Mobile Fallback: Statisches Hero-Image auf Mobile.
• Lazy Loading: Die 3D-Szene lädt erst bei Interaktion.

Ergebnis: Lighthouse 95+ trotz komplexer 3D-Grafik.

Learnings & Takeaways

1. Mehrsprachigkeit früh planen – next-intl Routing nachträglich einzubauen ist schmerzhaft
2. 3D-Performance ist möglich – aber erfordert bewusste Optimierung
3. RLS vereinfacht Datenschutz – weniger Code, mehr Sicherheit
4. Dark Mode für Fokus – bei wissenschaftlichen Tests ein echtes Feature

Fazit

Aphantasie.org zeigt, dass wissenschaftliche Plattformen modern, performant und datenschutzkonform sein können – ohne Kompromisse bei der User Experience.

Interessiert an einer ähnlichen Plattform? Ob Healthcare, Wissenschaft oder Education – wir bringen komplexe Themen verständlich ins Web.