LiquidDistort brings organic, fluid image distortion to your Framer projects without any WebGL overhead. It uses native SVG feTurbulence and feDisplacementMap filters to create four distinct visual effects.
Heat Haze — A subtle, shimmering distortion that drifts naturally over time, responding gently to cursor position.
Melting — A slow, viscous drip effect that intensifies as the element enters the interaction state.
Ripple — A pulsing, wave-like distortion that radiates uniformly across the image.
Glitch — A jittery, digital artifact effect with randomized seed bursts on interaction.
Hover — Effect activates on pointer enter, fades out on leave.
Scroll — Distortion fires only while the user is actively scrolling and the component is in the viewport.
Auto — Always on; great for ambient hero sections or looping backgrounds.
Image — Any Framer-compatible responsive image.
Alt Text — Accessibility description for the image.
Mode — Choose between Heat Haze, Melting, Ripple, or Glitch.
Intensity — How strong the distortion is (0–200).
Speed — Animation playback rate (0–5).
Complexity — Number of noise octaves; higher = more detailed distortion (1–8).
Fill — Cover or Contain image within the frame.
Radius — Border radius for rounded corners.
Shadow — Box shadow support.
Drop the component onto your canvas and resize it to your desired dimensions. Add an image via the Image property control. Pick a distortion Mode and Trigger type, then preview in Framer's preview mode.
Evixel Studio
