lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
36 lines • 3.08 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThreeDMarquee = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const ThreeDMarquee = ({ images, className = "", cols = 4, onImageClick, }) => {
// Clone the image list twice
const duplicatedImages = [...images, ...images];
const groupSize = Math.ceil(duplicatedImages.length / cols);
const imageGroups = Array.from({ length: cols }, (_, index) => duplicatedImages.slice(index * groupSize, (index + 1) * groupSize));
const handleImageClick = (image, globalIndex) => {
if (onImageClick) {
onImageClick(image, globalIndex);
}
else if (image.href) {
window.open(image.href, image.target || "_self");
}
};
return ((0, jsx_runtime_1.jsx)("section", { className: `mx-auto block h-[600px] max-sm:h-[400px]
overflow-hidden rounded-2xl bg-white dark:bg-black ${className}`, children: (0, jsx_runtime_1.jsx)("div", { className: "flex w-full h-full items-center justify-center", style: {
transform: "rotateX(55deg) rotateY(0deg) rotateZ(45deg)",
}, children: (0, jsx_runtime_1.jsx)("div", { className: "w-full overflow-hidden scale-90 sm:scale-100", children: (0, jsx_runtime_1.jsx)("div", { className: `relative grid h-full w-full origin-center
grid-cols-2 sm:grid-cols-${cols} gap-4 transform
`, children: imageGroups.map((imagesInGroup, idx) => ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { animate: { y: idx % 2 === 0 ? 100 : -100 }, transition: {
duration: idx % 2 === 0 ? 10 : 15,
repeat: Infinity,
repeatType: "reverse",
}, className: "flex flex-col items-center gap-6 relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 top-0 h-full w-0.5 bg-gray-200 dark:bg-gray-700" }), imagesInGroup.map((image, imgIdx) => {
const globalIndex = idx * groupSize + imgIdx;
const isClickable = image.href || onImageClick;
return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 w-full h-0.5 bg-gray-200 dark:bg-gray-700" }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.img, { whileHover: { y: -10 }, transition: { duration: 0.3, ease: "easeInOut" }, src: image.src, alt: image.alt, width: 970, height: 700, className: `aspect-[970/700] w-full max-w-[200px] rounded-lg object-cover ring ring-gray-300/30 dark:ring-gray-800/50 shadow-xl hover:shadow-2xl transition-shadow duration-300 ${isClickable ? "cursor-pointer" : ""}`, onClick: () => handleImageClick(image, globalIndex) })] }, `img-${imgIdx}`));
})] }, `column-${idx}`))) }) }) }) }));
};
exports.ThreeDMarquee = ThreeDMarquee;
//# sourceMappingURL=3d-marquee.js.map