Grid Beams

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 GridBeamsProps extends React.ComponentProps<"div"> {
9  /** Grid cell size in pixels. */
10  cellSize?: number
11  /** How many beams travel at once. */
12  beams?: number
13  /** Colours the beams are drawn from, one picked per beam. */
14  colors?: string[]
15  /** Seconds for one beam to cross the container. */
16  duration?: number
17  /** Length of a beam, as a percentage of the container it crosses. */
18  length?: string
19  /** Thickness of a beam in pixels. */
20  thickness?: number
21  /** Opacity of the static grid lines. */
22  lineOpacity?: number
23  /** Which way beams travel. `both` mixes the two. */
24  axis?: "vertical" | "horizontal" | "both"
25  /** Fade the layer out. `true` fades from the top, or pass a CSS mask. */
26  fade?: boolean | string
27  /** Changes which lines are chosen. Same seed, same layout, every render. */
28  seed?: number
29  /** Render the grid with no beams. */
30  disabled?: boolean
31}
32 
33const DEFAULT_COLORS = ["#22d3ee", "#38bdf8", "#a855f7", "#f472b6"]
34 
35/** Matches the hero: bright at the top, gone by the middle. */
36/** Rounded off rather than ramped: a two-stop ramp meets full opacity at a
37 *  point the eye reads as a hard line. */
38const TOP_FADE =
39  "radial-gradient(ellipse 75% 55% at 50% 0%, black 30%, rgba(0,0,0,0.5) 65%, transparent 100%)"
40 
41/** Mulberry32. Deterministic so a seed always gives the same layout. */
42function createRandom(seed: number) {
43  let state = seed >>> 0
44  return () => {
45    state = (state + 0x6d2b79f5) >>> 0
46    let t = state
47    t = Math.imul(t ^ (t >>> 15), t | 1)
48    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
49    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
50  }
51}
52 
53export function GridBeams({
54  cellSize = 64,
55  beams = 7,
56  colors = DEFAULT_COLORS,
57  duration = 4,
58  length = "24%",
59  thickness = 2,
60  lineOpacity = 0.05,
61  axis = "both",
62  fade = true,
63  seed = 1,
64  disabled = false,
65  className,
66  style,
67  ...props
68}: GridBeamsProps) {
69  const ref = React.useRef<HTMLDivElement>(null)
70  const [box, setBox] = React.useState({ width: 0, height: 0 })
71 
72  // Grid lines land on fixed pixel multiples, so which of them are actually
73  // on screen depends on how big the container is. Measuring is what keeps
74  // every beam inside the frame instead of scattering some past the edge.
75  React.useEffect(() => {
76    const node = ref.current
77    if (!node) {
78      return
79    }
80 
81// … truncated