Grid Interaction

Background Framer Component

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.

Background Framer Component