State design · Offline-first interaction · 2026
A timer should remember the work, even when the tab forgets.
Flowtime is a private-by-default focus timer that adapts breaks to the length of a session. The harder part is continuity: keeping time accurate through sleeping tabs, browser closures, and interrupted sessions.
- Project
- Flowtime
- Role
- Independent product, interaction design, frontend engineering, and accessibility
- Stack
- Next.js · TypeScript · localStorage · Service Worker · Vitest
- 6
- explicit timer states
- ÷3–8
- break ratios
- 52 wk
- focus heatmap
- Local
- data ownership
01 / Time from truth
Calculate elapsed time from timestamps, not ticks.
A long-running interval slowly drifts and browsers throttle background tabs. Flowtime stores the session’s absolute start time and derives elapsed time from the difference to the current timestamp on every tick.
The display can pause, the tab can sleep, and the calculation still returns to the correct duration. That small architectural choice protects the central promise of the product.
- Absolute start time
- Derived elapsed time
- Background-safe
- No server clock
02 / Recovery is a state
Closing the tab should open a recovery choice.
An active session is stored locally with its start time, task, and tags. When Flowtime opens again, it detects the unfinished state and offers a deliberate recovery path instead of silently resuming or discarding the work.
The timer moves through explicit stopped, running, results, break, paused-break, and complete states. Each transition has a bounded action, which keeps edge cases understandable in code and in the interface.
- Resume
- End honestly
- Skip break
- Start again
03 / Keep it personal
Keep the history on the device.
Completed sessions, tags, notes, settings, and the active session remain in localStorage. A service worker keeps the app shell available offline, while CSV export gives the person a route out of the product.
Keyboard shortcuts, live timer announcements, visible focus, reduced motion, labelled charts, and recoverable dialogs are treated as interaction requirements rather than a final audit pass.
- Offline shell
- CSV export
- Keyboard control
- Screen-reader state
What stayed with me