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

111–120 of 127 posts

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

#112

Post by cycomanic »

lagrange77 wrote: post #74
cycomanic wrote: post #20

Earlier quoted context omitted.

Cool this looks like it even has dispersion, i.e. colors separate at the edge of the glass element.

https://en.wikipedia.org/wiki/Chromatic_aberration ?

Yes chromatic abberation is caused by dispersion.

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

#115

Post by seanw265 »

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.

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

#118

Post by rafark »

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.

> You’re absolutely right — it’s pretty slow right now and needs optimization.

Man the ptsd that AIs have given us from sentences like this.

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

#119

Post by josephcsible »

efilife wrote: post #33
WD-42 wrote: post #21

Earlier quoted context omitted.

I think I’ve trained myself to ignore shiny boxes outside the main text like that. Most of the time they are trying to sell something.

Me too. Sometimes when I browse the internet with my girfriend aside she comments on something and I have no idea what she means. She has to literally point at the screen and show me the text I've ignored and it's ALWAYS the biggest and most flashy font ever

That's quite common. See also https://ux.stackexchange.com/q/120541/115045

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

#120

Post by kubeio »

stanko wrote: post #73

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?

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.

Post reply on HN