Spotlight Card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface SpotlightCardProps extends React.ComponentProps<"div"> {
8  /** Diameter of the surface highlight in pixels. */
9  size?: number
10  /** Fill of the surface wash. Any CSS colour. Keep the alpha low. */
11  color?: string
12  /** Fill of the border highlight. Brighter than `color` on purpose. */
13  borderColor?: string
14  /** Mark the whole card as a target: pointer cursor and a focus ring. */
15  interactive?: boolean
16  /** Render a plain card with no highlight. */
17  disabled?: boolean
18}
19 
20/** Shows only the 1px ring of a layer, hiding the fill inside it. */
21const RING_MASK: React.CSSProperties = {
22  padding: 1,
23  WebkitMask:
24    "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
25  WebkitMaskComposite: "xor",
26  mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
27  maskComposite: "exclude",
28}
29 
30export function SpotlightCard({
31  children,
32  className,
33  size = 320,
34  color = "color-mix(in oklch, currentColor 10%, transparent)",
35  borderColor = "color-mix(in oklch, var(--primary, currentColor) 60%, transparent)",
36  interactive = false,
37  disabled = false,
38  style,
39  ...props
40}: SpotlightCardProps) {
41  const ref = React.useRef<HTMLDivElement>(null)
42  const frame = React.useRef(0)
43 
44  // Pointer position is written to CSS custom properties on the next frame.
45  // Nothing here goes through state, so moving the mouse costs no renders.
46  const handlePointerMove = React.useCallback(
47    (event: React.PointerEvent<HTMLDivElement>) => {
48      if (disabled) {
49        return
50      }
51      const node = ref.current
52      if (!node) {
53        return
54      }
55 
56      const { clientX, clientY } = event
57      cancelAnimationFrame(frame.current)
58      frame.current = requestAnimationFrame(() => {
59        const rect = node.getBoundingClientRect()
60        node.style.setProperty("--spotlight-x", `${clientX - rect.left}px`)
61        node.style.setProperty("--spotlight-y", `${clientY - rect.top}px`)
62      })
63    },
64    [disabled]
65  )
66 
67  React.useEffect(() => () => cancelAnimationFrame(frame.current), [])
68 
69  const highlight = (fill: string) =>
70    `radial-gradient(var(--spotlight-size) circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), ${fill}, transparent 70%)`
71 
72  const layer =
73// … truncated