Water Ripple Text Simulation
What it does
A full-screen Three.js water-ripple simulation over giant canvas-drawn wordmark text: moving the pointer injects pressure into double-buffered FloatType render targets running a ping-pong wave-equation shader, and a render pass refracts and adds specular highlights to the text beneath, so the cursor leaves rippling wakes across the surface. Driven entirely by mousemove on the WebGL canvas (no GSAP).
How it's built
| Category | 3d-webgl |
|---|---|
| Tech | three |
| Complexity | section |
| Performance cost | heavy |
| Mobile-safe | desktop-first |
How it works
The whole hero is a pool of water with a giant wordmark lying under the surface. Move the pointer across it and the cursor pokes the water: rings spread out from every touch, bend the letters underneath as they pass, and catch bright glints of light on their slopes. Stop moving and the ripples travel on, bounce off the edges of the screen and slowly settle back to a flat, still surface.
There is no video, no image and no animation library. The wordmark is drawn at runtime into a 2D canvas, and everything else is a physics simulation running on the GPU through Three.js.
A wave equation on the graphics card
The water is a grid as large as the screen, stored in a floating-point texture. Each pixel holds four numbers: the height of the water at that point, how fast that height is changing, and the slope of the surface in each direction. Every frame a shader reads the previous state, compares each point with its four neighbours, and computes how the surface accelerates towards them. That neighbour comparison is the discrete form of the wave equation, and it is what makes a single disturbance spread out as a ring. A small restoring force pulls the water back towards flat, and damping on both height and speed makes the waves lose energy so they die out instead of ringing forever.
A shader cannot read and write the same texture in one pass, so the simulation keeps two buffers and swaps them every frame: one holds the state being read, the other receives the new state.
The pointer adds a small, sharp bump of pressure under the cursor on each frame it moves, which is why fast strokes leave a wake and slow ones leave a single ring.
From physics to picture
A second shader draws what you see. It takes the slope of the water at each pixel and uses it to shift where it samples the wordmark texture, which is refraction: the letters bend where the surface tilts. The same slope is turned into a surface normal and lit by a fixed light, and only the steepest angles produce a bright, tight highlight, which paints the white crests along the waves. The two colours of the page are reused exactly in the canvas, and the renderer writes them without colour conversion, so the WebGL water and the HTML page read as one continuous orange field.
Performance and mobile
This is heavy. The simulation runs at the full device resolution in floating-point textures, with two render passes per frame, so a high-density laptop screen means millions of pixels simulated sixty times a second. It needs float render target support and it is pointer-driven, with nothing to do on touch screens. For production it is worth running the simulation at a lower resolution than the screen pausing it when the hero leaves the viewport, and showing a still wordmark on phones.
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Water Ripple Text Simulation — build prompt
## Goal
Build a full-screen hero for a fictional product studio called **"Soft Horizon"**. The whole viewport is a WebGL water surface: a giant canvas-drawn wordmark (**"softhorizon"**) sits under a real-time **wave simulation**, and as the pointer moves across the screen the cursor injects pressure into the fluid, leaving **rippling wakes that refract the text and throw off bright specular glints**, like poking the surface of a still pool. Nav and footer text float above the water. The star effect is the physics itself: a double-buffered (ping-pong) GPU wave-equation solver whose gradient field distorts and lights the text every frame. **No GSAP, no scroll** — everything is driven by `mousemove` on the canvas plus a `requestAnimationFrame` loop.
## Tech
Vanilla HTML/CSS/JS with ES module imports. The only runtime dependency is **`three`** (npm), imported as `import * as THREE from "three"`. There is **no GSAP, no Lenis, no scroll library**. Assume a fresh Vite project with `three` installed via npm.
Split the code into four files:
- `index.html`
- `styles.css`
- `script.js` — the Three.js app (`<script type="module" src="./script.js">`), wrapped in a `DOMContentLoaded` listener.
- `shaders.js` — a small module that exports **four** GLSL strings: `simulationVertexShader`, `simulationFragmentShader`, `renderVertexShader`, `renderFragmentShader`. Imported by `script.js`.
## Layout / HTML
Two fixed UI layers over the canvas; the `<canvas>` is created and appended to `<body>` by JS at runtime.
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
Learn the technique
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.