An interactive image distortion component that adds a grid-based warping effect to your images. Perfect for creating engaging hover interactions on hero sections, galleries, or any image-based content that needs that extra touch of sophistication.

✨ Key Features

• Interactive Grid Distortion: Smooth, responsive warping effect that follows cursor movement
• Chromatic Aberration: Subtle RGB color separation adds depth to the distortion
• Saturation Control: Dynamic saturation adjustment on hover for enhanced visual impact
• Customizable Grid: Adjust grid density for different visual effects
• High Performance: WebGL-powered rendering ensures smooth animations
• Responsive Design: Automatically adapts to any container size while maintaining aspect ratio

💡 Pro Tips

1. Use images with strong visual elements or patterns to make the warping effect more noticeable
2. Adjust the grid density based on your image size - larger images work well with more grid divisions
3. Lower distortion intensity for subtle effects on professional websites, or increase it for more playful interactions
4. Combine with zero default saturation for a dramatic reveal effect on hover
5. Works best with images that have good contrast and clear focal points
6. Set pointer-events to none on all layers above the image to remain interactive

🎨 Styling Options

• Grid Density: Control the fineness of the distortion grid
• Distortion Intensity: Adjust the strength of the warping effect
• Default Saturation: Set the initial saturation level before hover
• Image Selection: Support for any image format with automatic aspect ratio preservation

This component brings a premium, interactive feel to your image presentations without requiring any coding knowledge. It's perfect for designers looking to add sophisticated motion effects that respond naturally to user interaction while maintaining smooth, professional animations.