KQ-600 · BALANCE/MASK

Balance Mask

A balance drawn as bullets until you hold it: the two layers share one grid cell and clip against each other, so holding drives the boundary across on glide and releasing runs it back on the exit ease, with the mono face keeping both strings exactly the same width. Space or Enter toggles instead of holding and cross-fades rather than wipes — no travel where there was no gesture — while Escape hides and a released pointer anywhere on the page re-masks the figure. The eye's slash draws on flick.

KQ-600 · BALANCE/MASK

Coldbrook current····4193

Available balance

Balance hidden · hold or press space

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/balance-mask

Props

amount: number; default —; The figure behind the mask.
label: string; default —; What the figure is; sits above it and names the control.
format: (amount: number) => string; default en-US currency; Renders the figure; the mask is built from its output, so only digits become bullets.
revealed / defaultRevealed: boolean; default false; Controlled or initial reveal, for a page-wide hide-balances switch.
onRevealedChange: (revealed: boolean) => void; default —; Fires from the pointer, key or blur that changed it.
holdToReveal: boolean; default true; False makes the pointer toggle, and fade, instead of hold.
maskChar: string; default •; The character every digit becomes.
hint: React.ReactNode; default Hold to show; One short line under the figure; dims while the figure is shown.

Prop	Type	Default	Description
amount	number	—	The figure behind the mask.
label	string	—	What the figure is; sits above it and names the control.
format	(amount: number) => string	en-US currency	Renders the figure; the mask is built from its output, so only digits become bullets.
revealed / defaultRevealed	boolean	false	Controlled or initial reveal, for a page-wide hide-balances switch.
onRevealedChange	(revealed: boolean) => void	—	Fires from the pointer, key or blur that changed it.
holdToReveal	boolean	true	False makes the pointer toggle, and fade, instead of hold.
maskChar	string	•	The character every digit becomes.
hint	React.ReactNode	Hold to show	One short line under the figure; dims while the figure is shown.