About Liquid Image FX
Add fluid, organic distortion and ripple effects to your graphics. Liquid Distortion uses hardware-accelerated SVG displacement mapping and procedural turbulence to melt, ripple, and swirl visuals on hover, click, or scroll—delivering rich interactive fluid motion without heavy WebGL or external 3D libraries.
Key Features
7 Distortion Modes: Switch between Heat Haze, Liquid, Ripple, Swirl, Melting, Wave, and digital Glitch effects.
Dual-Image Morph: Seamlessly crossfade and dissolve between two images during interaction transitions.
Chromatic Aberration: Directional RGB color splitting that dynamically separates channels along the distortion angle.
Dynamic Interaction: Cursor-following fluid center, click shockwave impulses ("Wave Pop"), and scroll velocity/progress drivers.
Edge Protection: Built-in overscan compensation prevents seam gaps and transparent borders when clipping.
Performance Optimized: Direct DOM updates without React re-render overhead, selectable FPS caps (30/60/auto), and automatic filter sleep when idle.
Property Controls
Media: Primary image, optional secondary morph image, alt text, and fit mode (Cover or Contain).
Distortion: Mode selection, intensity, wave speed, flow angle, complexity octaves, and RGB split distance.
Interaction: Trigger type (Hover, Scroll, Click, Always), cursor follow %, click shockwave impulse, and fade in/out duration.
Scroll Config: Choose between scroll velocity or progress modes with custom sensitivity and scroll ranges.
Appearance & Advanced: Border radius, box shadow, color tint with blend modes, edge clipping vs. bleed, and FPS limiting.
Quick Start Guide
Drop the component onto your canvas and set your dimensions.
Upload a primary image (and an optional secondary image for hover morphing).
Choose a distortion mode (e.g. Liquid or Ripple) and trigger (Hover or Scroll).
Dial in the intensity and RGB split to preview the live fluid effect!
