Pixel Image Reveal

Bring your images to life with a stunning pixel-to-clear WebGL image animation. This Framer component allows you to display a pixelated version of any image that animates into full clarity as it scrolls into view, perfect for eye-catching hero sections, portfolio galleries, or creative transitions.

As the component enters the viewport, a customizable gradient swipe overlays the image, followed by a smooth, animated pixel reveal that draws attention and adds visual intrigue.

Features

• WebGL-powered pixel animation for smooth, high-performance reveals

• Customizable gradient overlay adds an extra visual layer

• Supports replay on scroll or a single-play mode

• Fine-tune speed and delay to match your site’s rhythm

• Works seamlessly across all modern browsers

Component Controls

• Image – Upload or select any image you want to animate

• Gradient Color – Choose the swipe color that animates over your image before the reveal

• Replay – Toggle to replay the animation every time the image scrolls into view (true/false)

• Reveal Speed – Adjust how fast the pixelation animates into clarity

• Delay – Set a delay before the animation begins after entering the viewport