{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-carousel",
  "title": "Feature Carousel",
  "description": "A smooth carousel for showcasing product features.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/feature-carousel.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport {\n  Pizza04Icon,\n  CommandFreeIcons,\n  GlobalSearchIcon,\n  AiCloudIcon,\n  SmartPhone01Icon,\n  CheckmarkCircle01Icon,\n  DashboardSquare01Icon,\n  MagicWandIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { cn } from \"@/lib/utils\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\n\n// Change Here\nconst FEATURES = [\n  {\n    id: \"sustainable\",\n    label: \"Sustainable Sourcing\",\n    icon: Pizza04Icon,\n    image:\n      \"https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=1200\",\n    description: \"Ethically sourced ingredients from local farmers.\",\n  },\n  {\n    id: \"community\",\n    label: \"Community Focused\",\n    icon: CommandFreeIcons,\n    image:\n      \"https://images.unsplash.com/photo-1517048676732-d65bc937f952?q=80&w=1200\",\n    description: \"Building stronger bonds through shared experiences.\",\n  },\n  {\n    id: \"global\",\n    label: \"Global Reach\",\n    icon: GlobalSearchIcon,\n    image:\n      \"https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=1200\",\n    description: \"Connecting visionaries across all continents.\",\n  },\n  {\n    id: \"award\",\n    label: \"Award Winning\",\n    icon: CheckmarkCircle01Icon,\n    image:\n      \"https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?q=80&w=1200\",\n    description: \"Recognized excellence in design and innovation.\",\n  },\n  {\n    id: \"cloud\",\n    label: \"Cloud Ready\",\n    icon: AiCloudIcon,\n    image:\n      \"https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1200\",\n    description: \"Scale your infrastructure with seamless ease.\",\n  },\n  {\n    id: \"mobile\",\n    label: \"Mobile First\",\n    icon: SmartPhone01Icon,\n    image:\n      \"https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?q=80&w=1200\",\n    description: \"A world-class experience on every single device.\",\n  },\n  {\n    id: \"analytics\",\n    label: \"Real-time Analytics\",\n    icon: DashboardSquare01Icon,\n    image:\n      \"https://images.unsplash.com/photo-1551288049-bbda38a10ad5?q=80&w=1200\",\n    description: \"Insights at your fingertips, updated in real-time.\",\n  },\n  {\n    id: \"security\",\n    label: \"Enterprise Security\",\n    icon: CheckmarkCircle01Icon,\n    image:\n      \"https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=1200\",\n    description: \"Bank-grade security protocols for your data.\",\n  },\n  {\n    id: \"magic\",\n    label: \"Magic Automations\",\n    icon: MagicWandIcon,\n    image:\n      \"https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=1200\",\n    description: \"Let AI handle the repetitive tasks for you.\",\n  },\n  {\n    id: \"local\",\n    label: \"Locally Owned\",\n    icon: CheckmarkCircle01Icon,\n    image:\n      \"https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=1200\",\n    description: \"Supporting local businesses and creators.\",\n  },\n];\n\nconst AUTO_PLAY_INTERVAL = 3000;\nconst ITEM_HEIGHT = 65;\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min;\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;\n};\n\nexport default function FeatureCarousel() {\n  const [step, setStep] = useState(0);\n  const [isPaused, setIsPaused] = useState(false);\n\n  const currentIndex =\n    ((step % FEATURES.length) + FEATURES.length) % FEATURES.length;\n\n  const nextStep = useCallback(() => {\n    setStep((prev) => prev + 1);\n  }, []);\n\n  const handleChipClick = (index: number) => {\n    const diff = (index - currentIndex + FEATURES.length) % FEATURES.length;\n    if (diff > 0) setStep((s) => s + diff);\n  };\n\n  useEffect(() => {\n    if (isPaused) return;\n    const interval = setInterval(nextStep, AUTO_PLAY_INTERVAL);\n    return () => clearInterval(interval);\n  }, [nextStep, isPaused]);\n\n  const getCardStatus = (index: number) => {\n    const diff = index - currentIndex;\n    const len = FEATURES.length;\n\n    let normalizedDiff = diff;\n    if (diff > len / 2) normalizedDiff -= len;\n    if (diff < -len / 2) normalizedDiff += len;\n\n    if (normalizedDiff === 0) return \"active\";\n    if (normalizedDiff === -1) return \"prev\";\n    if (normalizedDiff === 1) return \"next\";\n    return \"hidden\";\n  };\n\n  return (\n    <div className=\"w-full max-w-7xl mx-auto md:p-8\">\n      <div className=\"relative overflow-hidden rounded-[2.5rem] lg:rounded-[4rem] flex flex-col lg:flex-row min-h-[600px] lg:aspect-video border border-border/40\">\n        <div className=\"w-full lg:w-[40%] min-h-[350px] md:min-h-[450px] lg:h-full relative z-30 flex flex-col items-start justify-center overflow-hidden px-8 md:px-16 lg:pl-16 bg-[#62B2FE] \">\n          <div className=\"absolute inset-x-0 top-0 h-12 md:h-20 lg:h-16 bg-gradient-to-b from-[#62B2FE] via-[#62B2FE]/80 to-transparent z-40\" />\n          <div className=\"absolute inset-x-0 bottom-0 h-12 md:h-20 lg:h-16 bg-gradient-to-t from-[#62B2FE] via-[#62B2FE]/80 to-transparent z-40\" />\n          <div className=\"relative w-full h-full flex items-center justify-center lg:justify-start z-20\">\n            {FEATURES.map((feature, index) => {\n              const isActive = index === currentIndex;\n              const distance = index - currentIndex;\n              const wrappedDistance = wrap(\n                -(FEATURES.length / 2),\n                FEATURES.length / 2,\n                distance\n              );\n\n              return (\n                <motion.div\n                  key={feature.id}\n                  style={{\n                    height: ITEM_HEIGHT,\n                    width: \"fit-content\",\n                  }}\n                  animate={{\n                    y: wrappedDistance * ITEM_HEIGHT,\n                    opacity: 1 - Math.abs(wrappedDistance) * 0.25,\n                  }}\n                  transition={{\n                    type: \"spring\",\n                    stiffness: 90,\n                    damping: 22,\n                    mass: 1,\n                  }}\n                  className=\"absolute flex items-center justify-start\"\n                >\n                  <button\n                    onClick={() => handleChipClick(index)}\n                    onMouseEnter={() => setIsPaused(true)}\n                    onMouseLeave={() => setIsPaused(false)}\n                    className={cn(\n                      \"relative flex items-center gap-4 px-6 md:px-10 lg:px-8 py-3.5 md:py-5 lg:py-4 rounded-full transition-all duration-700 text-left group border\",\n                      isActive\n                        ? \"bg-white text-[#62B2FE] border-white z-10\"\n                        : \"bg-transparent text-white/60 border-white/20 hover:border-white/40 hover:text-white\"\n                    )}\n                  >\n                    <div\n                      className={cn(\n                        \"flex items-center justify-center transition-colors duration-500\",\n                        isActive ? \"text-[#62B2FE]\" : \"text-white/40\"\n                      )}\n                    >\n                      <HugeiconsIcon\n                        icon={feature.icon}\n                        size={18}\n                        strokeWidth={2}\n                      />\n                    </div>\n\n                    <span className=\"font-normal text-sm md:text-[15px] tracking-tight whitespace-nowrap uppercase\">\n                      {feature.label}\n                    </span>\n                  </button>\n                </motion.div>\n              );\n            })}\n          </div>\n        </div>\n\n        <div className=\"flex-1 min-h-[500px] md:min-h-[600px] lg:h-full relative bg-secondary/30 flex items-center justify-center py-16 md:py-24 lg:py-16 px-6 md:px-12 lg:px-10 overflow-hidden border-t lg:border-t-0 lg:border-l border-border/20\">\n          <div className=\"relative w-full max-w-[420px] aspect-[4/5] flex items-center justify-center\">\n            {FEATURES.map((feature, index) => {\n              const status = getCardStatus(index);\n              const isActive = status === \"active\";\n              const isPrev = status === \"prev\";\n              const isNext = status === \"next\";\n\n              return (\n                <motion.div\n                  key={feature.id}\n                  initial={false}\n                  animate={{\n                    x: isActive ? 0 : isPrev ? -100 : isNext ? 100 : 0,\n                    scale: isActive ? 1 : isPrev || isNext ? 0.85 : 0.7,\n                    opacity: isActive ? 1 : isPrev || isNext ? 0.4 : 0,\n                    rotate: isPrev ? -3 : isNext ? 3 : 0,\n                    zIndex: isActive ? 20 : isPrev || isNext ? 10 : 0,\n                    pointerEvents: isActive ? \"auto\" : \"none\",\n                  }}\n                  transition={{\n                    type: \"spring\",\n                    stiffness: 260,\n                    damping: 25,\n                    mass: 0.8,\n                  }}\n                  className=\"absolute inset-0 rounded-[2rem] md:rounded-[2.8rem] overflow-hidden border-4 md:border-8 border-background bg-background origin-center\"\n                >\n                  <img\n                    src={feature.image}\n                    alt={feature.label}\n                    className={cn(\n                      \"w-full h-full object-cover transition-all duration-700\",\n                      isActive\n                        ? \"grayscale-0 blur-0\"\n                        : \"grayscale blur-[2px] brightness-75\"\n                    )}\n                  />\n\n                  <AnimatePresence>\n                    {isActive && (\n                      <motion.div\n                        initial={{ opacity: 0, y: 20 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: 10 }}\n                        className=\"absolute inset-x-0 bottom-0 p-10 pt-32 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex flex-col justify-end pointer-events-none\"\n                      >\n                        <div className=\"bg-background text-foreground px-4 py-1.5 rounded-full text-[11px] font-normal uppercase tracking-[0.2em] w-fit shadow-lg mb-3 border border-border/50\">\n                          {index + 1} • {feature.label}\n                        </div>\n                        <p className=\"text-white font-normal text-xl md:text-2xl leading-tight drop-shadow-md tracking-tight\">\n                          {feature.description}\n                        </p>\n                      </motion.div>\n                    )}\n                  </AnimatePresence>\n\n                  <div\n                    className={cn(\n                      \"absolute top-8 left-8 flex items-center gap-3 transition-opacity duration-300\",\n                      isActive ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  >\n                    <div className=\"w-2 h-2 rounded-full bg-white shadow-[0_0_10px_white]\" />\n                    <span className=\"text-white/80 text-[10px] font-normal uppercase tracking-[0.3em] font-mono\">\n                      Live Session\n                    </span>\n                  </div>\n                </motion.div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}