Calendar Booking

A cursor picks a day and a time slot, confirms, and a meeting-scheduled card appears.

Installation

$ pnpm dlx shadcn@latest add @remocn/calendar-booking

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CalendarBooking } from "@/components/remocn/calendar-booking";
 
const CalendarBookingScene = () => (
  <CalendarBooking
    host={{ name: "Maya Chen", initials: "MC" }}
    day={18}
    pick="10:30am"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CalendarBooking"
    component={CalendarBookingScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

A scheduling card shows the host, event details and a month grid; the cursor picks a day, then a time slot, and presses Confirm, which morphs the card into a scheduled confirmation with a drawn check and detail rows. Pass host, event, slots, pick and day for your own flow. Ships light and dark.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props10

Prop	Type	Default
host	BookingHostDEFAULT_HOST Host name, optional email and avatar initials
event	BookingEvent— Event details: title, durations, location, month and weekday offsets
slots	string[]DEFAULT_SLOTS Time slots shown after picking a day, e.g. '10:30am'
pick	string— Slot the cursor picks; defaults to 10:30am
day	number18 Day of the month the cursor picks
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""light" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

hostBookingHost
Host name, optional email and avatar initials
DefaultDEFAULT_HOST
eventBookingEvent
Event details: title, durations, location, month and weekday offsets
slotsstring[]
Time slots shown after picking a day, e.g. '10:30am'
DefaultDEFAULT_SLOTS
pickstring
Slot the cursor picks; defaults to 10:30am
daynumber
Day of the month the cursor picks
Default18
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters