Light Trail Write

A point of light writes a script wordmark along a path, leaving a cooling trail that becomes the logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/light-trail-write

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LightTrailWrite } from "@/components/remocn/light-trail-write";
 
const LightTrailWriteScene = () => (
  <LightTrailWrite
    finish="accent"
    accent="#3B5BFD"
    speed={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LightTrailWrite"
    component={LightTrailWriteScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

A point of light writes the path stroke by stroke, leaving a trail that cools behind it, then a sweep turns the script into the lit logo. Pass your own single-stroke SVG path and choose finish. This component renders on its own dark ground and has no theme prop.

Props5

Prop	Type	Default
path	stringDEFAULT_PATH Single monoline SVG path to write; defaults to a script remocn.
strokeWidth	number— Stroke width in path units; defaults to 3.4% of the path height.
finish	"solid" \| "accent""solid" Final look: lit white with a sheen, or lit in the accent.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

pathstring
Single monoline SVG path to write; defaults to a script remocn.
DefaultDEFAULT_PATH
strokeWidthnumber
Stroke width in path units; defaults to 3.4% of the path height.
finish"solid" | "accent"
Final look: lit white with a sheen, or lit in the accent.
Default"solid"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1