Components

Beam Grid

A faint line grid where occasional beams of lumen travel along random grid lines — horizontal beams slide right, vertical beams fall — on long, staggered loops.

Wait a moment — the lumen passes through.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add beam-grid

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { BeamGrid } from "@lumora/ui/components/beam-grid";
// or from the barrel:
import { BeamGrid } from "@lumora/ui";

Props worth knowing

density sets the grid cell size in px (default 56); beamCount controls how many lumen beams travel the lines (default 3). Beams disappear under reduced motion, leaving the quiet grid. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.