Loading the live preview…

More like this

Liquid Glass Hero

The glass is drawn in one WebGL2 pass, so refraction is real in Chrome, Safari and Firefox alike (SVG filters inside backdrop-filter only work in Chromium). Every piece is a rounded shape joined to the others with a smooth minimum, so pieces that come close grow a neck, merge and pinch apart again like liquid. The surface bends the scene strongly at the rim and gently inside, splits the colours slightly, and frosted pieces read from a blurred copy of the scene made once per theme rather than every frame. Light catches the rim facing the pointer and the scene drifts against it. A tab bar whose selection is a lens that stretches with its speed and picks one of four scenes (cross-faded under the glass), a drop you can drag or nudge with the arrow keys, frosted call-to-action pills and a settings card whose sliders are glass beads that set the refraction and frost. Controls are real buttons, a radio group and range inputs placed from the same layout as the glass; without WebGL2 they fall back to CSS frosted glass. One loop, only while on screen; reduced motion keeps the glass still.

Heroes
interaction
dark

Copy promptDownload source code

Get the prompt and source code

Buy this componentThis component and every future version of it.$19
Get all accessBest valueEvery component in the catalog, including new ones.$149

One-time payment · lifetime access

Checkout opens soon. Until then, every live preview is yours to try.

Details+

Identifier: liquid-glass-hero
Version: 1.0.0
License: Commercial license

Read the license