KQ-628 · DEPTH/MOUND

Depth Mound

Liquidity as terrain. Bids pile up leftward from an anchored mid line and asks rightward, each column as tall as the cumulative size out to its price, and a new book re-grows them on glide delayed by cascade outward from the mid, with a flash on every level that actually changed. The plate is a slider: a pointer snaps the crosshair to the nearest column, Left and Right step one level, Home and End jump to the deepest bid and ask, Escape clears it, and the cumulative figure eases on flick from a motion value.

KQ-628 · DEPTH/MOUND

FRN

24.1024.3024.50

FRN order book, Mid 24.30, spread 0.04
Side	Price	Size	Cumulative
Bid	24.10	1,357	8,812
Bid	24.12	1,433	7,455
Bid	24.14	916	6,022
Bid	24.16	733	5,106
Bid	24.18	826	4,373
Bid	24.20	763	3,547
Bid	24.22	693	2,784
Bid	24.24	765	2,091
Bid	24.26	747	1,326
Bid	24.28	579	579
Ask	24.32	609	609
Ask	24.34	456	1,065
Ask	24.36	646	1,711
Ask	24.38	757	2,468
Ask	24.40	832	3,300
Ask	24.42	885	4,185
Ask	24.44	1,234	5,419
Ask	24.46	1,172	6,591
Ask	24.48	1,290	7,881
Ask	24.50	1,497	9,378

FRN · spread 0.04 · bid 8812 / ask 9378

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/depth-mound

Props

bids: DepthLevel[]; default —; Bid levels, best first, descending price.
asks: DepthLevel[]; default —; Ask levels, best first, ascending price.
height: number; default 160; Plot height in px; the width is fluid.
format: (value: number) => string; default USD, 0dp; Formats the notional in the accessible reading.
formatPrice: (value: number) => string; default 2dp; Formats prices.
formatSize: (value: number) => string; default grouped integer; Formats sizes and cumulative depth.
symbol: string; default —; Instrument code beside the mid.
label: string; default "Depth"; Accessible name for the plot.
onActiveChange: (reading: DepthReading | null) => void; default —; Fires from the pointer or key that moved the crosshair.

Prop	Type	Default	Description
bids	DepthLevel[]	—	Bid levels, best first, descending price.
asks	DepthLevel[]	—	Ask levels, best first, ascending price.
height	number	160	Plot height in px; the width is fluid.
format	(value: number) => string	USD, 0dp	Formats the notional in the accessible reading.
formatPrice	(value: number) => string	2dp	Formats prices.
formatSize	(value: number) => string	grouped integer	Formats sizes and cumulative depth.
symbol	string	—	Instrument code beside the mid.
label	string	"Depth"	Accessible name for the plot.
onActiveChange	(reading: DepthReading \| null) => void	—	Fires from the pointer or key that moved the crosshair.