Grid Backdrop

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { useInViewport } from "@/registry/lib/use-in-viewport"
7 
8export interface GridBackdropProps extends React.ComponentProps<"svg"> {
9  /** Cell width in pixels. */
10  width?: number
11  /** Cell height in pixels. */
12  height?: number
13  /** Dash pattern for the grid lines. `0` draws them solid. */
14  strokeDasharray?: string | number
15  /** How many cells light up. Set to `0` for a plain static grid. */
16  squares?: number
17  /** Seconds for one full fade in and out of a single cell. */
18  duration?: number
19  /** Changes which cells are chosen. Same seed, same layout, every render. */
20  seed?: number
21  /** Render the grid with no pulsing cells. */
22  disabled?: boolean
23}
24 
25/** Mulberry32. Deterministic so the server and the client agree. */
26function createRandom(seed: number) {
27  let state = seed >>> 0
28  return () => {
29    state = (state + 0x6d2b79f5) >>> 0
30    let t = state
31    t = Math.imul(t ^ (t >>> 15), t | 1)
32    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
33    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
34  }
35}
36 
37export function GridBackdrop({
38  width = 40,
39  height = 40,
40  strokeDasharray = 0,
41  squares = 14,
42  duration = 5,
43  seed = 1,
44  disabled = false,
45  className,
46  ...props
47}: GridBackdropProps) {
48  const id = React.useId()
49 
50  const cells = React.useMemo(() => {
51    if (disabled || squares <= 0) {
52      return []
53    }
54    const random = createRandom(seed)
55    return Array.from({ length: squares }, (_, index) => ({
56      key: index,
57      x: Math.floor(random() * 30) * width,
58      y: Math.floor(random() * 20) * height,
59      delay: random() * duration * 2,
60    }))
61  }, [disabled, squares, seed, width, height, duration])
62 
63  const root = React.useRef<SVGSVGElement>(null)
64  const onScreen = useInViewport(root)
65 
66  return (
67    <svg
68      ref={root}
69      data-slot="grid-backdrop"
70      aria-hidden="true"
71      className={cn(
72        "pointer-events-none absolute inset-0 size-full fill-current/[0.04] stroke-current/[0.08]",
73        className
74      )}
75      {...props}
76    >
77      <defs>
78        <pattern
79          id={id}
80          width={width}
81          height={height}
82          patternUnits="userSpaceOnUse"
83        >
84          <path
85            d={`M ${width} 0 L 0 0 0 ${height}`}
86            fill="none"
87            strokeDasharray={strokeDasharray}
88          />
89        </pattern>
90      </defs>
91 
92      <rect width="100%" height="100%" fill={`url(#${id})`} stroke="none" />
93 
94// … truncated