Pixel Image
Canvas-based pixelation effect for images: reveal from pixelated to crisp on scroll or hover, or a live pointer-driven distortion. SSR-safe with an automatic <img> fallback.
Pro Features
Unlock advanced capabilities with the Pro version
Canvas Pixelation
Crisp pixel blocks rendered at the image's native resolution.
In-View Reveal
Single-shot IntersectionObserver resolves pixels to crisp on scroll.
Pointer Distortion
A pixelated patch that follows the cursor over a crisp base.
SSR-Safe Fallback
A plain <img> is always in the DOM — no layout shift, no blank frame.
Graceful Degradation
Falls back silently on load errors or cross-origin canvas taint.
rAF Performance
Frame-throttled drawing and reduced-motion awareness built in.
Installation
Install via CLI
npx @moontra/moonui-cli add pixel-imageUsage
Examples
Reveal on scroll
In the default 'in-view' mode the image starts pixelated and resolves to crisp once, when it scrolls into view — that entrance fires a single time, so use the Replay button to watch it again. Under prefers-reduced-motion the canvas never runs and the crisp image is shown immediately.
Hover to reveal
With trigger="hover" the image stays pixelated until the pointer enters, then re-pixelates on leave.
Pointer distortion
The 'distortion' mode paints a crisp base and pixelates a circular patch that follows the pointer. This mode ignores the trigger prop.
Pixel size comparison
With mode="static" the image stays permanently pixelated (no reveal, no pointer), so the pixelSize difference is clearly visible side by side — larger values give a chunkier, more retro look.
pixelSize=8
pixelSize=28
CORS modes
crossOrigin also accepts '' (an alias for 'anonymous') and 'use-credentials' for hosts that require a credentialed CORS request. Same-origin images — like the local one on the right — skip the CORS check entirely, so crossOrigin has no effect on them.
crossOrigin=""
crossOrigin="use-credentials"