Multiplayer Cursors

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number1 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.

collaboratorsCollaborator[]
Four collaborators in order: sticky, select, drag, comment.
DefaultDEFAULT_COLLABORATORS
boardTitlestring
Title shown in the board header.
Default"Launch plan"
headlinestring
Large line above the board in the 9:16 layout.
Default"Plan the launch together"
stickyTextstring
Text typed into the dropped sticky note.
Default"Record the hero demo by Friday"
commentTextstring
Text typed into the comment bubble.
Default"Love this. Ship it Friday."
theme"light" | "dark"
Visual theme; ships light and dark.
Default"light"
accentstring
Accent color for highlights and controls.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Preset id for the gradients.sh background shader.
groundParamsPartial<GradientParams>
Overrides for the shader parameters of the chosen ground.