# Video Call
URL: https://remocn.dev/docs/product-scenes/video-call

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

- Install: `npx shadcn@latest add @remocn/video-call`
- Vibe: social
- Natural length: 300f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Index of the participant who shares their screen. |
| `present` | `boolean` | `true` | `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `ground` | `GshPresetId` | — | Preset id for the shader background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the shader background parameters. |

## Use when
- A team-collaboration launch beat where people join a call and one presenter shares a dashboard.
- Showing a live, social product moment where viewers send emoji reactions during a demo.
- A webinar or meetings tool teaser that needs a believable multi-person grid.

## Don't use when
- The product is a chat, not a call — use `channel-reactions`, which shows reactions in a message thread.
- You want cursors and sticky notes on a shared canvas rather than faces — use `multiplayer-cursors`.