react-3d-carousel-fullcontrol 1.1.0 → 1.2.1

package/src/Carousel.jsx

@@ -1,684 +0,0 @@
-import { useEffect, useRef, useState, useCallback, memo } from "react";
-import { motion } from "framer-motion";
-
-// ─── Particle system ────────────────────────────────────────────────────────
-function Particles() {
-  const count = 80;
-  const particles = useRef(
-    Array.from({ length: count }, (_, i) => ({
-      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 (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        overflow: "hidden",
-        pointerEvents: "none",
-        zIndex: 1,
-      }}
-    >
-      {particles.map((p) => (
-        <motion.div
-          key={p.id}
-          style={{
-            position: "absolute",
-            left: `${p.x}%`,
-            top: `${p.y}%`,
-            width: p.size,
-            height: p.size,
-            borderRadius: "50%",
-            background: `rgba(180,160,255,${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,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-// ─── Light blobs ────────────────────────────────────────────────────────────
-
-function LightBlobs({ mouseX, mouseY }) {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        zIndex: 0,
-        overflow: "hidden",
-      }}
-    >
-      <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",
-        }}
-      />
-      <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" }}
-      />
-      <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 }}
-      />
-      <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 }}
-      />
-    </div>
-  );
-}
-
-// ─── Single carousel card ────────────────────────────────────────────────────
-
-const CarouselCard = memo(function CarouselCard({ 
-  image, 
-  index, 
-  totalAngle, 
-  opacity, 
-  angleStep, 
-  radius,
-  cardWidth,
-  cardHeight,
-}) {
-  const angle = index * angleStep;
-  const [hovered, setHovered] = useState(false);
-
-  const normalizedAngle = ((totalAngle + angle) % 360 + 360) % 360;
-  const frontness = Math.max(0, Math.cos((normalizedAngle * Math.PI) / 180));
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        width: `${cardWidth}px`,
-        height: `${cardHeight}px`,
-        left: `-${cardWidth / 2}px`,
-        top: `-${cardHeight / 2}px`,
-        transform: `rotateY(${angle}deg) translateZ(${radius}px)`,
-        transformStyle: "preserve-3d",
-        backfaceVisibility: "visible",
-        WebkitBackfaceVisibility: "visible",
-        opacity: opacity || 1,
-        willChange: "transform, opacity",
-      }}
-    >
-      <motion.div
-        onHoverStart={() => setHovered(true)}
-        onHoverEnd={() => setHovered(false)}
-        animate={{
-          y: hovered ? -12 : 0,
-        }}
-        transition={{ type: "spring", stiffness: 300, damping: 22 }}
-        style={{
-          width: "100%",
-          height: "100%",
-          borderRadius: "0px",
-          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",
-        }}
-      >
-        <img
-          src={image.src}
-          alt={image.label || `Card ${index + 1}`}
-          loading="lazy"
-          style={{
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-            display: "block",
-            borderRadius: "0px",
-            filter: hovered
-              ? "brightness(1.2) saturate(1.3) contrast(1.1)"
-              : `brightness(${0.65 + frontness * 0.3}) saturate(1.05)`,
-            transition: "filter 0.4s ease",
-          }}
-        />
-
-        <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 && (
-          <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%)",
-            }}
-          >
-            <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",
-              }}
-            >
-              {image.label}
-            </div>
-          </div>
-        )}
-
-        <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,
-          }}
-        />
-      </motion.div>
-
-      <div
-        style={{
-          position: "absolute",
-          top: "105%",
-          left: "5%",
-          right: "5%",
-          height: "80px",
-          background: `url(${image.src}) center/cover no-repeat`,
-          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%)",
-          WebkitMaskImage: "linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%)",
-          filter: "blur(3px)",
-          pointerEvents: "none",
-        }}
-      />
-    </div>
-  );
-});
-
-// ─── 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 },
-  controlled = false,
-  onRotationChange,
-  autoRotateSpeed = 0.3,
-  autoRotateAxes = { x: false, y: true, z: false },
-  pauseOnDrag = true,
-  cardWidth = 220,
-  cardHeight = 300,
-  gap = 2,
-  perspective = 2000,
-  sensitivity = 0.4,
-  showDragHint = true,
-  glowEffect = true,
-  className = "",
-  style = {},
-}) {
-  const rotationRef = useRef({
-    x: defaultRotation.x ?? -20,
-    y: defaultRotation.y ?? 10,
-    z: defaultRotation.z ?? 20,
-  });
-  
-  const rafRef = useRef(null);
-  const isDragging = useRef(false);
-  const lastMousePos = useRef({ x: 0, y: 0 });
-  const velocityRef = useRef({ x: 0, y: 0, z: 0 });
-  const [renderRotation, setRenderRotation] = useState({ ...rotationRef.current });
-  const returnAnimRef = useRef(null);
-
-  const cardCount = images.length;
-  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 = {
-        x: defaultRotation.x ?? -20,
-        y: defaultRotation.y ?? 10,
-        z: defaultRotation.z ?? 20,
-      };
-      setRenderRotation({ ...rotationRef.current });
-    }
-  }, [defaultRotation.x, defaultRotation.y, defaultRotation.z]);
-
-  // Animation loop
-  useEffect(() => {
-    if (cardCount === 0) return;
-
-    let lastTime = performance.now();
-
-    const tick = (now) => {
-      const delta = Math.min(now - lastTime, 32);
-      lastTime = now;
-
-      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;
-        
-        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) {
-          // Free mode: apply auto-rotation to all 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) {
-            
-            const returnSpeed = 0.08;
-            const targetX = defaultRotation.x ?? -20;
-            const targetY = defaultRotation.y ?? 10;
-            const targetZ = defaultRotation.z ?? 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({ ...rotationRef.current });
-      
-      if (onRotationChange) {
-        onRotationChange({ ...rotationRef.current });
-      }
-      
-      rafRef.current = requestAnimationFrame(tick);
-    };
-
-    rafRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-      if (returnAnimRef.current) cancelAnimationFrame(returnAnimRef.current);
-    };
-  }, [controlled, defaultRotation, autoRotateSpeed, autoRotateAxes, pauseOnDrag, onRotationChange, cardCount]);
-
-  // Interaction handlers
-  const handlePointerDown = useCallback((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;
-    }
-  }, []);
-
-  const handlePointerMove = useCallback((clientX, clientY) => {
-    if (!isDragging.current) return;
-    
-    const dx = clientX - lastMousePos.current.x;
-    const 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 forward/backward)
-    rotationRef.current.x -= dy * sensitivity * 0.6;
-    
-    // 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;
-    }
-    
-    // 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
-    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]);
-
-  const handlePointerUp = useCallback(() => {
-    isDragging.current = false;
-  }, []);
-
-  // Mouse events
-  const onMouseDown = useCallback((e) => {
-    e.preventDefault();
-    handlePointerDown(e.clientX, e.clientY);
-  }, [handlePointerDown]);
-
-  const onMouseMove = useCallback((e) => {
-    handlePointerMove(e.clientX, e.clientY);
-  }, [handlePointerMove]);
-
-  const onMouseUp = useCallback(() => {
-    handlePointerUp();
-  }, [handlePointerUp]);
-
-  // Touch events
-  const onTouchStart = useCallback((e) => {
-    handlePointerDown(e.touches[0].clientX, e.touches[0].clientY);
-  }, [handlePointerDown]);
-
-  const onTouchMove = useCallback((e) => {
-    handlePointerMove(e.touches[0].clientX, e.touches[0].clientY);
-  }, [handlePointerMove]);
-
-  const onTouchEnd = useCallback(() => {
-    handlePointerUp();
-  }, [handlePointerUp]);
-
-  // Empty state
-  if (cardCount === 0) {
-    return (
-      <div className={className} style={{ position: "relative", width: "100%", height: "100%", ...style }}>
-        <div style={{ 
-          position: "absolute", 
-          top: "50%", 
-          left: "50%", 
-          transform: "translate(-50%, -50%)",
-          color: "rgba(255,255,255,0.5)",
-          fontSize: "16px"
-        }}>
-          No images to display
-        </div>
-      </div>
-    );
-  }
-
-  // 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;
-    const zDepth = Math.cos((totalAngle * Math.PI) / 180);
-    return { image, index: i, zDepth };
-  }).sort((a, b) => a.zDepth - b.zDepth);
-
-  return (
-    <div
-      className={className}
-      style={{
-        position: "relative",
-        width: "100%",
-        height: "100%",
-        perspective: `${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}
-    >
-      {/* 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) rotateZ(${renderRotation.z}deg)`,
-          willChange: "transform",
-        }}
-      >
-        {/* 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 && (
-        <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",
-          }}
-        >
-          drag to rotate • auto-rotating
-        </motion.div>
-      )}
-    </div>
-  );
-}
-
-// ─── Full page component with backgrounds ────────────────────────────────────
-
-function CarouselWithBackground({
-  images,
-  defaultRotation,
-  controlled,
-  onRotationChange,
-  ...carouselProps
-}) {
-  const containerRef = useRef(null);
-  const [mouse, setMouse] = useState({ x: 0, y: 0 });
-
-  useEffect(() => {
-    const onResize = () => {
-      setMouse(prev => ({ ...prev }));
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-
-  const onMouseMove = useCallback((e) => {
-    setMouse({ x: e.clientX, y: e.clientY });
-  }, []);
-
-  return (
-    <div
-      ref={containerRef}
-      onMouseMove={onMouseMove}
-      style={{
-        position: "relative",
-        width: "100vw",
-        height: "100vh",
-        background: "#000",
-        overflow: "hidden",
-        fontFamily: "'SF Pro Display', 'Helvetica Neue', sans-serif",
-      }}
-    >
-      <LightBlobs mouseX={mouse.x} mouseY={mouse.y} />
-      <Particles />
-
-      <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,
-        }}
-      />
-
-      <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,
-        }}
-      />
-
-      <div style={{ position: "absolute", inset: 0, zIndex: 5 }}>
-        <Carousel
-          images={images}
-          defaultRotation={defaultRotation}
-          controlled={controlled}
-          onRotationChange={onRotationChange}
-          {...carouselProps}
-        />
-      </div>
-    </div>
-  );
-}
-
-export { Carousel, CarouselWithBackground };
-export default Carousel;

package/src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

package/src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;