Beam Grid

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/beam-grid.tsx.

Install the pastetaste component "Beam Grid" (beam-grid) into this Next.js project and use it.

What it is: A grid of thin laser lines with a glow sliding along each axis, drawn by one fragment shader in raw WebGL. Additive on dark, fades toward the edges.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/beam-grid.json
   (it writes components/pastetaste/beam-grid.tsx; install any npm packages it reports).
2. Import it: import { BeamGrid } from "@/components/pastetaste/beam-grid" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It uses WebGL: render it in a client component and give it a fixed-height parent; it pauses off-screen and shows a still frame for reduced motion.

Props (all optional unless the type has no default):
- color: string = var(--pt-beam-color, #ff5a1f) — Line colour, any CSS colour.
- horizontalOffset: number = 0.1 — Shifts the horizontal lines; 1 is one full cell.
- verticalOffset: number = 0 — Shifts the vertical lines; 1 is one full cell.
- speed: number = 1 — Glow travel speed; 0 freezes it.
- density: number = 15 — Cells across the shorter side.
- opacity: number = 0.5 — Overall brightness, 0 to 1.
- className: string — Class name on the root element.
- style: CSSProperties — Inline styles merged over the defaults.

Live preview: https://pastetaste.com/c/beam-grid
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 8