Immersive Noise Transition
Overview
Immersive Noise Transition is a scroll-driven cinematic gallery where each gesture triggers a GPU-accelerated image transition built entirely in WebGL. As the outgoing frame dolly-zooms inward, an incoming image resolves through a 7-octave fractal Brownian motion dissolve — organic, non-repeating, and fluid. Typography animates at the character level: letters rise from below on entry and sweep laterally out on exit, their timing deliberately overlapping the shader so the editorial rhythm never breaks. The viewport stays locked; scroll cycles infinitely in both directions. The result is a premium, full-screen experience that feels closer to film than to a webpage.
Tech Stack
- React 19
- Vite
- GSAP
- GLSL
- Tailwind CSS
Highlights
- Fragment shader blends frames through 7-octave FBM noise, producing a unique organic dissolve pattern on every transition
- Dolly-zoom effect runs on two independent curves — outgoing image pushes to 1.25× while incoming resolves from 0.95×
- Sinusoidal wave distortion modulates the blend boundary at its midpoint for a subtle cinematic warp
- CSS-cover UV mapping in GLSL ensures textures fill the viewport correctly at any aspect ratio without distortion
- GSAP SplitText drives character-level entry and exit animations with asymmetric staggering (0.002s in, 0.01s out)
- Text, shader, and camera timelines overlap in a single GSAP sequence — new content appears before the previous transition completes
- Wheel, touch, and pointer inputs unified through GSAP Observer with a 6px direction tolerance and animation guard
Formats
Github RepositoryGet Access to this Resource
Get instant access to your custom-built website, complete with stunning design and seamless functionality. Start showcasing your brand today!