scroll-fade-effect-block-02

1import Image from "next/image";
2 
3import { ScrollFadeEffect } from "@/registry/scroll-fade-effect";
4 
5interface Artwork {
6  artist: string;
7  art: string;
8}
9 
10const works: Artwork[] = [
11  {
12    artist: "Ornella Binni",
13    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
14  },
15  {
16    artist: "Tom Byrom",
17    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
18  },
19  {
20    artist: "Vladimir Malyavko",
21    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
22  },
23];
24 
25export default function ScrollFadeEffectHorizontalDemo() {
26  return (
27    <div className="rounded-lg border">
28      <ScrollFadeEffect className="w-72 sm:w-96" orientation="horizontal">
29        <div className="flex w-max gap-4 p-4">
30          {works.map((artwork) => (
31            <figure key={artwork.artist} className="shrink-0">
32              <Image
33                src={artwork.art}
34                alt={`Photo by ${artwork.artist}`}
35                className="aspect-3/4 h-fit w-fit rounded-sm object-cover"
36                width={300}
37                height={400}
38              />
39 
40              <figcaption className="pt-2 text-xs text-muted-foreground">
41                Photo by{" "}
42                <span className="font-semibold text-foreground">
43                  {artwork.artist}
44                </span>
45              </figcaption>
46            </figure>
47          ))}
48        </div>
49      </ScrollFadeEffect>
50    </div>
51  );
52}