Kinetiq

KQ-670 · LIQUIDITY/RANGE

Liquidity Range

A price axis with the pool's depth drawn as a procedural curve and two handles that set the earning band; the curve is drawn twice, dim across the axis and bright inside a window sized to the band, so the earning stretch is the same curve lit. Dragging tracks the pointer 1:1 with no spring, while a keyboard step glides the band on snap and the covered depth counts from a motion value. The price marker breathes while it is inside the band and goes still — and says so in words — once it is not.

KQ-670 · LIQUIDITY/RANGE
Basinworks Exchange47%depth
9.5015.50
11.80–13.10In range
Price 12.42 is inside the band.47 percent of pool depth is covered by the band.
  • 9.50: 9
  • 9.63: 9
  • 9.76: 9
  • 9.88: 9
  • 10.01: 9
  • 10.14: 9
  • 10.27: 10
  • 10.39: 10
  • 10.52: 11
  • 10.65: 12
  • 10.78: 15
  • 10.90: 18
  • 11.03: 24
  • 11.16: 33
  • 11.29: 44
  • 11.41: 59
  • 11.54: 76
  • 11.67: 95
  • 11.80: 115
  • 11.93: 132
  • 12.05: 146
  • 12.18: 155
  • 12.31: 158
  • 12.44: 155
  • 12.56: 147
  • 12.69: 137
  • 12.82: 125
  • 12.95: 113
  • 13.07: 103
  • 13.20: 94
  • 13.33: 87
  • 13.46: 82
  • 13.59: 77
  • 13.71: 72
  • 13.84: 68
  • 13.97: 63
  • 14.10: 58
  • 14.22: 53
  • 14.35: 48
  • 14.48: 43
  • 14.61: 38
  • 14.73: 33
  • 14.86: 29
  • 14.99: 25
  • 15.12: 21
  • 15.24: 19
  • 15.37: 16
  • 15.50: 15

Band 11.80 – 13.10 · price 12.42 in range · depth 47%

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/liquidity-range

Props

bins
LiquidityBin[]
default —
{ price, depth } samples in ascending price; their ends set the axis.
price
number
default —
The market price, drawn as the marker and compared against the band.
value / defaultValue
[number, number]
default the whole axis
Controlled or initial band, low then high.
onValueChange
(band: [number, number]) => void
default —
Fires on every drag frame and every keyboard step.
format
(value: number) => string
default Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
Formats every price, in the readouts and in aria-valuetext.
step
number
default axis span ÷ 200
Arrow-key step; Shift and the Page keys multiply it by ten.
unit
string
default —
What a price is quoted in, e.g. "FRN per BSN"; spoken in aria-valuetext.
height
number
default 96
Plot height in px; the width is fluid and measured.
label
React.ReactNode
default —
Visible heading; omit it and pass aria-label.