component
Liquid Glass Ripple
By Lucas

Details
- LucasAuthor
- componentType
- $10.00Price
- 2026-08-13Published
- 2026-08-13Updated
- 2026-08-13Added
- EffectsCategories
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.
Introduction
Liquid glass that bends your title
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #6994