Heat Drain Reveal
A glowing month calendar drains its heat into a dithered glow, then a chip highlights the launch day.
$ pnpm dlx shadcn@latest add @remocn/heat-drain-revealUsage
// 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.
Props12
| Prop | Type | Default |
|---|---|---|
| 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 | number26 Previous-month day number shown in the first grid cell | |
| daysInPrevMonth | number31 Number of days in the previous month | |
| daysInMonth | number30 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 | |
- theme"dark" | "light"
Light or dark palette
Default
"dark" - heatstring[]
Five colors from lightest to hottest used for the heat fill
- accentstring
Accent color for highlights, buttons and progress
Default
"#ff7a2e" - headlinestring
Headline text beside the calendar
Default
"Plan the whole launch week." - monthLabelstring
Month label above the grid, e.g. '2026 / 11'
Default
"2026 / 11" - firstDaynumber
Previous-month day number shown in the first grid cell
Default
26 - daysInPrevMonthnumber
Number of days in the previous month
Default
31 - daysInMonthnumber
Number of days in the shown month
Default
30 - eventsCalEvent[]
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
- groundGshPresetId
gradients.sh preset id for the backdrop shader
- groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters