Pixel Shader is a Framer code component that turns any responsive image into a live, interactive mosaic. Visitors paint with the cursor or finger: you choose whether they reveal sharp detail through pixel blocks or apply the block effect on top of an image. Built on HTML5 Canvas 2D with a two-stage render pipeline (base layer + accumulated brush layer) so interaction stays smooth on real pages.
👉 Live preview: https://pixelshader.framer.website
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.
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.
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.
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.
---
No refunds after purchase.
Sergei Chyrkov
