Image Trail Zindex Demo

1import ImageTrail,{
2  ImageTrailItem,
3} from "@/components/fancy/image/image-trail"
4 
5const images = [
6  "https://cdn.cosmos.so/7dc46d69-ad3b-4942-ab84-511ae786892e?format=jpeg",
7  "https://cdn.cosmos.so/cb5c5995-4ba7-4519-a0e8-aa6427cc0a90?format=jpeg",
8  "https://cdn.cosmos.so/264d0ae9-f2e9-4deb-843c-229e70bbe4cc?format=jpeg",
9  "https://cdn.cosmos.so/d9ed5da2-92b8-4b71-84e8-7bef645c44dc?format=jpeg",
10  "https://cdn.cosmos.so/223c2fad-7dcb-46e0-9f00-826edcf8d7b1?format=jpeg",
11  "https://cdn.cosmos.so/48e640ee-75e1-4390-a34a-b790785f033a?format=jpeg",
12  "https://cdn.cosmos.so/d9c19f7c-d605-4257-8546-dafe0daa250f.?format=jpeg",
13  "https://cdn.cosmos.so/5ff27be0-bed8-4779-b520-6896e68e7e4d?format=jpeg",
14  "https://cdn.cosmos.so/9098d86e-b3f7-425f-be96-40df45c82342?format=jpeg",
15  "https://cdn.cosmos.so/5c01be2f-57fe-4a1a-91ad-a37b9426e080?format=jpeg",
16  "https://cdn.cosmos.so/6a1d9c63-5b32-4a22-b03e-5dc63164ad8a?format=jpeg",
17]
18 
19const ImageTrailDemo = () => {
20  return (
21    <div className="w-dvw h-dvh bg-white relative text-foreground dark:text-muted">
22      <ImageTrail
23        threshold={1}
24        intensity={1}
25        className="perspective-400"
26        keyframes={{ scale: [1, 0], rotateX: [0, -90], rotateY: [0, -90], rotateZ: [0, 360] }}
27        keyframesOptions={{
28          scale: { duration: 1, type: "tween", ease: "easeOut" },
29          rotateZ: { duration: 3, type: "tween", ease: "easeOut" },
30          rotateY: { duration: 3, type: "tween", ease: "easeOut" },
31          rotateX: { duration: 3, type: "tween", ease: "easeOut" },
32        }}
33        repeatChildren={10}
34        zIndexDirection="old-on-top"
35      >
36        {images.map((url, index) => (
37          <ImageTrailItem key={index} className="transform-3d">
38            <div className="sm:w-36 sm:h-36 w-30 h-30 relative overflow-hidden rounded-xl">
39              <img src={url} alt="image" className="object-cover" />
40            </div>
41          </ImageTrailItem>
42        ))}
43      </ImageTrail>
44      <p className="text sm:text-lg absolute top-4 left-6 font-medium pointer-events-none z-100">
45        move your cursor
46      </p>
47    </div>
48  )
49}
50 
51export default ImageTrailDemo