RippleVerse – Water Ripple Effect
Dev Resources
Overview
RippleVerse is an interactive water simulation gallery where a full-screen GPU-rendered wave field reacts in real time to cursor movement and touch. Scrolling advances through five images — each transition a smooth, shader-driven crossfade with specular light glancing off the animated surface. The standout effect is the typography: slide titles are filled entirely with the live WebGL scene by clipping an inverted canvas readback to each text glyph, making letters feel carved from water.
Tech Stack
- React 19
- Vite
- Tailwind CSS
- GSAP
- GLSL
Highlights
- Real-time finite-difference wave equation solved per-frame entirely on the GPU via ping-pong framebuffer objects
- UV distortion driven by pressure gradients stored across RGBA32F texture channels, creating a refractive water-lens effect
- Typography filled with live WebGL output using Canvas 2D destination-in compositing and per-frame inversion
- Scroll-driven image gallery powered by GSAP ScrollTrigger with GPU-side crossfades that snap cleanly during rapid navigation
- All five image textures preloaded into a URL-keyed cache at mount, enabling zero-latency GPU blend transitions
- Mouse and touch coordinates normalized to the same UV space — full interaction parity across desktop and mobile
- Specular highlights reconstructed per-pixel from surface normals derived from the wave gradient field
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!
Contact Us