# Social Scheduler
URL: https://remocn.dev/docs/product-scenes/social-scheduler

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

- Install: `npx shadcn@latest add @remocn/social-scheduler`
- Vibe: social
- Natural length: 206f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `DEFAULT_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` | `number` | `1` | 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` | `number` | `1` | 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 |

## Use when
- A social-media management or content-scheduling launch where schedule-in-a-click is the pitch.
- A creator-tool beat that shows compose, schedule and queue in one continuous flow.
- A weekly-queue scene whose slots carry hints like Best time.

## Don't use when
- You want a phone video feed with a double-tap heart — use `reels-feed`.
- You want emoji reactions on a team message — use `channel-reactions`.
- You want a meeting booking flow — use `calendar-booking`.