{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-image-slider",
  "type": "registry:component",
  "title": "Interactive Image Slider",
  "author": "Toby Belhome",
  "description": "The Interactive Image Slider is a dynamic, motion-driven gallery that reacts to mouse movement. As users move their cursor from left to right, stacked images smoothly slide to reveal the next one, creating an engaging and fluid visual experience. Built with Framer Motion and React, it brings a sense of depth and interactivity to your design—perfect for product showcases, portfolio sections, or immersive hero visuals.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/interactive-image-slider.json"
  ],
  "files": [
    {
      "path": "examples/motion/components/interactive-image-slider/01/interactive-image-slider.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\nexport const InteractiveImageSlider = ({ items }: { items: string[] }) => {\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [direction, setDirection] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const prevMouseX = useRef<number>(0);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!containerRef.current) return;\n\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const width = rect.width;\n    const percentage = x / width;\n\n    const mouseDirection = e.clientX - prevMouseX.current;\n    prevMouseX.current = e.clientX;\n\n    if (mouseDirection !== 0) {\n      setDirection(mouseDirection);\n    }\n\n    if (percentage < 0.33) {\n      setActiveIndex(0);\n    } else if (percentage < 0.66) {\n      setActiveIndex(1);\n    } else {\n      setActiveIndex(2);\n    }\n  };\n\n  const getVariants = (index: number) => {\n    const isActive = index === activeIndex;\n    const offset = (index - activeIndex) * 100;\n\n    return {\n      initial: {\n        x: direction > 0 ? \"100%\" : \"-100%\",\n        opacity: 0,\n        rotateY: direction > 0 ? 45 : -45\n      },\n      animate: {\n        x: isActive ? \"0%\" : `${offset}%`,\n        opacity: isActive ? 1 : 0.3,\n        rotateY: 0,\n        zIndex: isActive ? 3 : index < activeIndex ? 1 : 2\n      },\n      exit: {\n        x: direction > 0 ? \"-100%\" : \"100%\",\n        opacity: 0,\n        rotateY: direction > 0 ? -45 : 45\n      }\n    };\n  };\n\n  return (\n    <div className=\"flex h-[80vh] items-center justify-between\">\n      <div\n        ref={containerRef}\n        onMouseMove={handleMouseMove}\n        className=\"relative aspect-square w-80 overflow-hidden\"\n        style={{ perspective: \"1000px\" }}>\n        <AnimatePresence mode=\"sync\">\n          {items.map((image, index) => (\n            <motion.div\n              key={index}\n              variants={getVariants(index)}\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              transition={{\n                type: \"spring\",\n                stiffness: 500,\n                damping: 50,\n                opacity: { duration: 0.3 }\n              }}\n              className=\"absolute inset-0 flex aspect-square w-80 items-center justify-center\"\n              style={{\n                transformStyle: \"preserve-3d\"\n              }}>\n              <img\n                src={image}\n                alt={`Product ${index + 1}`}\n                className=\"h-full w-full object-cover\"\n                style={{\n                  filter: activeIndex === index ? \"brightness(1)\" : \"brightness(0.6)\"\n                }}\n              />\n            </motion.div>\n          ))}\n        </AnimatePresence>\n\n        <div className=\"absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 transform gap-1\">\n          {items.map((_, index) => (\n            <div\n              key={index}\n              className={`h-1 rounded-full transition-all duration-300 ${\n                index === activeIndex ? \"w-4 bg-white\" : \"w-1 bg-white/40\"\n              }`}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/interactive-image-slider/interactive-image-slider.tsx"
    },
    {
      "path": "examples/motion/components/interactive-image-slider/01/page.tsx",
      "content": "import React from \"react\";\nimport { InteractiveImageSlider } from \"./interactive-image-slider\";\n\nconst images = [\n  \"/images/products/list1.png\",\n  \"/images/products/list2.png\",\n  \"/images/products/list3.png\"\n];\n\nexport default function InteractiveImageSliderExample() {\n  return <InteractiveImageSlider items={images} />;\n}\n",
      "type": "registry:component",
      "target": "components/interactive-image-slider/interactive-image-slider-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}