Image Trail Demo

1import Image from "next/image"
2import { exampleImages } from "@/utils/demo-images"
3 
4import ImageTrail,{
5  ImageTrailItem,
6} from "@/components/fancy/image/image-trail"
7 
8const ImageTrailDemo = () => {
9  return (
10    <div className="w-dvw h-dvh bg-white relative text-foreground dark:text-muted">
11      <ImageTrail
12         threshold={80}
13         keyframes={{ opacity: [0, 1, 1, 0], scale: [1, 1, 2] }}
14         keyframesOptions={{
15           opacity: { duration: 2, times: [0, 0.001, 0.9, 1] },
16           scale: { duration: 2, times: [0, 0.8, 1] },
17         }}
18         repeatChildren={1}
19      >
20        {[...exampleImages, ...exampleImages].map((image, index) => (
21          <ImageTrailItem key={index}>
22            <div className="h-20 w-20 sm:w-28 sm:h-24 relative overflow-hidden">
23              <Image
24                src={image.url}
25                alt="image"
26                fill
27                className="object-cover"
28                sizes="96px"
29              />
30            </div>
31          </ImageTrailItem>
32        ))}
33      </ImageTrail>
34      <h1 className="text-5xl sm:text-9xl absolute top-1/2 left-1/2 pointer-events-none -translate-x-1/2 -translate-y-1/2 z-100">
35        ALBUMS
36      </h1>
37    </div>
38  )
39}
40 
41export default ImageTrailDemo