KQ-610 · SETTLE/PULSE
Settle Pulse
Waiting, the pill breathes: it scales between two keyframes on drift with repeatType mirror while a halo swells in opposition behind it, and the breath rests while the tab is hidden. When the status settles the breathing returns to rest on drift and the pill widens on snap to the measured width its new word and settled sum need, clipping them so they are revealed as the surface arrives. The tick then stamps on recoil with the check drawing on flick; a returned transfer takes the same widening and no bounce, because a failure never celebrates.
KQ-610 · SETTLE/PULSE
Coldbrook BankWaylight Pay
Transfer of 240.00, pending on Coldbrook BankWaylight Pay 240.00 pending on coldbrook bank
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/settle-pulse
Props
- status
- "pending" | "settled" | "returned"
- default pending
- Which state the pill shows; changing it runs the settle.
- amount
- number
- default —
- Optional sum; it joins the pill once the network settles or returns it, which is what the pill widens to fit.
- format
- (value: number) => string
- default Intl.NumberFormat, two decimals
- Formats the amount.
- labels
- Partial<Record<SettleStatus, string>>
- default Pending / Settled / Returned
- Overrides the word for any state.
- network
- string
- default —
- Who has to say so — printed under the pill and named in the announcement.
- size
- "sm" | "md"
- default md
- Pill height: h-7 or h-9, so it keeps the row height it sits in.
- onSettled
- (status: SettleStatus) => void
- default —
- Fires once the stamp has landed, from the animation's own completion.
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "pending" | "settled" | "returned" | pending | Which state the pill shows; changing it runs the settle. |
| amount | number | — | Optional sum; it joins the pill once the network settles or returns it, which is what the pill widens to fit. |
| format | (value: number) => string | Intl.NumberFormat, two decimals | Formats the amount. |
| labels | Partial<Record<SettleStatus, string>> | Pending / Settled / Returned | Overrides the word for any state. |
| network | string | — | Who has to say so — printed under the pill and named in the announcement. |
| size | "sm" | "md" | md | Pill height: h-7 or h-9, so it keeps the row height it sits in. |
| onSettled | (status: SettleStatus) => void | — | Fires once the stamp has landed, from the animation's own completion. |