# Border Beam

> A light that travels the border of any container.

Marks the one surface that matters on a page: a plan, a prompt box, a live session. The beam follows the parent's own radius, so it fits cards, inputs and full panels without extra markup.

- Family: Chrome
- Plan: Free. Free to install, no account.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/border-beam/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui add border-beam
```

It installs to `components/galactrex/border-beam.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 { BorderBeam } from "@/components/galactrex/border-beam";

<div className="relative rounded-xl border border-gxui-line p-6">
  <BorderBeam />
  Pro plan
</div>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` | `6` | Seconds for one lap. |
| `length` | `number` | `0.18` | Beam length as a share of the lap, 0.05 to 0.5. |
| `width` | `number` | `1` | Border width in px. |
| `color` | `string` | `var(--gxui-glow)` | Any CSS colour. |
| `reverse` | `boolean` | `false` | Run counter-clockwise. |
| `delay` | `number` | `0` | Seconds before the first lap. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Single beam.** The default: one light, one lap every six seconds.
- **Paired.** Two beams with opposite `reverse` and half-lap `delay` for a balanced trace.

## Accessibility

- Decorative only: aria-hidden and pointer-events: none, so it never intercepts clicks or reaches assistive tech.

## Motion

- Rotation by transform on a single layer; no repaint of the border per frame.
- Pauses while offscreen.
- Reduced motion: the beam holds still at its starting point.