Blueprint Grid

1"use client";
2 
3import * as React from "react";
4 
5export type BlueprintGridVariant = "lines" | "dots" | "perspective";
6 
7export type BlueprintGridProps = React.HTMLAttributes<HTMLDivElement> & {
8  /** Grid style: ruled `lines`, a `dots` matrix, or a floor-fading `perspective` grid. */
9  variant?: BlueprintGridVariant;
10  /** Cell size in px. */
11  cellSize?: number;
12  /** Line / dot color, any CSS color string. Defaults to the `--color-border` token. */
13  color?: string;
14  /** Render the diagonal light sweep traveling across the lattice. */
15  sweep?: boolean;
16  /** Seconds for one sweep pass. */
17  sweepDuration?: number;
18  /** Light up the grid in a glowing spotlight that follows the cursor. */
19  spotlight?: boolean;
20  /** Color the spotlit cells light up in. Defaults to the `--color-primary` token. */
21  spotlightColor?: string;
22  /** Radius (px) of the cursor spotlight. */
23  spotlightRadius?: number;
24};
25 
26/**
27 * A technical blueprint lattice — ruled lines, a dot matrix, or a perspective
28 * floor — with a diagonal light sweep and an optional cursor spotlight that
29 * lights up nearby cells. Pure CSS. Drop it as the first child of a
30 * `relative overflow-hidden` container.
31 */
32const BlueprintGrid = React.forwardRef<HTMLDivElement, BlueprintGridProps>(
33  (
34    {
35      className,
36      style,
37      variant = "lines",
38      cellSize = 32,
39      color = "var(--border)",
40      sweep = true,
41      sweepDuration = 8,
42      spotlight = true,
43      spotlightColor = "var(--primary)",
44      spotlightRadius = 200,
45      ...props
46    },
47    ref,
48  ) => {
49    const rootRef = React.useRef<HTMLDivElement>(null);
50    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);
51 
52    // The spotlight reacts to the pointer over the background *and* over any
53    // content stacked above it: listen on the nearest positioned ancestor (the
54    // `relative` wrapper) so movement anywhere in the hero is tracked.
55    React.useEffect(() => {
56      const root = rootRef.current;
57      if (!root || !spotlight) return;
58      const target = root.offsetParent ?? root;
59      const onMove = (e: Event) => {
60        const ev = e as PointerEvent;
61        const rect = root.getBoundingClientRect();
62        root.style.setProperty("--bx", `${ev.clientX - rect.left}px`);
63        root.style.setProperty("--by", `${ev.clientY - rect.top}px`);
64        root.style.setProperty("--bo", "0.55");
65      };
66      const onLeave = () => root.style.setProperty("--bo", "0");
67// … truncated