{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "accordion-carousel",
  "description": "An accordion of vertical image panels — the active panel springs wide to reveal its photo and caption while the rest compress into slim slivers with sideways titles. Click a panel to expand it; it auto-advances until hovered.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/new-york/carousel/accordion-carousel.tsx",
      "content": "\"use client\";\n\n/**\n * An accordion of vertical image panels — the active panel springs wide to reveal its photo and caption while the rest compress into slim slivers with sideways titles. Click a panel to expand it; it auto-advances until hovered.\n */\n\nimport { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\nconst PANELS = [\n  { seed: \"fold-01\", title: \"Dunes\", subtitle: \"Erg Chebbi, Morocco\" },\n  { seed: \"fold-02\", title: \"Fjord\", subtitle: \"Lofoten, Norway\" },\n  { seed: \"fold-03\", title: \"Canopy\", subtitle: \"Monteverde, Costa Rica\" },\n  { seed: \"fold-04\", title: \"Basalt\", subtitle: \"Reynisfjara, Iceland\" },\n  { seed: \"fold-05\", title: \"Mesa\", subtitle: \"Bardenas, Spain\" },\n];\n\nconst AccordionCarousel = () => {\n  const [active, setActive] = useState(0);\n  const [paused, setPaused] = useState(false);\n\n  useEffect(() => {\n    if (paused) return;\n    const id = setInterval(\n      () => setActive((a) => (a + 1) % PANELS.length),\n      3000,\n    );\n    return () => clearInterval(id);\n  }, [paused]);\n\n  return (\n    <div\n      className=\"flex h-[80vh] w-full select-none items-center justify-center\"\n      onPointerEnter={() => setPaused(true)}\n      onPointerLeave={() => setPaused(false)}\n    >\n      <div className=\"flex h-[70%] w-[min(1050px,92%)] gap-2.5\">\n        {PANELS.map((panel, i) => {\n          const isActive = i === active;\n          return (\n            <motion.div\n              key={panel.seed}\n              initial={false}\n              animate={{ flexGrow: isActive ? 7 : 1 }}\n              transition={{ type: \"spring\", stiffness: 170, damping: 26 }}\n              onClick={() => setActive(i)}\n              className=\"relative min-w-0 basis-0 cursor-pointer overflow-hidden rounded-2xl bg-neutral-900\"\n            >\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                src={`https://picsum.photos/seed/${panel.seed}/1000/800`}\n                alt={panel.title}\n                draggable={false}\n                className=\"absolute inset-0 h-full w-full object-cover\"\n              />\n              <motion.div\n                className=\"pointer-events-none absolute inset-0 bg-linear-to-t from-black/70 via-black/10 to-transparent\"\n                initial={false}\n                animate={{ opacity: isActive ? 1 : 0.55 }}\n              />\n\n              {/* sideways label while collapsed */}\n              <motion.p\n                initial={false}\n                animate={{ opacity: isActive ? 0 : 1 }}\n                transition={{ duration: 0.25 }}\n                className=\"pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium uppercase tracking-[0.25em] text-white/85\"\n                style={{ writingMode: \"vertical-rl\" }}\n              >\n                {panel.title}\n              </motion.p>\n\n              {/* full caption once expanded */}\n              <motion.div\n                initial={false}\n                animate={{\n                  opacity: isActive ? 1 : 0,\n                  y: isActive ? 0 : 14,\n                }}\n                transition={{ duration: 0.4, delay: isActive ? 0.18 : 0 }}\n                className=\"pointer-events-none absolute bottom-5 left-6 text-white\"\n              >\n                <h3 className=\"text-2xl font-semibold tracking-tight\">\n                  {panel.title}\n                </h3>\n                <p className=\"mt-0.5 text-xs text-white/70\">{panel.subtitle}</p>\n              </motion.div>\n\n              <p className=\"pointer-events-none absolute right-4 top-4 text-[10px] font-medium text-white/60\">\n                0{i + 1}\n              </p>\n            </motion.div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default AccordionCarousel;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/accordion-carousel.tsx"
    }
  ],
  "type": "registry:block"
}