A game · React 18 · Vite · no backend, no persistence

A small game about choosing where your attention goes.

Presence makes distraction tangible: cards appear, ask for engagement, inflate a meaningless total, and expire. A Breathe card is always available.

I built this meditation toy to explore the pull of an interface that keeps asking for a reaction. It makes room for a different action: stop feeding the loop, let the interruptions pass, and come back to the one steady thing on the screen.

Play it ↗Source ↗

The problem

Interfaces compete for attention with counters, interruptions, and a constant invitation to react.

What changed

A playable attention loop makes those mechanics visible, while keeping a Breathe action available at all times.

Why it matters

A small interaction-design experiment in distraction, fixation, and letting go, with no progression ladder to complete.

Architecture / presenceThe design behind the outcome

An attention loop expressed through interface behavior.

A React state machine controls card lifetimes, interruptions, fixation, and the temporary calm after Breathe. There is no backend or persistent progress. The implementation details below describe the timing, state transitions, and test strategy behind that behavior.

What the game is now two live captures, nothing touched in either

Presence nine seconds in: a starfield, an accumulated significance of 0, drifting cards, an interruption titled Inner board logic, a walker with an eye, and the Breathe card in the hand

meditationgamehost.vercel.appnine seconds in, nothing touched: an Inner board logic interruption and a walker

Cards appear on their own

A permanent Breathe card is always in your hand and must remain visible and playable.
Other cards appear automatically and expire on their own after a short lifespan. steady and jittery cards stay in the row; hovering, elusive, and centralizing cards roam above it.
Non-breathe cards are played by dragging them upward until the drag target switches from drag higher to release to play.
Some cards increase the MEANINGLESS TOTAL. Some distort the screen with shake, blur, flash, soften, or glow.
Two opposing invisible pressures shape the pacing: settleLevel rises through breathing and sustained non-interaction; fixationLevel rises through repeated engagement and craving loops. As fixation rises, cards get larger, Breathe shrinks, more cards can accumulate, and a screen aura appears.

Interruptions, walkers, and the return

Random interruptions appear as pick 3 prompts, nonsense graphs, tiny 3×3 boards, emoji exchanges, and fake inbox/text clusters. The pick 3 prompts show fake stat deltas like +3 Clarity or -2 Drift; those values do not persist, do not affect systems, and do not matter.
Walker characters occasionally enter, say one line, and leave. Clicking them makes them exit early and produce a small reply.
Pressing Breathe clears the current noise for a moment: effects drop, modals vanish, walkers leave, most cards fade out, and the footer line shifts.

Presence fourteen seconds in: a Behavioral override interruption with six non-binding choices, five cards in the hand including Breathe, and the footer line not every thought is a task

meditationgamehost.vercel.app · another session, fourteen seconds ina Behavioral override interruption; the footer reads: not every thought is a task

Design guardrails this project works only if it resists becoming a real optimization game

Keep these intact

Presence should remain available at all times
Breathe must remain visible, reachable, and visually legible even when fixation is high
Distractions should feel urgent, absurd, emotional, decorative, or vaguely profound
Most interactions should stay immediate and low-stakes
The big number should remain funny and meaningless; fake stats should remain fake
Breathe should feel like a return, not a scoring mechanic
fixationLevel should feel like attentional capture, not a hidden punishment meter

Changes are probably wrong if they introduce

Persistent meaningful stats
Builds or card strategy
Meta progression or reward economies
Combat, enemies, health, mana, or turns
Win conditions, fail states, or optimal play

The automated coverage has three layers: unit tests verify content pools, fake stat output rules, interruption generator shapes, and fixation-driven card generation; integration tests verify app-shell rendering, ambience controls, audio-start behavior, and idle-settle logic; the smoke harness boots the running app in Playwright and checks that the shell still exposes Breathe and the ambience controls. New content rules extend that coverage so the project does not quietly drift into meaningful systems.

Put the engineering in context

Recognize a problem in your own workflow?

Show me one task your team does by hand. In 20 minutes, I’ll tell you if it’s worth automating and what it would cost.

Book a free 20-minute check Explore the other projects →