A real water simulation over a deep purple-and-blue liquid glass gradient. Move the cursor and it leaves a continuous wake of soft ripples; click and a large glass ring spreads out. The physics is a genuine two-buffer height field — waves propagate, interfere and settle like water, not a looped animation.
Drop in your hero title and the water bends it: the text is rendered under the surface, so every wave that crosses it makes the letters sway like a reflection. Font, size and colour are fully adjustable, and "Refraction" controls how strongly the water distorts what lies beneath.
Four dark liquid-glass palettes (Violet dusk, Deep blue, Aurora, Ink) plus full custom colours. You can also replace the gradient with your own image — the water refracts it the same way. Optional rain keeps the surface alive without a cursor.
Canvas and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and shows a calm frame on the Framer canvas.
A real water simulation over a deep purple-and-blue liquid glass gradient. Move the cursor and it leaves a continuous wake of soft ripples; click and a large glass ring spreads out. The physics is a genuine two-buffer height field — waves propagate, interfere and settle like water, not a looped animation.
Drop in your hero title and the water bends it: the text is rendered under the surface, so every wave that crosses it makes the letters sway like a reflection. Font, size and colour are fully adjustable, and "Refraction" controls how strongly the water distorts what lies beneath.
Four dark liquid-glass palettes (Violet dusk, Deep blue, Aurora, Ink) plus full custom colours. You can also replace the gradient with your own image — the water refracts it the same way. Optional rain keeps the surface alive without a cursor.
Canvas and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and shows a calm frame on the Framer canvas.
