Liquid Glass in the Browser: Refraction with CSS and SVG

Posted by Sateeshm 4 days ago

Liquid Glass in the Browser: Refraction with CSS and SVG(kube.io)

488 points | 120 commentspage 2

redbell 4 days ago|

Excellent attempt despite the browser support limitations. The inline, interactive examples were also an added value, which, at some point, I felt like I was reading one of Ciechanowski's articles (https://ciechanow.ski/).

wraptile 4 days ago||

What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!

dmix 4 days ago|

The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.

wraptile 3 days ago||

Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.

andredurao 4 days ago||

I'm not sure about other browsers but using Chrome on linux the magnifying glass demo was weird. Though it looked like some glass distortion I couldn't drag it around vertically :(

jrochkind1 4 days ago||

i'm amazed how good the write-up is, with amazing interactive visual aids!

creatonez 4 days ago||

The thing that makes liquid glass actually somewhat work compared to previous shiny glass designs is the automatic tint adjustment for contrast. Nothing I've seen actually pulls this off.

kubeio 3 days ago|

That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white. Then the layer on top of it would do the opposite.

a022311 4 days ago||

Despite being on Firefox and seeing the effects half-working (at least we get performance ;D), this looks like the best implementation I've seen up until now (for some reason I was researching it a lot the last few days).

What I loved most though is the website design and the carefully crafted interactive visualizations! For me, they're on the same level as those of Bartosz Ciechanowski and Josh Comeau. I really want to see the source code...

kubeio 3 days ago|

Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.

jansan 4 days ago||

I was actually thinking about implementing exactly this (using feDisplacementMap), but never found time and I was not sure if it would be possible at all. Great to see that it actually works and someone with deep SVG knowledge implemented it.

The whole blog entry is a piece of art and on one level with Bartosz Ciechanowski's work. If you want to make money from it, you will have to find less niche subject's, though.

jjuup 4 days ago||

Well done. Especially love the whole article layout and quality, aside from the good execution. Liquid glass as concept doesn't really enhance practical UX that much (and might even make it worse if overused), but it's a nice experience and something new and delightful.

thrtythreeforty 4 days ago||

How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.

kubeio 4 days ago|

I used React with vanilla SVG and Motion to animate.

qingcharles 2 days ago||

The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.

0x20cowboy 3 days ago|

If the author is around here, I think there is an error in the Equations section. In the Convex Circle equation I think it has an extra set of parens. sqrt(1-(1-x)^2) I believe as it is it’s just linear.

kubeio 1 day ago|

Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.

More comments...