VagalTone

INF 172

Browser-based music-guided breathing that explores emotional self-regulation through vagus nerve stimulation principles—built for INF 172 Music and Health.

Role: Aaron, Angie, Chunze
Data: ~83 session responses

Problem

College students often lack access to invasive or resource-heavy therapies. Consumer wellness apps treat music as passive background; few design for frisson or connect subjective calm to vagal-tone ideas in a short, self-serve session.

Architecture

Session sequence

User                    Next.js / Zustand              Web Audio           Supabase
 │                              │                          │                   │
 │  open /                      │                          │                   │
 │─────────────────────────────▶│  landing                 │                   │
 │                              │                          │                   │
 │  submit pre Likert           │                          │                   │
 │─────────────────────────────▶│  store session state     │                   │
 │                              │──────────────────────────┼──────────────────▶│
 │                              │                          │                   │
 │  start breath (3 min)        │  expand/contract visual  │                   │
 │─────────────────────────────▶│─────────────────────────▶│  tone sync        │
 │◀──── inhale / exhale cues ───│◀─────────────────────────│                   │
 │                              │                          │                   │
 │  submit post Likert          │                          │                   │
 │─────────────────────────────▶│  write anonymous row     │                   │
 │                              │─────────────────────────────────────────────▶│
 │◀──── reflection / thanks ────│                          │                   │

Client state

«state machine» Session
  [*] --> Landing
  Landing --> PreCheckin : start
  PreCheckin --> Breathing : Likert.valid
  Breathing --> PostCheckin : t >= 180s
  PostCheckin --> Done : Likert.valid
  Done --> [*]

Breathing:
  tick() → visual.scale + AudioContext oscillator
  Zustand: phase ∈ {inhale, exhale}

Stack

Next.js
React
Tailwind
Supabase
Web Audio

What we built

End-to-end flow: landing → pre-session Likert → three-minute guided breath → post reflection
Expanding/contracting visual + AudioContext tones phase-locked to inhale/exhale
Zustand for session phase; anonymous pre/post rows (calmness, tension, breathing stability) in Supabase
Claims framed as emotional regulation research—not biometric VNS

Outcome

~83 data points suggest short music-guided sessions can feel regulating as a low-barrier complement to care. Limits: Likert-only (no HRV), fixed frequencies. Next: wearable biofeedback, personalized music, longitudinal tracking.