Video Call

A video call fills with participants, then one shares a screen while emoji reactions float up

Installation

$ pnpm dlx shadcn@latest add @remocn/video-call

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { VideoCall } from "@/components/remocn/video-call";
 
const VideoCallScene = () => (
  <VideoCall meetingCode="abc-defg-hij" presenter={1} accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="VideoCall"
    component={VideoCallScene}
    durationInFrames={300}
    fps={30}
    width={1280}
    height={720}
  />
);

Up to six participants join the grid one by one, then the presenter's tile becomes a shared screen and the rest move to a side strip. A reaction tray pops up and emoji float up the screen. Pass participants (name, color, camera, muted), meetingCode, and your own src screenshot or children for the shared screen.

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

Props11

Prop	Type	Default
participants	CallParticipant[]DEFAULT_PARTICIPANTS Up to six people, in join order.
meetingCode	string"kqv-mnrt-zpa" Meeting code shown in the bottom bar.
time	string"10:42 AM" Clock time shown in the bottom bar.
presenter	number1 Index of the participant who shares their screen.
present	booleantrue `false` keeps the grid and ends on reactions only.
src	string— Screenshot shown as the shared screen.
children	React.ReactNode— Custom shared-screen content (wins over `src`).
accent	string"#3B5BFD" Accent color for highlights and the active speaker ring.
speed	number1 Playback speed multiplier for the whole timeline.
ground	GshPresetId— Preset id for the shader background.
groundParams	Partial<GradientParams>— Overrides for the shader background parameters.

participantsCallParticipant[]
Up to six people, in join order.
DefaultDEFAULT_PARTICIPANTS
meetingCodestring
Meeting code shown in the bottom bar.
Default"kqv-mnrt-zpa"
timestring
Clock time shown in the bottom bar.
Default"10:42 AM"
presenternumber
Index of the participant who shares their screen.
Default1
presentboolean
`false` keeps the grid and ends on reactions only.
Defaulttrue
srcstring
Screenshot shown as the shared screen.
childrenReact.ReactNode
Custom shared-screen content (wins over `src`).
accentstring
Accent color for highlights and the active speaker ring.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Preset id for the shader background.
groundParamsPartial<GradientParams>
Overrides for the shader background parameters.