Distortion Image

GridDistortion is a high-performance Framer component that transforms any static image into a responsive, animated grid of pixels — dynamically warping in real time as users move…

GridDistortion is a high-performance Framer component that transforms any static image into a responsive, animated grid of pixels — dynamically warping in real time as users move their mouse. Built entirely with Three.js and custom GLSL shaders , it produces a visually striking ripple distortion or liquid grid effect that adds motion and depth to your designs. This component divides your image into a configurable grid and uses interactive physics-based deformation to simulate realistic wave movement. The mouse position , velocity , and grid density directly influence the distortion pattern, while adjustable parameters like strength , relaxation , and mouse influence radius give you full control over animation smoothness and responsiveness. Ideal for hero sections , backgrounds , interactive art pieces , or modern UI motion effects , GridDistortion delivers fluid motion and elegant interactivity — seamlessly integrated inside Framer’s design environment.