🎉 Sora UI is now part of the shadcn/ui registry ecosystem.
Sora UI

Pixelated Image Reveal

An image card that reveals a second image through a randomized pixel grid on hover.

Made by Axyl
Loading...

Installation

Usage

import { PixelatedImageReveal } from '@/components/sora-ui/effects/pixelated-image-reveal';

export default function Page() {
  return (
    <PixelatedImageReveal
      className="mx-auto w-72"
      defaultSrc="/images/default.jpg"
      activeSrc="/images/active.jpg"
      pixelColor="#ff4c24"
      alt="Product preview"
    />
  );
}

Props

PropTypeDefault
defaultSrc?
string
-
activeSrc?
string
-
alt?
string
""
gridSize?
number
7
stepDuration?
number
0.3
pixelColor?
string
"#ff4c24"
aspect?
"square" | "video" | "auto"
"square"
className?
string
-
pixelClassName?
string
-

Built by Axyl. The source code will be available on GitHub soon.

Last updated: 6/7/2026