# Channel Reactions
URL: https://remocn.dev/docs/product-scenes/channel-reactions

A team chat channel where a launch message collects emoji reactions and replies

- Install: `npx shadcn@latest add @remocn/channel-reactions`
- Vibe: social
- Natural length: 220f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/channel-reactions
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ChannelReactions } from "@/components/remocn/channel-reactions";

const ChannelReactionsScene = () => (
  <ChannelReactions workspace="remocn" channel="launch" message="We just shipped v2. Take it for a spin." />
);

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

A channel window opens, a launch message with a link preview appears, a cursor opens the emoji picker and reactions pop in one by one, then a thread opens and replies arrive. Pass `author`, `message`, `link`, `reactions`, `replies`, `workspace` and `channel` to make it yours, and `image` with your own picture for the link preview (the default file only exists in the Remocn repo). 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 |
|---|---|---|---|
| `author` | `ChannelAuthor` | `PEOPLE.maya` | Name and avatar color of the message author. |
| `message` | `string` | `"remocn v2 is live. Thirty new components, a captions tab, and a studio that renders right in your browser. Take it for a spin:"` | Text of the launch message. |
| `link` | `{ url: string; title: string; description: string; site: string }` | — | Link preview card: url, title, description and site. |
| `image` | `string` | — | Link preview image URL; the default ships with Remocn only. |
| `reactions` | `ChannelReaction[]` | `DEFAULT_REACTIONS` | Emoji reactions with their final counts. |
| `replies` | `ChannelReply[]` | `DEFAULT_REPLIES` | Thread replies, each with an author and text. |
| `replyCount` | `number` | `14` | Final reply count shown on the thread line. |
| `workspace` | `string` | `"remocn"` | Workspace name in the sidebar. |
| `channel` | `string` | `"launch"` | Channel name in the header. |
| `headline` | `string` | `"Launch day, live"` | Large line above the window in the 9:16 layout. |
| `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 social-proof beat where a launch announcement in a team chat collects emoji reactions and replies.
- A collaboration product demo showing how a message gets noticed and discussed in a channel.
- A launch-day video that needs the celebration moment inside a workspace app.

## Don't use when
- You want several collaborators moving around a shared canvas — use `multiplayer-cursors`.
- The beat is a video call with participants and controls — use `video-call`.
- You want a hero stat or leaderboard moment instead of chat — use `leaderboard-climb`.