Pixel Reveal Image

A WebGL image component with dynamic pixel matrix wave and customizable neon accent border on scroll.

13.4 KB
•
Updated on September 23, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-shader-pixel-reveal-image

Usage

Code
import { PixelRevealImage } from '@/components/shader/pixel-reveal-image'

export default function Example() {
  return <PixelRevealImage src="/images/showcase.jpg" alt="Creative portrait" accentColor="#ffe9a8" gridDensity={40} />
}

API Reference

PropTypeDefaultDescription
src
string
—Path or URL to the source image
alt
string
Pixel reveal visualAccessible image label
accentColor
string
#ffe9a8Accent color for transition edge pixels (Aurum by default)
gridDensity
number
40Number of pixel blocks across the matrix grid
bandWidth
number
3.5Thickness of the glowing pixel transition wave
noiseIntensity
number
0.16Procedural jitter noise dispersion
direction
top-to-bottom|bottom-to-top
bottom-to-topWavefront sweep direction
progress
number
—Optional controlled progress value (0 to 1)
aspectRatio
number
3 / 4Aspect ratio of the canvas container

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Related Components

CloudShader

Interactive volumetric cloud material rendered as a full-bleed shader surface.

View
Fluid CrossfadeShader

A dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.

View
Fluid Distortion ImageShader

An interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.

View
Paper ShaderFluid Distortion Image
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/components-shader-pixel-reveal-image