# Contribution Heatmap
URL: https://remocn.dev/docs/numbers/contribution-heatmap

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

- Install: `npx shadcn@latest add @remocn/contribution-heatmap`
- Vibe: data
- Natural length: 96f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `12480` | The total the counter rolls up to. |
| `label` | `string` | `"renders this year"` | Caption under the total. |
| `weeks` | `number` | `52` | 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` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |

## Use when
- A usage or activity beat where a year of daily cells fills in like a contribution graph before the total lands.
- A stat such as 12,480 renders this year that benefits from a visual of steady daily activity.
- A product-adoption scene where the grid sweeps in diagonally, then dims behind a big counted number.

## Don't use when
- You want a plain big number with no supporting graphic — use `compact-stat`.
- You want a single line trending upward rather than a grid of cells — use `growth-line`.
- You want a grid lit up to show a share of 100 — use `unit-grid`.