HN Reader

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

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.

Apple design nowadays should be something we point to and laugh at, not something to imitate.

Apple lost the plot on design after Steve Jobs died and Jony Ive assumed full control.

It's not Jony Ive's fault. That's the nature of their partnership, he created and Steve Jobs edited. Ive, of all people, probably lost the most when Steve Jobs died.

It's all been downhill ever since. Ousting Jony Ive and putting Alan Dye in charge didn't help.

The problem remains: there's no longer an editor in charge.

Apple fans like to think that they've recovered a little since the iOS 7 debacle, but in reality it's just self delusion.

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/).

I'm still not sold on liquid glass as a whole. It can be quite beautiful, but in the demos provided (and even in Apple's promotional materials) I think readability of UI elements suffers tremendously.

That said, I've seen many attempt to recreate the effect on web but you've outdone them all. The variety and mathematical modeling of edge shapes elevates this implementation above the rest.

If you decide to continue with this, I would love to see:

1. chromatic aberration along displaced areas

2. higher resolution in the refraction

Many people discussing performance issues but this runs like butter on my M3 Pro.

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.

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 :(

As much as I still dislike Liquid Glass, this is insanely impressive!

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.

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.

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...

Nice write up! I'm always happy to see interactive articles.

As someone who also do interactive articles from time to time, I'm wondering what is the tech stack you are using to make these?

This is cool and a nice writeup but - Liquid Glass is the totality of the design language, including elements close to one another merging together meta-balls like, the different tinting/clear modes, the controls being on a distinct layer from the content...

This is "just" a glass shader.

I forked a JS library for liquid-glass and patched it up with some positioning fixes. It's fun to use in presentations.

See https://github.com/nkzw-tech/liquid-glass

Good work and pretty but part of me thinks - ah, ok, that's why our 12 orders of magnitude faster computers than zx spectrum lag more.

Fantastic job! Great writeup too!

https://github.com/dashersw/liquid-glass-js maybe you can also check this out?

Strangely the "Playground" session seems to work well in Firefox but nothing else does

  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.

Dishonor on your WHOLE FAMILY! dishonor on you, dishonor on your cow...

Netlfix's logged out UI has this glass effect for background for some time and it slows down the whole site.

https://www.netflix.com/browse/genre/839338

I guess we all knew that liquid glass design language was gonna leak into the web eventually but if I see a website drain my battery so it can distort the text I’m trying to read I won’t be staying.

The stuttering has already been pointed out here so I won’t pile on.

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.

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.

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.

None of it looks usable. Perfect for digital family photos.

Great article though.

I first tried the demos on Firefox and was like "wow, this looks fancy". Then, I saw there was a "Chrome-only" warning. I actually prefer the way it looks on Firefox, TBH.

Neat! Doesn't look particularly pleasant as the edges have high contrast single-pixel width artifacts, but maybe it's possible to smooth that out. Could also just be a quirk in chrome's svg/backdrop filter support that they'll fix.

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

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.

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

I think the bounciness of the elements is also a very charming characteristic part of the Liquid Glass UI that Apple introduces. But recreating that is probably very difficult with web technologies.

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!

Incredible work on the CSS and SVG!

But liquid glass is such a horrible idea for a UI!

Now I feel like an old person, but I live with glasses every day and absolutely love clean UI's.

Introducing glass lens f*ckery just for the sake of it is terrible.

Does this not work on Firefox? Just looks like regular gradients.

404'd?

Soon we'll be creating black hole simulations to run a browser effect.

In the announcement thread here about Liquid Glass there was a guy predicting an avalanche of people implementing this effect badly everywhere they can. Well, here we go.

I'm just wondering if the new ray-traced scrollbars and buttons are more functional and would make me more productive than ancient text-mode turbo vision ones, or those in Windows 3.

insightful and nice work

Very slick. Shame it doesn't work on Firefox.

It’s a shame it does not work on iOS 26.

Don’t blame the author for the chrome only demo, blame Apple, and this bug from 2014! https://bugs.webkit.org/show_bug.cgi?id=127102

Apple lost it when Johnny Ive died.

awesome! brings back memories days of creative coding for fun

404?

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

Some serious work has gone into this article.

Unconvinced about the usability case for 'glass'.

Once again, Apple takes off and nukes it's developer ecosystem from orbit.

One of the greatest tech related blogposts that I have EVER read.

Why is it so loud? On same machine Cyberpunk2077 goes with highest settings with same fan noise.

Fantastic demo, very slick!

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!

Maybe technically impressive but please don't use this on your websites, it looks like shit (the effect in general, not this specific implementation)