# Beam Sweep
URL: https://remocn.dev/docs/transitions/beam-sweep

A beam of light sweeps across a page builder and reveals a closing headline over a glowing horizon

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

## Installation

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

## Usage

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

const BeamSweepDemoScene = () => (
  <BeamSweepDemo
    line="Just describe the launch."
    sub="Every scene is cut to your product."
    images={["/shots/one.png", "/shots/two.png", "/shots/three.png"]}
  />
);

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

Scene A is a page builder with a progress bar and three images on a page. A diagonal beam of shader light sweeps across, burns the builder away, and reveals scene B, a statement with a supporting line over a glowing ground. Pass `pageTitle`, `line` and `sub` for the copy and your own `images` (the defaults exist only in the Remocn repo); it ships light and dark.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `images` | `string[]` | — | Up to three image srcs shown on the scene A page; defaults are remocn-only |
| `pageTitle` | `[string, string]` | — | Two-part title on the scene A page; the second part is italic |
| `line` | `string` | `"Just describe the launch."` | Main statement in scene B |
| `sub` | `string` | `"Every scene is cut to your product."` | Supporting line under the statement |
| `beam` | `BeamSweepProps` | — | Overrides for beam preset, angle, burn color, edge and light mode |
| `ground` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |
| `sceneA` | `number` | `BEAM_SWEEP_DEMO.sceneA` | Scene A length in frames |
| `sceneB` | `number` | `BEAM_SWEEP_DEMO.sceneB` | Scene B length in frames |
| `transition` | `number` | `BEAM_SWEEP_DEMO.transition` | Transition length in frames |

## Use when
- A beat where a working product screen gives way to a single confident statement.
- Moving from a feature demo to a tagline or call to action with a cinematic light pass.
- You want a diagonal beam of colored light to carry the cut instead of a plain wipe.

## Don't use when
- You need a hard, flat edge between scenes with no glow — use `diagonal-split`.
- You want a quick tilted band of light, not a long glowing sweep — use `flash-sweep`.
- You want a plain lateral swap with no light effect — use `slide-swap`.