KQ-715 · AUTO/SWEEP

Auto Sweep

A month-end sweep: two tiles, Spending and Savings, and above them a lane where a dashed arc runs from one figure to the other. Pressing Sweep lifts the leftover out of the spending tile as a pill that travels the arc on glide — the curve is closed-form, so the pill's position is one progress value and the trail draws itself just ahead of it — while the spending figure rolls down on snap the moment the pill leaves and the savings figure rolls up only when it lands, dropping the last nudge on recoil as the tile's wash flashes once. Any increase in savings mounts the same flight, so a parent that sweeps on its own schedule animates the same way. The figures are a definition list, the button's name says what it sweeps, and a status line announces the landing.

KQ-715 · AUTO/SWEEP

Month-end sweepMonth end · 30 Sep

Spending: $1,084.20; Keep $1,000.00
Savings: $3,410.00; Leftover $84.20

Above the floor, ready to go

Leftover $84.20 · Savings $3,410.00

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/auto-sweep

Props

balance: number; default —; The spending balance. Rolls down when a sweep leaves.
savings: number; default —; The savings balance. An increase mounts a flight carrying the difference; the figure rolls when it lands.
keep: number; default 0; The floor left in spending; the leftover is balance minus keep, never below zero.
period: string; default —; The sweep's occasion, printed under the heading ("Month end · 30 Sep").
onSweep: (amount: number) => void; default —; Fires from the Sweep press with the leftover; move the money here.
onSettle: (amount: number) => void; default —; Fires when the pill lands in savings.
format: (value: number) => string; default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }); Formats every amount. The default pins an explicit locale so server and client agree.
label: string; default —; Names the control; printed as the heading and read as the group's label.

Prop	Type	Default	Description
balance	number	—	The spending balance. Rolls down when a sweep leaves.
savings	number	—	The savings balance. An increase mounts a flight carrying the difference; the figure rolls when it lands.
keep	number	0	The floor left in spending; the leftover is balance minus keep, never below zero.
period	string	—	The sweep's occasion, printed under the heading ("Month end · 30 Sep").
onSweep	(amount: number) => void	—	Fires from the Sweep press with the leftover; move the money here.
onSettle	(amount: number) => void	—	Fires when the pill lands in savings.
format	(value: number) => string	Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })	Formats every amount. The default pins an explicit locale so server and client agree.
label	string	—	Names the control; printed as the heading and read as the group's label.