ns-ui / loud
A payment/deploy/publish success moment built on supercooling: pending is a canvas particle field in faint restless Brownian shimmer, and the instant it resolves a nucleation flash fires at the exact point pressed and dendritic crystal growth races outward, freezing the shimmer solid in ~700ms under a now-calm confirmation line.
Use when the pending-to-done transition itself needs to carry weight — a payment, deploy, or publish confirming, where holding visible tension (a canvas particle field in restless Brownian shimmer) and releasing it all at once from the exact point pressed (nucleation flash, dendritic crystal racing outward, shimmer locking solid) IS the feedback; pick confirm-hold-ink instead for a press-and-hold gesture with no async wait to dramatize, or switch-frost for an ice-themed persistent toggle rather than a one-shot success moment.
Install
npx shadcn add https://design.helpmarq.comns-ui / success-nucleation
Secure checkout
One-time confirmation — held in a supercooled state until you act.
| Prop | Type | Default | Description |
|---|---|---|---|
| label? | string | — | idle button label. default "Confirm payment" |
| pendingLabel? | string | — | button label while the action is in flight. default "Confirming…" |
| confirmedText? | string | — | the calm payoff line, also the aria-live=assertive announcement text. default "Payment confirmed" |
| onConfirm? | () => void | Promise<void> | — | called on trigger; return a Promise and success plays on resolve (or reverts to idle on reject) |
| pendingMs? | number | — | fallback simulated pending duration when onConfirm is absent or synchronous. default 900 |
| growMs? | number | — | crystal growth duration in ms. default 700 |
| className? | string | — | — |