KQ-774 · CONFIDENCE/BAND

Confidence Band

Every claim wears its confidence as a band under its words, sized by the value and coloured by tone. Bands fill left to right on glide in a cascade across the claims, and once the last settles every low-confidence band pulses once on a slow three-keyframe alpha tween; hovering or focusing a claim rolls the readout's digits to its value on snap while the other bands dim, and pressing holds the reading. Each claim takes the button role with an always-present description, so Tab reaches each in reading order and Enter or Space holds.

KQ-774 · CONFIDENCE/BAND

The Coldbrook ferry runs a reduced Sunday timetable of four crossings. The first crossing leaves the north pier at 08:40. This Sunday's crossings are likely to be cancelled for weather. Tickets are sold on board and at the pier kiosk.

4 claims · 1 low · hover a claim

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/confidence-band

Props

claims: BandClaim[]; default —; Claims in reading order: id, text and a confidence from 0 to 1.
lowAt: number; default 0.5; Below this a band reads danger and pulses once on load.
highAt: number; default 0.8; At or above this a band reads success; between the two it reads warn.
format: (confidence: number) => string; default percent; Formats a confidence for the readout and the claim descriptions.
pulseLow: boolean; default true; Whether low bands pulse once after the mount cascade.
onReadChange: (id: string | null) => void; default —; Fires when the claim being read changes, by hover, focus or a hold.
onHoldChange: (id: string | null) => void; default —; Fires from the press that held or released a claim.
label: string; default —; Names the answer region for assistive technology.

Prop	Type	Default	Description
claims	BandClaim[]	—	Claims in reading order: id, text and a confidence from 0 to 1.
lowAt	number	0.5	Below this a band reads danger and pulses once on load.
highAt	number	0.8	At or above this a band reads success; between the two it reads warn.
format	(confidence: number) => string	percent	Formats a confidence for the readout and the claim descriptions.
pulseLow	boolean	true	Whether low bands pulse once after the mount cascade.
onReadChange	(id: string \| null) => void	—	Fires when the claim being read changes, by hover, focus or a hold.
onHoldChange	(id: string \| null) => void	—	Fires from the press that held or released a claim.
label	string	—	Names the answer region for assistive technology.