Beam Sweep

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

Installation

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

Props11

Prop	Type	Default
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	numberBEAM_SWEEP_DEMO.sceneA Scene A length in frames
sceneB	numberBEAM_SWEEP_DEMO.sceneB Scene B length in frames
transition	numberBEAM_SWEEP_DEMO.transition Transition length in frames

theme"dark" | "light"
Light or dark palette for both scenes
Default"dark"
imagesstring[]
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
linestring
Main statement in scene B
Default"Just describe the launch."
substring
Supporting line under the statement
Default"Every scene is cut to your product."
beamBeamSweepProps
Overrides for beam preset, angle, burn color, edge and light mode
groundGshPresetId
Preset id for the scene B gradients.sh shader ground
groundParamsPartial<GradientParams>
Overrides for the scene B shader parameters
sceneAnumber
Scene A length in frames
DefaultBEAM_SWEEP_DEMO.sceneA
sceneBnumber
Scene B length in frames
DefaultBEAM_SWEEP_DEMO.sceneB
transitionnumber
Transition length in frames
DefaultBEAM_SWEEP_DEMO.transition