URL-Zoom-Tunnel — wie wir den Hero-Wow-Moment bauen
Camera-Push durch eine 3D-URL-Bar. R3F + GSAP + Lenis. Performance-Budget, Reduced-Motion, Awwwards-relevante Details.
Standard-Hero in der DACH-Webdesign-Branche: Stock-Foto Team-am-MacBook, Headline mit Verb + "Ihre", Floating-CTA-Bubble unten rechts.
Wir wollten den Anti-Move: keine Menschen im Hero, kein Stock, kein Floating-CTA. Stattdessen die URL selbst als Held der Inszenierung.
Konzept: User sieht beim Page-Load einen Browser-Frame mit URL-Bar in der Mitte. Eine Type-Animation tippt "wöstemeyer.web". Beim Scroll fährt die Kamera durch die URL-Bar hindurch — die Buchstaben werden zu Tunnel-Elementen, am Ende öffnet sich das Wöstemeyer-Universum mit einem warmen Bernstein-Light-Reveal.
Stack: React Three Fiber + drei + @react-three/postprocessing für Bloom + ChromaticAberration + Vignette. Camera-Position-Damping mit THREE.MathUtils.damp für sanfte Verlagerung statt linear-mapped-Scroll.
Performance: 3D-Module lazy-loaded via dynamic() mit ssr:false, DPR-Cap [1, 2], pre-allocated Star-Buffer außerhalb Component-Body, fog-Color matched zu bg-primary für nahtlosen Übergang.
Reduced-Motion: prefers-reduced-motion ersetzt 3D-Canvas durch HeroFallback — ein gradient-blurred Static-Element. WCAG/EAA-Pflicht seit 28.06.2025.