Spotlight Background

Soft cones from above, one from the centre or two crossing from the corners. For a reveal, a launch or a title.

Install

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

Terminal

npx @galactrex/ui add spotlight-background

Usage

Example

import { SpotlightBackground } from "@/components/galactrex/spotlight-background";

<section className="relative overflow-hidden">
  <SpotlightBackground />
  <h1 className="relative">On stage</h1>
</section>

Source

Installs to components/galactrex/spotlight-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
`count`	`1 \| 2`	`2`	One centre beam or two crossing beams.
`sway`	`number`	`14`	Sway each side in degrees.
`speed`	`number`	`10`	Seconds for one sway; 0 holds still.
`intensity`	`number`	`0.42`	Light strength, 0 to 1.
`color`	`string`	`var(--gxui-glow)`	Light colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Crossing. Two beams sweep from the corners.
Solo. `count={1}` for one centre beam.

Accessibility

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

Motion and reduced motion

Transform-only rotation.
Still offscreen.
Reduced motion: beams hold their resting angle.