Letter Relay

Letters of a wordmark hop one after another, each taking off as the last lands, then tighten into place.

Installation

$ pnpm dlx shadcn@latest add @remocn/letter-relay

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LetterRelay } from "@/components/remocn/letter-relay";
 
const LetterRelayScene = () => <LetterRelay word="launchpad" hop={8} mark={false} />;
 
export const RemotionRoot = () => (
  <Composition
    id="LetterRelay"
    component={LetterRelayScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Each letter pops in, then hops over to its place in turn, squashing as it lands on a glowing floor; once the last one lands the spacing tightens to final kerning. Pass word for your own name and hop to set the pace. With mark on, a leading r is drawn as the Remocn R mark. It takes a theme prop and ships light and dark.

Props6

Prop	Type	Default
word	string"remocn" The wordmark to spell, hopped in letter by letter.
hop	number10 Frames per hop; the next letter takes off as the previous one lands.
accent	string"#3B5BFD" Color each letter takes on while it is in the air.
theme	"dark" \| "light""dark" Light or dark ground; the component ships both.
speed	number1 Playback speed multiplier for the whole timeline.
mark	booleantrue Set the leading "r" as the Remocn R mark.

wordstring
The wordmark to spell, hopped in letter by letter.
Default"remocn"
hopnumber
Frames per hop; the next letter takes off as the previous one lands.
Default10
accentstring
Color each letter takes on while it is in the air.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; the component ships both.
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1
markboolean
Set the leading "r" as the Remocn R mark.
Defaulttrue