Liquid Glass in the Browser: Refraction with CSS and SVG
1–10 of 127 posts
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#2Very nice, I really like the vector animations :)
One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#3Very nice, I really like the vector animations :) One thing I'd say is to apply some anti-aliasing (MSAA, SMAA?)—even on a 4K display with a pixel density of 64.3 px/cm, the jaggies are visible, especially because of the extreme contrast of the caustics behind the dark background.
I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line.
Regardless, this is a great writeup for changes I wish to never see in ordinary UI.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#4I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#5this is the first one I've seen that isn't just feTurbulence. Thank you for doing it right! I've been thinking about it since the first liquid glass clones!
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#6I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#7Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#8Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
Same, very laggy on my machine. The spectacular border effects also didn't work for me.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#9I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations.
Re: Liquid Glass in the Browser: Refraction with CSS and SVG
#10Impressive but also impressive in that scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder. I hate to imaging the performance of a full UI leveraging this stuff. Apple can do it in the UI because they can optimize the hell out of it.
Yeah this site does not scroll like butter as it were.
But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.