Pixel Image

"use client";

import { useEffect, useState } from "react";

import { PixelImage } from "@/lab/magicui/ui/pixel-image";

export default function PixelImageDemo() {
  // Replay the pixel-in + colour reveal every few seconds.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setRun((r) => r + 1), 5500);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="relative flex h-full w-full items-center justify-center p-[5%]">
      <PixelImage
        key={run}
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=900&q=80"
        customGrid={{ rows: 4, cols: 6 }}
        grayscaleAnimation
        className="aspect-[3/2] h-full w-auto max-w-full md:h-full md:w-auto [&_img]:rounded-2xl"
      />
    </div>
  );
}