PixelShader

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

Four key features

1. 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.

2. 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.

3. 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.

4. 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.

---

No refunds after purchase.