# Launch Days
URL: https://remocn.dev/docs/ui-blocks/launch-days

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

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

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `2` | Zero-based index of the day that expands. |
| `from` | `number` | — | Zero-based index of the day lit first. Swaps to active. |
| `revealUpcoming` | `boolean` | `false` | 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` | `number` | `1` | 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. |

## Use when
- A launch-week announcement where one day is spotlighted among a week of upcoming features.
- A schedule or roadmap beat needing an editorial feel: numbered day, big title, short description.
- Chaining several days in a row, using `from` to move the highlight from one panel to the next.

## Don't use when
- You are listing release notes as a scrolling feed — use `changelog-scroll`.
- The beat is about one date, not a week — use `launch-date`.
- You only need three feature headings side by side — use `feature-trio`.