{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cards-slider",
  "description": "Cards Slider — an infinite deck of product cards. The active card sits",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/new-york/carousel/cards-slider.tsx",
      "content": "\"use client\";\n\n/**\n * Cards Slider — an infinite deck of product cards. The active card sits\n * front-and-centre while the rest fan out behind it, each one stepped back\n * with less scale, a touch of rotation and a soft blur. Drag, click a peeking\n * card, or let it auto-advance; the index wraps forever so the deck never ends.\n */\n\nimport { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype Card = { title: string; image: string };\n\nconst CARDS: Card[] = [\n  {\n    title: \"ZV210\",\n    image:\n      \"https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=800&auto=format&fit=crop\",\n  },\n  {\n    title: \"AX90\",\n    image:\n      \"https://images.unsplash.com/photo-1604871000636-074fa5117945?q=80&w=800&auto=format&fit=crop\",\n  },\n  {\n    title: \"NOVA\",\n    image:\n      \"https://images.unsplash.com/photo-1620421680010-0766ff230392?q=80&w=800&auto=format&fit=crop\",\n  },\n  {\n    title: \"DRIFT\",\n    image:\n      \"https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=800&auto=format&fit=crop\",\n  },\n  {\n    title: \"PULSE\",\n    image:\n      \"https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=80&w=800&auto=format&fit=crop\",\n  },\n];\n\nconst VISIBLE = 2; // cards shown on each side of the active one\nconst SPACING = 56; // px each step fans sideways\nconst DRAG_THRESHOLD = 70; // px before a drag commits to a step\n\nconst offsetFrom = (i: number, active: number, len: number) => {\n  let d = (((i - active) % len) + len) % len;\n  if (d > len / 2) d -= len;\n  return d;\n};\n\nconst CardsSlider = () => {\n  const [active, setActive] = useState(0);\n  const [paused, setPaused] = useState(false);\n  const len = CARDS.length;\n\n  useEffect(() => {\n    if (paused) return;\n    const id = setInterval(() => setActive((a) => a + 1), 2600);\n    return () => clearInterval(id);\n  }, [paused]);\n\n  return (\n    <div\n      className=\"relative flex h-[80vh] w-full select-none items-center justify-center overflow-hidden\"\n      onPointerEnter={() => setPaused(true)}\n      onPointerLeave={() => setPaused(false)}\n    >\n      <div className=\"relative h-96 w-72\">\n        {CARDS.map((card, i) => {\n          const offset = offsetFrom(i, active, len);\n          const abs = Math.abs(offset);\n          const hidden = abs > VISIBLE;\n          const isActive = offset === 0;\n\n          return (\n            <motion.div\n              key={card.title}\n              className={`absolute inset-0 overflow-hidden rounded-3xl shadow-2xl ${\n                isActive ? \"cursor-grab active:cursor-grabbing\" : \"\"\n              }`}\n              onClick={() => !hidden && !isActive && setActive((a) => a + offset)}\n              initial={false}\n              animate={{\n                x: offset * SPACING,\n                y: abs * 10,\n                scale: 1 - abs * 0.1,\n                rotate: offset * 4,\n                opacity: hidden ? 0 : 1,\n                filter: `blur(${abs * 1.6}px) brightness(${1 - abs * 0.12})`,\n              }}\n              transition={{ type: \"spring\", stiffness: 260, damping: 30 }}\n              style={{\n                zIndex: 100 - abs,\n                pointerEvents: hidden ? \"none\" : \"auto\",\n              }}\n              drag={isActive ? \"x\" : false}\n              dragSnapToOrigin\n              dragConstraints={{ left: 0, right: 0 }}\n              dragElastic={0.6}\n              onDragEnd={(_, info) => {\n                if (info.offset.x < -DRAG_THRESHOLD) setActive((a) => a + 1);\n                else if (info.offset.x > DRAG_THRESHOLD) setActive((a) => a - 1);\n              }}\n            >\n              <img\n                src={card.image}\n                alt={card.title}\n                draggable={false}\n                className=\"pointer-events-none h-full w-full object-cover\"\n              />\n              <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-black/20\" />\n\n              <div className=\"absolute inset-x-0 bottom-0 flex flex-col items-center gap-4 p-6 text-white\">\n                <h3 className=\"text-4xl font-bold tracking-tight\">\n                  {card.title}\n                </h3>\n                <button\n                  type=\"button\"\n                  className=\"w-full rounded-full bg-black/70 py-3 text-xs font-medium backdrop-blur-sm transition-colors hover:bg-black\"\n                >\n                  Get this product\n                </button>\n              </div>\n            </motion.div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default CardsSlider;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/cards-slider.tsx"
    }
  ],
  "type": "registry:block"
}