Skip to content

Liquid Glass Ripple

Liquid glass that bends your title

Liquid Glass Ripple preview image 1

Summary

Liquid glass that bends your title

Description

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.

Rank history How rankings work →

125015001750185558/149/59/2710/1911/10
  • All · #8506

Details

More like this