{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glare-hover",
  "title": "Glare Hover",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Wraps any content so a diagonal band of light sweeps across it on hover or keyboard focus, in white for images and dark surfaces or a soft shadow for light ones.",
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/motion-presets.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/glare-hover.tsx",
      "content": "// Ballmac UI: Glare Hover. https://ui.ballmac.com/components/glare-hover\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotionSafe } from \"@/lib/ballmac/motion\"\n\ntype GlareHoverProps = React.ComponentProps<\"div\"> & {\n  /** Tilt of the band of light, in degrees. */\n  angle?: number\n  /** Milliseconds the sweep takes. */\n  duration?: number\n  /** Brightness of the glare, from 0 to 1. */\n  intensity?: number\n  /** \"light\" sweeps white light, good over images and dark surfaces. \"dark\" sweeps a soft shadow, good on light surfaces. */\n  tone?: \"light\" | \"dark\"\n}\n\nfunction GlareHover({ angle = 18, duration = 800, intensity = 0.55, tone = \"light\", className, children, style, ...props }: GlareHoverProps) {\n  const reduce = useReducedMotionSafe()\n  const color = tone === \"light\" ? `rgb(255 255 255 / ${intensity})` : `color-mix(in oklab, var(--foreground) ${Math.round(intensity * 22)}%, transparent)`\n\n  return (\n    <div\n      data-slot=\"glare-hover\"\n      className={cn(\"group/glare relative isolate overflow-hidden\", className)}\n      style={{ ...style, [\"--glare-ms\" as string]: `${duration}ms` } as React.CSSProperties}\n      {...props}\n    >\n      {children}\n      {!reduce && (\n        <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0 z-10 overflow-hidden rounded-[inherit]\">\n          <span\n            className=\"absolute -inset-y-[40%] start-0 w-[45%] -translate-x-[130%] rtl:translate-x-[130%] transition-none group-focus-within/glare:translate-x-[300%] group-focus-within/glare:transition-transform group-focus-within/glare:duration-[var(--glare-ms)] group-focus-within/glare:ease-out group-hover/glare:translate-x-[300%] group-hover/glare:transition-transform group-hover/glare:duration-[var(--glare-ms)] group-hover/glare:ease-out rtl:group-focus-within/glare:-translate-x-[300%] rtl:group-hover/glare:-translate-x-[300%]\"\n            style={{ background: `linear-gradient(90deg, transparent, ${color} 50%, transparent)`, transform: `skewX(${-angle}deg)`, mixBlendMode: tone === \"light\" ? \"overlay\" : \"normal\" }}\n          />\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { GlareHover, type GlareHoverProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/glare-hover.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "hover",
      "glare",
      "shine",
      "image",
      "card"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "<GlareHover angle duration intensity tone='light|dark'>anything</GlareHover>. The sweep runs once per hover and resets instantly when the pointer leaves. Pure CSS transitions; nothing renders on pointer move.",
      "whenToUse": [
        "Product images, posters and cards",
        "Anything that deserves a small touch of polish on hover"
      ],
      "whenNotToUse": [
        "Pointer-following lighting (magic-card or spotlight-card)"
      ],
      "composesWith": [
        "tilt-card",
        "magic-card",
        "card"
      ],
      "a11y": [
        {
          "keys": "Focus",
          "action": "The sweep also plays when something inside gains keyboard focus"
        },
        {
          "keys": "Screen readers",
          "action": "The glare is aria-hidden"
        },
        {
          "keys": "Reduced motion",
          "action": "No glare is drawn"
        }
      ],
      "customization": [
        "angle",
        "duration",
        "intensity",
        "tone"
      ]
    },
    "examples": [
      "glare-hover-demo",
      "glare-hover-tones"
    ],
    "url": "https://ui.ballmac.com/components/glare-hover"
  },
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}