Beam Background

Data moving through a system: each rail carries a beam at its own pace. For pipelines, APIs and infrastructure pages.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add beam-background

Usage

Example

import { BeamBackground } from "@/components/galactrex/beam-background";

<section className="relative overflow-hidden">
  <BeamBackground />
  <h1 className="relative">Pipeline</h1>
</section>

Source

Installs to components/galactrex/beam-background.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`beams`	`number`	`9`	How many rails carry beams.
`speed`	`number`	`5`	Average seconds to fall the full height.
`length`	`number`	`22`	Beam length as % of the height.
`rails`	`boolean`	`true`	Show the faint rails.
`color`	`string`	`var(--gxui-glow)`	Beam colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Rails. Beams on visible tracks.
Rain. `rails={false}` for free-falling light.

Accessibility

Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

Transform-only fall per beam, staggered.
Stops offscreen.
Reduced motion: only the rails show.