About Component
LiquidImageEffect is a WebGL-powered interactive image distortion component for Framer. Images come alive with fluid, real-time effects triggered by mouse movement and touch — no setup, no coding required. Choose from four distinct distortion styles and drop it anywhere on your canvas.
Ripple — fluid wave ripples that spread from your cursor Melt — gravity-defying drip effect that follows your mouse Bulge — a magnetic lens that pushes and pulls the image Glitch — chromatic slice distortion for a raw digital aesthetic Smooth easing — cursor tracking with adjustable lag and inertia Touch support — tap and drag on mobile and tablet Demo Mode — on-canvas controls panel for live previewing effects Adjustable strength, radius, speed and easing per instance Corner radius control for seamless integration in any layout
What's Included
4 real-time WebGL distortion effects Smooth mouse & touch interaction with easing On-canvas Demo Mode with live controls 10+ property controls across layout, animation and style Built-in static & WebGL fallback handling Works out of the box
Use Cases
Portfolio & personal branding hero sections Creative agency & studio showcase pages Fashion & lifestyle product landing pages Photography & visual storytelling websites Music, film & entertainment microsites SaaS marketing & interactive feature highlights Architecture & interior design portfolios Luxury brand & high-end product pages Editorial & magazine-style feature sections Event, concert & launch page hero visuals
Keywords
liquid image effect, webgl framer component, image distortion, hover distortion effect, ripple image effect, melt effect, glitch image, bulge lens effect, interactive image, mouse hover image effect, webgl canvas, fluid animation, cursor image distortion, touch image effect, image warp, distortion hover animation, parallax image, creative image interaction
About Component
LiquidImageEffect is a WebGL-powered interactive image distortion component for Framer. Images come alive with fluid, real-time effects triggered by mouse movement and touch — no setup, no coding required. Choose from four distinct distortion styles and drop it anywhere on your canvas.
Ripple — fluid wave ripples that spread from your cursor Melt — gravity-defying drip effect that follows your mouse Bulge — a magnetic lens that pushes and pulls the image Glitch — chromatic slice distortion for a raw digital aesthetic Smooth easing — cursor tracking with adjustable lag and inertia Touch support — tap and drag on mobile and tablet Demo Mode — on-canvas controls panel for live previewing effects Adjustable strength, radius, speed and easing per instance Corner radius control for seamless integration in any layout
What's Included
4 real-time WebGL distortion effects Smooth mouse & touch interaction with easing On-canvas Demo Mode with live controls 10+ property controls across layout, animation and style Built-in static & WebGL fallback handling Works out of the box
Use Cases
Portfolio & personal branding hero sections Creative agency & studio showcase pages Fashion & lifestyle product landing pages Photography & visual storytelling websites Music, film & entertainment microsites SaaS marketing & interactive feature highlights Architecture & interior design portfolios Luxury brand & high-end product pages Editorial & magazine-style feature sections Event, concert & launch page hero visuals
Keywords
liquid image effect, webgl framer component, image distortion, hover distortion effect, ripple image effect, melt effect, glitch image, bulge lens effect, interactive image, mouse hover image effect, webgl canvas, fluid animation, cursor image distortion, touch image effect, image warp, distortion hover animation, parallax image, creative image interaction
Ahmet Loca
