KQ-714 · STREAK/SAVER
Streak Saver
A weekly saving streak as a row of cells, oldest on the left and the current week on the right. Saving lights the current cell — the fill lands from 0.6× on snap, one crisp overshoot, a light switching on — while a halo blooms and fades on a tween and the streak count rolls to the new run on the same beat. When the calendar advances the oldest cell leaves on the exit ease, the rest glide left one column as a layout move, a new outlined cell arrives from the right, and a week left unsaved dims to a hatched cell on a colour tween: nothing celebrates a miss. The cells are a labelled list that reads as sentences, the Save button stays focusable once pressed, and a status line announces the run once per change.
- Week of Jun 15, saved
- Week of Jun 22, saved
- Week of Jun 29, missed
- Week of Jul 6, saved
- Week of Jul 13, missed
- Week of Jul 20, saved
- Week of Jul 27, saved
- Week of Aug 3, saved
- Week of Aug 10, saved
- Week of Aug 17, saved
- Week of Aug 24, saved
- Week of Aug 31, this week, not yet saved
6 in a row · This week open · $225.00 put away
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/streak-saver
Props
- weeks
- StreakWeek[]
- default —
- Oldest first; the last entry is the current week. Each carries an id, a date label and whether it was saved: a past week unsaved is missed, the current week unsaved is open.
- amount
- number
- default —
- The weekly contribution, printed on the Save button and used for the total put away.
- onSave
- (weekId: string) => void
- default —
- Fires from the Save press for the current week.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Formats every amount. The default pins an explicit locale so server and client agree.
- label
- string
- default —
- Names the saver; printed as the heading and read as the list's label.
| Prop | Type | Default | Description |
|---|---|---|---|
| weeks | StreakWeek[] | — | Oldest first; the last entry is the current week. Each carries an id, a date label and whether it was saved: a past week unsaved is missed, the current week unsaved is open. |
| amount | number | — | The weekly contribution, printed on the Save button and used for the total put away. |
| onSave | (weekId: string) => void | — | Fires from the Save press for the current week. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Formats every amount. The default pins an explicit locale so server and client agree. |
| label | string | — | Names the saver; printed as the heading and read as the list's label. |