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