KQ-150 · MATRIX/RISE

Matrix Rise

A heat grid that stands up into a bar city — toggle it and every cell extrudes into an isometric bar whose height tracks its value, the field rising in a diagonal cascade; toggle back and it lies flat as a heatmap again.

KQ-150 · MATRIX/RISE

LOAD MATRIX · 6x6

KQ-150

A 6 by 6 load matrix, values from 18.0 to 65.6. Currently shown as a flat heat grid.

VIEW · GRID

Flattened

VIEW · HEAT GRID

Toggle to raise the grid into a city of bars.

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/matrix-rise

Props

PropTypeDefaultDescription
datanumber[][]The value matrix; drives both color and bar height.
rowLabels / colLabelsstring[]Optional axis labels.
risen / defaultRisenbooleanControlled or initial raised state.
onToggle(risen) => voidFires the new state when the grid is toggled.