Heat Grid
Seven days by N weeks of cells in five quiet bone levels.
$149 once · every Pro piece
Point, drag a finger or use the arrow keys to light one cell: it grows a little while the panel reads its day and value; press and drag, or Shift with the arrows, to select a rectangle whose sum the readout rolls to. Hover a level in the legend and only its cells stay. Cells enter as a column wave on the shared reveal curve. Options: a dot calendar or squircle cells, the blackbody heat ramp instead of bone, a texture per level shared with the legend, a gradient legend with a caret for the hovered cell, quarter separators that fade at both ends, faded weekends, an opt-in row and column highlight, and loading and empty states.
Install
npx shadcn@latest add @obsyde/heat-gridNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { HeatGrid } from '@/components/obsyde/ember/heat-grid/HeatGrid';
export function Example() {
return (
<HeatGrid />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/heat-grid/HeatGrid.tsxcomponentember/heat-grid/heat-grid.cssstylesember/heat-grid/heat-grid-demo.cssstylesember/heat-grid/HeatGridDemo.tsxdemoember/viz-kit/viz-kit.csssharedember/viz-kit/state-messages.tsxsharedember/viz-kit/Tooltip.tsxsharedember/viz-kit/focus.tssharedember/viz-kit/patterns.tsxsharedember/viz-kit/roll.tssharedember/shared/rolling-number.csssharedember/shared/spring.tssharedember/shared/accent.tssharedember/viz-kit/scale.tssharedember/viz-kit/motion.tssharedember/viz-kit/chart.tsxsharedember/shared/ember.csssharedember/viz-kit/touch.tssharedember/viz-kit/keyboard.tssharedember/viz-kit/size.tssharedember/viz-kit/Legend.tsxshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
weeksWeeks | number | 26 |
densityDensity | number | 0.85 |
cellCell | 'square' | 'dot' | 'squircle' | 'square' |
palettePalette | 'mono' | 'heat' | 'mono' |
patternsLevel patterns | boolean | false |
legendLegend | 'levels' | 'gradient' | 'none' | 'levels' |
tooltipTooltip | 'panel' | 'none' | 'panel' |
crosshairRow & column | boolean | false |
separatorsSeparators | boolean | false |
weekendsWeekends | 'normal' | 'faded' | 'normal' |
statusStatus | 'ready' | 'loading' | 'empty' | 'ready' |
unitUnit | string | — |
seedSeed | number | 1 |