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
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
- data
- number[][]
- default —
- The value matrix; drives both color and bar height.
- rowLabels / colLabels
- string[]
- default —
- Optional axis labels.
- risen / defaultRisen
- boolean
- default —
- Controlled or initial raised state.
- onToggle
- (risen) => void
- default —
- Fires the new state when the grid is toggled.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[][] | — | The value matrix; drives both color and bar height. |
| rowLabels / colLabels | string[] | — | Optional axis labels. |
| risen / defaultRisen | boolean | — | Controlled or initial raised state. |
| onToggle | (risen) => void | — | Fires the new state when the grid is toggled. |