An interactive image component that creates a pixelation effect on hover with customizable intensity. Perfect for creative portfolios, retro-style websites, gaming projects, and artistic image displays with smooth, canvas-based rendering.
Features:
Pixelation Effect:
Adjustable pixelation intensity (0-100%) with percentage control
Canvas-based rendering for authentic pixel/mosaic effect
Smooth transition between normal and pixelated states
Real-time preview in Framer canvas
Reverse Effect Mode:
Normal mode: Starts pixelated → Clears on hover
Reverse mode: Starts clear → Pixelates on hover
Easy toggle between both modes
Perfect for different interaction styles
Visual Enhancements:
Brightness control on hover (0-200%)
Optional zoom/scale effect (1.05x magnification)
Customizable border radius (0-200px) for rounded corners
Combine multiple effects for unique styles
Animation Controls:
Adjustable transition speed (0.1-2 seconds)
7 easing curve options (Linear, Ease In/Out, Circ)
Smooth, hardware-accelerated animations
No janky transitions
Image Handling:
Responsive image upload with automatic optimization
Auto-sizing to match image dimensions
Maintains natural aspect ratio
Works with any image format (JPG, PNG, WebP, etc.)
Interaction:
Reveals on mouse hover
Returns to the original state on mouse leave
Touch-friendly for mobile devices
Instant visual feedback
Soubhagya Sahu
