KQ-713 · POT/SHUFFLE

Pot Shuffle

A row of savings jars with a liquid level and a figure each. Dragging from one jar tilts it toward the pointer on glide and lifts a coin; releasing over another jar sends the coin along an arc on glide and drops it in on recoil, and only then do the levels glide and both figures roll their digits on snap. The keyboard runs the same move — Enter or Space lifts, Arrow keys walk the row, Enter or Space drops, Escape cancels — and every step is announced.

KQ-713 · POT/SHUFFLE

Fernworks savings$2,540 across 4

Drag a pot onto another, or press one, to move $50.

4 pots · $2,540 total

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/pot-shuffle

Props

pots / defaultPots: ShufflePot[]; default —; { id, name, balance }[], controlled or initial.
onPotsChange: (next: ShufflePot[]) => void; default —; Fires when a move lands, with the whole new row.
onMove: (from: string, to: string, amount: number) => void; default —; Fires alongside it with just the move.
step: number; default 50; Money moved by one drop, clamped to what the source holds.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }); Formats every figure. The default pins an explicit locale so server and client agree.
label: string; default "Pots"; Names the row.

Prop	Type	Default	Description
pots / defaultPots	ShufflePot[]	—	{ id, name, balance }[], controlled or initial.
onPotsChange	(next: ShufflePot[]) => void	—	Fires when a move lands, with the whole new row.
onMove	(from: string, to: string, amount: number) => void	—	Fires alongside it with just the move.
step	number	50	Money moved by one drop, clamped to what the source holds.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 })	Formats every figure. The default pins an explicit locale so server and client agree.
label	string	"Pots"	Names the row.