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