Payment status
A payment's status as one drawing: the card becomes a lock while the bank confirms, then a receipt when it's paid, or the card again with a warning when it's declined.
Pay €48.00Visa ending 4242
Things to try
- Watch it play. The card floats, becomes a lock whose shackle clicks shut, comes back with a warning when the bank says no, then goes through and becomes a receipt.
- Pick a status. It stops playing and jumps there. Go from Card to Paid and the card reshapes straight into the receipt.
Install
npx shadcn@latest add https://your-docs-site/r/payment-status.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @remold-ui/reactHow it works
- Status in, drawing out. Pass
statusascard,processing,declinedorpaid, straight from your payment's state, along with theamount, thecardand the receiptemail. - Layers that reshape. The card, the lock and the receipt are the same
Remold.Iconlayers drawn differently, so each change morphs instead of swapping. The accent turns red for a refusal and green once it's paid. - Motion that says what's happening. The shackle clicks while the bank confirms, and the card shakes its head when it's declined. Both are plain CSS and hold still while the drawing reshapes.
The amount, the card and the email are made up.
Order tracker
A food order told like a short film: each stage plays live (the lid lifts off the steaming pot, the bag hops, the scooter's wheels spin down the road, the front door opens), then the drawing reshapes into the next stage and that one comes alive.
Inbox triage
An inbox where archived and deleted mail breaks into dust and pours into its tab, with multi-select, swipe, hover actions and an undo toast.