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.

KQ-714 · STREAK/SAVER
Rainy dayBest 6 · $225.00 put away
in a row
  1. Week of Jun 15, saved
  2. Week of Jun 22, saved
  3. Week of Jun 29, missed
  4. Week of Jul 6, saved
  5. Week of Jul 13, missed
  6. Week of Jul 20, saved
  7. Week of Jul 27, saved
  8. Week of Aug 3, saved
  9. Week of Aug 10, saved
  10. Week of Aug 17, saved
  11. Week of Aug 24, saved
  12. Week of Aug 31, this week, not yet saved
Save to keep the run
6 weeks in a row, 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.