Glow Card Grid

1"use client"
2 
3import { useEffect, useRef } from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export type GlowCardGridProps = React.ComponentPropsWithoutRef<"div"> & {
8  // Card parameters
9  cardRadius?: number
10 
11  // Icon parameters
12  iconBlur?: number
13  iconSaturate?: number
14  iconBrightness?: number
15  iconScale?: number
16  iconOpacity?: number
17 
18  // Border parameters
19  borderWidth?: number
20  borderBlur?: number
21  borderSaturate?: number
22  borderBrightness?: number
23  borderContrast?: number
24 
25  children: React.ReactNode
26}
27 
28export function GlowCardGrid({
29  cardRadius = 16,
30 
31  iconBlur = 25,
32  iconSaturate = 5.0,
33  iconBrightness = 1.3,
34  iconScale = 4,
35  iconOpacity = 0.3,
36 
37  borderWidth = 3,
38  borderBlur = 10,
39  borderSaturate = 4.2,
40  borderBrightness = 2.5,
41  borderContrast = 2.5,
42 
43  className,
44  style,
45  ...props
46}: GlowCardGridProps) {
47  const gridRef = useRef<HTMLDivElement>(null)
48 
49  useEffect(() => {
50    const handlePointerMove = (event: PointerEvent) => {
51      if (!gridRef.current) return
52 
53      const cards = gridRef.current.querySelectorAll<HTMLElement>(
54        "[data-slot='glow-card']"
55      )
56 
57      cards.forEach((card) => {
58        const rect = card.getBoundingClientRect()
59 
60        const centerX = rect.left + rect.width / 2
61        const centerY = rect.top + rect.height / 2
62 
63        const x = (event.clientX - centerX) / (rect.width / 2)
64        const y = (event.clientY - centerY) / (rect.height / 2)
65 
66        card.style.setProperty("--pointer-x", x.toFixed(3))
67        card.style.setProperty("--pointer-y", y.toFixed(3))
68      })
69    }
70 
71    document.addEventListener("pointermove", handlePointerMove)
72 
73    return () => document.removeEventListener("pointermove", handlePointerMove)
74  }, [])
75 
76  return (
77    <div
78      ref={gridRef}
79      className={cn(
80        "grid w-full gap-4 sm:grid-cols-2 md:grid-cols-3",
81        className
82      )}
83      style={
84        {
85          "--card-radius": `${cardRadius}px`,
86          "--card-icon-blur": `${iconBlur}px`,
87          "--card-icon-saturate": iconSaturate,
88          "--card-icon-brightness": iconBrightness,
89          "--card-icon-scale": iconScale,
90          "--card-icon-opacity": iconOpacity,
91          "--card-border-width": `${borderWidth}px`,
92          "--card-border-blur": `${borderBlur}px`,
93          "--card-border-saturate": borderSaturate,
94          "--card-border-brightness": borderBrightness,
95          "--card-border-contrast": borderContrast,
96          ...style,
97        } as React.CSSProperties
98// … truncated