Image color reveal animation using radial Manhattan distance pixel wave with customizable grid layouts.
"use client";
import React, { useState } from "react";
import PixelImage from "@/components/ui/pixel-image-wave";
export default function PixelImageDemo() {
const [active, setActive] = useState(false);
return (
<div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-zinc-950 p-8">
<div
onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}
onClick={() => setActive(!active)}
className="group relative h-80 w-80 cursor-pointer overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 p-2 shadow-2xl transition-all duration-300 hover:border-violet-500/50 hover:shadow-violet-500/20"
>
<PixelImage
src="https://cdn.21st.dev/assets/mirror/3c/3c103104ee5c7692df37eb2b1220b20ee76cb891efbe63946105efdbc9ccc9e9.jpg"
grid="8x8"
isActive={active}
borderRadius={14}
/>
<div className="pointer-events-none absolute bottom-5 left-5 right-5 rounded-xl bg-black/60 p-3 backdrop-blur-md border border-white/10">
<div className="text-xs font-mono font-bold text-white">Radial Pixel Wave</div>
<div className="text-[10px] text-zinc-400">Hover or tap to trigger Manhattan wave reveal</div>
</div>
</div>
</div>
);
}