Collab Lockup

Two logos glide together and join with a multiplication sign under a glowing arc, with a caption.

Installation

$ pnpm dlx shadcn@latest add @remocn/collab-lockup

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CollabLockup } from "@/components/remocn/collab-lockup";
 
const CollabLockupScene = () => (
  <CollabLockup
    left="remocn"
    right="Acme"
    joiner="×"
    caption="Launch videos, rendered from every workspace."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CollabLockup"
    component={CollabLockupScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

Two names or logos glide in from the sides, a joiner drops between them with an impact, a rule draws and the caption fades in under a glowing arc. Pass left and right (or leftLogo and rightLogo) and caption; the default right side is a placeholder partner. Ships light and dark.

Props9

Prop	Type	Default
left	stringDEFAULT_LEFT Left name; Remocn renders the real logo.
right	stringDEFAULT_RIGHT Right name; the default is a placeholder partner.
leftLogo	React.ReactNode— Node shown in place of the left name.
rightLogo	React.ReactNode— Node shown in place of the right name.
joiner	"×" \| "&""×" Symbol between the two sides.
caption	string"Launch videos, rendered from every Kitebase workspace." Line that fades in under the lockup.
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.

leftstring
Left name; Remocn renders the real logo.
DefaultDEFAULT_LEFT
rightstring
Right name; the default is a placeholder partner.
DefaultDEFAULT_RIGHT
leftLogoReact.ReactNode
Node shown in place of the left name.
rightLogoReact.ReactNode
Node shown in place of the right name.
joiner"×" | "&"
Symbol between the two sides.
Default"×"
captionstring
Line that fades in under the lockup.
Default"Launch videos, rendered from every Kitebase workspace."
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