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

11–20 of 127 posts

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

#11

Post by kubeio »

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.

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

#13

Post by al_borland »

WD-42 wrote: post #12

Does this not work on Firefox? Just looks like regular gradients.

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

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

#19

Post by CognitiveLens »

StrangeDoctor wrote: post #10
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.

Yeah this site does not scroll like butter as it were. But I don’t think css can leverage the gpu in most (any?) cases. Apple has almost certainly baked something into the silicon to help handle the ui.

Most browsers will engage the GPU for compositing layers if they think the layers can be separated - https://www.smashingmagazine.com/2016/12/gpu-animation-doing...

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

#20

Post by cycomanic »

explosion-s wrote: post #6

I made something similar to this with WebGL shaders (the benefit being it works across browsers): https://real-glass.vercel.app - The tricky thing for me was making it refract real HTML elements behind

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