Ripple Heatmap

anime.js

A weekday by hour grid. Press a cell and the grid ripples out from it.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Press a cell

Install

$ npx shadcn@latest add https://spotcheckui.com/r/ripple-heatmap.json

Also installs animejs.

Usage

import { RippleHeatmap } from "@/components/spotcheck/ripple-heatmap"

<RippleHeatmap
  label="Requests per hour by weekday"
  values={perHour}
  rowLabels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
  cellLabel={(cell) => `${cell.value} at ${cell.column}:00`}
  onPick={setFocus}
/>

values runs from 0 to 1, row by row. The whole grid is one tab stop, and arrow keys move inside it.

Props

values * Requirednumber[]Default —One value from 0 to 1 per cell, row by row.
label * RequiredstringDefault —Describes the grid for screen readers.
colsnumberDefault 24
rowLabels * Requiredstring[]Default —One label per row, printed at the left.
cellLabel(cell: HeatCell) => stringDefault —Names a cell for screen readers.
onPick(cell: HeatCell) => voidDefault —Runs when a cell is pressed.
classNamestringDefault —

Keyboard

← → ↑ ↓	Move between cells
Home	Start of the row
End	End of the row
Enter	Pick the cell

Reduced motion

Cells stay still, and picking one still works.