Invite Team

An invite field types emails, sends invites and a toast confirms in a project list

Installation

$ pnpm dlx shadcn@latest add @remocn/invite-team

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { InviteTeam } from "@/components/remocn/invite-team";
 
const InviteTeamScene = () => (
  <InviteTeam emails={["maya@kitebase.io", "leo@kitebase.io"]} role="Editor" workspace="Kitebase" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="InviteTeam"
    component={InviteTeamScene}
    durationInFrames={215}
    fps={30}
    width={1280}
    height={720}
  />
);

A project app opens behind an invite modal; a cursor types up to three emails into chips, switches the role in a select, clicks send, and avatars fly into the header while a toast confirms. Pass emails, role and workspace to make it yours, and images with your own project thumbnails (the default files only exist 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.

Props9

Prop	Type	Default
emails	string[]— Emails typed into the invite field (up to 3 fit best).
role	string"Editor" Role the select switches to.
workspace	string"Kitebase" Workspace name shown in the modal and app.
images	string[]DEFAULT_IMAGES Project thumbnail URLs behind the modal; defaults ship with Remocn only.
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.

emailsstring[]
Emails typed into the invite field (up to 3 fit best).
rolestring
Role the select switches to.
Default"Editor"
workspacestring
Workspace name shown in the modal and app.
Default"Kitebase"
imagesstring[]
Project thumbnail URLs behind the modal; defaults ship with Remocn only.
DefaultDEFAULT_IMAGES
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.