Image Pixel Decode

Pixel Decode is an image reveal built around digital reconstruction. It begins with the image broken into pixel blocks, horizontal slices, signal shifts, and reduced color, then gradually resolves everything back into focus.

The effect stays connected to the source image, so even the stronger settings feel like a distorted version of the original rather than unrelated noise.

Choose from three built-in styles:

- Soft Reveal for restrained pixelation and subtle signal movement

- Signal Break for larger blocks, stronger displacement, and a heavier glitch effect

- Digital Decode for a balanced treatment designed around interaction

Each style can be adjusted through effect strength, pixel size, slice detail, glitch amount, and the amount of color visible in the starting state.

The component also includes pre-built interactions:

- Decode automatically on load or when entering the viewport

- Adjust duration, delay, and replay-on-reentry

- Hold or pulse the effect on hover

- Toggle or pulse it on click

- Give hover and click their own custom effect settings

- Activate click interactions with Enter or Space

Pixel Decode is responsive, touch-safe, and reduced-motion aware. It pauses while off-screen or when the browser tab is hidden. Aspect ratio, background, and rendering quality controls are included, along with a clear-image fallback when the effect cannot render.

Works well for hero images, portfolio covers, product reveals, editorial layouts, and anywhere a regular image entrance could use a little more signal noise.