Fun • 2026
Background Music for Foreground Thinking
Overview
A quiet, unhurried presence that fills a space without demanding anything back.
Some people work better when there's something in the room with them. Boba.cafe is for those people. Open it and it's just there. Nothing to configure, no algorithm optimizing for your attention, no ads interrupting the mood. The digital equivalent of a coffee shop window seat: something to look at when you glance up, something to hear when the silence gets too loud, and something that stays out of your way the rest of the time.
Product Design
One interaction: open it. Every decision was about protecting that simplicity.
Systems Engineering
A full-stack media player with seamless audio transitions, responsive image delivery, and a preloading pipeline that removes the seams.
Content
550+ images and 100+ music tracks, all conceived and produced for the project by me.
Problem
The Wrong Tools for the Right Job
Concentration isn't binary. Most people don't need silence — they need texture. The job isn't "play music." It's "make this space feel like somewhere I can think."
A massive audience already uses the wrong tools for this. Nearly 80% of adults listen to music while working,[1] and those people are largely using Spotify or YouTube — platforms that extract a measurable cognitive tax through interruptions. The 23-minute refocus penalty[2] isn't abstract: it's the lived experience of 400+ million free-tier Spotify users enduring ads every 15 minutes while trying to concentrate.
Structural shifts made this urgent: permanent remote work for 32+ million Americans,[3] lo-fi search interest up 345% in five years,[4] burnout at all-time highs. The audience exists. The wrong tools are serving it.
Boba.cafe is hired for one thing: fill the room without entering it.
Solution
Open it. That's it.
You open a tab and the room changes. That's the whole product. No account, no setup, no tutorial. Pick a genre if you want — or don't. The player starts immediately, images drift, music plays, and the interface gets out of the way. The ambient feeling you were looking for is just there, thirty seconds before you would've spent twenty minutes trying to find the right playlist.
The measure of success isn't engagement. It's the opposite — how long someone can use Boba.cafe without thinking about it.
Design Decisions
Hard choices, explicit tradeoffs.
Every feature that didn't ship was a decision. Here are the ones that shaped what Boba.cafe is — and what it isn't.
The best interface is no interface.
The entire product is one screen. No onboarding, no settings panel, no "what kind of mood are you in?" The assumption is that you came here to stop making decisions, not make more of them.
Controls appear when you need them and disappear when you don't. Nothing competes with the content for attention. Every element that wasn't the music or the image was a candidate for removal. If a feature asked to be noticed, it didn't ship.
Seamless isn't a feature — it's the whole job.
Ambient media lives and dies by continuity. A gap between tracks, a flash between images — either one is a tap on the shoulder: hey, remember you're staring at a screen. The whole point is that you forget.
Dual HTMLAudioElement pipeline — Element B preloads while A plays, enabling seamless handoff
The audio layer runs two HTMLAudioElement instances in parallel: one playing, one preloading the next track. But the engineering constraint that shaped this goes deeper than avoiding an audible gap.
When a track ends in a background tab, Chrome's autoplay policy resets. A new .play() call — even one triggered directly by the ended event — is treated as an unsolicited autoplay attempt. Chrome blocks it. The music stops and doesn't come back until the user returns to the tab and interacts with the page.
The only way around it is to never let Chrome see a gap. The prebuffer system doesn't just load the next track early — it has to start playing it before the current one finishes. A near-end detector watches the timeupdate event and fires the handoff several seconds early, while audio is still actively playing and Chrome still considers the session live. Let that chain break once and you've lost the tab.
The dual-element pipeline isn't an optimization. It's the only architecture that works. Images crossfade rather than cut for the same reason — continuity isn't decorative. It's what makes the experience feel like a place rather than a player.
The experience is only as good as the library behind it.
A seamless player with ten tracks gets old fast. Boba.cafe ships with 550+ images and 100+ music tracks — all conceived and produced for the project by me — enough variety that the ambient feeling stays fresh without tipping into noticeable rotation.
The UI disappears. The content has to hold up on its own.
Portrait or landscape. Device decides.
A vertical image on a horizontal screen fills wrong. A landscape photo on a phone feels like a mistake. Either one reminds you you're looking at a website.
The API serves images filtered by aspect ratio based on the device viewport — portrait assets to portrait screens, landscape to landscape. The image always looks like it was chosen for the device, because it was.
Out of sight — but never out of sound.
Boba.cafe is almost always a background tab. That's not an edge case to handle; it's the primary use case. Someone puts it on, moves to their work, and leaves it running. The audio has to keep going.
The engineering problem wasn't pausing things in the background. It was keeping them alive. Chrome treats background tabs as second-class citizens: JavaScript timers slow down, autoplay permissions tighten, and any lapse in active audio playback risks losing the right to resume it. The Page Visibility API became less of an optimization tool and more of a survival signal — a way for the pipeline to know when it was in hostile territory and adapt accordingly.
Image cycling pauses when the tab is hidden, because cycling images nobody is looking at is wasteful and earns nothing. But the audio never stops. When you return to the tab, the visuals catch up. The music was never gone.
This was the hardest part of the project to get right, and the part most invisible to the user when it works. That's usually how it goes.
Reflection
What I learned
Subtraction is a design skill.
Genre switching is the one dial. Everything else was removed — no queue to manage, no account, no settings buried in a modal. Each thing removed was another way the product could've asked for attention. The job was to fill the room without entering it. That's a brief for removal, not addition.
"No ads, ever" wasn't a constraint. It was a design brief.
One rule answered a hundred product questions before they got asked. If you can't interrupt the experience to monetize it, the experience becomes the only thing that matters. Constraint as clarity.
Designing for the background tab is designing for the real use case.
Most tools assume they're the focus. Boba.cafe assumes it isn't. That inversion shapes every decision — from preloading strategy to visibility handling to why there's no push notification asking you to come back.
Sources
[1] Adults listening to music while working: Northeastern University, 2025 ↩
[2] 23-minute refocus penalty: Gloria Mark, UC Irvine ↩
[3] Remote worker count: WFH Research / Nick Bloom, 2025 ↩
[4] Lo-fi search growth: MajorLabl, 2024 ↩