shadcn/app/public/registry/styles/default/motion-highlight.json

{
  "name": "motion-highlight",
  "description": "Motion-based text highlighting",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "motion-highlight.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MotionHighlightProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n}\n\nconst MotionHighlight = React.forwardRef<HTMLDivElement, MotionHighlightProps>(\n  ({ className, children, ...props }, ref) => {\n    const [highlightPosition, setHighlightPosition] = React.useState({\n      x: 0,\n      y: 0,\n    })\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      const rect = e.currentTarget.getBoundingClientRect()\n      setHighlightPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      })\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"group relative overflow-hidden\", className)}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        {...props}\n      >\n        {isHovered && (\n          <div\n            className=\"pointer-events-none absolute z-0 h-32 w-32 rounded-full bg-primary/10 blur-xl transition-opacity\"\n            style={{\n              left: highlightPosition.x,\n              top: highlightPosition.y,\n              transform: \"translate(-50%, -50%)\",\n            }}\n          />\n        )}\n        <div className=\"relative z-10\">{children}</div>\n      </div>\n    )\n  }\n)\nMotionHighlight.displayName = \"MotionHighlight\"\n\nexport { MotionHighlight }\n"
    }
  ],
  "type": "components:ui"
}