react-3d-carousel-fullcontrol 1.2.0 → 1.2.2

package/dist/Carousel.js

@@ -0,0 +1,696 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Carousel = Carousel;
+exports.CarouselWithBackground = CarouselWithBackground;
+exports["default"] = void 0;
+var _react = require("react");
+var _framerMotion = require("framer-motion");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["images", "defaultRotation", "controlled", "onRotationChange"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // ─── Particle system ────────────────────────────────────────────────────────
+function Particles() {
+  var count = 80;
+  var particles = (0, _react.useRef)(Array.from({
+    length: count
+  }, function (_, i) {
+    return {
+      id: i,
+      x: Math.random() * 100,
+      y: Math.random() * 100,
+      size: Math.random() * 2.5 + 0.5,
+      opacity: Math.random() * 0.5 + 0.1,
+      dur: Math.random() * 12 + 8,
+      delay: Math.random() * -20
+    };
+  })).current;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      overflow: "hidden",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    children: particles.map(function (p) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+        style: {
+          position: "absolute",
+          left: "".concat(p.x, "%"),
+          top: "".concat(p.y, "%"),
+          width: p.size,
+          height: p.size,
+          borderRadius: "50%",
+          background: "rgba(180,160,255,".concat(p.opacity, ")")
+        },
+        animate: {
+          y: [0, -30, 0],
+          opacity: [p.opacity, p.opacity * 2, p.opacity]
+        },
+        transition: {
+          duration: p.dur,
+          repeat: Infinity,
+          ease: "easeInOut",
+          delay: p.delay
+        }
+      }, p.id);
+    })
+  });
+}
+
+// ─── Light blobs ────────────────────────────────────────────────────────────
+
+function LightBlobs(_ref) {
+  var mouseX = _ref.mouseX,
+    mouseY = _ref.mouseY;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      position: "absolute",
+      inset: 0,
+      pointerEvents: "none",
+      zIndex: 0,
+      overflow: "hidden"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        width: 700,
+        height: 700,
+        borderRadius: "50%",
+        left: mouseX - 350,
+        top: mouseY - 350,
+        background: "radial-gradient(circle, rgba(100,80,200,0.12) 0%, transparent 70%)",
+        transition: "left 0.6s ease, top 0.6s ease",
+        pointerEvents: "none"
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      style: {
+        position: "absolute",
+        width: 600,
+        height: 600,
+        borderRadius: "50%",
+        top: "-10%",
+        left: "10%",
+        background: "radial-gradient(circle, rgba(80,40,180,0.18) 0%, transparent 70%)",
+        filter: "blur(60px)"
+      },
+      animate: {
+        scale: [1, 1.15, 1],
+        x: [0, 40, 0]
+      },
+      transition: {
+        duration: 18,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      style: {
+        position: "absolute",
+        width: 500,
+        height: 500,
+        borderRadius: "50%",
+        bottom: "-5%",
+        right: "5%",
+        background: "radial-gradient(circle, rgba(40,100,200,0.14) 0%, transparent 70%)",
+        filter: "blur(80px)"
+      },
+      animate: {
+        scale: [1, 1.2, 1],
+        y: [0, -50, 0]
+      },
+      transition: {
+        duration: 14,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: 3
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      style: {
+        position: "absolute",
+        width: 400,
+        height: 400,
+        borderRadius: "50%",
+        top: "40%",
+        left: "40%",
+        background: "radial-gradient(circle, rgba(160,60,220,0.08) 0%, transparent 70%)",
+        filter: "blur(100px)"
+      },
+      animate: {
+        scale: [1, 1.3, 1]
+      },
+      transition: {
+        duration: 22,
+        repeat: Infinity,
+        ease: "easeInOut",
+        delay: 7
+      }
+    })]
+  });
+}
+
+// ─── Single carousel card ────────────────────────────────────────────────────
+
+var CarouselCard = /*#__PURE__*/(0, _react.memo)(function CarouselCard(_ref2) {
+  var image = _ref2.image,
+    index = _ref2.index,
+    totalAngle = _ref2.totalAngle,
+    opacity = _ref2.opacity,
+    angleStep = _ref2.angleStep,
+    radius = _ref2.radius,
+    cardWidth = _ref2.cardWidth,
+    cardHeight = _ref2.cardHeight;
+  var angle = index * angleStep;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+  var normalizedAngle = ((totalAngle + angle) % 360 + 360) % 360;
+  var frontness = Math.max(0, Math.cos(normalizedAngle * Math.PI / 180));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      position: "absolute",
+      width: "".concat(cardWidth, "px"),
+      height: "".concat(cardHeight, "px"),
+      left: "-".concat(cardWidth / 2, "px"),
+      top: "-".concat(cardHeight / 2, "px"),
+      transform: "rotateY(".concat(angle, "deg) translateZ(").concat(radius, "px)"),
+      transformStyle: "preserve-3d",
+      backfaceVisibility: "visible",
+      WebkitBackfaceVisibility: "visible",
+      opacity: opacity || 1,
+      willChange: "transform, opacity"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_framerMotion.motion.div, {
+      onHoverStart: function onHoverStart() {
+        return setHovered(true);
+      },
+      onHoverEnd: function onHoverEnd() {
+        return setHovered(false);
+      },
+      animate: {
+        y: hovered ? -12 : 0
+      },
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 22
+      },
+      style: {
+        width: "100%",
+        height: "100%",
+        borderRadius: "12px",
+        overflow: "hidden",
+        position: "relative",
+        cursor: "pointer",
+        willChange: "transform",
+        boxShadow: hovered ? "0 0 30px rgba(160,120,255,0.8), 0 0 60px rgba(100,80,220,0.6), 0 0 100px rgba(60,40,180,0.4), 0 20px 40px rgba(0,0,0,0.8)" : "0 10px 20px rgba(0,0,0,0.5)",
+        transition: "box-shadow 0.4s ease"
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: image.src,
+        alt: image.label || "Card ".concat(index + 1),
+        loading: "lazy",
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: "block",
+          borderRadius: "12px",
+          filter: hovered ? "brightness(1.2) saturate(1.3) contrast(1.1)" : "brightness(".concat(0.65 + frontness * 0.3, ") saturate(1.05)"),
+          transition: "filter 0.4s ease"
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%)",
+          zIndex: 2
+        }
+      }), image.label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          padding: "20px 16px 16px",
+          zIndex: 4,
+          background: "linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%)"
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            fontFamily: "'SF Pro Display', 'Helvetica Neue', sans-serif",
+            fontSize: "13px",
+            fontWeight: 600,
+            color: "rgba(255,255,255,0.9)",
+            letterSpacing: "0.08em",
+            textTransform: "uppercase"
+          },
+          children: image.label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+        animate: hovered ? {
+          opacity: [0, 0.15, 0],
+          x: ["-100%", "200%"]
+        } : {
+          opacity: 0
+        },
+        transition: {
+          duration: 0.7,
+          ease: "easeInOut"
+        },
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%)",
+          zIndex: 5
+        }
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        top: "105%",
+        left: "5%",
+        right: "5%",
+        height: "80px",
+        background: "url(".concat(image.src, ") center/cover no-repeat"),
+        borderRadius: "12px",
+        transform: "scaleY(-1)",
+        opacity: 0.12 + frontness * 0.08,
+        maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%)",
+        filter: "blur(3px)",
+        pointerEvents: "none"
+      }
+    })]
+  });
+});
+
+// ─── Main reusable carousel component ────────────────────────────────────────
+
+function Carousel(_ref3) {
+  var _defaultRotation$x, _defaultRotation$y, _defaultRotation$z;
+  var _ref3$images = _ref3.images,
+    images = _ref3$images === void 0 ? [] : _ref3$images,
+    _ref3$defaultRotation = _ref3.defaultRotation,
+    defaultRotation = _ref3$defaultRotation === void 0 ? {
+      x: -20,
+      y: 10,
+      z: 20
+    } : _ref3$defaultRotation,
+    _ref3$controlled = _ref3.controlled,
+    controlled = _ref3$controlled === void 0 ? false : _ref3$controlled,
+    onRotationChange = _ref3.onRotationChange,
+    _ref3$autoRotateSpeed = _ref3.autoRotateSpeed,
+    autoRotateSpeed = _ref3$autoRotateSpeed === void 0 ? 0.3 : _ref3$autoRotateSpeed,
+    _ref3$autoRotateAxes = _ref3.autoRotateAxes,
+    autoRotateAxes = _ref3$autoRotateAxes === void 0 ? {
+      x: false,
+      y: true,
+      z: false
+    } : _ref3$autoRotateAxes,
+    _ref3$pauseOnDrag = _ref3.pauseOnDrag,
+    pauseOnDrag = _ref3$pauseOnDrag === void 0 ? true : _ref3$pauseOnDrag,
+    _ref3$cardWidth = _ref3.cardWidth,
+    cardWidth = _ref3$cardWidth === void 0 ? 220 : _ref3$cardWidth,
+    _ref3$cardHeight = _ref3.cardHeight,
+    cardHeight = _ref3$cardHeight === void 0 ? 300 : _ref3$cardHeight,
+    _ref3$gap = _ref3.gap,
+    gap = _ref3$gap === void 0 ? 2 : _ref3$gap,
+    _ref3$perspective = _ref3.perspective,
+    perspective = _ref3$perspective === void 0 ? 2000 : _ref3$perspective,
+    _ref3$sensitivity = _ref3.sensitivity,
+    sensitivity = _ref3$sensitivity === void 0 ? 0.4 : _ref3$sensitivity,
+    _ref3$showDragHint = _ref3.showDragHint,
+    showDragHint = _ref3$showDragHint === void 0 ? true : _ref3$showDragHint,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className,
+    _ref3$style = _ref3.style,
+    style = _ref3$style === void 0 ? {} : _ref3$style;
+  var rotationRef = (0, _react.useRef)({
+    x: (_defaultRotation$x = defaultRotation.x) !== null && _defaultRotation$x !== void 0 ? _defaultRotation$x : -20,
+    y: (_defaultRotation$y = defaultRotation.y) !== null && _defaultRotation$y !== void 0 ? _defaultRotation$y : 10,
+    z: (_defaultRotation$z = defaultRotation.z) !== null && _defaultRotation$z !== void 0 ? _defaultRotation$z : 20
+  });
+  var rafRef = (0, _react.useRef)(null);
+  var isDragging = (0, _react.useRef)(false);
+  var lastMousePos = (0, _react.useRef)({
+    x: 0,
+    y: 0
+  });
+  var velocityRef = (0, _react.useRef)({
+    x: 0,
+    y: 0,
+    z: 0
+  });
+  var _useState3 = (0, _react.useState)(_objectSpread({}, rotationRef.current)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderRotation = _useState4[0],
+    setRenderRotation = _useState4[1];
+  var returnAnimRef = (0, _react.useRef)(null);
+  var cardCount = images.length;
+  var angleStep = cardCount > 0 ? 360 / cardCount : 0;
+  var radius = cardCount > 0 ? (cardWidth + gap) * cardCount / (2 * Math.PI) : 0;
+  (0, _react.useEffect)(function () {
+    if (!isDragging.current) {
+      var _defaultRotation$x2, _defaultRotation$y2, _defaultRotation$z2;
+      rotationRef.current = {
+        x: (_defaultRotation$x2 = defaultRotation.x) !== null && _defaultRotation$x2 !== void 0 ? _defaultRotation$x2 : -20,
+        y: (_defaultRotation$y2 = defaultRotation.y) !== null && _defaultRotation$y2 !== void 0 ? _defaultRotation$y2 : 10,
+        z: (_defaultRotation$z2 = defaultRotation.z) !== null && _defaultRotation$z2 !== void 0 ? _defaultRotation$z2 : 20
+      };
+      setRenderRotation(_objectSpread({}, rotationRef.current));
+    }
+  }, [defaultRotation.x, defaultRotation.y, defaultRotation.z]);
+  (0, _react.useEffect)(function () {
+    if (cardCount === 0) return;
+    var lastTime = performance.now();
+    var _tick = function tick(now) {
+      var delta = Math.min(now - lastTime, 32);
+      lastTime = now;
+      var isCurrentlyDragging = isDragging.current;
+      if (!isCurrentlyDragging) {
+        velocityRef.current.x *= 0.94;
+        velocityRef.current.y *= 0.94;
+        velocityRef.current.z *= 0.94;
+        if (Math.abs(velocityRef.current.x) < 0.001) velocityRef.current.x = 0;
+        if (Math.abs(velocityRef.current.y) < 0.001) velocityRef.current.y = 0;
+        if (Math.abs(velocityRef.current.z) < 0.001) velocityRef.current.z = 0;
+        if (!controlled) {
+          // Auto-rotate on specified axes
+          if (autoRotateAxes.x) rotationRef.current.x += autoRotateSpeed * (delta / 16.67);
+          if (autoRotateAxes.y) rotationRef.current.y += autoRotateSpeed * (delta / 16.67);
+          if (autoRotateAxes.z) rotationRef.current.z += autoRotateSpeed * (delta / 16.67);
+          rotationRef.current.x += velocityRef.current.x;
+          rotationRef.current.y += velocityRef.current.y;
+          rotationRef.current.z += velocityRef.current.z;
+        } else {
+          rotationRef.current.x += velocityRef.current.x;
+          rotationRef.current.y += velocityRef.current.y;
+          rotationRef.current.z += velocityRef.current.z;
+          if (Math.abs(velocityRef.current.x) < 0.01 && Math.abs(velocityRef.current.y) < 0.01 && Math.abs(velocityRef.current.z) < 0.01) {
+            var _defaultRotation$x3, _defaultRotation$y3, _defaultRotation$z3;
+            var returnSpeed = 0.08;
+            var targetX = (_defaultRotation$x3 = defaultRotation.x) !== null && _defaultRotation$x3 !== void 0 ? _defaultRotation$x3 : -20;
+            var targetY = (_defaultRotation$y3 = defaultRotation.y) !== null && _defaultRotation$y3 !== void 0 ? _defaultRotation$y3 : 10;
+            var targetZ = (_defaultRotation$z3 = defaultRotation.z) !== null && _defaultRotation$z3 !== void 0 ? _defaultRotation$z3 : 20;
+            rotationRef.current.x += (targetX - rotationRef.current.x) * returnSpeed;
+            rotationRef.current.y += (targetY - rotationRef.current.y) * returnSpeed;
+            rotationRef.current.z += (targetZ - rotationRef.current.z) * returnSpeed;
+          }
+        }
+      }
+      setRenderRotation(_objectSpread({}, rotationRef.current));
+      if (onRotationChange) {
+        onRotationChange(_objectSpread({}, rotationRef.current));
+      }
+      rafRef.current = requestAnimationFrame(_tick);
+    };
+    rafRef.current = requestAnimationFrame(_tick);
+    return function () {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (returnAnimRef.current) cancelAnimationFrame(returnAnimRef.current);
+    };
+  }, [controlled, defaultRotation, autoRotateSpeed, autoRotateAxes, pauseOnDrag, onRotationChange, cardCount]);
+  var handlePointerDown = (0, _react.useCallback)(function (clientX, clientY) {
+    isDragging.current = true;
+    lastMousePos.current = {
+      x: clientX,
+      y: clientY
+    };
+    velocityRef.current = {
+      x: 0,
+      y: 0,
+      z: 0
+    };
+    if (returnAnimRef.current) {
+      cancelAnimationFrame(returnAnimRef.current);
+      returnAnimRef.current = null;
+    }
+  }, []);
+  var handlePointerMove = (0, _react.useCallback)(function (clientX, clientY) {
+    if (!isDragging.current) return;
+    var dx = clientX - lastMousePos.current.x;
+    var dy = clientY - lastMousePos.current.y;
+
+    // Horizontal drag = Y axis rotation (spin the cylinder)
+    rotationRef.current.y += dx * sensitivity;
+
+    // Vertical drag = X axis rotation (tilt the cylinder)
+    rotationRef.current.x -= dy * sensitivity * 0.6;
+
+    // Diagonal drag = Z axis rotation (roll)
+    if (Math.abs(dx) > 2 && Math.abs(dy) > 2) {
+      var diagonalComponent = dx * dy / Math.sqrt(dx * dx + dy * dy);
+      rotationRef.current.z += diagonalComponent * sensitivity * 0.3;
+    }
+    velocityRef.current.y = dx * sensitivity * 0.5;
+    velocityRef.current.x = -dy * sensitivity * 0.3;
+    velocityRef.current.z = dx * dy / Math.sqrt(dx * dx + dy * dy || 1) * sensitivity * 0.2;
+
+    // Clamp values
+    rotationRef.current.x = Math.max(-75, Math.min(75, rotationRef.current.x));
+    rotationRef.current.z = Math.max(-45, Math.min(45, rotationRef.current.z));
+    lastMousePos.current = {
+      x: clientX,
+      y: clientY
+    };
+  }, [sensitivity]);
+  var handlePointerUp = (0, _react.useCallback)(function () {
+    isDragging.current = false;
+  }, []);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    handlePointerDown(e.clientX, e.clientY);
+  }, [handlePointerDown]);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    handlePointerMove(e.clientX, e.clientY);
+  }, [handlePointerMove]);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    handlePointerUp();
+  }, [handlePointerUp]);
+  var onTouchStart = (0, _react.useCallback)(function (e) {
+    handlePointerDown(e.touches[0].clientX, e.touches[0].clientY);
+  }, [handlePointerDown]);
+  var onTouchMove = (0, _react.useCallback)(function (e) {
+    handlePointerMove(e.touches[0].clientX, e.touches[0].clientY);
+  }, [handlePointerMove]);
+  var onTouchEnd = (0, _react.useCallback)(function () {
+    handlePointerUp();
+  }, [handlePointerUp]);
+  if (cardCount === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      style: _objectSpread({
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      }, style),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          color: "rgba(255,255,255,0.5)",
+          fontSize: "16px"
+        },
+        children: "No images to display"
+      })
+    });
+  }
+
+  // Sort cards by depth for proper rendering order (back to front)
+  var sortedImages = _toConsumableArray(images).map(function (image, i) {
+    var angle = i * angleStep;
+    var totalAngle = (renderRotation.y + angle) % 360;
+    var zDepth = Math.cos(totalAngle * Math.PI / 180);
+    return {
+      image: image,
+      index: i,
+      zDepth: zDepth
+    };
+  }).sort(function (a, b) {
+    return a.zDepth - b.zDepth;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    style: _objectSpread({
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      perspective: "".concat(perspective, "px"),
+      perspectiveOrigin: "50% 50%",
+      cursor: isDragging.current ? "grabbing" : "grab",
+      userSelect: "none",
+      touchAction: "none"
+    }, style),
+    onMouseDown: onMouseDown,
+    onMouseMove: onMouseMove,
+    onMouseUp: onMouseUp,
+    onMouseLeave: onMouseUp,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transformStyle: "preserve-3d",
+        transform: "translate(-50%, -50%) rotateX(".concat(renderRotation.x, "deg) rotateZ(").concat(renderRotation.z, "deg)"),
+        willChange: "transform"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transformStyle: "preserve-3d",
+          transform: "translate(-50%, -50%) rotateY(".concat(renderRotation.y, "deg)"),
+          willChange: "transform"
+        },
+        children: sortedImages.map(function (_ref4) {
+          var image = _ref4.image,
+            index = _ref4.index,
+            zDepth = _ref4.zDepth;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselCard, {
+            image: image,
+            index: index,
+            totalAngle: renderRotation.y,
+            angleStep: angleStep,
+            radius: radius,
+            cardWidth: cardWidth,
+            cardHeight: cardHeight
+          }, index);
+        })
+      })
+    }), showDragHint && /*#__PURE__*/(0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      transition: {
+        delay: 2.5,
+        duration: 1
+      },
+      style: {
+        position: "absolute",
+        bottom: "28px",
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 10,
+        color: "rgba(255,255,255,0.25)",
+        fontSize: "11px",
+        letterSpacing: "0.2em",
+        textTransform: "uppercase",
+        textAlign: "center",
+        pointerEvents: "none"
+      },
+      children: "drag to rotate \u2022 auto-rotating"
+    })]
+  });
+}
+
+// ─── Full page component with backgrounds ────────────────────────────────────
+
+function CarouselWithBackground(_ref5) {
+  var images = _ref5.images,
+    defaultRotation = _ref5.defaultRotation,
+    controlled = _ref5.controlled,
+    onRotationChange = _ref5.onRotationChange,
+    carouselProps = _objectWithoutProperties(_ref5, _excluded);
+  var containerRef = (0, _react.useRef)(null);
+  var _useState5 = (0, _react.useState)({
+      x: 0,
+      y: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mouse = _useState6[0],
+    setMouse = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var onResize = function onResize() {
+      setMouse(function (prev) {
+        return _objectSpread({}, prev);
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return function () {
+      return window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    setMouse({
+      x: e.clientX,
+      y: e.clientY
+    });
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: containerRef,
+    onMouseMove: onMouseMove,
+    style: {
+      position: "relative",
+      width: "100vw",
+      height: "100vh",
+      background: "#000",
+      overflow: "hidden",
+      fontFamily: "'SF Pro Display', 'Helvetica Neue', sans-serif"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LightBlobs, {
+      mouseX: mouse.x,
+      mouseY: mouse.y
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Particles, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "radial-gradient(ellipse 60% 40% at 50% 65%, rgba(80,50,160,0.18) 0%, transparent 70%)",
+        pointerEvents: "none",
+        zIndex: 1
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "35%",
+        background: "linear-gradient(to top, rgba(20,10,40,0.5) 0%, transparent 100%)",
+        pointerEvents: "none",
+        zIndex: 2
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 5
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Carousel, _objectSpread({
+        images: images,
+        defaultRotation: defaultRotation,
+        controlled: controlled,
+        onRotationChange: onRotationChange
+      }, carouselProps))
+    })]
+  });
+}
+var _default = exports["default"] = Carousel;