react-3d-carousel-fullcontrol 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-3d-carousel-fullcontrol",
-  "version": "1.1.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

@@ -174,7 +174,7 @@ const CarouselCard = memo(function CarouselCard({
         style={{
           width: "100%",
           height: "100%",
-          borderRadius: "0px",
+          borderRadius: "12px",
           overflow: "hidden",
           position: "relative",
           cursor: "pointer",
@@ -194,7 +194,7 @@ const CarouselCard = memo(function CarouselCard({
             height: "100%",
             objectFit: "cover",
             display: "block",
-            borderRadius: "0px",
+            borderRadius: "12px",
             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: "0px",
+          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%)",
@@ -276,28 +276,6 @@ const CarouselCard = memo(function CarouselCard({
 
 // ─── Main reusable carousel component ────────────────────────────────────────
 
-/**
- * 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 (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 {boolean} [props.glowEffect=true] - Enable glow effect on hover
- * @param {string} [props.className=""]
- * @param {Object} [props.style={}]
- */
 function Carousel({
   images = [],
   defaultRotation = { x: -20, y: 10, z: 20 },
@@ -312,7 +290,6 @@ function Carousel({
   perspective = 2000,
   sensitivity = 0.4,
   showDragHint = true,
-  glowEffect = true,
   className = "",
   style = {},
 }) {
@@ -333,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 = {
@@ -345,7 +321,6 @@ function Carousel({
     }
   }, [defaultRotation.x, defaultRotation.y, defaultRotation.z]);
 
-  // Animation loop
   useEffect(() => {
     if (cardCount === 0) return;
 
@@ -358,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;
@@ -368,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) {
@@ -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 };
@@ -437,21 +407,20 @@ function Carousel({
     // Horizontal drag = Y axis rotation (spin the cylinder)
     rotationRef.current.y += dx * sensitivity;
     
-    // Vertical drag = X axis rotation (tilt the cylinder forward/backward)
+    // Vertical drag = X axis rotation (tilt the cylinder)
     rotationRef.current.x -= dy * sensitivity * 0.6;
     
-    // Diagonal drag = Z axis rotation (roll/twist the cylinder)
+    // 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 }}>
@@ -537,7 +503,7 @@ function Carousel({
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
     >
-      {/* Outer container - tilts the entire cylinder on X and Z axes */}
+      {/* OUTER CONTAINER: Only tilts the view (X and Z rotation) */}
       <div
         style={{
           position: "absolute",
@@ -548,7 +514,7 @@ function Carousel({
           willChange: "transform",
         }}
       >
-        {/* Inner container - rotates the cards around Y axis (cylinder spin) */}
+        {/* INNER CONTAINER: Only spins the cards around Y axis */}
         <div
           style={{
             position: "absolute",
@@ -559,7 +525,6 @@ function Carousel({
             willChange: "transform",
           }}
         >
-          {/* Render cards in sorted order (back to front) */}
           {sortedImages.map(({ image, index, zDepth }) => (
             <CarouselCard
               key={index}