Distortion Grid

Show Preview
Distortion Grid
Distortion Grid

About Distortion Grid

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

From Samuel G. Sumo

CMS Hover List
Parallax Image Stack
Dual-Pane Slider
Team Card Drawer

Related Components

Eye Tracker Pro
Confetti Party
Sequencer
Image To ASCII