A simple-to-use example on recreating the Apple Liquid Glass effect in React Three Fiber
Live link: https://appleliquidglass.vercel.app
Although beautiful, it's known that using meshes to achieve the effect degrades performance. I'll work on another solution soon that uses shaders and a single draw call to distort the image based on UV distortion, without using meshes, which should result in better performance. However, my example should at least help you understand how this type of effect works in WebGL. It's a small project, but full of little tricks and tips that can help.
What I did here was inspired by the work of many others who have already done similar effects. Especially the work of Paul Henschell, who did something similar a long time ago.
This component is an open-source creation released under the (MIT) license. While you're free to integrate and innovate with it, I would genuinely appreciate knowing when this component sparks creativity in your projects!
Would be really appreciated if you are willing to give me a star here on GitHub 🎉 or buy me a coffee ☕ https://www.buymeacoffee.com/andersonmancini.