{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-reveal",
  "type": "registry:component",
  "title": "Image Reveal",
  "author": "Toby Belhome",
  "description": "An interactive image reveal component where images appear and follow the cursor when hovering over any div element.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/image-reveal.json"
  ],
  "files": [
    {
      "path": "examples/motion/components/image-reveal/01/image-reveal.tsx",
      "content": "\"use client\";\n\nimport { motion, useSpring } from \"motion/react\";\nimport React, { useState, MouseEvent, useRef } from \"react\";\nimport { ChevronRightIcon } from \"lucide-react\";\n\ninterface ImageItem {\n  img: string;\n  label: string;\n}\n\nfunction ImageReveal({ list }: { list: ImageItem[] }) {\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 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-full 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=\"flex w-full cursor-pointer justify-between border-b py-6 transition-opacity hover:opacity-40\">\n          <p className=\"text-2xl lg:text-3xl\">{item.label}</p>\n          <ChevronRightIcon className=\"opacity-25\" />\n        </div>\n      ))}\n\n      <motion.img\n        key={img.src}\n        ref={imageRef}\n        src={img.src}\n        alt={img.alt}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: img.opacity }}\n        exit={{ opacity: 0 }}\n        className=\"pointer-events-none absolute top-0 left-0 aspect-square w-60 object-cover shadow-lg transition-opacity duration-200 ease-in-out\"\n        style={{\n          x: imagePos.x,\n          y: imagePos.y,\n          opacity: img.opacity\n        }}\n      />\n    </section>\n  );\n}\n\nexport default ImageReveal;\n",
      "type": "registry:component",
      "target": "components/image-reveal/image-reveal.tsx"
    },
    {
      "path": "examples/motion/components/image-reveal/01/page.tsx",
      "content": "import ImageReveal from \"./image-reveal\";\n\nconst list = [\n  {\n    img: \"https://images.unsplash.com/photo-1517408395525-fa05dd0bb2ef?q=80&w=2944&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    label: \"Retro Style\"\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1501829385782-9841539fa6bf?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    label: \"Classic car\"\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    label: \"Computer\"\n  },\n  {\n    img: \"https://plus.unsplash.com/premium_photo-1682123999644-1ff465694dde?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n    label: \"Game Console\"\n  }\n];\n\nexport default function ImageRevealExample() {\n  return <ImageReveal list={list} />;\n}\n",
      "type": "registry:component",
      "target": "components/image-reveal/image-reveal-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}