Blur Fade

"use client";

import { useEffect, useState } from "react";

import { BlurFade } from "@/lab/magicui/ui/blur-fade";

const images = Array.from({ length: 9 }, (_, i) => {
  const isLandscape = i % 2 === 0;
  const width = isLandscape ? 800 : 600;
  const height = isLandscape ? 600 : 800;
  return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;
});

export default function BlurFadeDemo() {
  // Replay the staggered fade-in every few seconds.
  const [run, setRun] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setRun((r) => r + 1), 6000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="relative h-full w-full overflow-y-auto p-3">
      <div key={run} className="columns-3 gap-2">
        {images.map((imageUrl, idx) => (
          <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img className="mb-2 size-full rounded-lg object-contain" src={imageUrl} alt={`Random stock image ${idx + 1}`} />
          </BlurFade>
        ))}
      </div>
    </div>
  );
}