Border Beam

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

Installation

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

Props9

Prop	Type	Default
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	booleantrue Show the built-in wordmark at the top of the card.
accent	string"#3B5BFD" Color of the traveling beam.
speed	number1 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.

titlestring
Large title on the card.
Default"Version 2.0"
descriptionstring
One-line description under the title.
Default"Launch videos, written in React. Installed like shadcn."
commandstring
Monospace command shown at the bottom of the card.
Default"npx shadcn add @remocn/launch-film"
showLogoboolean
Show the built-in wordmark at the top of the card.
Defaulttrue
accentstring
Color of the traveling beam.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.