Grid Interaction

Grid Distortion

A smooth interactive image distortion effect for Framer. Move your cursor over the image to create fluid, organic distortions that follow your movement.

The image automatically uses a Fill layout, keeping its original aspect ratio while cropping excess content instead of stretching. Preview Here: https://griddistortion.framer.ai/

Features

• Interactive mouse distortion

• Smooth fluid displacement

• Image Fill / Cover behavior

• Adjustable distortion grid

• Adjustable mouse radius

• Strength control

• Relaxation control

• Responsive to container size

• Three.js powered WebGL rendering

• Static-renderer optimized for Framer

• Automatically pauses when off-screen

• Optimized animation and cleanup

• Easy Framer property controls

Perfect For

• Creative portfolios

• Agency websites

• Photography websites

• Product showcases

• Framer templates

• Interactive hero sections

• Creative landing pages

• Experimental web designs

Add an image, adjust the controls, and create a smooth interactive distortion effect without writing additional code.