Channel Reactions

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

Installation

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

Props15

Prop	Type	Default
author	ChannelAuthorPEOPLE.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	number14 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	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.

authorChannelAuthor
Name and avatar color of the message author.
DefaultPEOPLE.maya
messagestring
Text of the launch message.
Default"remocn v2 is live. Thirty new components, a captions tab, and a studio that renders right in your browser. Take it for a spin:"
link{ url: string; title: string; description: string; site: string }
Link preview card: url, title, description and site.
imagestring
Link preview image URL; the default ships with Remocn only.
reactionsChannelReaction[]
Emoji reactions with their final counts.
DefaultDEFAULT_REACTIONS
repliesChannelReply[]
Thread replies, each with an author and text.
DefaultDEFAULT_REPLIES
replyCountnumber
Final reply count shown on the thread line.
Default14
workspacestring
Workspace name in the sidebar.
Default"remocn"
channelstring
Channel name in the header.
Default"launch"
headlinestring
Large line above the window in the 9:16 layout.
Default"Launch day, live"
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.