{
  "name": "cursor-3",
  "type": "registry:ui",
  "componentName": "cursor-3",
  "description": "Complex cursor effect with state changes and animations.",
  "files": [
    {
      "path": "cursor-3.tsx",
      "content": "import { Cursor } from '@/components/core/cursor';\n\nexport function Cursor3() {\n  return (\n    <div>\n      <div className='p-4'>\n        <Cursor\n          attachToParent\n          variants={{\n            initial: { height: 0, opacity: 0, scale: 0.3 },\n            animate: { height: 'auto', opacity: 1, scale: 1 },\n            exit: { height: 0, opacity: 0, scale: 0.3 },\n          }}\n          transition={{\n            type: 'spring',\n            duration: 0.3,\n            bounce: 0.1,\n          }}\n          className='overflow-hidden'\n          springConfig={{\n            bounce: 0.01,\n          }}\n        >\n          <img\n            src='https://i.pinimg.com/564x/4c/95/69/4c9569ab2928e5ae400a6a34e7c537a0.jpg'\n            alt='Christian Church, Eastern Europe'\n            className='h-40 w-40'\n          />\n        </Cursor>\n        Christian Church, Eastern Europe\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/cursor.tsx",
      "content": "'use client';\nimport React, { useEffect, useState, useRef } from 'react';\nimport {\n  motion,\n  SpringOptions,\n  useMotionValue,\n  useSpring,\n  AnimatePresence,\n  Transition,\n  Variant,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type CursorProps = {\n  children: React.ReactNode;\n  className?: string;\n  springConfig?: SpringOptions;\n  attachToParent?: boolean;\n  transition?: Transition;\n  variants?: {\n    initial: Variant;\n    animate: Variant;\n    exit: Variant;\n  };\n  onPositionChange?: (x: number, y: number) => void;\n};\n\nexport function Cursor({\n  children,\n  className,\n  springConfig,\n  attachToParent,\n  variants,\n  transition,\n  onPositionChange,\n}: CursorProps) {\n  const cursorX = useMotionValue(0);\n  const cursorY = useMotionValue(0);\n  const cursorRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(!attachToParent);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      cursorX.set(window.innerWidth / 2);\n      cursorY.set(window.innerHeight / 2);\n    }\n  }, [cursorX, cursorY]);\n\n  useEffect(() => {\n    if (!attachToParent) {\n      document.body.style.cursor = 'none';\n    } else {\n      document.body.style.cursor = 'auto';\n    }\n\n    const updatePosition = (e: MouseEvent) => {\n      cursorX.set(e.clientX);\n      cursorY.set(e.clientY);\n      onPositionChange?.(e.clientX, e.clientY);\n    };\n\n    document.addEventListener('mousemove', updatePosition);\n\n    return () => {\n      document.removeEventListener('mousemove', updatePosition);\n      document.body.style.cursor = 'auto';\n    };\n  }, [attachToParent, cursorX, cursorY, onPositionChange]);\n\n  const cursorXSpring = useSpring(cursorX, springConfig || { duration: 0 });\n  const cursorYSpring = useSpring(cursorY, springConfig || { duration: 0 });\n\n  useEffect(() => {\n    const handleVisibilityChange = (visible: boolean) => {\n      setIsVisible(visible);\n    };\n\n    const parent = cursorRef.current?.parentElement;\n\n    if (attachToParent && parent) {\n      const handleMouseEnter = () => {\n        parent.style.cursor = 'none';\n        handleVisibilityChange(true);\n      };\n      const handleMouseLeave = () => {\n        parent.style.cursor = 'auto';\n        handleVisibilityChange(false);\n      };\n\n      parent.addEventListener('mouseenter', handleMouseEnter);\n      parent.addEventListener('mouseleave', handleMouseLeave);\n\n      return () => {\n        parent.removeEventListener('mouseenter', handleMouseEnter);\n        parent.removeEventListener('mouseleave', handleMouseLeave);\n        parent.style.cursor = 'auto';\n      };\n    }\n\n    return undefined;\n  }, [attachToParent]);\n\n  return (\n    <motion.div\n      ref={cursorRef}\n      className={cn('pointer-events-none fixed top-0 left-0 z-50', className)}\n      style={{\n        x: cursorXSpring,\n        y: cursorYSpring,\n        translateX: '-50%',\n        translateY: '-50%',\n      }}\n    >\n      <AnimatePresence>\n        {isVisible && (\n          <motion.div\n            initial='initial'\n            animate='animate'\n            exit='exit'\n            variants={variants}\n            transition={transition}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </motion.div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}