react-3d-carousel-fullcontrol 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-3d-carousel-fullcontrol",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A highly customizable 3D carousel component for React with full axis rotation control",
   "main": "src/Carousel.jsx",
   "keywords": [

package/src/Carousel.jsx

@@ -180,7 +180,7 @@ const CarouselCard = memo(function CarouselCard({
           cursor: "pointer",
           willChange: "transform",
           boxShadow: hovered
-            ? `0 20px 40px rgba(0,0,0,0.8)`
+            ? `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",
         }}
@@ -276,26 +276,6 @@ const CarouselCard = memo(function CarouselCard({
 
 // ─── Main reusable carousel component ────────────────────────────────────────
 
-/**
- * 3D Carousel with full axis rotation control and auto-rotation
- * 
- * @param {Object} props
- * @param {Array<{src: string, label?: string}>} props.images
- * @param {Object} [props.defaultRotation] - Default rotation { x: -20, y: 10, z: 20 }
- * @param {boolean} [props.controlled=false] - Return to default position on release
- * @param {function} [props.onRotationChange] - Callback with current rotation
- * @param {number} [props.autoRotateSpeed=0.3] - Auto rotation speed for Y axis (degrees per frame)
- * @param {Object} [props.autoRotateAxes] - Which axes to auto-rotate { x: false, y: true, z: false }
- * @param {boolean} [props.pauseOnDrag=true] - Pause auto-rotation while dragging
- * @param {number} [props.cardWidth=220]
- * @param {number} [props.cardHeight=300]
- * @param {number} [props.gap=2]
- * @param {number} [props.perspective=2000]
- * @param {number} [props.sensitivity=0.4] - Mouse drag sensitivity
- * @param {boolean} [props.showDragHint=true]
- * @param {string} [props.className=""]
- * @param {Object} [props.style={}]
- */
 function Carousel({
   images = [],
   defaultRotation = { x: -20, y: 10, z: 20 },
@@ -330,7 +310,6 @@ function Carousel({
   const angleStep = cardCount > 0 ? 360 / cardCount : 0;
   const radius = cardCount > 0 ? ((cardWidth + gap) * cardCount) / (2 * Math.PI) : 0;
 
-  // Sync with defaultRotation prop changes
   useEffect(() => {
     if (!isDragging.current) {
       rotationRef.current = {
@@ -342,7 +321,6 @@ function Carousel({
     }
   }, [defaultRotation.x, defaultRotation.y, defaultRotation.z]);
 
-  // Animation loop
   useEffect(() => {
     if (cardCount === 0) return;
 
@@ -355,7 +333,6 @@ function Carousel({
       const isCurrentlyDragging = isDragging.current;
 
       if (!isCurrentlyDragging) {
-        // Apply friction to all velocities
         velocityRef.current.x *= 0.94;
         velocityRef.current.y *= 0.94;
         velocityRef.current.z *= 0.94;
@@ -365,22 +342,19 @@ function Carousel({
         if (Math.abs(velocityRef.current.z) < 0.001) velocityRef.current.z = 0;
 
         if (!controlled) {
-          // Free mode: apply auto-rotation to all specified axes
+          // 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);
           
-          // Add momentum
           rotationRef.current.x += velocityRef.current.x;
           rotationRef.current.y += velocityRef.current.y;
           rotationRef.current.z += velocityRef.current.z;
         } else {
-          // Controlled mode: apply momentum and return to default
           rotationRef.current.x += velocityRef.current.x;
           rotationRef.current.y += velocityRef.current.y;
           rotationRef.current.z += velocityRef.current.z;
           
-          // If velocities are near zero, return to default position
           if (Math.abs(velocityRef.current.x) < 0.01 && 
               Math.abs(velocityRef.current.y) < 0.01 && 
               Math.abs(velocityRef.current.z) < 0.01) {
@@ -395,9 +369,6 @@ function Carousel({
             rotationRef.current.z += (targetZ - rotationRef.current.z) * returnSpeed;
           }
         }
-      } else if (pauseOnDrag) {
-        // During drag: only apply auto-rotation if pauseOnDrag is false
-        // (Currently paused, but momentum is handled in pointer move)
       }
 
       setRenderRotation({ ...rotationRef.current });
@@ -416,7 +387,6 @@ function Carousel({
     };
   }, [controlled, defaultRotation, autoRotateSpeed, autoRotateAxes, pauseOnDrag, onRotationChange, cardCount]);
 
-  // Interaction handlers
   const handlePointerDown = useCallback((clientX, clientY) => {
     isDragging.current = true;
     lastMousePos.current = { x: clientX, y: clientY };
@@ -434,24 +404,23 @@ function Carousel({
     const dx = clientX - lastMousePos.current.x;
     const dy = clientY - lastMousePos.current.y;
     
-    // Horizontal drag = Y axis rotation (spin around)
+    // Horizontal drag = Y axis rotation (spin the cylinder)
     rotationRef.current.y += dx * sensitivity;
     
-    // Vertical drag = X axis rotation (tilt forward/backward)
+    // Vertical drag = X axis rotation (tilt the cylinder)
     rotationRef.current.x -= dy * sensitivity * 0.6;
     
-    // Diagonal drag = Z axis rotation (roll/twist)
+    // Diagonal drag = Z axis rotation (roll)
     if (Math.abs(dx) > 2 && Math.abs(dy) > 2) {
       const diagonalComponent = (dx * dy) / Math.sqrt(dx * dx + dy * dy);
       rotationRef.current.z += diagonalComponent * sensitivity * 0.3;
     }
     
-    // Store velocities for momentum
     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 rotations to reasonable ranges
+    // 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));
     
@@ -462,7 +431,6 @@ function Carousel({
     isDragging.current = false;
   }, []);
 
-  // Mouse events
   const onMouseDown = useCallback((e) => {
     e.preventDefault();
     handlePointerDown(e.clientX, e.clientY);
@@ -476,7 +444,6 @@ function Carousel({
     handlePointerUp();
   }, [handlePointerUp]);
 
-  // Touch events
   const onTouchStart = useCallback((e) => {
     handlePointerDown(e.touches[0].clientX, e.touches[0].clientY);
   }, [handlePointerDown]);
@@ -489,7 +456,6 @@ function Carousel({
     handlePointerUp();
   }, [handlePointerUp]);
 
-  // Empty state
   if (cardCount === 0) {
     return (
       <div className={className} style={{ position: "relative", width: "100%", height: "100%", ...style }}>
@@ -507,7 +473,7 @@ function Carousel({
     );
   }
 
-  // Sort cards by depth for proper rendering
+  // Sort cards by depth for proper rendering order (back to front)
   const sortedImages = [...images].map((image, i) => {
     const angle = i * angleStep;
     const totalAngle = (renderRotation.y + angle) % 360;
@@ -537,30 +503,42 @@ function Carousel({
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
     >
-      {/* Apply all 3 axis rotations */}
+      {/* OUTER CONTAINER: Only tilts the view (X and Z rotation) */}
       <div
         style={{
           position: "absolute",
           top: "50%",
           left: "50%",
           transformStyle: "preserve-3d",
-          transform: `translate(-50%, -50%) rotateX(${renderRotation.x}deg) rotateY(${renderRotation.y}deg) rotateZ(${renderRotation.z}deg)`,
+          transform: `translate(-50%, -50%) rotateX(${renderRotation.x}deg) rotateZ(${renderRotation.z}deg)`,
           willChange: "transform",
         }}
       >
-        {sortedImages.map(({ image, index, zDepth }) => (
-          <CarouselCard
-            key={index}
-            image={image}
-            index={index}
-            totalAngle={renderRotation.y}
-            opacity={0.3 + (zDepth + 1) * 0.35}
-            angleStep={angleStep}
-            radius={radius}
-            cardWidth={cardWidth}
-            cardHeight={cardHeight}
-          />
-        ))}
+        {/* INNER CONTAINER: Only spins the cards around Y axis */}
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transformStyle: "preserve-3d",
+            transform: `translate(-50%, -50%) rotateY(${renderRotation.y}deg)`,
+            willChange: "transform",
+          }}
+        >
+          {sortedImages.map(({ image, index, zDepth }) => (
+            <CarouselCard
+              key={index}
+              image={image}
+              index={index}
+              totalAngle={renderRotation.y}
+              opacity={0.3 + (zDepth + 1) * 0.35}
+              angleStep={angleStep}
+              radius={radius}
+              cardWidth={cardWidth}
+              cardHeight={cardHeight}
+            />
+          ))}
+        </div>
       </div>
       
       {showDragHint && (