Top
Best
New

Posted by Sateeshm 4 days ago

Liquid Glass in the Browser: Refraction with CSS and SVG(kube.io)
488 points | 120 commentspage 3
arghwhat 4 days ago|
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.
miyuru 4 days ago||
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

seanobannon 4 days ago||
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
occoder 4 days ago||
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.

SchemaLoad 4 days ago||
I've been running the beta on my phone for a while ago, and I pretty much forgot about it. The new design works really well and is much less obtrusive than you'd imagine. Those few bad moments posted from the first dev beta have all been resolved now.
DHPersonal 4 days ago|||
It still has plenty of consistency errors and issues for the devs. But even if they fix all the bugs, I still think the UI changes are regressive: now things are buried in even more icons; the menus warp, change color, and move in distracting ways; and text on button and menus have never been harder to read.
occoder 4 days ago|||
Most people aren't very discerning about user interface intricacies.

Most people's reaction to the iOS 7 design disaster was: "ooh this feels like a whole new phone".

So there's that.

uni_baconcat 4 days ago||
You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.
buibuibui 4 days ago||
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.
arbayi 4 days ago||
https://github.com/dashersw/liquid-glass-js maybe you can also check this out?
pshirshov 4 days ago||
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.
_pferreir_ 4 days ago||
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.
stanko 4 days ago||
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?

kubeio 3 days ago|
It is a simple React + Motion + Tailwind + Vanilla SVG here.

But it was just a first try, lots of things are still unoptimized. I'll try to do better in a next article.

no_time 4 days ago|
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.
More comments...