Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Liquid Glass in the Browser: Refraction with CSS and SVG

kube.io

Post reply on HN
Print view View original

61–70 of 127 posts

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

#61

Post by sonar_un »

_ZeD_ wrote: 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...

Ok, this was the funniest comment i've read in a while.

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

#63

Post by gyomu »

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.

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

#64

Post by mirekrusin »

ivolimmen wrote: post #36
_ZeD_ wrote: 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...

I had the same reaction but the weird thing is: it looked ok in FireFox..?

Try on chromium based browser - it's much better.

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

#66

Post by Gigachad »

mirekrusin wrote: post #65

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.

Surprisingly the actual liquid glass ui seems to be perfect 120hz smooth on my 4 year old iPhone.

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

#68

Post by fuzzy2 »

ivolimmen wrote: post #36
_ZeD_ wrote: 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...

I had the same reaction but the weird thing is: it looked ok in FireFox..?

The backdrop-filter thingy most definitely does not work in Firefox. Everything above does.

It works on Chromium-based browsers but it does not look great, probably needs some filtering.

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

#69

Post by keepamovin »

kubeio wrote: post #11
msy wrote: post #7

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.

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.

lol this demo is SO cool. you have NOTHING to be anything but proud and happy of. you did excellently and this UI is the perfect realization of this idea. Well done!

It ran perfectly smoothly with no perf hit in 2020 mba m1. there are no issues with this.

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

#70

Post by frizlab »

7bit wrote: post #38
_ZeD_ wrote: 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...

Works fine on Firefox tho

No. The effects are not fully there on Firefox/Safari.
Post reply on HN