# Heat Drain Reveal
URL: https://remocn.dev/docs/product-scenes/heat-drain-reveal

A glowing month calendar drains its heat into a dithered glow, then a chip highlights the launch day.

- Install: `npx shadcn@latest add @remocn/heat-drain-reveal`
- Vibe: tech
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/heat-drain-reveal
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HeatDrainReveal } from "@/components/remocn/heat-drain-reveal";

const HeatDrainRevealScene = () => (
  <HeatDrainReveal
    headline="Plan the whole launch week."
    monthLabel="2026 / 11"
    events={[{ day: 19, label: "Launch", launch: true }]}
  />
);

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

A month calendar rises in hot orange tones, then the heat drains out of the grid into a dithered glow while event labels appear and the launch event gets an accent chip. Pass `headline`, `monthLabel`, `events` (mark one with `launch: true`) and `upcoming`; use `firstDay`, `daysInPrevMonth` and `daysInMonth` to match the real month and `heat` for the five-stop heat palette. Ships dark by default and light.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette |
| `heat` | `string[]` | — | Five colors from lightest to hottest used for the heat fill |
| `accent` | `string` | `"#ff7a2e"` | Accent color for highlights, buttons and progress |
| `headline` | `string` | `"Plan the whole launch week."` | Headline text beside the calendar |
| `monthLabel` | `string` | `"2026 / 11"` | Month label above the grid, e.g. '2026 / 11' |
| `firstDay` | `number` | `26` | Previous-month day number shown in the first grid cell |
| `daysInPrevMonth` | `number` | `31` | Number of days in the previous month |
| `daysInMonth` | `number` | `30` | Number of days in the shown month |
| `events` | `CalEvent[]` | — | Day labels on the grid; set launch: true on the launch day |
| `upcoming` | `{ when: string; title: string; time: string }[]` | — | Upcoming list rows: when, title, time |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A planning or scheduling product beat that ends on launch day being marked.
- A moody dark hero where the calendar is the only UI and the headline sets the promise.
- A launch-week announcement with a short list of upcoming events.

## Don't use when
- You want a plain calendar picking a day and tagging dates — use `calendar-pick`.
- You want a calendar that draws itself with a glowing ring on the date — use `launch-date`.
- You want a booking flow with time slots — use `calendar-booking`.