{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-card-carousel-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/animated-card-carousel",
    "select",
    "slider"
  ],
  "files": [
    {
      "path": "registry/example/animated-card-carousel-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Slider } from \"@/components/ui/slider\"\n\nimport AnimatedCard, {\n  AnimationEaseType,\n  CardSizeType,\n} from \"@/components/animated-card-carousel\"\n\nexport default function RotateAnimatedDemo() {\n  const cards = [\n    {\n      title: \"Portfolio Builder\",\n      description:\n        \"Create stunning professional portfolios with our intuitive drag-and-drop interface. Showcase your work with beautiful layouts and responsive designs.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#3b82f6\",\n      href: \"#\",\n    },\n    {\n      title: \"Health Tracker\",\n      description:\n        \"Monitor your fitness journey with comprehensive health analytics. Track workouts, nutrition, and wellness metrics all in one secure application.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#10b981\",\n      href: \"#\",\n    },\n    {\n      title: \"Learning Platform\",\n      description:\n        \"Access world-class educational content with our interactive learning platform. Master new skills with personalized courses and expert-led tutorials.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#8b5cf6\",\n      href: \"#\",\n    },\n    {\n      title: \"E-Commerce Solution\",\n      description:\n        \"Launch your online store with our comprehensive e-commerce platform. Manage inventory, process payments, and grow your business with powerful analytics.\",\n      imgSrc:\n        \"https://res.cloudinary.com/duli9q35f/image/upload/v1742067091/reading-dark_kfnwvb.webp\",\n      color: \"#f43f5e\",\n      href: \"#\",\n    },\n  ]\n  const [activeIndex, setActiveIndex] = useState(0)\n  const [isHovering, setIsHovering] = useState(false)\n  const [rotationSpeed, setRotationSpeed] = useState(3000)\n  const [animationDuration, setAnimationDuration] = useState(0.5)\n  const [animationEase, setAnimationEase] =\n    useState<AnimationEaseType>(\"easeInOut\")\n  const [cardSize, setCardSize] = useState<CardSizeType>(\"featured\")\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout\n\n    if (!isHovering) {\n      interval = setInterval(() => {\n        setActiveIndex((prevIndex) => (prevIndex + 1) % cards.length)\n      }, rotationSpeed)\n    }\n\n    return () => clearInterval(interval)\n  }, [isHovering, cards.length, rotationSpeed])\n\n  const handleMouseEnter = (index: number) => {\n    setIsHovering(true)\n    setActiveIndex(index)\n  }\n\n  const handleMouseLeave = () => {\n    setIsHovering(false)\n  }\n\n  return (\n    <div className=\"not-prose space-y-8 py-8 md:px-5 md:py-0\">\n      {/* Controls for customization */}\n      <div className=\"rounded-lg\">\n        <div className=\"grid gap-4 md:grid-cols-4\">\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"rotation-speed\"\n              className=\"block text-sm font-medium\"\n            >\n              Rotation Speed: {rotationSpeed}ms\n            </label>\n            <Slider\n              id=\"rotation-speed\"\n              min={1000}\n              max={5000}\n              step={500}\n              value={[rotationSpeed]}\n              onValueChange={(value) => setRotationSpeed(value[0])}\n              className=\"w-full\"\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"animation-duration\"\n              className=\"block text-sm font-medium\"\n            >\n              Animation Duration: {animationDuration}s\n            </label>\n            <Slider\n              id=\"animation-duration\"\n              min={0.1}\n              max={1}\n              step={0.1}\n              value={[animationDuration]}\n              onValueChange={(value) => setAnimationDuration(value[0])}\n              className=\"w-full\"\n            />\n          </div>\n\n          <div className=\"space-y-2\">\n            <label\n              htmlFor=\"animation-ease\"\n              className=\"block text-sm font-medium\"\n            >\n              Animation Easing\n            </label>\n            <Select\n              value={animationEase}\n              onValueChange={(value) =>\n                setAnimationEase(value as AnimationEaseType)\n              }\n            >\n              <SelectTrigger id=\"animation-ease\" className=\"w-full\">\n                <SelectValue placeholder=\"Select easing\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"easeInOut\">Ease In Out</SelectItem>\n                <SelectItem value=\"easeIn\">Ease In</SelectItem>\n                <SelectItem value=\"easeOut\">Ease Out</SelectItem>\n                <SelectItem value=\"linear\">Linear</SelectItem>\n                <SelectItem value=\"circIn\">Circular In</SelectItem>\n                <SelectItem value=\"circOut\">Circular Out</SelectItem>\n                <SelectItem value=\"circInOut\">Circular In Out</SelectItem>\n                <SelectItem value=\"backIn\">Back In</SelectItem>\n                <SelectItem value=\"backOut\">Back Out</SelectItem>\n                <SelectItem value=\"backInOut\">Back In Out</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div className=\"space-y-2\">\n            <label htmlFor=\"card-size\" className=\"block text-sm font-medium\">\n              Card Size\n            </label>\n            <Select\n              value={cardSize}\n              onValueChange={(value) => setCardSize(value as CardSizeType)}\n            >\n              <SelectTrigger id=\"card-size\" className=\"w-full\">\n                <SelectValue placeholder=\"Select card size\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"featured\">Featured (Large)</SelectItem>\n                <SelectItem value=\"standard\">Standard (Small)</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </div>\n      <div\n        className=\"mx-auto grid max-w-5xl grid-cols-1 gap-3 md:grid-cols-2\"\n        role=\"region\"\n        aria-label=\"Project showcase\"\n      >\n        {cards.map((card, index) => (\n          <AnimatedCard\n            key={index}\n            title={card.title}\n            description={card.description}\n            imgSrc={card.imgSrc}\n            color={card.color}\n            href={card.href}\n            isActive={index === activeIndex}\n            onMouseEnter={() => handleMouseEnter(index)}\n            onMouseLeave={handleMouseLeave}\n            animationDuration={animationDuration}\n            animationEase={animationEase}\n            size={cardSize}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/animated-card-carousel-demo.tsx"
    }
  ],
  "type": "registry:example"
}