Distortion Grid
A responsive image grid powered by SVG feTurbulence filters. Each cell distorts in real time based on mouse proximity — closer cells bulge and ripple outward. On hover, images scale smoothly with a ripple that radiates from the cursor. Fully prop-driven.
About this Component
Distortion Grid brings physics-inspired interactivity to static image layouts. Using inline SVG displacement maps — feTurbulence + feDisplacementMap — each image in the grid reacts to how close your cursor is, creating a magnetic bulge effect that makes the whole grid feel alive.
What you can customize
Image: local upload or URL import
Columns: number of columns on each breakpoint
Gap and border radius probs
Distortion intensity
Pop-up modal
Use cases
Portfolio or agency hero sections
Editorial image galleries
Product showcase grids
Interactive mood boards
