Mellow

What inspired Mellow

The hardest part of managing stress during long study and coding sessions isn't knowing I should pause — it's the friction of actually doing it. Meditation apps ask for accounts, subscriptions, 20-minute commitments, and cluttered interfaces. When I needed a two-minute reset between tasks, opening an app heavier than my stress felt counterproductive.

I wanted something that does exactly one thing: guide my breath. Mellow is that tool — a zero-friction, single-purpose breathing pacer built around 4-4-4 box breathing, a paced-breathing pattern known for activating the parasympathetic nervous system and slowing heart rate through controlled exhales.

How I built it

• Docs before code: Using the Devpost Learn AI Basics Skill Pack, I ran the 1-start → 2-scope → 3-prd → 4-spec workflow with my coding agent (Cursor). The skills forced me to write scope.md, prd.md, and spec.md before writing a single line of code.
• Tech stack: Vanilla HTML5, CSS3, and ES6 JavaScript in one index.html — no frameworks, no build step — so it loads instantly and hosts statically on GitHub Pages.
• Design system: Neumorphism (Soft UI). Every element uses dual box-shadows (light top-left, dark bottom-right) on a soft #e0e5ec background so the UI feels like physical objects. Pressing "Start" flips the button to an inset shadow state — real tactile feedback.
• State machine: A simple JS loop — IDLE → INHALE (4s) → HOLD (4s) → EXHALE (4s) → loop — synced with 4-second CSS transitions so the orb swells and contracts with your breath.

Challenges I faced

1. Building the builder: My machine started with no Git and no Node.js, and PowerShell's execution policy blocked npx. Diagnosing CommandNotFoundException and PSSecurityException, installing the toolchain, and fixing policy settings was my first real environment-debugging lesson.
2. Ruthless scoping: My original idea included audio cues, multiple breathing patterns, and session stats. The Skill Pack's scoping discipline made me cut all of it. That restraint is why this shipped: one thing done perfectly beats five things done halfway.
3. Reconciling git histories: My GitHub README existed before my local commits, creating unrelated histories. Resolving it with git pull --allow-unrelated-histories taught me how local and remote histories actually interact.
4. Shadow math: Making the orb feel physical meant tuning paired shadow offsets and blur radii across three states (rest, inhale, exhale) while keeping text contrast accessible — no pure blacks anywhere.

What I learned

• AI-assisted planning beats AI-assisted coding. The Skill Pack's biggest value wasn't generating code — it was enforcing docs-first thinking and scope discipline.
• Design is physiology. Soft greys, slow 4-second transitions, and tactile pressed states aren't decoration; they reduce visual strain and pace the user's breathing.
• Shipping is a skill. Empty folder → public repo → live GitHub Pages site → demo video, all in one session. I learned the full end-to-end pipeline of delivering software.

Mellow is live, open source, and ready to help anyone find their center in two minutes — no account, no clutter, just breath.

Built With

• css
• cursor
• devpost
• git
• github
• html
• javascript
• neumorphism
• pages
• skills
• vanilla