Rsvp

A big invitation headline, then a what, when and where table that builds up to an accent install command.

Installation

$ pnpm dlx shadcn@latest add @remocn/rsvp

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Rsvp } from "@/components/remocn/rsvp";
 
const RsvpScene = () => (
  <Rsvp
    headline="You are invited."
    fields={[
      { label: "What", value: "The 2.0 launch film" },
      { label: "When", value: "Tuesday, 9 AM" },
    ]}
    rsvp="acme.dev/launch"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="Rsvp"
    component={RsvpScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

The headline rises word by word, then rows of label and value (the fields) build below it, ending on an accent row labeled rsvpLabel that shows the rsvp text and pulls focus as the other rows dim. The default rsvp is a Remocn install command, so pass your own link or command. It ships light and dark.

Props8

Prop	Type	Default
headline	string"You’re invited." Large invitation line at the top.
fields	{ label: string; value: string }[]DEFAULT_FIELDS Label and value rows shown under the headline.
rsvpLabel	string"RSVP" Label of the final, accent-colored row.
rsvp	string"npx shadcn add @remocn/whip-pan" Text of the final row, such as a link or command; empty hides the row.
accent	string— Color of the labels and the final row.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

headlinestring
Large invitation line at the top.
Default"You’re invited."
fields{ label: string; value: string }[]
Label and value rows shown under the headline.
DefaultDEFAULT_FIELDS
rsvpLabelstring
Label of the final, accent-colored row.
Default"RSVP"
rsvpstring
Text of the final row, such as a link or command; empty hides the row.
Default"npx shadcn add @remocn/whip-pan"
accentstring
Color of the labels and the final row.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"