Live data from Hacker News

Liquid Glass in the Browser: Refraction with CSS and SVG

kube.io

81–90 of 127 posts

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

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

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#82
post #63

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.

That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter.

Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#83
post #39

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…

You will see something similar to Liquid Glass in OneUI 9 or 10 or Material Design 4. I can tell.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#84
post #34

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

For those wondering about the reference:

https://youtu.be/GamP4chXJ2I?t=17

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#85
post #34

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

What is funny is that for me the page on Chrome is slower and the scrolling jankier than on Firefox with the unsupported effects (macOS M1). Besides that, very impressed by the article presentation.

I mean that makes sense though, right? Since it’s only available on Chrome, it’s the only one doing all the computations (GPU or otherwise) that other browsers won’t do, since they just ignore the rule.

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

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

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#89
post #34

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

[deleted]

Re: Liquid Glass in the Browser: Refraction with CSS and SVG

#90
post #39

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…

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.

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.
Post reply on HN