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