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

121–127 of 127 posts

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

#121

Post by kubeio »

creatonez wrote: post #30

The thing that makes liquid glass actually somewhat work compared to previous shiny glass designs is the automatic tint adjustment for contrast. Nothing I've seen actually pulls this off.

That will be one of the goals of one of my next articles. But it cannot be implemented like Apple does (with a delay on switch between dark and light). What is possible though is to get an average of the current image behind the object and to extrapolate it to either black or white. Then the layer on top of it would do the opposite.

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

#122

Post by kubeio »

a022311 wrote: post #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…

Trust me, you don't want to see the source code right now. But I'll do another article and possibly open-source a library of it.

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

#123

Post by wraptile »

dmix wrote: post #109
wraptile wrote: post #108

What a beautiful demo and great highlight that Liquid Glass is not all "liquid ass", as in it could actually be usable for very specific niches. The Magnifying Glass example is just gorgeous!

The best use of it on the iPhone beta is definitely the video player overlay UI and a floating search box. Two things highlighted in the post.

Funny because these two examples were the ones I found completely undesirable and would never implement myself. It's just not legible enough to be usable.

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

#125

Post by qingcharles »

kubeio wrote: post #18
thrtythreeforty wrote: post #17

How are the vector field animations done? The whole website is impressive but I'd love to be able to build those.

I used React with vanilla SVG and Motion to animate.

The amount of work and love you put into making this effect and then the spectacular write-up is awe-inspiring. Thank you.

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

#126

Post by kubeio »

0x20cowboy wrote: post #124

If the author is around here, I think there is an error in the Equations section. In the Convex Circle equation I think it has an extra set of parens. sqrt(1-(1-x)^2) I believe as it is it’s just linear.

Thanks for highlighting that. Prettier was actually the culprit because of the non-JS `^` operator. Fixed it.
Post reply on HN