kubeio's comments

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

[kubeio]

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

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

[kubeio]

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.

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

[kubeio]

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.

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

[kubeio]

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.

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

[kubeio]

I considered WebGL, and I agree—a shader is more performant for real-time effects.

But WebGL comes with drawbacks:

- You need JS code running before anything shows up.

- Shaders can’t directly manipulate the DOM render. To make refraction work, you’d have to re-render everything into a canvas—which isn’t really “the web” anymore.

With the SVG/CSS approach, you can pre-render the displacement map (at build time or on the backend) and get the refraction visible on the very first frame. Plus, it integrates cleanly with existing, traditional UIs.

That said, this approach could definitely be improved. Ideally we’d have shader-like features in the SVG Filter spec (there was a proposal, but it seems abandoned). There are some matrix operations available in SVG Filters, but they’re limited—and for my first blog post I wanted to focus more on pedagogy, art, and technique than heavy optimization.

[kkkqkqkqkqlqlql → kubeio]

I'm on mobile and your site works much better than the WebGL one.

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

[kubeio]

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.

[crent → kubeio]

It's very very smooth for me now. Impressive. Thank you for sharing!

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

[kubeio]

I used React with vanilla SVG and Motion to animate.

[qingcharles → kubeio]

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

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

[kubeio]

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.

[keepamovin → kubeio]

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.

[jonahx → kubeio]

Performance aside, this is really well done.

[rafark → kubeio]

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