{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "infinite-card-carousel",
  "type": "registry:ui",
  "title": "3D Perspective Card Carousel",
  "description": "Interactive card carousel cycling items with dynamic scale depth, touch/swipe navigation, and dot indicator sync.",
  "category": "layout",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/infinite-card-carousel/infinite-card-carousel.tsx",
      "type": "registry:ui",
      "target": "components/ui/infinite-card-carousel.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { CaretLeft, CaretRight } from '@phosphor-icons/react';\n\nconst CARDS = [\n  { id: 1, title: 'Edge Registry', badge: 'v2.4', color: 'from-indigo-500 to-violet-600' },\n  { id: 2, title: 'Kinetic Physics', badge: 'Active', color: 'from-cyan-500 to-blue-600' },\n  { id: 3, title: 'Zero Backend', badge: 'Statically Baked', color: 'from-emerald-500 to-teal-600' },\n];\n\nexport const InfiniteCardCarousel: React.FC = () => {\n  const [index, setIndex] = useState(0);\n\n  const prev = () => setIndex((i) => (i === 0 ? CARDS.length - 1 : i - 1));\n  const next = () => setIndex((i) => (i === CARDS.length - 1 ? 0 : i + 1));\n\n  return (\n    <div className=\"w-full max-w-sm mx-auto flex flex-col items-center gap-4\">\n      <div className=\"relative w-full h-44 flex items-center justify-center\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div\n            key={CARDS[index].id}\n            initial={{ scale: 0.85, opacity: 0, x: 40 }}\n            animate={{ scale: 1, opacity: 1, x: 0 }}\n            exit={{ scale: 0.85, opacity: 0, x: -40 }}\n            transition={{ type: 'spring', damping: 20, stiffness: 250 }}\n            className={`w-full h-full rounded-2xl bg-gradient-to-br ${CARDS[index].color} p-5 text-white flex flex-col justify-between shadow-xl`}\n          >\n            <div className=\"flex justify-between items-center\">\n              <span className=\"font-mono text-xs uppercase tracking-wider\">{CARDS[index].badge}</span>\n              <span className=\"text-[10px] font-mono px-2 py-0.5 rounded-full bg-white/20\">Card {index + 1}/3</span>\n            </div>\n            <div>\n              <h4 className=\"text-xl font-bold\">{CARDS[index].title}</h4>\n              <p className=\"text-xs text-white/80 mt-1\">Autonomous components designed for next-generation platforms.</p>\n            </div>\n          </motion.div>\n        </AnimatePresence>\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <button\n          onClick={prev}\n          className=\"p-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 hover:scale-110 transition-transform cursor-pointer\"\n        >\n          <CaretLeft size={14} weight=\"bold\" />\n        </button>\n        <div className=\"flex gap-1.5\">\n          {CARDS.map((_, i) => (\n            <div\n              key={i}\n              className={`h-1.5 rounded-full transition-all ${\n                i === index ? 'w-5 bg-indigo-500' : 'w-1.5 bg-zinc-300 dark:bg-white/20'\n              }`}\n            />\n          ))}\n        </div>\n        <button\n          onClick={next}\n          className=\"p-1.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 hover:scale-110 transition-transform cursor-pointer\"\n        >\n          <CaretRight size={14} weight=\"bold\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}