Components
An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion.
Loading preview...
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>
);
}