§12-03Engagement
レベル / XP
経験値の蓄積とレベルをバーで示す。
継続的な利用に段階的な達成感を与える。学習や習慣化のサービスで、進歩が見えにくく続かない問題に効く。
実装のポイント
レベルと現レベル内の進捗は合計 XP から導出し、別 state で持たない。レベルアップ時はバーを一度満タンにしてから 0 に戻すとまたいだことが伝わる。
- 特徴
- 状態管理
- アニメーション
- デモで使っているもの
- motion
- shadcn/ui
- lucide-react
- ソース
- xp-bar.tsx