KQ-723 · HEAT/TILES

Heat Tiles

A grid of asset tiles coloured by percent change: a success layer and a danger layer sit under each tile's text and their opacities tween on the move ease, so a tile warms as a gain grows, cools as it fades, and cross-fades on a sign flip. Pressing a tile opens it in place — it spans two columns and two rows while the rest of the grid re-lays around it with layout on glide, dense-packed so no hole opens — and reveals the name, price, a day sparkline and the high and low. Tiles are buttons with a roving tabindex: arrows move, Home and End jump, Enter and Space toggle, Escape closes.

KQ-723 · HEAT/TILES

Basinworks board

8 tiles · 0 ticks · warmest BSN +3.30% · none open

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/heat-tiles

Props

assets: HeatAsset[]; default —; The board: id, symbol, name, price, previousClose and an optional history for the open tile's sparkline. Changing a price re-tints its tile.
columns: number; default 4; Tiles per row; an open tile spans two columns and two rows.
expanded / defaultExpanded: string | null; default null; Controlled or initial open tile id.
onExpandedChange: (id: string | null) => void; default —; Fires from the press or key that opened or closed a tile.
scale: number; default 3; Percent change at which a tile's tint saturates.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Prints the open tile's price, high and low. The default pins an explicit locale so server and client agree.
label: string; default "Market heat"; Names the grid for assistive technology and prints above it.

Prop	Type	Default	Description
assets	HeatAsset[]	—	The board: id, symbol, name, price, previousClose and an optional history for the open tile's sparkline. Changing a price re-tints its tile.
columns	number	4	Tiles per row; an open tile spans two columns and two rows.
expanded / defaultExpanded	string \| null	null	Controlled or initial open tile id.
onExpandedChange	(id: string \| null) => void	—	Fires from the press or key that opened or closed a tile.
scale	number	3	Percent change at which a tile's tint saturates.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Prints the open tile's price, high and low. The default pins an explicit locale so server and client agree.
label	string	"Market heat"	Names the grid for assistive technology and prints above it.