{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "A card with a radial glow that follows the pointer. Powered by Motion.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/mewo/ui/spotlight-card.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useMotionTemplate, useMotionValue, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface SpotlightCardProps extends React.ComponentProps<\"div\"> {\n  /** Any CSS colour. Defaults to a soft tint of the theme foreground, so it shows in light and dark. */\n  spotlightColor?: string\n}\n\nexport function SpotlightCard({\n  children,\n  spotlightColor = \"color-mix(in oklch, var(--color-foreground) 12%, transparent)\",\n  className,\n  onPointerMove,\n  ...props\n}: SpotlightCardProps) {\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const reduceMotion = useReducedMotion()\n  const background = useMotionTemplate`radial-gradient(320px circle at ${x}px ${y}px, ${spotlightColor}, transparent 70%)`\n\n  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n    if (!reduceMotion) {\n      const rect = event.currentTarget.getBoundingClientRect()\n      x.set(event.clientX - rect.left)\n      y.set(event.clientY - rect.top)\n    }\n    onPointerMove?.(event)\n  }\n\n  return (\n    <div\n      data-slot=\"spotlight-card\"\n      onPointerMove={handlePointerMove}\n      className={cn(\"group relative overflow-hidden rounded-xl border bg-card p-6 text-card-foreground\", className)}\n      {...props}\n    >\n      <motion.div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 motion-reduce:hidden\"\n        style={{ background }}\n      />\n      <div className=\"relative\">{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "card"
  ],
  "type": "registry:ui"
}