Social Scheduler

A post composer types a draft, attaches media, picks a time slot, and a toast confirms the schedule.

Installation

$ pnpm dlx shadcn@latest add @remocn/social-scheduler

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SocialScheduler } from "@/components/remocn/social-scheduler";
 
const SocialSchedulerScene = () => (
  <SocialScheduler
    text="We just shipped dark mode."
    brand="Acme"
    handle="acme"
    pick={1}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SocialScheduler"
    component={SocialSchedulerScene}
    durationInFrames={228}
    fps={30}
    width={1280}
    height={720}
  />
);

A composer types text, attaches media and opens a time picker; the cursor chooses the slot at index pick, presses Schedule, and the post lands in the weekly queue with a confirming toast. Pass text, brand, handle, slots (label and optional hint), queue and days to match your product, and mediaSrc for the attached image. 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.

Props16

Prop	Type	Default
text	stringDEFAULT_TEXT Post text typed into the composer
brand	string"remocn" Brand name on the post and queue
handle	string"remocn" Account handle on the post
mediaSrc	string— Image attached to the post
networks	[string, string]["Quill", "Guild"] Two network names shown as toggles
slots	SchedulerSlot[]DEFAULT_SLOTS Time slots in the picker: label and optional hint
pick	number1 Index of the slot the cursor picks
queue	QueuePost[]DEFAULT_QUEUE Existing queue posts: day, time, text, media
weekLabel	string"Oct 26 – 30, 2026" Date range label above the queue
days	string[]DEFAULT_DAYS Weekday column labels for the queue
theme	"light" \| "dark""light" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters
followers	string— Declared but not currently rendered

textstring
Post text typed into the composer
DefaultDEFAULT_TEXT
brandstring
Brand name on the post and queue
Default"remocn"
handlestring
Account handle on the post
Default"remocn"
mediaSrcstring
Image attached to the post
networks[string, string]
Two network names shown as toggles
Default["Quill", "Guild"]
slotsSchedulerSlot[]
Time slots in the picker: label and optional hint
DefaultDEFAULT_SLOTS
picknumber
Index of the slot the cursor picks
Default1
queueQueuePost[]
Existing queue posts: day, time, text, media
DefaultDEFAULT_QUEUE
weekLabelstring
Date range label above the queue
Default"Oct 26 – 30, 2026"
daysstring[]
Weekday column labels for the queue
DefaultDEFAULT_DAYS
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters
followersstring
Declared but not currently rendered