Pixel Distortion

Pixel Distortion breaks your image, video, or component into a grid of pixel blocks that shift and warp as the cursor moves across them.

Pixel Distortion breaks your image, video, or component into a grid of pixel blocks that shift and warp as the cursor moves across them. How it works Each block near the pointer reacts to your mouse's velocity, pushing outward in blocky, low-res steps. The moment you stop moving, the blocks relax back into place. A subtle color channel split rides along the distortion, adding a faint red and blue fringe at the edges as the grid settles. Sources Works with three types of content: Image Video Any dropped-in Framer component (snapshotted to canvas, with an optional refresh interval for animated components) Controls Grid size — pixel density of the effect Mouse radius — how far the cursor's influence reaches Strength — how hard blocks push Relaxation — how quickly blocks settle back Displacement — how far pixels shift Aberration — intensity of the channel split Quality — pixel ratio cap for performance Behavior: The live WebGL effect runs in Preview and on your published site. On the editor canvas, it shows the plain source to keep things light. Toggle "Render on canvas" if you want to see the live effect while designing. Refund is not available. Component Demo

Pixelated distortion on hover