{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-reveal",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/image-reveal/image-reveal.tsx",
      "content": "'use client';\n\nimport { motion, useSpring } from 'motion/react';\nimport React, { type MouseEvent, useRef, useState } from 'react';\n\ninterface ImageItem {\n  img: string;\n  label: string;\n  tag: string;\n}\n\nfunction ImageReveal2() {\n  const [img, setImg] = useState<{ src: string; alt: string; opacity: number }>({\n    src: '',\n    alt: '',\n    opacity: 0,\n  });\n\n  const imageRef = useRef<HTMLImageElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const list: ImageItem[] = [\n    {\n      img: 'https://images.unsplash.com/photo-1682806816936-c3ac11f65112?q=80&w=1274&auto=format&fit=crop',\n      label: 'Stay Confident',\n      tag: 'Style',\n    },\n    {\n      img: 'https://images.unsplash.com/photo-1681063762354-d542c03bbfc5?q=80&w=1274&auto=format&fit=crop',\n      label: 'Create Your Space',\n      tag: 'Design',\n    },\n    {\n      img: 'https://images.unsplash.com/photo-1679640034489-a6db1f096b70?q=80&w=1274&auto=format&fit=crop',\n      label: 'Be Yourself',\n      tag: 'Identity',\n    },\n    {\n      img: 'https://images.unsplash.com/photo-1679482451632-b2e126da7142?q=80&w=1274&auto=format&fit=crop',\n      label: 'Live Inspired',\n      tag: 'Lifestyle',\n    },\n  ];\n\n  const spring = {\n    stiffness: 150,\n    damping: 15,\n    mass: 0.1,\n  };\n\n  const imagePos = {\n    x: useSpring(0, spring),\n    y: useSpring(0, spring),\n  };\n\n  const handleMove = (e: MouseEvent<HTMLDivElement>) => {\n    if (!imageRef.current || !containerRef.current) return;\n\n    const containerRect = containerRef.current.getBoundingClientRect();\n    const { clientX, clientY } = e;\n    const relativeX = clientX - containerRect.left;\n    const relativeY = clientY - containerRect.top;\n\n    imagePos.x.set(relativeX - imageRef.current.offsetWidth / 2);\n    imagePos.y.set(relativeY - imageRef.current.offsetHeight / 2);\n  };\n\n  const handleImageInteraction = (item: ImageItem, opacity: number) => {\n    setImg({ src: item.img, alt: item.label, opacity });\n  };\n\n  return (\n    <section ref={containerRef} onMouseMove={handleMove} className='relative w-4/5 mx-auto p-4'>\n      {list.map((item) => (\n        <div\n          key={item.label}\n          onMouseEnter={() => handleImageInteraction(item, 1)}\n          onMouseMove={() => handleImageInteraction(item, 1)}\n          onMouseLeave={() => handleImageInteraction(item, 0)}\n          className='w-full py-5 cursor-pointer text-center flex justify-between items-center text-primary border-b dark:border-neutral-800 border-neutral-50 last:border-none'\n        >\n          <p className='text-5xl'>{item.label}</p>\n          <span>\n            {item.tag} <span className='w-3 h-3 bg-primary inline-block'></span>\n          </span>\n        </div>\n      ))}\n\n      <motion.img\n        ref={imageRef}\n        src={img.src}\n        alt={img.alt}\n        className='w-[300px] h-[220px] rounded-lg object-cover absolute top-0 left-0 transition-opacity duration-200 ease-in-out pointer-events-none'\n        style={{\n          x: imagePos.x,\n          y: imagePos.y,\n          opacity: img.opacity,\n        }}\n      />\n    </section>\n  );\n}\n\nexport default ImageReveal2;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}