โœจ New: pull these templates straight into Claude, Cursor & ChatGPT with our MCP server

Back to Templates

Heatmap Grid

A GitHub-style contribution heatmap that fills in by value

Description

A labeled heatmap grid on a GitHub-style green scale. Each cell scales up and deepens from an empty near-black square through four greens in proportion to its value, and the cells reveal as a diagonal wave that sweeps across the grid, with the hottest cells picking up a soft green glow and a Less to More legend keying the scale.

Provide the values as the DATA matrix of rows on a 0 to 1 scale, aligned to the ROW_LABELS and COL_LABELS arrays; the cells interpolate through the GITHUB_LEVELS color ramp, which you can swap for any palette. CELL and GAP set the density and DIAG_STAGGER and CELL_REVEAL set the wave speed. Color mixing and cell reveal are pure interpolate() over the frame, so the grid is deterministic and lands on a fully colored state. Use it for contribution calendars, cohort retention grids, and usage by time of day.

React Video Editor

Want new Video Templates in your inbox?

We add new Remotion templates regularly. Subscribe and we'll email you when fresh ones land. No spam, just the drops.

Heatmap Grid | Free Remotion Templates