- Trigger
- Effect / motion type
- UI element
- Style
What is this interaction?
Mouse-Driven Fluid Distortion is an interactive visual effect that makes an image, background, or graphic surface appear to flow and deform in response to cursor movement. As the pointer moves across the screen, nearby visual elements shift, stretch, and ripple, producing an organic motion similar to liquid being disturbed. Unlike a conventional cursor-following animation, this interaction changes the appearance of the underlying visual surface rather than simply moving an element with the pointer. The intensity and direction of the distortion can respond to cursor position, movement speed, and the distance from the interaction point. The effect can be implemented using displacement maps, flowmaps, shaders, or other rendering techniques. Its defining characteristic is the direct relationship between pointer movement and fluid-like visual deformation, not the specific technology used to create it.
What is it also called?
Cursor-Driven Fluid Distortion · Interactive Fluid Distortion · Mouse-Responsive Liquid Distortion · Liquid Distortion Effect · Mouse-Tracking Distortion · Fluid Displacement Effect · Interactive Liquid Ripple Effect
Terminology varies across teams. Pair an alias with a plain-language description of the observable behavior.
How does it work?
The interaction tracks the cursor's position and movement across a visual surface. Pointer coordinates are converted into a local interaction point, while changes in position can be used to estimate movement speed and direction. These values influence a displacement field or similar distortion model. Pixels or texture coordinates near the pointer are offset to create fluid-like waves, stretching, or ripples. The influence can gradually decrease with distance from the pointer, allowing the surrounding image to remain relatively stable. Interpolation, damping, and decay can be applied to make the movement feel smooth and allow the distortion to settle naturally when the cursor stops moving. Depending on the implementation, the effect may use WebGL shaders, a flowmap, SVG displacement filters, or a canvas-based rendering technique. A simplified model is: Cursor position + velocity → displacement field → visual distortion → gradual decay
When should it be used?
Use this interaction when a website needs an organic, tactile, or experimental visual experience. It is particularly effective for creative portfolios, design agencies, digital exhibitions, product showcases, and image-led landing pages where visual exploration is part of the experience. Fluid distortion can make an otherwise static image feel responsive and alive, encouraging users to explore the surface through pointer movement. It works best when applied selectively to hero images, decorative backgrounds, or featured visual elements. Avoid applying strong distortion to body text, navigation controls, forms, or content that requires precise reading and interaction. Excessive movement can reduce clarity and introduce unnecessary rendering costs. On touch devices, provide an appropriate touch interaction or a stable fallback. Respect prefers-reduced-motion by reducing or disabling animated distortion, and ensure important content remains accessible without pointer interaction.
AI coding prompt
Create an interactive mouse-driven fluid distortion effect.
Build a visual surface containing an image, graphic, or background that responds to cursor movement with smooth, organic, liquid-like deformation.
Track the pointer's position and calculate its movement velocity and direction. Use these values to drive a displacement field, flowmap, or comparable distortion technique that changes the appearance of the underlying surface.
When the cursor moves, generate localized distortion around its position. The visual surface should bend, stretch, or ripple in the direction of movement, creating the impression that the pointer is disturbing a fluid material.
The distortion intensity should respond to pointer velocity. Faster movements can produce stronger displacement, while slower movements should create subtler motion.
Apply smooth interpolation and damping so the distortion follows the cursor naturally rather than snapping directly to its coordinates. Use spatial falloff to prevent the entire surface from deforming uniformly.
When pointer movement stops, gradually reduce the distortion until the visual surface returns to its resting state.
Maintain a stable composition and avoid excessive visual noise, abrupt jumps, or uncontrolled deformation. The interaction should feel continuous and responsive.
Make the effect responsive across different screen sizes. Scale the distortion radius and rendering resolution appropriately, and optimize the rendering loop to avoid unnecessary GPU or CPU usage.
Support pointer input without interfering with normal scrolling or essential UI interactions. Provide a stable fallback for unsupported devices or rendering environments.
Respect prefers-reduced-motion by disabling animated distortion or replacing it with a static visual presentation.
Do not assume a specific framework. The interaction may be implemented using WebGL, GLSL shaders, a flowmap, SVG displacement filters, or another appropriate rendering technique, depending on the existing project.
The goal is to recreate the observable mouse-driven fluid distortion behavior, not to require a particular physics simulation or animation library.