3d Marquee

1"use client";
2 
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5export const ThreeDMarquee = ({
6  images,
7  className,
8}: {
9  images: string[];
10  className?: string;
11}) => {
12  // Split the images array into 4 equal parts
13  const chunkSize = Math.ceil(images.length / 4);
14  const chunks = Array.from({ length: 4 }, (_, colIndex) => {
15    const start = colIndex * chunkSize;
16    return images.slice(start, start + chunkSize);
17  });
18  return (
19    <div
20      className={cn(
21        "mx-auto block h-[600px] overflow-hidden rounded-2xl max-sm:h-100",
22        className,
23      )}
24    >
25      <div className="flex size-full items-center justify-center">
26        <div className="size-[1720px] shrink-0 scale-50 sm:scale-75 lg:scale-100">
27          <div
28            style={{
29              transform: "rotateX(55deg) rotateY(0deg) rotateZ(-45deg)",
30            }}
31            className="relative top-96 right-[50%] grid size-full origin-top-left grid-cols-4 gap-8 transform-3d"
32          >
33            {chunks.map((subarray, colIndex) => (
34              <motion.div
35                animate={{ y: colIndex % 2 === 0 ? 100 : -100 }}
36                transition={{
37                  duration: colIndex % 2 === 0 ? 10 : 15,
38                  repeat: Infinity,
39                  repeatType: "reverse",
40                }}
41                key={colIndex + "marquee"}
42                className="flex flex-col items-start gap-8"
43              >
44                <GridLineVertical className="-left-4" offset="80px" />
45                {subarray.map((image, imageIndex) => (
46                  <div className="relative" key={imageIndex + image}>
47                    <GridLineHorizontal className="-top-4" offset="20px" />
48                    <motion.img
49                      whileHover={{
50                        y: -10,
51                      }}
52                      transition={{
53                        duration: 0.3,
54                        ease: "easeInOut",
55                      }}
56                      key={imageIndex + image}
57                      src={image}
58                      alt={`Image ${imageIndex + 1}`}
59                      className="aspect-[970/700] rounded-lg object-cover ring ring-gray-950/5 hover:shadow-2xl"
60                      width={970}
61                      height={700}
62                    />
63                  </div>
64                ))}
65              </motion.div>
66            ))}
67          </div>
68        </div>
69      </div>
70    </div>
71  );
72};
73 
74// … truncated