Pixelate Image

An interactive image component that creates a pixelation effect on hover with customizable intensity.

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