{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glowing-card",
  "type": "registry:ui",
  "title": "Glowing Card",
  "description": "The GlowingCard component tracks the cursor across the card and paints a soft glow wherever it goes, so the surface reacts as the pointer moves over it.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/demo/card/glowing-card.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion, useMotionValue, useTransform } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface GlowingCardProps {\n  className?: string;\n  width?: number;\n  height?: number;\n  children?: React.ReactNode;\n}\n\nconst GlowingCard: React.FC<GlowingCardProps> = ({\n  className = \"\",\n  width = 256,\n  height = 160,\n  children,\n}) => {\n  const mouseX = useMotionValue(0);\n  const mouseY = useMotionValue(0);\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const { clientX, clientY, currentTarget } = event;\n    const { left, top } = currentTarget.getBoundingClientRect();\n    mouseX.set(clientX - left);\n    mouseY.set(clientY - top);\n  };\n\n  const background = useTransform(\n    [mouseX, mouseY],\n    ([x, y]) => `\n      radial-gradient(\n        circle at ${x}px ${y}px,\n        rgba(0, 0, 0, 0.3) 0%,\n        rgba(0, 0, 0, 0) 70%\n      ),\n      linear-gradient(to right, #e2e8f0, #cbd5e0)\n    `,\n  );\n\n  const darkBackground = useTransform(\n    [mouseX, mouseY],\n    ([x, y]) => `\n      radial-gradient(\n        circle at ${x}px ${y}px,\n        rgba(255, 255, 255, 0.3) 0%,\n        rgba(255, 255, 255, 0) 70%\n      ),\n      linear-gradient(to right, #4a5568, #2d3748)\n    `,\n  );\n\n  return (\n    <div className={cn(\"flex items-center justify-center\", className)}>\n      <motion.div\n        className={cn(\n          \"relative cursor-pointer overflow-hidden rounded-lg\",\n          \"transition-shadow duration-300\",\n          \"dark:hidden\",\n        )}\n        style={{\n          width,\n          height,\n          background: background,\n        }}\n        onMouseMove={handleMouseMove}\n        initial={{\n          background: \"linear-gradient(to right, #e2e8f0, #cbd5e0)\",\n        }}\n        transition={{ duration: 0.2, ease: \"easeOut\" }}\n      >\n        <motion.div\n          className={cn(\n            \"absolute inset-[1px] flex flex-col justify-between rounded-[7px] p-4\",\n            \"bg-gray-100\",\n          )}\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n\n      <motion.div\n        className={cn(\n          \"relative cursor-pointer overflow-hidden rounded-lg\",\n          \"transition-shadow duration-300\",\n          \"hidden dark:block\",\n        )}\n        style={{\n          width,\n          height,\n          background: darkBackground,\n        }}\n        onMouseMove={handleMouseMove}\n        initial={{\n          background: \"linear-gradient(to right, #4a5568, #2d3748)\",\n        }}\n        transition={{ duration: 0.2, ease: \"easeOut\" }}\n      >\n        <motion.div\n          className={cn(\n            \"absolute inset-[1px] flex flex-col justify-between rounded-[7px] p-4\",\n            \"bg-gray-800\",\n          )}\n        >\n          {children}\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n};\n\nexport default GlowingCard;\n",
      "type": "registry:ui",
      "target": "components/ui/glowing-card.tsx"
    }
  ]
}