Liquid Morph Gallery
Images and cards morph with viscous liquid distortion on hover or scroll. SVG filter-based — works everywhere, plus optional WebGL shader for text.
About This Effect
A viscous liquid distortion effect that applies organic, fluid morphing to images, cards, and text. The effect uses SVG displacement filters for broad browser compatibility, with an optional WebGL shader path for enhanced text distortion. Elements appear to melt, ripple, and reform on hover or scroll triggers — creating the signature liquid aesthetic seen on premium creative studio websites.
What's Included
- SVG filter-based distortion that works in all modern browsers
- Optional PixiJS WebGL shader for enhanced text effects
- Hover-triggered and scroll-triggered activation modes
- Configurable turbulence frequency, scale, and animation speed
- Multiple distortion styles: ripple, melt, and wave
- Works on images, cards, divs, and text elements
- Smooth transition in and out with GSAP easing
- Performant SVG filter pipeline that avoids layout thrash
Perfect For
- Creative agency portfolio image hovers
- Product reveal animations on e-commerce sites
- Artistic hero sections with liquid transitions
- Gallery items with fluid hover interactions
- Experimental typography and headline effects
How It Works
An SVG feTurbulence filter generates organic noise patterns, which feed into an feDisplacementMap filter applied to the target element. GSAP animates the turbulence seed and scale values to create fluid motion. The WebGL path uses a custom GLSL shader in PixiJS for pixel-level displacement, enabling more complex distortion patterns on text elements.