Live data from Hacker News

Liquid Glass in the Browser: Refraction with CSS and SVG

kube.io

21–30 of 127 posts

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

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

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.

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

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

I did a quick performance fix, should be a bit better, at least on Chrome.

(Safari stills seems to be a bit slow to render SVGs)

Anyway, I did not expect this blog post to be on HN, so still things to improve on it.

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

#28
Very close, but no cigar. The magnifying glass effect distorts the text just enough to make it look off compared to the real thing. The "l" in displacement is really tilted, and the angle changes as you move the lens around. https://i.imgur.com/PW4RAYq.png

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

#29
post #11
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.

Performance aside, this is really well done.
Post reply on HN