# Spotlight Background

> Stage light sweeping slowly across the scene.

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

- Family: Backgrounds
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/spotlight-background/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add spotlight-background
```

It installs to `components/galactrex/spotlight-background.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

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

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

## 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

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