Send money
Sending money from a keypad, the way mobile-money and wallet apps do it: digits roll in, the commas make room, an amount over your balance is refused with a shake, and Send becomes a spinner and then a check.
£0
Balance £12,480.00
Things to try
- Tap in an amount. Each digit rolls in from below and the commas make room as the number grows. A long amount shrinks to fit. On a computer you can also click the amount and type.
- Go over your balance. The digit that would take you past it is refused with a shake, rather than accepted and flagged later.
- Send. The arrow turns into a spinner, then a check.
Install
npx shadcn@latest add https://your-docs-site/r/send-money.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Arrow, spinner, check. The Send button's icon is one
Remold.Iconreshaped from icon to icon, so each state grows out of the last. - The rolling digits, the shake and the fit-to-width are Motion.
The people are made up. The avatar is an illustration from DiceBear.
Send a message
Sending a chat message: the mic turns into a send arrow as you type, your message rises into the thread, the read receipt slides down to it and their reply takes the typing bubble's place.
Streak
The celebration learning apps show when you finish today's lesson: a grey ember grows into a full flame, sparks burst out, the day count rolls up and today's dot fills in.