Title Converge

Letters drift in from off-frame on their own paths and converge into the logo between two rules.

Installation

$ pnpm dlx shadcn@latest add @remocn/title-converge

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TitleConverge } from "@/components/remocn/title-converge";
 
const TitleConvergeScene = () => (
  <TitleConverge
    word="remocn"
    accent="#3B5BFD"
    theme="dark"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TitleConverge"
    component={TitleConvergeScene}
    durationInFrames={175}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera starts tight on the middle of the word and pulls out as each letter of word drifts in along its own straight path and locks into place, then two rules slide in above and below. Remocn is set as the real logo. Pass word. Ships light and dark.

Props4

Prop	Type	Default
word	string"remocn" Short word whose letters drift in; Remocn renders the real logo.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
theme	"dark" \| "light""dark" Dark or light palette and ground.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.

wordstring
Short word whose letters drift in; Remocn renders the real logo.
Default"remocn"
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1