4 ms·

Looks pretty good. But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contr

Looks pretty good. But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution. Material has these wonderful designer resources showing how the app ought to be built of consistent moving layers, shown in 3D from the side. It's clear that there's these layers. But once you go 2d, put it all together, its incredibly hard for me to find all the features. The number of times that there's an action button in some corner that folks don't see massive. Motion sort of helps highlight the chrome vs content, but there's just so little thats visually defining. Liquid Glass's biggest strength IMO is the edge distortion. That when the content moves, there's this non-linear motion that the human visual sense immediately picks up on. Static screenshots don't always look great, but in motion there's so much more distinction of elements than anything else I've seen. And that key refractive element, that takes such huge advantage of human's motion sensing, is missing here. I'd seen one other great web web demo, but am struggling to find it right now. I did find this one, which I don't think looks as good, and the performance is bad for me here on mobile. But it nicely breaks down steps and shows how complex a task this can be. Getting these edge distortions in is hard, and relying on SVG filters to do it is a brutal path to hack together. https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaking-down-the-effect https://atlaspuplabs.com/blog/liquid-glass-but-in-css#breaki... There is a collection of attempts (CodePen Spark) at Liquid Glass that I just found. Second link is one I thought did a pretty nice job, via very specifically pre defined / hard coded SVG. https://codepen.io/spark/453 https://codepen.io/spark/453 https://codepen.io/lucasromerodb/pen/vEOWpYM https://codepen.io/lucasromerodb/pen/vEOWpYM

jasonthorsness 1y ago
I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.
- gumby271 1y ago
  I think the same is true for when they started using blurs everywhere. They knew Android OEMs would copy it in a worse way and shoot themselves in the foot. That's also why material design doesn't rely on blur effects, it needs to run well on much worse hardware. It's fun seeing the attempts to mimic Liquid Glass though, the most impressive so far is this Flutter package: https://pub.dev/packages/liquid_glass_renderer https://pub.dev/packages/liquid_glass_renderer
  - kris-kay 1y ago
    That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → "Only works on Impeller, so Web, Windows, and Linux are entirely unsupported for now"
  - dleeftink 1y ago
    Here is one with SVG filters (can be compute intensive): [0]: https://codepen.io/rebane2001/details/OPVQXMv https://codepen.io/rebane2001/details/OPVQXMv
- silvestrov 1y ago
  I think you overestimate how much most users are able to detect such differences and will care about it. Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands.
  - dylan604 1y ago
    Okay, I was with you about users caring about differences in the look of a glass refraction effect. But I'm flabergasted at the fact that there are people that cannot tell the difference between Coke and Pepsi by taste.
- _benton 1y ago
  I don't think it's that hard for someone with experience writing shaders to emulate. The moat is that it's almost impossible to replicate with browser technology, which hurts web-based ui systems and is still a big challenge with something like flutter or jetpack compose multiplatform. Stuff like React Native get it basically for free because their ui is still technically "native". But apps that rely on web views are screwed and I'm sure Apple will be happy to push devs away from those solutions as they're inferior for users. Now they just need to figure out a way to push RN apps towards true native.
kris-kay 1y ago
I agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually. For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D. And you're right about the effect being more visible when moving over a fixed background. The demo site I'm working on for the library does this, it's just not ready yet. Thanks for sharing the resources!
incrudible 1y ago
> But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution Good. I was already on the fence about frosted glass, but I absolutely hate the refraction effect, it is super distracting and will always look ugly in certain scenarios. Yes, it is how real glass behaves, but I do not care for that. It is like someone took the worst part of skeumorphism and doubled down on it, and I say that as someone who liked iOS better before version 7.

jasonthorsness 1y ago

I think this is a clever moat Apple created with Liquid Glass: they picked an effect that is easy to make a worse version of, but very hard to do the real/right way (and humans have an intuition for real/right because they see real glass every day). So any copycats will look worse in a way that's pretty obvious and Apple gets to keep the "premium-looking" product.

gumby271 1y ago
I think the same is true for when they started using blurs everywhere. They knew Android OEMs would copy it in a worse way and shoot themselves in the foot. That's also why material design doesn't rely on blur effects, it needs to run well on much worse hardware. It's fun seeing the attempts to mimic Liquid Glass though, the most impressive so far is this Flutter package: https://pub.dev/packages/liquid_glass_renderer https://pub.dev/packages/liquid_glass_renderer
- kris-kay 1y ago
  That is a very impressive attempt at Liquid Glass! The whole cross-browser and cross-platform bit is still a challenge sadly → "Only works on Impeller, so Web, Windows, and Linux are entirely unsupported for now"
- dleeftink 1y ago
  Here is one with SVG filters (can be compute intensive): [0]: https://codepen.io/rebane2001/details/OPVQXMv https://codepen.io/rebane2001/details/OPVQXMv
silvestrov 1y ago
I think you overestimate how much most users are able to detect such differences and will care about it. Somewhat like the blind tasting tests of Coca Cola versus Pepsi versus supermarket brands.
- dylan604 1y ago
  Okay, I was with you about users caring about differences in the look of a glass refraction effect. But I'm flabergasted at the fact that there are people that cannot tell the difference between Coke and Pepsi by taste.
_benton 1y ago
I don't think it's that hard for someone with experience writing shaders to emulate. The moat is that it's almost impossible to replicate with browser technology, which hurts web-based ui systems and is still a big challenge with something like flutter or jetpack compose multiplatform. Stuff like React Native get it basically for free because their ui is still technically "native". But apps that rely on web views are screwed and I'm sure Apple will be happy to push devs away from those solutions as they're inferior for users. Now they just need to figure out a way to push RN apps towards true native.

kris-kay 1y ago

I agree that Liquid Glass's edge distortion looks great, and I will try my hand at recreating it eventually. For the current project, I aimed to create a material that looked polished, worked consistently across browsers, and didn't use real 3D. And you're right about the effect being more visible when moving over a fixed background. The demo site I'm working on for the library does this, it's just not ready yet. Thanks for sharing the resources!

incrudible 1y ago

> But missing out on the refractive aspect of glass takes away the strong visual separation of layers that IMO is Liquid Glass's biggest contribution Good. I was already on the fence about frosted glass, but I absolutely hate the refraction effect, it is super distracting and will always look ugly in certain scenarios. Yes, it is how real glass behaves, but I do not care for that. It is like someone took the worst part of skeumorphism and doubled down on it, and I say that as someone who liked iOS better before version 7.