shadcn/app/public/registry/styles/default/3d-carousel.json

{
  "name": "3d-carousel",
  "description": "3D carousel with perspective rotation",
  "dependencies": [
    "motion",
    "three"
  ],
  "files": [
    {
      "name": "3d-carousel.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Carousel3DItem {\n  id: string\n  content: React.ReactNode\n}\n\ninterface Carousel3DProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: Carousel3DItem[]\n  itemWidth?: number\n  itemHeight?: number\n  spacing?: number\n  perspective?: number\n  rotateY?: number\n  autoRotate?: boolean\n  autoRotateSpeed?: number\n  showControls?: boolean\n  infinite?: boolean\n  className?: string\n}\n\nconst Carousel3D = React.forwardRef<HTMLDivElement, Carousel3DProps>(\n  (\n    {\n      items,\n      itemWidth = 300,\n      itemHeight = 400,\n      spacing = 80,\n      perspective = 1000,\n      rotateY = 40,\n      autoRotate = false,\n      autoRotateSpeed = 3000,\n      showControls = true,\n      infinite = true,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const [currentIndex, setCurrentIndex] = React.useState(0)\n    const [isHovered, setIsHovered] = React.useState(false)\n    const [isDragging, setIsDragging] = React.useState(false)\n    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 })\n    const [dragOffset, setDragOffset] = React.useState(0)\n    const autoRotateRef = React.useRef<NodeJS.Timeout | undefined>(undefined)\n\n    const totalItems = items.length\n    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems)\n\n    // Auto rotation\n    React.useEffect(() => {\n      if (autoRotate && !isHovered && !isDragging) {\n        autoRotateRef.current = setInterval(() => {\n          setCurrentIndex((prev) => (prev + 1) % totalItems)\n        }, autoRotateSpeed)\n      } else {\n        if (autoRotateRef.current) {\n          clearInterval(autoRotateRef.current)\n        }\n      }\n\n      return () => {\n        if (autoRotateRef.current) {\n          clearInterval(autoRotateRef.current)\n        }\n      }\n    }, [autoRotate, isHovered, isDragging, autoRotateSpeed, totalItems])\n\n    const goToPrevious = React.useCallback(() => {\n      setCurrentIndex((prev) =>\n        infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1)\n      )\n    }, [infinite, totalItems])\n\n    const goToNext = React.useCallback(() => {\n      setCurrentIndex((prev) =>\n        infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1)\n      )\n    }, [infinite, totalItems])\n\n    const goToIndex = React.useCallback(\n      (index: number) => {\n        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)))\n      },\n      [totalItems]\n    )\n\n    // Touch and mouse drag handlers\n    const handleDragStart = React.useCallback(\n      (clientX: number, clientY: number) => {\n        setIsDragging(true)\n        setDragStart({ x: clientX, y: clientY })\n        setDragOffset(0)\n      },\n      []\n    )\n\n    const handleDragMove = React.useCallback(\n      (clientX: number, clientY: number) => {\n        if (!isDragging) return\n\n        const deltaX = clientX - dragStart.x\n        const sensitivity = 0.5\n        const newOffset = deltaX * sensitivity\n        setDragOffset(newOffset)\n      },\n      [isDragging, dragStart.x]\n    )\n\n    const handleDragEnd = React.useCallback(() => {\n      if (!isDragging) return\n\n      const threshold = 50\n      if (Math.abs(dragOffset) > threshold) {\n        if (dragOffset > 0) {\n          goToPrevious()\n        } else {\n          goToNext()\n        }\n      }\n\n      setIsDragging(false)\n      setDragOffset(0)\n    }, [isDragging, dragOffset, goToPrevious, goToNext])\n\n    // Mouse events\n    const handleMouseDown = React.useCallback(\n      (e: React.MouseEvent) => {\n        e.preventDefault()\n        handleDragStart(e.clientX, e.clientY)\n      },\n      [handleDragStart]\n    )\n\n    const handleMouseMove = React.useCallback(\n      (e: React.MouseEvent) => {\n        handleDragMove(e.clientX, e.clientY)\n      },\n      [handleDragMove]\n    )\n\n    const handleMouseUp = React.useCallback(() => {\n      handleDragEnd()\n    }, [handleDragEnd])\n\n    // Touch events\n    const handleTouchStart = React.useCallback(\n      (e: React.TouchEvent) => {\n        if (e.touches.length === 1) {\n          const touch = e.touches[0]\n          handleDragStart(touch.clientX, touch.clientY)\n        }\n      },\n      [handleDragStart]\n    )\n\n    const handleTouchMove = React.useCallback(\n      (e: React.TouchEvent) => {\n        if (e.touches.length === 1) {\n          e.preventDefault()\n          const touch = e.touches[0]\n          handleDragMove(touch.clientX, touch.clientY)\n        }\n      },\n      [handleDragMove]\n    )\n\n    const handleTouchEnd = React.useCallback(() => {\n      handleDragEnd()\n    }, [handleDragEnd])\n\n    // Keyboard navigation\n    React.useEffect(() => {\n      const handleKeyDown = (e: KeyboardEvent) => {\n        if (e.key === \"ArrowLeft\") {\n          e.preventDefault()\n          goToPrevious()\n        } else if (e.key === \"ArrowRight\") {\n          e.preventDefault()\n          goToNext()\n        } else if (e.key >= \"1\" && e.key <= \"9\") {\n          const index = parseInt(e.key) - 1\n          if (index < totalItems) {\n            goToIndex(index)\n          }\n        }\n      }\n\n      if (containerRef.current) {\n        containerRef.current.addEventListener(\"keydown\", handleKeyDown)\n        return () => {\n          containerRef.current?.removeEventListener(\"keydown\", handleKeyDown)\n        }\n      }\n    }, [goToPrevious, goToNext, goToIndex, totalItems])\n\n    React.useImperativeHandle(ref, () => containerRef.current!)\n\n    const containerStyle: React.CSSProperties = {\n      perspective: `${perspective}px`,\n      height: `${itemHeight + 100}px`,\n    }\n\n    const carouselStyle: React.CSSProperties = {\n      transform: `translateZ(-${radius}px) rotateY(${-currentIndex * (360 / totalItems) + dragOffset / 5}deg)`,\n      transition: isDragging\n        ? \"none\"\n        : \"transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)\",\n      transformStyle: \"preserve-3d\",\n    }\n\n    return (\n      <div\n        ref={containerRef}\n        className={cn(\n          \"relative w-full select-none focus:outline-none\",\n          className\n        )}\n        style={containerStyle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleMouseUp}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleTouchEnd}\n        tabIndex={0}\n        {...props}\n      >\n        {/* 3D Carousel Container */}\n        <div\n          className=\"relative mx-auto\"\n          style={{\n            width: `${itemWidth}px`,\n            height: `${itemHeight}px`,\n            transformStyle: \"preserve-3d\",\n          }}\n        >\n          <div className=\"absolute inset-0\" style={carouselStyle}>\n            {items.map((item, index) => {\n              const angle = (index / totalItems) * 360\n              const isCurrent = index === currentIndex\n\n              const itemStyle: React.CSSProperties = {\n                transform: `rotateY(${angle}deg) translateZ(${radius}px)`,\n                width: `${itemWidth}px`,\n                height: `${itemHeight}px`,\n                position: \"absolute\",\n                backfaceVisibility: \"hidden\",\n                transformStyle: \"preserve-3d\",\n              }\n\n              return (\n                <div\n                  key={item.id}\n                  className={cn(\n                    \"rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer\",\n                    \"transition-all duration-300 transform-gpu will-change-transform\",\n                    isCurrent && \"ring-2 ring-primary ring-offset-2\"\n                  )}\n                  style={itemStyle}\n                  onClick={() => goToIndex(index)}\n                >\n                  <div className=\"w-full h-full overflow-hidden rounded-lg\">\n                    {item.content}\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n\n        {/* Navigation Controls */}\n        {showControls && (\n          <>\n            <button\n              className={cn(\n                \"absolute left-4 top-1/2 -translate-y-1/2 z-10\",\n                \"p-2 rounded-full bg-background/80 backdrop-blur-sm\",\n                \"border shadow-lg hover:bg-background transition-all\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\"\n              )}\n              onClick={goToPrevious}\n              disabled={!infinite && currentIndex === 0}\n              aria-label=\"Previous item\"\n            >\n              <ChevronLeft className=\"w-5 h-5\" />\n            </button>\n\n            <button\n              className={cn(\n                \"absolute right-4 top-1/2 -translate-y-1/2 z-10\",\n                \"p-2 rounded-full bg-background/80 backdrop-blur-sm\",\n                \"border shadow-lg hover:bg-background transition-all\",\n                \"disabled:opacity-50 disabled:cursor-not-allowed\"\n              )}\n              onClick={goToNext}\n              disabled={!infinite && currentIndex === totalItems - 1}\n              aria-label=\"Next item\"\n            >\n              <ChevronRight className=\"w-5 h-5\" />\n            </button>\n          </>\n        )}\n\n        {/* Indicators */}\n        <div className=\"absolute bottom-4 left-1/2 -translate-x-1/2 z-10\">\n          <div className=\"flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg\">\n            {items.map((_, index) => (\n              <button\n                key={index}\n                className={cn(\n                  \"w-2 h-2 rounded-full transition-all\",\n                  index === currentIndex\n                    ? \"bg-primary scale-125\"\n                    : \"bg-muted-foreground/50 hover:bg-muted-foreground/75\"\n                )}\n                onClick={() => goToIndex(index)}\n                aria-label={`Go to item ${index + 1}`}\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Auto-rotate indicator */}\n        {autoRotate && (\n          <div className=\"absolute top-4 right-4 z-10\">\n            <div className=\"flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm\">\n              <div\n                className={cn(\n                  \"w-2 h-2 rounded-full transition-all\",\n                  isHovered || isDragging\n                    ? \"bg-orange-500\"\n                    : \"bg-green-500 animate-pulse\"\n                )}\n              />\n              <span className=\"text-xs text-muted-foreground\">\n                {isHovered || isDragging ? \"Paused\" : \"Auto\"}\n              </span>\n            </div>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\nCarousel3D.displayName = \"Carousel3D\"\n\n// Card component optimized for 3D carousel\nconst Carousel3DCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20\",\n      \"border rounded-lg overflow-hidden group\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n))\nCarousel3DCard.displayName = \"Carousel3DCard\"\n\nconst Carousel3DCardImage = React.forwardRef<\n  HTMLImageElement,\n  React.ImgHTMLAttributes<HTMLImageElement>\n>(({ className, alt, ...props }, ref) => (\n  <img\n    ref={ref}\n    className={cn(\n      \"w-full h-48 object-cover transition-transform duration-300\",\n      \"group-hover:scale-105\",\n      className\n    )}\n    alt={alt}\n    {...props}\n  />\n))\nCarousel3DCardImage.displayName = \"Carousel3DCardImage\"\n\nconst Carousel3DCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex-1 p-4 flex flex-col justify-between\", className)}\n    {...props}\n  >\n    {children}\n  </div>\n))\nCarousel3DCardContent.displayName = \"Carousel3DCardContent\"\n\nconst Carousel3DCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold text-lg mb-2 line-clamp-2\", className)}\n    {...props}\n  >\n    {children}\n  </h3>\n))\nCarousel3DCardTitle.displayName = \"Carousel3DCardTitle\"\n\nconst Carousel3DCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground line-clamp-3 mb-4\", className)}\n    {...props}\n  >\n    {children}\n  </p>\n))\nCarousel3DCardDescription.displayName = \"Carousel3DCardDescription\"\n\nexport {\n  Carousel3D,\n  Carousel3DCard,\n  Carousel3DCardImage,\n  Carousel3DCardContent,\n  Carousel3DCardTitle,\n  Carousel3DCardDescription,\n  type Carousel3DItem,\n  type Carousel3DProps,\n}\n"
    }
  ],
  "type": "components:3d"
}