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.

What is causing the ghosting/delay when moving the glass over text?

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

Looks nice! It's too slow to actually use though. Op's is much smoother.

Impressive!

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.

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.

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.

Same, very laggy on my machine. The spectacular border effects also didn't work for me.

This is exactly the kind of thing where this is OK since it's literally impossible otherwise. It's showcasing a specific feature that is not generally available.

What is funny is that for me the page on Chrome is slower and the scrolling jankier than on Firefox with the unsupported effects (macOS M1).

Besides that, very impressed by the article presentation.

I had the same reaction but the weird thing is: it looked ok in FireFox..?

For those wondering about the reference:

https://youtu.be/GamP4chXJ2I?t=17

Works fine on Firefox tho

Ok, this was the funniest comment i've read in a while.

Nice! I like yours more

That merging can be done with another, much simple filter and people have been doing it for years. It has been called the "Goo" filter.

Here is an implementation: https://codepen.io/lenymo/pen/pJzWVy

I'm not especially familiar with this, but I believe making the SVG element larger can increase its filter effects' resolution, and then using CSS transforms to scale the element's parent will return it to its original size, but with a higher resolution result. From there, additional changes to the filter effect (to incorporate a subtle blur for instance) may help it over the finish line.

Regardless, this is a great writeup for changes I wish to never see in ordinary UI.

Agreed!