Try it yourself: backgroundtransparent.vercel… (you need to share the full screen the browser window is on) Inspired by @mausmoto's ShaderGlass, I wanted something like that for the web! Liquid Diamond is by @shuding of course, who got me into shaders recently.

Inspired by this exploration xitter.cf/raunofreiberg/status/1… by @raunofreiberg I used Depth Anything V2 to create depth maps of my photos depth-anything-v2.github.io/ I wanted to use CSS filters to a single depth map, but instead end up slicing it with canvas in the client. Other than that, the technique is the same as my depth of field demo and the original frosted glass demo by @shuding. Code is here github.com/javierbyte/depth-… that is now a turborepo with both demos.

Video of it in action. I think three layers are enough for the effect to be convincing. I had to do some tricks to minimize the usual issues of this approach: the blurred layer leaking behind the in-focus area and the focused layer creating weird sharp edges. I'll expand more if there is interest; the repo is linked in the demo.