Production-ready Framer code component — HTML5 Canvas 2D double-buffer compositing, center-pixel mosaic sampling, React hooks + TypeScript, mouse & touch, ResizeObserver layout, Reveal/Apply modes and four image-fit algorithms. Built for portfolios and campaign sites.
Features
Two moods in one component — reveal or intensify
Choose whether visitors scratch away pixels to uncover a crisp photo, or paint the mosaic onto an already-sharp image. Same asset, two completely different stories — ideal for launches, portfolios, and campaign teasers.
Feels native on phones and desktops
People can drag a finger or move a mouse and get an immediate, satisfying response — no awkward scrolling conflicts or “desktop-only” gimmicks. That means higher engagement on the traffic you already get from mobile.
Your image, framed your way
Whether you want edge-to-edge drama, a contained poster look, a stretched graphic vibe, or a repeating texture pattern, you pick how the picture sits in the frame — so the effect matches your layout without rework.
Dial in the look without leaving Framer
Adjust how chunky the pixels feel and how big the interaction area is, straight from the component controls — no guesswork, no extra tools. Ship a polished interaction faster and iterate with your designer eye still on the canvas.
