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
