WetGlassOverlay
A stunning wet glass overlay that ripples on hover to reveal content. Creates a dynamic liquid distortion and blur effect, perfect for interactive hero sections. end
Make it with Workshop
Build your own component with AI
A stunning wet glass overlay that ripples on hover to reveal content. Creates a dynamic liquid distortion and blur effect, perfect for interactive hero sections. end
Make it with Workshop
Build your own component with AI
Transform any section of your site into a captivating interactive experience with the Wet Glass Ripple Overlay. This component layers a beautiful, fully customizable frosted glass effect over your content, which comes to life with a stunning liquid ripple that follows the user's cursor.
As the user hovers, the glass appears to ripple and move away, clearing a circular area to reveal the sharp, focused content underneath. It's a "wow" effect that encourages interaction and adds a premium, dynamic feel to any design.
Key Features ✨
Interactive Wet Glass: A beautiful frosted glass effect that blurs any background image, video, or content placed behind it.
Liquid Ripple on Hover: A realistic water displacement animation follows the user's cursor (or finger on mobile), creating an illusion of moving liquid across the screen.
Spotlight Reveal: The ripple effect clears a "hole" in the overlay, revealing the content underneath in perfect clarity, drawing the user's focus.
Highly Performant: Built with advanced Framer Motion hooks for a smooth animation that feels responsive and natural.
Mobile & Tablet Ready: The effect works seamlessly on touch devices, responding to a user's drag gesture.
How to Use 🚀
Drag the Wet Glass Overlay component from your Assets panel into any existing Frame or Section.
With the overlay selected, go to the Layout section in the right-hand panel and set its Width and Height to Fill.
Ensure the overlay is the top layer within its container so it can cover all the content you want to reveal.
That's it! The effect is now active over your content.
Customization Options 🎨
Fine-tune every aspect of the effect directly from the properties panel:
Glass Tint Color: Change the color and transparency of the overlay to match your site's branding. Use light colors for a frosted look or dark colors for a moody effect.
Reveal Size: Control the size of the clear circle that reveals your content.
Glass Blur: Adjust the intensity of the blur, from a subtle haze to a completely frosted look.
Ripple Intensity: Change the strength of the water distortion effect, from a gentle wave to a dramatic ripple.
