Launch Days

A strip of day panels rises, then one widens into a big numbered card with its title and description.

Installation

$ pnpm dlx shadcn@latest add @remocn/launch-days

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LaunchDays } from "@/components/remocn/launch-days";
 
const LaunchDaysScene = () => (
  <LaunchDays
    week="Launch Week 01"
    active={2}
    days={[{ day: "Mon", title: "Captions" }, { day: "Tue", title: "Transitions" }, { day: "Wed", title: "Templates", description: "Whole launch films you own." }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LaunchDays"
    component={LaunchDaysScene}
    durationInFrames={105}
    fps={30}
    width={1280}
    height={720}
  />
);

A header reads the week name while the day panels rise in a strip. The active day widens into a card showing its number, title and description under a label pill, and the other days shrink to slivers. Pass your own days, week and active; set from to start with another day lit and swap to active. It ships light and dark through theme.

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

Props13

Prop	Type	Default
week	string"Launch Week 01" Header text shown above the strip.
label	string"New today" Small pill on the active card, such as New today.
days	{ day: string; title: string; description?: string }[]DEFAULT_DAYS Two to seven days, each with a short day name, title and description.
active	number2 Zero-based index of the day that expands.
from	number— Zero-based index of the day lit first. Swaps to active.
revealUpcoming	booleanfalse Show titles of the collapsed days as well.
logo	React.ReactNode— Header logo node. Pass null to hide it.
accent	string"#3B5BFD" Accent color of the active card.
background	string— Solid background. Use 'transparent' to drop the ground.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

weekstring
Header text shown above the strip.
Default"Launch Week 01"
labelstring
Small pill on the active card, such as New today.
Default"New today"
days{ day: string; title: string; description?: string }[]
Two to seven days, each with a short day name, title and description.
DefaultDEFAULT_DAYS
activenumber
Zero-based index of the day that expands.
Default2
fromnumber
Zero-based index of the day lit first. Swaps to active.
revealUpcomingboolean
Show titles of the collapsed days as well.
Defaultfalse
logoReact.ReactNode
Header logo node. Pass null to hide it.
accentstring
Accent color of the active card.
Default"#3B5BFD"
backgroundstring
Solid background. Use 'transparent' to drop the ground.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.