{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glare-hover",
  "type": "registry:ui",
  "title": "Glare Hover",
  "description": "A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).",
  "files": [
    {
      "path": "registry/magicui/glare-hover.tsx",
      "content": "import type { ComponentProps, CSSProperties } from \"react\"\nimport { useMemo } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface GlareHoverProps extends ComponentProps<\"div\"> {\n  /**\n   * Optional CSS width on the root element (e.g. `\"100%\"`, `\"320px\"`).\n   * @example\n   * ```tsx\n   * <GlareHover width=\"100%\">...</GlareHover>\n   * ```\n   */\n  width?: string\n  /**\n   * Optional CSS height on the root element (e.g. `\"auto\"`, `\"200px\"`).\n   * @example\n   * ```tsx\n   * <GlareHover height=\"200px\">...</GlareHover>\n   * ```\n   */\n  height?: string\n  /**\n   * Background color of the wrapper (CSS color string).\n   * @example\n   * ```tsx\n   * <GlareHover background=\"#0a0a0a\">...</GlareHover>\n   * ```\n   */\n  background?: string\n  /**\n   * Glare highlight as `#rrggbb` or `#rgb`; parsed to `rgba` for the gradient.\n   * @example\n   * ```tsx\n   * <GlareHover color=\"#a78bfa\">...</GlareHover>\n   * ```\n   */\n  color?: Color\n  /**\n   * Opacity applied to the glare color when converting hex to `rgba` (0–1).\n   * @example\n   * ```tsx\n   * <GlareHover color=\"#ffffff\" opacity={0.35}>...</GlareHover>\n   * ```\n   */\n  opacity?: number\n  /**\n   * Gradient angle in degrees (`--gh-angle`).\n   * @example\n   * ```tsx\n   * <GlareHover angle={-30}>...</GlareHover>\n   * ```\n   */\n  angle?: number\n  /**\n   * Glare tile size as a percentage of the element (`--gh-size`, `background-size`).\n   * @example\n   * ```tsx\n   * <GlareHover size={280}>...</GlareHover>\n   * ```\n   */\n  size?: number\n  /**\n   * Transition duration for the glare sweep in milliseconds (`--gh-duration`).\n   * @example\n   * ```tsx\n   * <GlareHover duration={500}>...</GlareHover>\n   * ```\n   */\n  duration?: number\n  /**\n   * When `true`, the glare transition only runs on hover (no animation until pointer enters).\n   * @example\n   * ```tsx\n   * <GlareHover playOnce>...</GlareHover>\n   * ```\n   */\n  playOnce?: boolean\n}\n\ntype Color = `#${string}`\ntype RGBA = `rgba(${number},${number},${number},${number})`\n\nfunction parseHEX(color: Color, opacity: number): RGBA | Color {\n  const hex = color.replace(\"#\", \"\")\n  const parse = (h: string) => Number.parseInt(h, 16)\n  if (/^[0-9A-Fa-f]{6}$/.test(hex)) {\n    return `rgba(${parse(hex.slice(0, 2))},${parse(hex.slice(2, 4))},${parse(hex.slice(4, 6))},${opacity})`\n  }\n  if (/^[0-9A-Fa-f]{3}$/.test(hex)) {\n    return `rgba(${parse(hex[0] + hex[0])},${parse(hex[1] + hex[1])},${parse(hex[2] + hex[2])},${opacity})`\n  }\n\n  return color\n}\n\nfunction GlareHover({\n  background = \"#000\",\n  children,\n  color = \"#ffffff\",\n  opacity = 0.5,\n  angle = -45,\n  size = 250,\n  duration = 650,\n  playOnce = false,\n  className,\n  style,\n  width,\n  height,\n  ...props\n}: GlareHoverProps) {\n  const rgba = useMemo(() => parseHEX(color, opacity), [color, opacity])\n\n  const cssVars = {\n    \"--gh-angle\": `${angle}deg`,\n    \"--gh-duration\": `${duration}ms`,\n    \"--gh-size\": `${size}%`,\n    \"--gh-rgba\": rgba,\n    background,\n    ...style,\n    ...(width !== undefined ? { width } : {}),\n    ...(height !== undefined ? { height } : {}),\n  } as CSSProperties\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"relative grid size-fit cursor-pointer place-items-center overflow-hidden bg-transparent\",\n        // BEFORE ELEMENT\n        \"before:pointer-events-none before:absolute before:inset-0 before:z-10 before:bg-no-repeat before:content-['']\",\n        // GRADIENT\n        \"before:[background-image:linear-gradient(var(--gh-angle),transparent_60%,var(--gh-rgba)_70%,transparent,transparent_100%)]\",\n        // SIZE + POSITION\n        \"before:[background-size:var(--gh-size)_var(--gh-size),100%_100%]\",\n        \"before:[background-position:-100%_-100%,0_0]\",\n        // TRANSITION\n        !playOnce &&\n          \"before:transition-[background-position] before:duration-[var(--gh-duration)] before:ease-in-out\",\n        playOnce &&\n          \"before:transition-none hover:before:transition-[background-position] hover:before:duration-[var(--gh-duration)]\",\n        // HOVER EFFECT\n        \"hover:before:[background-position:100%_100%,0_0]\",\n        className\n      )}\n      style={cssVars}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { GlareHover }\n",
      "type": "registry:ui"
    }
  ]
}