# Multiplayer Cursors
URL: https://remocn.dev/docs/product-scenes/multiplayer-cursors

Collaborator cursors drop stickies, select cards and comment on a shared board

- Install: `npx shadcn@latest add @remocn/multiplayer-cursors`
- Vibe: playful
- Natural length: 260f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/multiplayer-cursors
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MultiplayerCursors } from "@/components/remocn/multiplayer-cursors";

const MultiplayerCursorsScene = () => (
  <MultiplayerCursors boardTitle="Launch plan" stickyText="Record the hero demo by Friday" commentText="Love this. Ship it Friday." />
);

export const RemotionRoot = () => (
  <Composition
    id="MultiplayerCursors"
    component={MultiplayerCursorsScene}
    durationInFrames={270}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Four named cursors join a board: the first drops a sticky and types into it, the second marquee-selects a card, the third drags a shape, and the fourth leaves a typed comment. Pass `collaborators`, `boardTitle`, `stickyText` and `commentText` to make it yours. It ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `collaborators` | `Collaborator[]` | `DEFAULT_COLLABORATORS` | Four collaborators in order: sticky, select, drag, comment. |
| `boardTitle` | `string` | `"Launch plan"` | Title shown in the board header. |
| `headline` | `string` | `"Plan the launch together"` | Large line above the board in the 9:16 layout. |
| `stickyText` | `string` | `"Record the hero demo by Friday"` | Text typed into the dropped sticky note. |
| `commentText` | `string` | `"Love this. Ship it Friday."` | Text typed into the comment bubble. |
| `theme` | `"light" \| "dark"` | `"light"` | Visual theme; ships light and dark. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and controls. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Preset id for the gradients.sh background shader. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader parameters of the chosen ground. |

## Use when
- A collaboration launch beat where several named cursors work on one shared board at once.
- A whiteboard, design or planning tool demo showing real-time teamwork.
- A product tour moment that needs stickies, selection, dragging and comments in a single shot.

## Don't use when
- The beat is a chat thread with reactions and replies — use `channel-reactions`.
- You only want one cursor moving through a task flow — use `flow-builder`.
- You want a single teammate invite and confirmation — use `invite-team`.