Skip to content

Menu card: odometer-style digit roll on value updates #52

Description

@tangentlin

Motivation

The menu card (src/menu-card/card.ts) currently snaps straight to new values when its data signature changes. A small "slot machine" digit-roll animation on update would give the card a more alive, tactile feel without touching its information density.

Proposal

When today/30d figures change between renders, animate the digits rolling from the old value to the new one (each digit column ticks independently) instead of an instant swap.

Feasibility notes

  • card.ts is a pure Canvas 2D draw function invoked by MenuCardRenderer and cached by data signature (TrayManager.refreshCard). True animation requires a short-lived requestAnimationFrame loop in the hidden card window while a transition is in flight, then handing the final PNG frame back to the tray — a scoped change to menu-card-window.ts's render contract (currently one-shot draw → PNG).
  • Menu items only display a static bitmap per open, so the practical animation window is: kick off the roll when new data arrives, capture a few interim frames, and let it settle before the menu is next opened (or accept it's only visible if the menu happens to be open across a refresh).

Acceptance criteria

  • Digit-roll transition plays when todayCost/cost30d/etc. change from a previously-rendered value.
  • No animation (instant render) on first paint or when values are unchanged, matching current caching behavior.
  • No added flicker/redraw cost when the menu is closed.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions