I 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
cycomanic · 1h ago
Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.
davidmurdoch · 2h ago
Impressive!
msy · 3h ago
Impressive 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.
kubeio · 3h ago
Haha, I’m the author of the post.
I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow right now and needs optimization.
And it’s not just the refraction/displacement map: plenty of other parts, like visualisations, aren’t optimized yet either.
jonahx · 17m ago
Performance aside, this is really well done.
kubeio · 46m ago
I did a quick performance fix, should be a bit better, at least on Chrome.
(Safari stills seems to be a bit slow to render SVGs)
Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
StrangeDoctor · 3h ago
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.
Same, very laggy on my machine. The spectacular border effects also didn't work for me.
internet2000 · 21m ago
Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png
retox · 35m ago
Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)
cpojer · 3h ago
I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations.
Strangely the "Playground" session seems to work well in Firefox but nothing else does
RestartKernel · 3h ago
By far the most impressive browser implementation of glass I've seen. Though it doesn't seem like it'd be viable in a "real" website due to compatibility and performance.
delta_p_delta_x · 4h ago
Very 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.
rezmason · 4h ago
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.
jrochkind1 · 1h ago
i'm amazed how good the write-up is, with amazing interactive visual aids!
WD-42 · 3h ago
Does this not work on Firefox? Just looks like regular gradients.
al_borland · 3h ago
> Chrome‑only demo
> The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter).
You can still read the article and interact with the inline simulations in other browsers.
WD-42 · 1h ago
I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.
LeoPanthera · 59m ago
404'd?
thrtythreeforty · 2h ago
How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.
kubeio · 2h ago
I used React with vanilla SVG and Motion to animate.
altairprime · 4h ago
I’d be very interested to compare the power efficiency of this implementation versus the OS-native version of same over a 12-hour benchmark.
tossit444 · 59m ago
404?
tkzed49 · 4h ago
this 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!
I planned to fix the performance issues before posting here (since I knew HN would be quick to point that out), but somebody posted it first. You’re absolutely right — it’s pretty slow right now and needs optimization.
And it’s not just the refraction/displacement map: plenty of other parts, like visualisations, aren’t optimized yet either.
(Safari stills seems to be a bit slow to render SVGs)
Anyway, I did not expect this blog post to be on HN, so still things to improve on it.
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.
See https://github.com/nkzw-tech/liquid-glass
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.
Regardless, this is a great writeup for changes I wish to never see in ordinary UI.
> The interactive demo at the end currently works in Chrome only (due to SVG filters as backdrop‑filter). You can still read the article and interact with the inline simulations in other browsers.