3 ms·
A different approach at liquid glass on the web
- specy 1y agoMost liquid glass implementations in the web are using feDisplacementMap to simulate the glass, but what if we actually use a 3D piece of glass to do it? This approach takes a copy of the page and puts it inside a 3d context (three.js) to then simulates the page scroll to seem like a 1:1 copy of the paint layer of the browser. The post goes through the two approaches and shows a demo of liquid glass. The implementation of glass is rather basic, but with the access to the whole paint layer, anything else can be added to it (PR welcome!)
- dtagames 1y agoI don't love the Liquid Glass effect and I'm sure it will be overused. But I do love using CSS and other browser standard stuff to achieve it. The claims of something revolutionary that require Apple hardware or expertise were becoming tiresome.
- specy 1y agoIt does kind of need changes to the browser to implement properly. My implementation is more of a trick to "make it work" but it's absolutely not something doable or usable in reality. There is no way (for now) to make something like it with pure web technologies, I was initially hoping that with the Houdini API it would be possible, but it seems not. It would be a really cool addition though