PixelImage — Random pixel animation that reveals an i

Pixel Reveal Image is a visually engaging image animation component for Framer that reveals an image through a randomized pixel fade effect. The component divides an image into a customizable grid and overlays grayscale pixel blocks that gradually disappear in random order, revealing the original image underneath.

Using canvas sampling, each pixel block accurately reflects the image’s colors before transitioning away, creating a smooth mosaic reveal animation. Designers can control the number of rows and columns, as well as the total reveal duration, allowing for subtle or dramatic visual effects.

The component is responsive and automatically adapts to its container size. It works perfectly for hero sections, portfolio showcases, creative transitions, and storytelling layouts.

Features

• Random pixel mosaic reveal animation

• Adjustable grid density (rows & columns)

• Customizable reveal timing

• Responsive image scaling

• Smooth Framer Motion animation

• Accurate color sampling via canvas

• Automatic resizing support

• Works perfectly for hero sections and portfolios