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.
day streak
Finish today's lesson to keep your streak.
- M
- T
- W
- T
- F
- S
- S
Things to try
- Keep the streak. The grey ember reshapes into a full flame and catches colour.
- Watch the burst. Sparks fly out of the flame as it lands, and the day count rolls up by one.
- Look at the week. Today's dot fills in alongside the days you've already kept.
Install
npx shadcn@latest add https://your-docs-site/r/streak.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @remold-ui/react motionHow it works
- The ember grows into the flame. The flame is one path reshaped with
Remold.Icon, so the ember genuinely becomes the flame rather than one icon swapping for another. - The sparks, the colour and the rolling count are Motion.
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.
Task list
Issues grouped by status, with Done folded. A completed issue's ID travels into the folded row, and opening Done spreads them back out into rows.