Light Burn to Line

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
accentstring
Accent color; defaults to the theme accent
linestring
Closing headline in scene B
Default"Now ship your first film."
ctastring
Label of the call-to-action pill
Default"Start free"
urlstring
URL text shown in scene B
Default"remocn.dev/new"
groundGshPresetId
Preset id for the scene A gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene A shader parameters
groundBGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsBPartial<GradientParams>
Overrides for the scene B shader parameters
transitionLightBurnToLineProps
Overrides for the transition presentation props