liquid-svelte

Liquid Glass components for Svelte 5 — SVG displacement refraction, a generated specular rim and Motion springs. No canvas, no WebGL, no remote assets.

This browser resolves to tier …

Real refraction

A displacement map from Snell’s law over an analytic rounded-box SDF — not a blur with a border.

Three tiers

Full SVG refraction on Chromium, blur-and-tint elsewhere, flat as a floor. SSR matches the client.

Motion springs

Hover, press, drag and stretch compose on one transform, flushed once per frame.

Try the material

Notifications

tier

Drag the droplets — grab the switch knob and throw it. The tier select forces the rendering path every component resolves.