Pixel Reveal Pro

ixel Reveal Pro - Animated Image Component Bring your Framer sites to life with Pixel Reveal Pro.

ixel Reveal Pro - Animated Image Component

Bring your Framer sites to life with Pixel Reveal Pro. This plug-and-play code component adds a sophisticated, grid-based pixelation reveal effect to any image as soon as it scrolls into view. Built specifically for Framer, it requires zero coding and is fully customizable directly from the properties panel.

Key Features

• Scroll-Triggered Motion: The reveal animation is tied to Framer's whileInView, ensuring the effect only plays when your audience actually sees the image.

• Fully Customizable Grid: Dial in the exact look you want by adjusting the number of rows and columns (from 2x2 up to 40x40).

• Grayscale to Color Transition: Images start in a stylish grayscale and smoothly transition into full color as the pixels fade away.

• Seamless Background Blending: Change the 'Cover Color' to match your section's background, creating an invisible, organic reveal.

• Precision Timing Controls: Fine-tune the pixel fade duration, maximum staggered delay, and color reveal timing using intuitive slider controls.

• Empty State Support: Features a clean placeholder when no image is selected, keeping your canvas organized during the design process.

Perfect For

• High-impact hero section visuals

• Creative portfolio galleries

• Engaging product feature showcases

• Tech and SaaS landing pages

How to Use

1. Copy the component into your Framer project's code assets.

2. Drag and drop Pixel Image onto your canvas.

3. Select the component and upload your image in the right-hand Properties panel.

4. Tweak the grid size, timing, and colors to match your brand's exact aesthetic.