{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-cover-flow",
  "type": "registry:block",
  "title": "CoverFlow Carousel",
  "description": "A premium 3D CoverFlow carousel displaying cards along a perspective path.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/components/cards/CardCoverFlow.tsx",
      "type": "registry:component",
      "target": "components/amicro/CardCoverFlow.tsx",
      "content": "import React, { useState } from \"react\";\r\nimport { motion } from \"motion/react\";\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\r\n\r\nconst DEFAULT_ASSETS = [\r\n  {\r\n    src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',\r\n    title: 'Sunset Beach',\r\n  },\r\n  {\r\n    src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80',\r\n    title: 'Misty Mountains',\r\n  },\r\n  {\r\n    src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80',\r\n    title: 'Forest Trail',\r\n  },\r\n  {\r\n    src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80',\r\n    title: 'Sunlight in Woods',\r\n  },\r\n  {\r\n    src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80',\r\n    title: 'Green Hills',\r\n  },\r\n];\r\n\r\ninterface CardCoverFlowProps {\r\n  hovered?: boolean;\r\n  className?: string;\r\n  images?: { src: string; title: string }[];\r\n  isMonochrome?: boolean;\r\n}\r\n\r\nexport const CardCoverFlow = React.memo(function CardCoverFlow({\r\n  hovered,\r\n  className = '',\r\n  images = DEFAULT_ASSETS,\r\n  isMonochrome = false\r\n}: CardCoverFlowProps) {\r\n  const [activeIndex, setActiveIndex] = useState(2);\r\n\r\n  const toPrev = (e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    setActiveIndex(prev => Math.max(0, prev - 1));\r\n  };\r\n\r\n  const toNext = (e: React.MouseEvent) => {\r\n    e.stopPropagation();\r\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\r\n  };\r\n\r\n  const toSlide = (e: React.MouseEvent, index: number) => {\r\n    e.stopPropagation();\r\n    setActiveIndex(index);\r\n  };\r\n\r\n  return (\r\n    <div className={`w-full h-full flex flex-col items-center justify-center relative overflow-hidden select-none bg-zinc-950/40 rounded-2xl ${className}`} style={{ perspective: '1000px' }}>\r\n      {/* carousel wrapper */}\r\n      <div className=\"w-full flex justify-center items-center relative h-[140px] [transform-style:preserve-3d]\">\r\n        {images.map((item, i) => {\r\n          const isActive = activeIndex === i;\r\n          const offset = i - activeIndex;\r\n          const absOffset = Math.abs(offset);\r\n          const isPast = i < activeIndex;\r\n          \r\n          return (\r\n            <motion.div \r\n              key={i}\r\n              className=\"absolute w-[80px] aspect-[3/4] cursor-pointer\"\r\n              initial={false}\r\n              animate={{ \r\n                x: offset * 32,\r\n                rotateY: isActive ? 0 : (isPast ? 38 : -38),\r\n                z: isActive ? 50 : -absOffset * 50,\r\n                scale: isActive ? 1.1 : 1 - (absOffset * 0.08),\r\n                opacity: absOffset > 2 ? 0 : 1 - (absOffset * 0.25)\r\n              }}\r\n              transition={{ type: 'spring', stiffness: 200, damping: 25 }}\r\n              style={{ zIndex: 100 - absOffset }}\r\n              onClick={(e) => toSlide(e, i)}\r\n            >\r\n              {isMonochrome ? (\r\n                <div \r\n                  className=\"w-full h-full rounded-xl bg-neutral-400 dark:bg-neutral-800 border border-neutral-200/20 shadow-2xl flex items-center justify-center text-neutral-600 dark:text-neutral-400 font-bold text-sm\"\r\n                >\r\n                  {i + 1}\r\n                </div>\r\n              ) : (\r\n                <img \r\n                  src={item.src} \r\n                  alt={item.title} \r\n                  referrerPolicy=\"no-referrer\"\r\n                  className=\"w-full h-full object-cover rounded-xl shadow-2xl border border-white/10\" \r\n                />\r\n              )}\r\n              <motion.div \r\n                className=\"absolute -bottom-6 left-[-20px] right-[-20px] text-center text-[10px] font-semibold text-white/80 whitespace-nowrap overflow-hidden text-ellipsis\"\r\n                animate={{ opacity: isActive ? 1 : 0, y: isActive ? 0 : -5 }}\r\n              >\r\n                {isMonochrome ? `Card ${i + 1}` : item.title}\r\n              </motion.div>\r\n            </motion.div>\r\n          )\r\n        })}\r\n      </div>\r\n\r\n      {/* controls */}\r\n      <div className=\"mt-6 w-fit px-1.5 py-0.5 flex items-center gap-2 justify-center text-zinc-300 rounded-full bg-white/5 backdrop-blur-md border border-white/10 shadow-sm z-20\">\r\n        <button onClick={toPrev} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\r\n          <ChevronLeft className=\"w-3.5 h-3.5\" />\r\n        </button>\r\n        <div className=\"flex justify-center items-center gap-1\">\r\n          {images.map((_, i) => (\r\n            <div \r\n              key={i} \r\n              onClick={(e) => toSlide(e, i)}\r\n              className={`rounded-full cursor-pointer h-1 transition-all duration-300 ${activeIndex === i ? 'w-4 bg-white' : 'w-1 bg-white/30 hover:bg-white/50'}`}>\r\n            </div>\r\n          ))}\r\n        </div>\r\n        <button onClick={toNext} className=\"p-1 cursor-pointer hover:bg-white/10 rounded-full transition-colors border-0 bg-transparent text-neutral-300 hover:text-white\">\r\n          <ChevronRight className=\"w-3.5 h-3.5\" />\r\n        </button>\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n"
    }
  ]
}