# Collab Lockup
URL: https://remocn.dev/docs/logo-stings/collab-lockup

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

- Install: `npx shadcn@latest add @remocn/collab-lockup`
- Vibe: clean
- Natural length: 78f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `left` | `string` | `DEFAULT_LEFT` | Left name; Remocn renders the real logo. |
| `right` | `string` | `DEFAULT_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` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A partnership or integration announcement with two brands.
- A co-marketing end card with a one-line caption below.
- A launch where your product and a partner product share the closing frame.

## Don't use when
- Only one brand is shown — use `first-light`.
- The end card is a call to action with a URL — use `cta-collapse-mark`.
- Photos of people should sit beside the logo — use `photo-halo`.