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 20, 2026
Active on Canvas Stage

Installation

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

Usage

Code
import { PixelRevealImage } from '@/components/spaceui/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

Fluid Distortion ImageMedia

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

View
Fluid Dither CrossfadeMedia

A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.

View
Velocity Hover PreviewMedia

An interactive list component projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block dissolve crossfading.

View
Paper Shader
Fluid Distortion Image
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui