How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Simulation: every pixel stores water height and speed. Each frame, the height spreads to its neighbours (a wave equation with step 1.4), loses a little energy (height × 0.999 per frame), and a round dent 5% of the section wide (intensity 3) is pushed in under the pointer. This runs in two render targets that swap every frame.
- Picture: the word and background are drawn once into a texture. The final image samples that texture offset by 0.3 × the water slope, so the word refracts, and adds a sharp specular glint (power 60 × 1.5) from a light up and to the left.
- Word: 250px bold (or 17% of the section width on narrow screens, scaled for the pixel ratio), centered, in the light colour on the flat background colour. It is redrawn on resize once the web font has loaded.
- Layout (demo): a full-screen section with a fixed nav (32px padding; logo left; three 16px links and an outlined pill button right, 32px apart), and a fixed footer with a 36px bold statement, 40% wide, on the left and two links on the right.
- Touch: dragging a finger draws ripples too.
- Fallbacks: without WebGL the same word is shown as plain HTML text on the background colour. Reduced motion shows the still word and does not run the simulation.