{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-spotlight-card4",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/spotlight-cards/demo-spotlight-card4.tsx",
      "content": "// @ts-nocheck\n'use client';\n\n// https://buildui.com/recipes/spotlight\n\nimport { cn } from '@/lib/utils';\nimport Image from 'next/image';\nimport React, { type MouseEvent, useRef, useState } from 'react';\n\nexport default function DemoSpotlightCard4() {\n  const boxWrapper = useRef(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [mousePosition, setMousePosition] = React.useState({\n    x: null,\n    y: null,\n  });\n  React.useEffect(() => {\n    const updateMousePosition = (ev: { clientX: any; clientY: any }) => {\n      setMousePosition({ x: ev.clientX, y: ev.clientY });\n    };\n    window.addEventListener('mousemove', updateMousePosition);\n    return () => {\n      window.removeEventListener('mousemove', updateMousePosition);\n    };\n  }, []);\n\n  const [overlayColor, setOverlayColor] = useState({ x: 0, y: 0 });\n  const handleMouemove = ({ currentTarget, clientX, clientY }): MouseEvent => {\n    const { left, top } = currentTarget.getBoundingClientRect();\n\n    const x = clientX - left;\n    const y = clientY - top;\n\n    setOverlayColor({ x, y });\n  };\n\n  return (\n    <div className='relative bg-black sm:p-8 px-4 rounded-md'>\n      <div\n        onMouseMove={handleMouemove}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        ref={boxWrapper}\n        className={cn(\n          'group relative rounded-lg  p-[2px] bg-[#eeeeee15] overflow-hidden w-fit mx-auto'\n        )}\n      >\n        {isHovered && (\n          <div\n            className='pointer-events-none absolute opacity-0 z-50 rounded-xl w-full h-full group-hover:opacity-100  transition duration-300 '\n            style={{\n              background: `\n            radial-gradient(\n              350px circle at ${overlayColor.x}px ${overlayColor.y}px,\n              rgba(255, 255, 255, 0.103),\n              transparent 60%\n            )\n          `,\n            }}\n          />\n        )}\n\n        <div\n          className='absolute inset-0 z-0  bg-fixed rounded-lg'\n          style={{\n            background: `radial-gradient(circle at ${mousePosition.x}px ${mousePosition.y}px, #ffffff6e 0%,transparent 20%,transparent) fixed`,\n          }}\n        ></div>\n\n        <div className=\"relative text-center z-10 sm:px-8 px-4 py-12 pt-6 rounded-lg w-fit  bg-[url('https://res.cloudinary.com/dzl9yxixg/image/upload/timeline-grid_wixa9t.png')] bg-cover  bg-black h-full mx-auto\">\n          <>\n            <Image\n              src={'https://res.cloudinary.com/dzl9yxixg/image/upload/star_tb9ivg.png'}\n              alt='grid'\n              width={600}\n              className='w-fit mx-auto '\n              height={600}\n            />\n            <h1 className='text-2xl pt-5 font-semibold tracking-tight text-white'>\n              Seamless Animation For All\n            </h1>\n            <p className='pt-2 lg:text-base text-sm  text-neutral-300 capitalize'>\n              Effortlessly connect with today's leading technologies\n              <br />\n              including React, TypeScript, Next.js, Tailwind CSS, Motion, and Cypress.\n            </p>\n          </>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}