{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-carousel",
  "type": "registry:block",
  "title": "Interactive 3D Carousel",
  "description": "An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls, inspired by vivi.",
  "dependencies": ["motion", "lucide-react"],
  "files": [
    {
      "path": "components/amicro/CardCarousel.tsx",
      "type": "registry:component",
      "target": "components/amicro/CardCarousel.tsx",
      "content": "import React, { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nconst DEFAULT_ASSETS = [\n  { src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80', title: 'Sunset Beach' },\n  { src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=600&q=80', title: 'Misty Mountains' },\n  { src: 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=600&q=80', title: 'Forest Trail' },\n  { src: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=600&q=80', title: 'Sunlight in Woods' },\n  { src: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=600&q=80', title: 'Green Hills' },\n];\n\ninterface CardCarouselProps {\n  hovered?: boolean;\n  className?: string;\n  images?: { src: string; title: string }[];\n  isMonochrome?: boolean;\n}\n\nexport const CardCarousel = React.memo(function CardCarousel({\n  hovered,\n  className = '',\n  images = DEFAULT_ASSETS,\n  isMonochrome = false\n}: CardCarouselProps) {\n  const [activeIndex, setActiveIndex] = useState(2);\n  const active = hovered !== undefined ? hovered : true;\n\n  const toPrev = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.max(0, prev - 1));\n  };\n\n  const toNext = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setActiveIndex(prev => Math.min(images.length - 1, prev + 1));\n  };\n\n  return (\n    <div className={`relative w-[280px] h-[190px] flex flex-col items-center justify-between p-3 select-none ${className}`}>\n      <div className=\"relative w-full h-[140px] flex items-center justify-center border-0 overflow-visible\">\n        {images.map((img, i) => {\n          const offset = i - activeIndex;\n          const absOffset = Math.abs(offset);\n          const rotateZ = active ? offset * 12 : offset * 4;\n          const translateX = active ? offset * 52 : offset * 24;\n          const translateY = active ? absOffset * 6 : absOffset * 2;\n          const scale = active ? 1 - absOffset * 0.1 : 1 - absOffset * 0.05;\n          const zIndex = 20 - absOffset;\n\n          return (\n            <motion.div\n              key={i}\n              onClick={(e) => { e.stopPropagation(); setActiveIndex(i); }}\n              initial={false}\n              animate={{\n                x: translateX,\n                y: translateY,\n                rotateZ,\n                scale,\n                zIndex,\n              }}\n              transition={{ type: 'spring', stiffness: 260, damping: 22 }}\n              className=\"absolute top-0 w-[110px] h-[135px] rounded-xl overflow-hidden shadow-xl border border-white/20 cursor-pointer bg-neutral-900 origin-bottom\"\n            >\n              <img src={img.src} alt={img.title} className=\"w-full h-full object-cover\" />\n            </motion.div>\n          );\n        })}\n      </div>\n      <div className=\"flex items-center gap-3 z-30\">\n        <button onClick={toPrev} className=\"p-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors\">\n          <ChevronLeft className=\"w-4 h-4\" />\n        </button>\n        <div className=\"flex items-center gap-1.5\">\n          {images.map((_, i) => (\n            <div key={i} className={`h-1.5 rounded-full transition-all ${i === activeIndex ? 'w-4 bg-white' : 'w-1.5 bg-white/40'}`} />\n          ))}\n        </div>\n        <button onClick={toNext} className=\"p-1.5 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors\">\n          <ChevronRight className=\"w-4 h-4\" />\n        </button>\n      </div>\n    </div>\n  );\n});\n"
    }
  ]
}