[explosion-s]

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

[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]

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

[Lorin]

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

[kaptainscarlet]

probably shaders are compiling and initialising on every drag movement

[cycomanic]

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

[lagrange77]

https://en.wikipedia.org/wiki/Chromatic_aberration

?

[IshKebab]

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

[qzio]

It's the opposite on my macbook pro/chrome computer... the OP is unusable, but the webGL version is super smooth

[thisOtterBeGood]

Not over here. As far as I understand Op's solution does not utilize a gpu.

[davidmurdoch]

Impressive!