Pixel Image Reveal
Make the way your images load in more exciting with this fun component that pixelates an image and then animates the pixel effect when the image scrolls into the viewport.
Make it with Workshop
Build your own component with AI
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
