# Light Burn to Line
URL: https://remocn.dev/docs/transitions/light-burn-to-line

A browser scene burns down to a bright line of light that opens onto a closing headline and button

- Install: `npx shadcn@latest add @remocn/light-burn-to-line`
- Vibe: premium
- Natural length: 36f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/light-burn-to-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LightBurnToLineDemo } from "@/components/remocn/light-burn-to-line";

const LightBurnToLineDemoScene = () => (
  <LightBurnToLineDemo
    line="Now ship your first film."
    cta="Start free"
    url="remocn.dev/new"
  />
);

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

Scene A is a browser window with a chat, a check and a few product shots. The window burns into soft discs of light that gather and travel into a horizontal line, which then opens onto scene B: a closing headline with a call-to-action pill and a URL. Pass `line`, `cta` and `url` for the ending; 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 |
| `accent` | `string` | — | Accent color; defaults to the theme accent |
| `line` | `string` | `"Now ship your first film."` | Closing headline in scene B |
| `cta` | `string` | `"Start free"` | Label of the call-to-action pill |
| `url` | `string` | `"remocn.dev/new"` | URL text shown in scene B |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `groundB` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParamsB` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |
| `transition` | `LightBurnToLineProps` | — | Overrides for the transition presentation props |

## Use when
- A closing beat where a busy product screen should resolve into one calm line and a call to action.
- A launch video that moves from feature proof to a final statement with a dramatic, cinematic light burn.
- You want the outgoing UI to read as consumed by light rather than wiped or faded.

## Don't use when
- The cut must be quick and clean — a light burn needs about 36 frames; use `flash-sweep` for a faster light swap.
- The scenes are bright and low-contrast so the burn will wash out — use `light-leak`.
- You only need a gentle line reveal without the burn — use `hairline-open`.