Liquid Image Effect

MORE FRAMER COMPONENTS LIKE THIS

✦ Browse +38 FREE + 85 premium components: https://frameze.com/components

✦ Card Bundle: https://frameze.com/components/category/card?ref=bundles

About Liquid Image Effect

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

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