Most 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 · 4h ago
I 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.
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!)
The claims of something revolutionary that require Apple hardware or expertise were becoming tiresome.