First Light

A band of light climbs along a baseline and lights the wordmark as it passes, with a tagline below.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FirstLight } from "@/components/remocn/first-light";
 
const FirstLightScene = () => (
  <FirstLight
    name="remocn"
    tagline="Every frame catches the light."
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="FirstLight"
    component={FirstLightScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A band of light climbs along a baseline, lighting the name as it passes, then settles and a tagline fades in below. Pass name and tagline; a name of Remocn is set as the real logo. Ships light and dark.

Props6

Prop	Type	Default
name	string"remocn" Name that the light sweeps across.
tagline	string"Every frame catches the light." Line that fades in under the name.
accent	string— Colour of the light band.
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.

namestring
Name that the light sweeps across.
Default"remocn"
taglinestring
Line that fades in under the name.
Default"Every frame catches the light."
accentstring
Colour of the light band.
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"