# Launch Date
URL: https://remocn.dev/docs/numbers/launch-date

A calendar month draws itself, days sweep on and the launch date glows in a ring

- Install: `npx shadcn@latest add @remocn/launch-date`
- Vibe: premium
- Natural length: 170f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/launch-date
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LaunchDate } from "@/components/remocn/launch-date";

const LaunchDateScene = () => (
  <LaunchDate
    date={{ month: 10, day: 30, year: 2026 }}
    label="Coming soon"
    order="month-day"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="LaunchDate"
    component={LaunchDateScene}
    durationInFrames={195}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A calendar month draws itself line by line and the days sweep on until the launch day lights up. The camera pushes in, a ring is drawn around that day, and the day glides into a large lockup where the ring becomes the full stop between day and month. A label fades in underneath. Pass `date` as month, day and year, `label` and `order`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `date` | `LaunchDateValue` | `{ month: 10, day: 30, year: 2026 }` | Launch date as month (1-12), day and year. Month and day are clamped to valid values. |
| `label` | `string` | `"Coming soon"` | Short line under the lockup. |
| `order` | `"month-day" \| "day-month"` | `"month-day"` | "month-day" renders 10.30, "day-month" renders 30.10. |
| `accent` | `string` | `"#3B5BFD"` | Colour of the ring, glow and highlights around the launch day. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A date-announcement beat where a calendar month draws itself, the launch day lights up and the date resolves into a clean numeric lockup.
- A save-the-date teaser that ends on a month.day stamp with a short 'Coming soon' line.
- A launch video that needs the date shown prominently, in either month-first or day-first order.

## Don't use when
- You want a cursor clicking a day and typing an event into a realistic calendar UI — use `calendar-pick`.
- You want the build-up as a 3-2-1 count instead of a date — use `countdown`.
- The year alone is the message and it should land on a scale — use `ruler-scrub`.