WebGL Water Ripple Hero with Mirrored Heading
Overview
A hero section for React and Next.js with still black water and a real ripple simulation. Your heading and a soft moon are mirrored in the surface, and the cursor and taps send rings through the reflection.
The rings are not an animation. The water is a wave simulation running on float textures, so rings spread, cross and fade the way they do on a pond, and they flatten into ellipses as they travel towards the far shore. Your heading stays real, selectable text in the page. Once the font has loaded, each letter is copied into a texture at the exact place the browser put it, so the reflection always matches your typeface, weight, tracking and line breaks.
Details
- Category
- Hero
- Interaction
- On Load + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 082 / Backgrounds
WebGL Silk Fabric Background Shader with Cursor Ripple
On Load · Mouse Move · On Click
No. 062 / Backgrounds
WebGL Liquid Gold Background Shader
On Load · Mouse Move
No. 056 / Backgrounds
WebGL Animated Gradient Background with Film Grain
On Load · Mouse Move
(02)FAQ
WebGL Water Ripple Hero with Mirrored Heading — FAQ
01How do I set my own type?
Pass heading and set the font, size and weight through headingClassName. The reflection reads the computed style of the real heading and redraws when the font loads or the section resizes, so there's nothing else to keep in sync.
02Where do my other elements go?
eyebrow sits above the heading, and children are laid over the water, filling the area below the shore. Give them absolute positions. Keep them near the bottom corners, since the middle is where the reflection falls.
03Can I move the moon and the shore?
Yes. horizon sets the shore, moon sets the centre as [x, y] fractions of the frame, and moonSize sets the radius. A moon's reflection lands as far below the shore as the moon sits above it, so keep the moon high only if the reflection still fits in the frame.
04What does it need from my page?
React and Tailwind CSS v4. It has no npm dependencies: no Three.js, no GSAP, and no image files to load. className sets the size of the section, so give it a height, such as h-dvh.
05What happens without WebGL or with reduced motion?
Without WebGL, or when the browser would draw on the CPU, a CSS moon and a mirrored copy of the heading stay in place, and that copy is hidden from screen readers. With reduced motion it draws one still frame with two rings frozen on the water.