Weekend exploration pt2!
I developed a Framer component that distorts live page content directly beneath it, creating a vertical liquid-glass effect with mirrored stretching, chromatic aberration, and a gradient blur layer on top.
It works as a 100vh overlay that you put in a fixed position over you page and it will distort the top and bottom of your page. I unfortunately couldn't make it work on mobile or Safari since every iOS browser (including Chrome) uses Safari’s engine, which doesn’t support the SVG filters this liquid distortion needs.
The component was inspired by the site gionatannese.com that used html2canvas to create a similar distortion. Since that approach wasn’t feasible in Framer, I replicated the effect as closely as possible using only SVG filters and CSS backdrop effects.Took quite a bit of time to get it to do the trick but overall i'm happy with the results!
See it live here : https://moneta-liquid-glass.framer.website/
Weekend exploration pt2!
I developed a Framer component that distorts live page content directly beneath it, creating a vertical liquid-glass effect with mirrored stretching, chromatic aberration, and a gradient blur layer on top.
It works as a 100vh overlay that you put in a fixed position over you page and it will distort the top and bottom of your page. I unfortunately couldn't make it work on mobile or Safari since every iOS browser (including Chrome) uses Safari’s engine, which doesn’t support the SVG filters this liquid distortion needs.
The component was inspired by the site gionatannese.com that used html2canvas to create a similar distortion. Since that approach wasn’t feasible in Framer, I replicated the effect as closely as possible using only SVG filters and CSS backdrop effects.Took quite a bit of time to get it to do the trick but overall i'm happy with the results!
See it live here : https://moneta-liquid-glass.framer.website/
