KQ-795 · BUDGET/RING

Budget Ring

Two nested rings, the outer for time and the inner for cost; each arc is what remains and drains clockwise on glide with no overshoot as the host reports spend. Each ring has its own warn threshold and the inner ring's default is the higher one, so cost turns warn first; a crossing into warn or spent flashes a halo once on a tween. The instrument has no controls of its own; its two meters read their remainder in words.

KQ-795 · BUDGET/RING
Ledger audit0:00 · 0.00 cr
Time
2:00of 2:00
Cost
3.00 crof 3.00 cr

Idle · press run

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/budget-ring

Props

timeBudget
number
default
Seconds allowed.
timeUsed
number
default
Seconds spent; clamped to the budget for the arc.
costBudget
number
default
Cost allowed, in the host's unit.
costUsed
number
default
Cost spent.
format
(cost: number) => string
default two decimals followed by " cr"
Prints a cost.
warnAt
{ time?: number; cost?: number }
default { time: 0.2, cost: 0.35 }
Remaining fraction at which each ring warns.
label
string
default
Names the instrument.