Building an interactive WebGL water hero in React — and the four bugs it cost me
I wanted a hero section that reacts to being touched. Not a video loop of water, not a looping GIF — an actual surface that ripples where you click it. The effect itself took an afternoon. Everything around it took considerably longer, and that is the part worth writing down. Here is what it ended up looking like: live demo The simulation The heavy lifting is done by jquery.ripples , a small…
The author desired a hero section that reacts to user interaction, specifically a section where the water surface ripples upon being clicked. To achieve this, the author utilized the jquery.ripples plugin, which runs a shallow-water simulation in WebGL. The plugin stores a height field in a texture and updates it using a wave update formula. The simulation then refracts the background image along the surface normal, creating the desired effect.
However, integrating the jQuery plugin into a React project proved challenging due to the plugin's reliance on global jQuery. To overcome this, the author dynamically imported the jQuery library and the plugin at runtime, setting the global references first. The useEffect hook was used to initialize the plugin, while a cancelled flag was implemented to handle StrictMode behavior in development. This setup ensured that the jQuery and plugin were loaded in separate chunks, preventing them from blocking the first paint.
To improve the user experience, the author decided to disable the plugin's default behavior of responding to mouse movements. Instead, they created a custom dropAt function that manually fires drops when the user interacts with the surface. This was achieved by adding event listeners for mousedown and touchstart events, which then call the dropAt function with the appropriate clientX and clientY coordinates.
One of the biggest challenges the author faced was the contrast between the bright water and white text, which made the caustics (shimmering patterns) nearly invisible. To address this issue, the author added a permanent veil across the middle of the overlay gradient, providing a subtle contrast that allowed the text to remain legible. This simple addition made a significant difference in the overall readability of the hero section.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
