Pixelated Image Reveal

Component 94

About

An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixelated Image Reveal to your project and fits it to your theme.

Code

How Pixelated Image Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PixelatedImageReveal } from "@/components/ui/pixelated-image-reveal";

export default function PixelatedImageRevealDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8">
      <PixelatedImageReveal
        alt="Pixelated image reveal demo"
        aspect="square"
        className="mx-auto w-72"
        gridSize={7}
        pixelColor="#ff4c24"
        stepDuration={0.3}
      />
    </div>
  );
}