Light Signature

A red light streak chases across the wordmark under an eyebrow, with a tagline below.

Installation

$ pnpm dlx shadcn@latest add @remocn/light-signature

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LightSignature } from "@/components/remocn/light-signature";
 
const LightSignatureScene = () => (
  <LightSignature
    eyebrow="The all-new"
    name="remocn"
    tagline="Launch-video scenes, ready to render."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LightSignature"
    component={LightSignatureScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A streak of light chases across the name, igniting it as it passes and returning to settle, then the eyebrow and tagline fade in around it. Pass eyebrow, name or logo, tagline and lightColor. Ships light and dark.

Props9

Prop	Type	Default
eyebrow	string"The all-new" Small line above the name.
name	string"remocn" Name the light ignites; Remocn renders the real logo.
logo	React.ReactNode— Mark set before the name, replacing the default.
tagline	string"Launch-video scenes, ready to render." Line that fades in under the name.
lightColor	stringCHROME[0] Colour of the travelling streak of light.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
background	string— Stage fill colour; overrides the theme background.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

eyebrowstring
Small line above the name.
Default"The all-new"
namestring
Name the light ignites; Remocn renders the real logo.
Default"remocn"
logoReact.ReactNode
Mark set before the name, replacing the default.
taglinestring
Line that fades in under the name.
Default"Launch-video scenes, ready to render."
lightColorstring
Colour of the travelling streak of light.
DefaultCHROME[0]
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
backgroundstring
Stage fill colour; overrides the theme background.
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"