Hollowtide

Context and Idea

Hollowtide started as a creative testbed: a site that doesn't sell a real product, but exists to see how far a web experience can be pushed. It's less about the content than the staging: preloader, choreographed intro, fluid navigation between pages, and visuals that live in WebGL rather than plain images.

Challenges

• Running WebGL, god rays and smooth scroll together without tanking performance
• Stitching four pages with seamless transitions, no flash between routes
• Choreographing a preloader and cinematic intro so the wait never feels like one
• Trimming the heaviest effects on mobile while keeping the same identity

The Solution

The site spans four pages (home, catalog, studio, connect) stitched by a transition router that turns every route change into a seamless fade, with no flash. The home opens with a timed preloader and a GSAP-choreographed entrance, with BlindingLight at its center: a Three.js scene where god rays filter through the logo. The catalog is a grid driven by a WebGL shader with scramble titles; studio and connect close the journey with careful typography and micro-interactions.

Key Features

• Real-time god rays filtering through the logo, driven by scroll
• WebGL spiral gallery built on hand-written GLSL shaders
• Image trail that follows the mouse across sections
• Menu and titles with a scramble effect and seamless page transitions
• Lenis smooth scroll synced with GSAP animations

One site, four pages

The scramble menu is the thread that holds it all together: four entries (index, studio, catalog, connect) and seamless transitions that move between pages without a single flash. But each one has its own register: the home opens on the manifesto 'Worlds That Forget Themselves', the catalog is an archive you click through, the studio lays out its voice and its design pillars, connect leaves a single channel open to reach out. Different pages, one staging.

Real shaders, not background videos

The animated backgrounds aren't video loops: they're WebGL shaders computed in real time. The home's god rays filter through a mesh generated from the logo (Three.js + postprocessing), while the spiral gallery runs on hand-written GLSL vertex and fragment shaders, with a view-dependent falloff. They react to scroll and viewport, something a video never could.

The people behind it

The team section introduces the people behind the fictional studio, with animated cards and scroll reveals.

Development and Technologies

Built on Next.js 16 (App Router) and React 19. The visual core is Three.js with the postprocessing library: the BlindingLight scene uses a GodRaysEffect anchored to a mesh generated from the logo's SVG path, and the spiral runs on hand-written GLSL vertex and fragment shaders, with a view-dependent falloff. Scrolling is handled by Lenis and synced with GSAP ScrollTrigger. Text enters with scramble effects built on SplitText, page transitions run through a dedicated router, and the heaviest effects (trail, some WebGL scenes) are desktop-only with lighter fallbacks on mobile.

Conclusion

Hollowtide is proof that a site can be an experience, not just a page. It's where I bring the most experimental part of my work (shaders, god rays, cinematic scroll) into a four-page journey that holds it all together. Explore the live site