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.
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
