Glare Hover

1import type { ComponentProps, CSSProperties } from "react"
2import { useMemo } from "react"
3 
4import { cn } from "@/lib/utils"
5 
6export interface GlareHoverProps extends ComponentProps<"div"> {
7  /**
8   * Optional CSS width on the root element (e.g. `"100%"`, `"320px"`).
9   * @example
10   * ```tsx
11   * <GlareHover width="100%">...</GlareHover>
12   * ```
13   */
14  width?: string
15  /**
16   * Optional CSS height on the root element (e.g. `"auto"`, `"200px"`).
17   * @example
18   * ```tsx
19   * <GlareHover height="200px">...</GlareHover>
20   * ```
21   */
22  height?: string
23  /**
24   * Background color of the wrapper (CSS color string).
25   * @example
26   * ```tsx
27   * <GlareHover background="#0a0a0a">...</GlareHover>
28   * ```
29   */
30  background?: string
31  /**
32   * Glare highlight as `#rrggbb` or `#rgb`; parsed to `rgba` for the gradient.
33   * @example
34   * ```tsx
35   * <GlareHover color="#a78bfa">...</GlareHover>
36   * ```
37   */
38  color?: Color
39  /**
40   * Opacity applied to the glare color when converting hex to `rgba` (0–1).
41   * @example
42   * ```tsx
43   * <GlareHover color="#ffffff" opacity={0.35}>...</GlareHover>
44   * ```
45   */
46  opacity?: number
47  /**
48   * Gradient angle in degrees (`--gh-angle`).
49   * @example
50   * ```tsx
51   * <GlareHover angle={-30}>...</GlareHover>
52   * ```
53   */
54  angle?: number
55  /**
56   * Glare tile size as a percentage of the element (`--gh-size`, `background-size`).
57   * @example
58   * ```tsx
59   * <GlareHover size={280}>...</GlareHover>
60   * ```
61   */
62  size?: number
63  /**
64   * Transition duration for the glare sweep in milliseconds (`--gh-duration`).
65   * @example
66   * ```tsx
67   * <GlareHover duration={500}>...</GlareHover>
68   * ```
69   */
70  duration?: number
71  /**
72   * When `true`, the glare transition only runs on hover (no animation until pointer enters).
73   * @example
74   * ```tsx
75   * <GlareHover playOnce>...</GlareHover>
76   * ```
77   */
78  playOnce?: boolean
79}
80 
81type Color = `#${string}`
82type RGBA = `rgba(${number},${number},${number},${number})`
83 
84function parseHEX(color: Color, opacity: number): RGBA | Color {
85  const hex = color.replace("#", "")
86  const parse = (h: string) => Number.parseInt(h, 16)
87  if (/^[0-9A-Fa-f]{6}$/.test(hex)) {
88    return `rgba(${parse(hex.slice(0, 2))},${parse(hex.slice(2, 4))},${parse(hex.slice(4, 6))},${opacity})`
89  }
90  if (/^[0-9A-Fa-f]{3}$/.test(hex)) {
91    return `rgba(${parse(hex[0] + hex[0])},${parse(hex[1] + hex[1])},${parse(hex[2] + hex[2])},${opacity})`
92  }
93 
94  return color
95}
96 
97function GlareHover({
98// … truncated