Hover Water Effect

Turn static images and background videos into tactile fluid surfaces with physics-based liquid ripples, light-bending refraction, and cinematic chromatic aberration.

Features

• Real-time Navier-Stokes fluid simulation

• GPU-accelerated WebGL shader performance

• Dynamic refraction and chromatic aberration

• Specular liquid highlights with directional light

• Supports both image and looping video media

• Intelligent auto-pause when out of viewport

• Clean canvas resizing and responsive scaling

• Canvas editor preview mode toggle

• Mobile touch and desktop hover interaction

• Built-in fallback rendering for static export

Customization Options

• Media type (Image or Video)

• Background source asset URL

• Liquid refraction intensity

• Chromatic aberration color spread

• Specular highlight brightness

• Fluid return and fade speed

• Motion dissipation and velocity drag

• Curl and vorticity swirl intensity

• Interaction radius and touch size

• Hover vs click interaction trigger

How to Use

• Drop the component onto your Framer canvas

• Choose your media type and upload an image or video

• Fine-tune the liquid refraction and chromatic spread

• Adjust the fluid fade speed and swirl intensity

• Choose whether to trigger on hover or click

• Publish to deliver a fluid liquid interaction

Use Cases

• Interactive hero image backgrounds

• Creative agency portfolio showcases

• E-commerce product visualizers

• Dynamic SaaS landing page banners

• Interactive album artwork and posters

• Engaging cursor-following hover sections

• Video backdrop distortions

• Modern editorial web designs

• High-impact splash headers

• Immersive WebGL storytelling blocks