react-3d-carousel-fullcontrol 1.2.2 → 1.2.3

package/dist/Carousel.js

@@ -235,14 +235,14 @@ var CarouselCard = /*#__PURE__*/(0, _react.memo)(function CarouselCard(_ref2) {
           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)"),
+          filter: hovered ? "brightness(1.1) saturate(1.2) contrast(1.05)" : "brightness(0.95) saturate(1)",
           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%)",
+          background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%)",
           zIndex: 2
         }
       }), image.label && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -253,7 +253,7 @@ var CarouselCard = /*#__PURE__*/(0, _react.memo)(function CarouselCard(_ref2) {
           right: 0,
           padding: "20px 16px 16px",
           zIndex: 4,
-          background: "linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%)"
+          background: "linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%)"
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           style: {
@@ -294,9 +294,9 @@ var CarouselCard = /*#__PURE__*/(0, _react.memo)(function CarouselCard(_ref2) {
         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%)",
+        opacity: 0.08 + frontness * 0.04,
+        maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%)",
         filter: "blur(3px)",
         pointerEvents: "none"
       }
@@ -307,7 +307,7 @@ var CarouselCard = /*#__PURE__*/(0, _react.memo)(function CarouselCard(_ref2) {
 // ─── Main reusable carousel component ────────────────────────────────────────
 
 function Carousel(_ref3) {
-  var _defaultRotation$x, _defaultRotation$y, _defaultRotation$z;
+  var _defaultRotation$x, _defaultRotation$y, _defaultRotation$z, _defaultRotation$x2, _defaultRotation$y2, _defaultRotation$z2;
   var _ref3$images = _ref3.images,
     images = _ref3$images === void 0 ? [] : _ref3$images,
     _ref3$defaultRotation = _ref3.defaultRotation,
@@ -345,11 +345,10 @@ function Carousel(_ref3) {
     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
-  });
+  // Use refs for rotation values to avoid re-renders
+  var rotationXRef = (0, _react.useRef)((_defaultRotation$x = defaultRotation.x) !== null && _defaultRotation$x !== void 0 ? _defaultRotation$x : -20);
+  var rotationYRef = (0, _react.useRef)((_defaultRotation$y = defaultRotation.y) !== null && _defaultRotation$y !== void 0 ? _defaultRotation$y : 10);
+  var rotationZRef = (0, _react.useRef)((_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)({
@@ -361,75 +360,93 @@ function Carousel(_ref3) {
     y: 0,
     z: 0
   });
-  var _useState3 = (0, _react.useState)(_objectSpread({}, rotationRef.current)),
+  var _useState3 = (0, _react.useState)({
+      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
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
     renderRotation = _useState4[0],
     setRenderRotation = _useState4[1];
-  var returnAnimRef = (0, _react.useRef)(null);
+  var lastRenderTime = (0, _react.useRef)(0);
+  var FRAME_INTERVAL = 1000 / 60; // Target 60fps
+
   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));
+      var _defaultRotation$x3, _defaultRotation$y3, _defaultRotation$z3;
+      rotationXRef.current = (_defaultRotation$x3 = defaultRotation.x) !== null && _defaultRotation$x3 !== void 0 ? _defaultRotation$x3 : -20;
+      rotationYRef.current = (_defaultRotation$y3 = defaultRotation.y) !== null && _defaultRotation$y3 !== void 0 ? _defaultRotation$y3 : 10;
+      rotationZRef.current = (_defaultRotation$z3 = defaultRotation.z) !== null && _defaultRotation$z3 !== void 0 ? _defaultRotation$z3 : 20;
+      setRenderRotation({
+        x: rotationXRef.current,
+        y: rotationYRef.current,
+        z: rotationZRef.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;
+      // Limit updates to target frame rate for smooth animation
+      if (now - lastRenderTime.current < FRAME_INTERVAL) {
+        rafRef.current = requestAnimationFrame(_tick);
+        return;
+      }
+      var delta = Math.min(now - lastRenderTime.current, 32);
+      lastRenderTime.current = now;
+      if (!isDragging.current) {
+        // Apply friction
+        velocityRef.current.x *= 0.95;
+        velocityRef.current.y *= 0.95;
+        velocityRef.current.z *= 0.95;
         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;
+          // Smooth auto-rotation
+          if (autoRotateAxes.x) rotationXRef.current += autoRotateSpeed * (delta / 16.67);
+          if (autoRotateAxes.y) rotationYRef.current += autoRotateSpeed * (delta / 16.67);
+          if (autoRotateAxes.z) rotationZRef.current += autoRotateSpeed * (delta / 16.67);
+          rotationXRef.current += velocityRef.current.x;
+          rotationYRef.current += velocityRef.current.y;
+          rotationZRef.current += velocityRef.current.z;
         } else {
-          rotationRef.current.x += velocityRef.current.x;
-          rotationRef.current.y += velocityRef.current.y;
-          rotationRef.current.z += velocityRef.current.z;
+          rotationXRef.current += velocityRef.current.x;
+          rotationYRef.current += velocityRef.current.y;
+          rotationZRef.current += 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 _defaultRotation$x4, _defaultRotation$y4, _defaultRotation$z4;
             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;
+            rotationXRef.current += (((_defaultRotation$x4 = defaultRotation.x) !== null && _defaultRotation$x4 !== void 0 ? _defaultRotation$x4 : -20) - rotationXRef.current) * returnSpeed;
+            rotationYRef.current += (((_defaultRotation$y4 = defaultRotation.y) !== null && _defaultRotation$y4 !== void 0 ? _defaultRotation$y4 : 10) - rotationYRef.current) * returnSpeed;
+            rotationZRef.current += (((_defaultRotation$z4 = defaultRotation.z) !== null && _defaultRotation$z4 !== void 0 ? _defaultRotation$z4 : 20) - rotationZRef.current) * returnSpeed;
           }
         }
       }
-      setRenderRotation(_objectSpread({}, rotationRef.current));
+
+      // Only update state if values changed significantly
+      setRenderRotation({
+        x: rotationXRef.current,
+        y: rotationYRef.current,
+        z: rotationZRef.current
+      });
       if (onRotationChange) {
-        onRotationChange(_objectSpread({}, rotationRef.current));
+        onRotationChange({
+          x: rotationXRef.current,
+          y: rotationYRef.current,
+          z: rotationZRef.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]);
+  }, [controlled, defaultRotation, autoRotateSpeed, autoRotateAxes, onRotationChange, cardCount]);
   var handlePointerDown = (0, _react.useCallback)(function (clientX, clientY) {
     isDragging.current = true;
     lastMousePos.current = {
@@ -441,34 +458,22 @@ function Carousel(_ref3) {
       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)
+    rotationYRef.current += dx * sensitivity;
+    rotationXRef.current -= dy * sensitivity * 0.6;
     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;
+      rotationZRef.current += 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));
+    rotationXRef.current = Math.max(-75, Math.min(75, rotationXRef.current));
+    rotationZRef.current = Math.max(-45, Math.min(45, rotationZRef.current));
     lastMousePos.current = {
       x: clientX,
       y: clientY
@@ -517,8 +522,6 @@ function Carousel(_ref3) {
       })
     });
   }
-
-  // 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;
@@ -576,6 +579,7 @@ function Carousel(_ref3) {
             image: image,
             index: index,
             totalAngle: renderRotation.y,
+            opacity: 1,
             angleStep: angleStep,
             radius: radius,
             cardWidth: cardWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-3d-carousel-fullcontrol",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A highly customizable 3D carousel component for React with full axis rotation control",
   "main": "dist/index.js",
   "module": "dist/index.js",