blur-fade

1/* eslint-disable @next/next/no-img-element */
2import { BlurFade } from "@/components/magicui/blur-fade";
3 
4const images = Array.from({ length: 9 }, (_, i) => {
5  const isLandscape = i % 2 === 0;
6  const width = isLandscape ? 800 : 600;
7  const height = isLandscape ? 600 : 800;
8  return `https://picsum.photos/seed/${i + 1}/${width}/${height}`;
9});
10 
11export function BlurFadeDemo() {
12  return (
13    <section id="photos">
14      <div className="columns-2 gap-4 sm:columns-3">
15        {images.map((imageUrl, idx) => (
16          <BlurFade key={imageUrl} delay={0.25 + idx * 0.05} inView>
17            <img
18              className="mb-4 size-full rounded-lg object-contain"
19              src={imageUrl}
20              alt={`Random stock image ${idx + 1}`}
21            />
22          </BlurFade>
23        ))}
24      </div>
25    </section>
26  );
27}