# Border Beam
URL: https://remocn.dev/docs/ui-blocks/border-beam

A beam of light laps the border of a dark card, which then reveals a logo, title, description and command.

- Install: `npx shadcn@latest add @remocn/border-beam`
- Vibe: premium
- Natural length: 117f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/border-beam
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BorderBeam } from "@/components/remocn/border-beam";

const BorderBeamScene = () => (
  <BorderBeam
    title="Version 2.0"
    description="Launch videos, written in React."
    command="npx shadcn add @remocn/launch-film"
    showLogo={false}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="BorderBeam"
    component={BorderBeamScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A card rises in and a beam laps its border once. As the tail passes, a logo, the `title`, the `description` and the mono `command` line fade in one by one. Pass your own `title`, `description` and `command`; set `showLogo` to false to hide the built-in wordmark. It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Version 2.0"` | Large title on the card. |
| `description` | `string` | `"Launch videos, written in React. Installed like shadcn."` | One-line description under the title. |
| `command` | `string` | `"npx shadcn add @remocn/launch-film"` | Monospace command shown at the bottom of the card. |
| `showLogo` | `boolean` | `true` | Show the built-in wordmark at the top of the card. |
| `accent` | `string` | `"#3B5BFD"` | Color of the traveling beam. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- A version or release announcement card that should feel premium and lit from the edge.
- A hero card that reveals a logo, a title, a one-line pitch and an install command in order.
- A closing beat for a launch video where the beam draws attention before the text lands.

## Don't use when
- The beam should run as a shader on any frame rather than around a card — use `shader-pulsing-border`.
- The card is a settings form that fills with fields — use `rim-draw-card`.
- You want counted stats instead of a title and command — use `stat-sequence`.