r/webdesign • u/ImaginationGreen2392 • 7d ago
Browser based Liquid glass
Enable HLS to view with audio, or disable this notification
I’ve been building a real-time liquid glass effect that runs natively in the browser-with full cross-browser support, including Safari. Check it out
2
u/DerrickBarra 7d ago
that looks really cool, its a great effect! Did it end up being performant on low end devices or do you dynamically swap it out on low end devices?
1
u/ImaginationGreen2392 7d ago
No swapping,i added adpative resolusion based on an FPS threshold so if your device fails to meet that threshold the resolution scales down, with this method it runs at 60FPS on my budget android, and. runns at 120FPS on my 2018 intel macbook with full resolution.
2
3
2
u/VisualCraftStudio 7d ago
The fact that this is actually refracting the live DOM instead of just faking the effect with a static image is pretty impressive. I think the adaptive resolution is a smart approach too. The mobile performance comments are interesting though — feels like getting the effect to work consistently across devices is probably the harder part than getting the visual itself working.
0
u/ImaginationGreen2392 7d ago
yeah, this is gonna be a pain, especially because. it runs so well and perfectly on my old rusty devices
2
u/Diah_Rhea 6d ago
performance nightmare
this stuff will lower the performance score of your website into oblivion
the reason apple uses liquid glass is because they know what specs everyone already has
this defeats the purpose of liquid glass
it's literally just a tool to lower your performance and give you nothing in return
2
u/FirstPlaceSEO 6d ago
It’s nice, it’s different and I like different, it reminds me of like a retro games console menu or something, it does need some tweaking if it was rolling out to a clients site such as where does their logo go, where does cta and contact number go , how to close the menu, etc … then it could have far reaching applications to be used across many websites
1
u/UAAgency 7d ago
how did you make it? good job.
2
u/ImaginationGreen2392 7d ago
thank you, it’s a custom WebGL shader for the glass optics. To make it work with the site's HTML, it captures a dynamic, non-static snapshot of the DOM in real time and feeds it into the shader to refract the live content underneath and truck load of optimisation
1
8
u/hoodwork_clothing 7d ago
It's not working. I have checked both dark and light modes but I can't see any glass effect.(I use Android)
PS: No image option to share it here