Launch Date

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

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