< back to projects

drift

pomodoro timer with tasks and music

next.jstypescriptweb audio apispotify embed
view live site ↗drift screenshot
the idea

a timer that feels like a space, not a tool

most pomodoro timers are functional but forgettable. i wanted to build one that you'd actually enjoy having open on your screen. drift combines a focus timer with a task list, session tracking, and a spotify player, all in a single-screen dashboard. the design is intentionally warm and bold -- earthy terracotta, mustard, olive, and forest green -- because productivity tools don't have to look corporate. the goal was something you'd screenshot and share, not just use and close.

how it was built

cards as workspace

the layout is a 3-column grid of colored cards, each serving a different function. the timer card handles focus/short/long break modes with customizable durations (click the time to adjust minutes and seconds with plus/minus controls, hold to scroll fast). the task card lets you add and check off tasks for your current session with a progress bar. the total focus card tracks your accumulated deep work time. the quote card rotates through motivational quotes on each page load. the music card embeds a spotify playlist player -- you can swap playlists by pasting any spotify link. the timer completion uses the web audio api to play an alarm-style beep sequence. everything fits in one viewport with no scrolling, designed mobile-first.

next >