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.
50 lines (49 loc) • 3.26 kB
JavaScript
// @ts-nocheck
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { motion, useReducedMotion } from "framer-motion";
const DEFAULT_DATA = [
"https://images.unsplash.com/photo-1540968221243-29f5d70540bf?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1596135187959-562c650d98bc?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1628944682084-831f35256163?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1590013330451-3946e83e0392?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1590421959604-741d0eec0a2e?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1572613000712-eadc57acbecd?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1570097192570-4b49a6736f9f?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1620789550663-2b10e0080354?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1617775623669-20bff4ffaa5c?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1548600916-dc8492f8e845?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1573824969595-a76d4365a2e6?w=800&auto=format&fit=crop&q=60",
"https://images.unsplash.com/photo-1633936929709-59991b5fdd72?w=800&auto=format&fit=crop&q=60",
];
export default function ImageSlider3D({ images = DEFAULT_DATA, duration = 32, cardWidth = "17.5em", cardAspectRatio = "7/10", perspective = "35em", containerClassName = "", imageClassName = "", rotationDirection = "left", withMask = true, }) {
const n = images.length;
const prefersReducedMotion = useReducedMotion();
const animationDuration = prefersReducedMotion ? duration * 4 : duration;
// rotation angles based on direction
const rotationValues = rotationDirection === "left" ? [0, 360] : [360, 0];
const maskStyles = withMask
? {
WebkitMask: "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
mask: "linear-gradient(90deg, transparent, #000 20% 80%, transparent)",
}
: {};
return (_jsx("div", { className: `grid w-full h-full min-h-[500px] overflow-hidden place-items-center ${containerClassName}`, style: {
perspective: perspective,
...maskStyles,
}, children: _jsx(motion.div, { className: "grid place-self-center pointer-events-auto", style: {
transformStyle: "preserve-3d",
}, animate: {
rotateY: rotationValues,
}, transition: {
duration: animationDuration,
ease: "linear",
repeat: Infinity,
}, children: images.map((src, i) => (_jsx("img", { src: src, alt: `Slide ${i}`, className: `col-start-1 row-start-1 object-cover rounded-[1.5em] ${imageClassName}`, style: {
width: cardWidth,
aspectRatio: cardAspectRatio,
backfaceVisibility: "hidden",
WebkitBackfaceVisibility: "hidden",
transform: `rotateY(calc(${i} * (1turn / ${n}))) translateZ(calc(-1 * (0.5 * ${cardWidth} + 0.5em) / tan(0.5 * (1turn / ${n}))))`,
} }, i))) }) }));
}