Contribution Heatmap

A pixel heatmap fills in under a counter rolling up to 12,480 renders

Installation

$ pnpm dlx shadcn@latest add @remocn/contribution-heatmap

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ContributionHeatmap } from "@/components/remocn/contribution-heatmap";
 
const ContributionHeatmapScene = () => <ContributionHeatmap value={12480} label="renders this year" weeks={52} />;
 
export const RemotionRoot = () => (
  <Composition
    id="ContributionHeatmap"
    component={ContributionHeatmapScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A grid of weekly columns and seven day rows fills in on a diagonal sweep, each cell popping in with a flash at its activity level. The grid then dims and sinks while a large counter rolls up to the total with a caption below it. Pass value, label and weeks. It ships light and dark through the theme prop.

Props6

Prop	Type	Default
value	number12480 The total the counter rolls up to.
label	string"renders this year" Caption under the total.
weeks	number52 Number of week columns in the grid; 4 at minimum.
accent	string"#3B5BFD" Colour of the filled cells and the flash as each one lands.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

valuenumber
The total the counter rolls up to.
Default12480
labelstring
Caption under the total.
Default"renders this year"
weeksnumber
Number of week columns in the grid; 4 at minimum.
Default52
accentstring
Colour of the filled cells and the flash as each one lands.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1