react-3d-carousel-fullcontrol 1.0.0 → 1.1.0

package/package.json

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

package/src/Carousel.jsx

@@ -174,13 +174,13 @@ const CarouselCard = memo(function CarouselCard({
         style={{
           width: "100%",
           height: "100%",
-          borderRadius: "12px",
+          borderRadius: "0px",
           overflow: "hidden",
           position: "relative",
           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",
         }}
@@ -194,7 +194,7 @@ const CarouselCard = memo(function CarouselCard({
             height: "100%",
             objectFit: "cover",
             display: "block",
-            borderRadius: "12px",
+            borderRadius: "0px",
             filter: hovered
               ? "brightness(1.2) saturate(1.3) contrast(1.1)"
               : `brightness(${0.65 + frontness * 0.3}) saturate(1.05)`,
@@ -261,7 +261,7 @@ const CarouselCard = memo(function CarouselCard({
           right: "5%",
           height: "80px",
           background: `url(${image.src}) center/cover no-repeat`,
-          borderRadius: "12px",
+          borderRadius: "0px",
           transform: "scaleY(-1)",
           opacity: 0.12 + frontness * 0.08,
           maskImage: "linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%)",
@@ -277,14 +277,15 @@ const CarouselCard = memo(function CarouselCard({
 // ─── Main reusable carousel component ────────────────────────────────────────
 
 /**
- * 3D Carousel with full axis rotation control and auto-rotation
+ * 3D Carousel with cylinder-style rotation and full axis control
+ * Cards arranged in a circle and the entire cylinder rotates
  * 
  * @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 {number} [props.autoRotateSpeed=0.3] - Auto rotation speed (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]
@@ -293,6 +294,7 @@ const CarouselCard = memo(function CarouselCard({
  * @param {number} [props.perspective=2000]
  * @param {number} [props.sensitivity=0.4] - Mouse drag sensitivity
  * @param {boolean} [props.showDragHint=true]
+ * @param {boolean} [props.glowEffect=true] - Enable glow effect on hover
  * @param {string} [props.className=""]
  * @param {Object} [props.style={}]
  */
@@ -310,6 +312,7 @@ function Carousel({
   perspective = 2000,
   sensitivity = 0.4,
   showDragHint = true,
+  glowEffect = true,
   className = "",
   style = {},
 }) {
@@ -395,9 +398,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 });
@@ -434,13 +434,13 @@ 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 forward/backward)
     rotationRef.current.x -= dy * sensitivity * 0.6;
     
-    // Diagonal drag = Z axis rotation (roll/twist)
+    // Diagonal drag = Z axis rotation (roll/twist the cylinder)
     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;
@@ -507,7 +507,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 +537,43 @@ function Carousel({
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
     >
-      {/* Apply all 3 axis rotations */}
+      {/* Outer container - tilts the entire cylinder on X and Z axes */}
       <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 - rotates the cards around Y axis (cylinder spin) */}
+        <div
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transformStyle: "preserve-3d",
+            transform: `translate(-50%, -50%) rotateY(${renderRotation.y}deg)`,
+            willChange: "transform",
+          }}
+        >
+          {/* Render cards in sorted order (back to front) */}
+          {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 && (