Survival Mode

A compassionate, offline-first PWA designed to provide grounding and support during severe mental health crises. Built with radical validation, radical simplicity, and a deep commitment to privacy.

Comment

Survival Mode - Project Description

Try It Now

Launch Survival Mode — Open the live app at https://survivalmode.netlify.app/

(Best on mobile. Respects your privacy—zero tracking, zero data collection.)

The Problem

During severe mental health crises, people often lack the cognitive capacity to self-direct their recovery. Crisis moments—panic attacks, dissociation, suicidal ideation, or catatonic states—require immediate, accessible grounding without requiring thought or decision-making. Existing mental health apps often:

  • Require complex navigation and decision trees (overwhelming during crises)
  • Assume internet connectivity (unreliable in emergencies)
  • Collect user data or track behavior (raising privacy concerns)
  • Lack offline functionality (critical when networks fail)
  • Use productivity language that can trigger shame ("complete tasks")

Survival Mode solves this by providing a zero-friction, compassionate crisis support tool that meets users exactly where they are—bedbound, dissociated, or barely functional—without judgment or data collection.

Tech Stack & Functionality

Technology

  • Language: Vanilla JavaScript (no frameworks)
  • Styling: Tailwind CSS (CDN) + custom CSS animations
  • Storage: Browser localStorage
  • PWA: Service Worker with Cache-First strategy
  • Deployment: Static hosting (HTTPS required)
  • Supported: All modern browsers (Chrome 50+, Safari 11.1+, Firefox 44+, Edge 15+)

Type of Software

Progressive Web Application (PWA) — A web app that works offline, can be installed on home screens, and functions like native mobile apps.

Detailed Functionality

Energy Level Assessment

  • Users select one of three energy states: Bedbound (Level 1), Low Energy (Level 2), Functional but Fragile (Level 3)
  • App customizes all subsequent interactions based on this selection
  • No wrong answers—focuses on radical acceptance, not judgment

Adaptive Task System

  • Each energy level receives 3 pre-curated tasks requiring minimal cognition:
    • Level 1: Sip water, wiggle toes, reposition body
    • Level 2: Take medications, wash face, eat zero-prep food
    • Level 3: Refill water, brush teeth, move one piece of clutter
  • Users can add up to 2 custom tasks per energy level
  • Tasks are not productivity-focused; they're survival-focused

Affirmation Engine

  • Provides textual validation at milestones (0, 1, 2, 3+ tasks):
    • "You are safe here" → "You did a thing. Remarkable" → "Outstanding. You did it. Go rest now."
  • Validates all effort equally; no progress bars or failure metrics
  • Rejects hustle culture in favor of radical compassion

Panic Mode with Dual Interventions

Breathing Tab:

  • 12-second guided breathing cycle (4s inhale, 4s hold, 4s exhale)
  • Animated circle provides visual anchor
  • Dynamic text changes (Inhale → Hold → Exhale)
  • Optional haptic feedback synchronized with breathing patterns
  • No counting required—the circle does the thinking

Grounding Tab:

  • 5-4-3-2-1 sensory grounding exercise (clinically validated technique)
  • Progressive steps: 5 things you see → 4 you touch → 3 you hear → 2 you smell → 1 you taste
  • Visual progress indicators (dots) show where you are
  • Guiding descriptions for each step
  • Completion message and encouragement upon finish

Emergency Contact System

  • Users set emergency contact number and crisis hotline (default: 988 Suicide & Crisis Lifeline)
  • SOS modal offers two options: Text Trusted Contact or Call Crisis Hotline
  • Opens native SMS (sms: protocol) or phone app (tel: protocol)
  • Message and phone number auto-copied to clipboard for manual entry
  • No data sent through Survival Mode—goes directly from phone to recipient

Haptic Feedback System

  • Optional vibration patterns tied to interactions:
    • Light clicks, double-clicks, success patterns, breathing cycles
    • Adds tactile grounding during crisis moments
    • Synchronized with breathing rhythm (inhale ramp, hold pulse, exhale descent)
    • Can be disabled in settings for users who prefer silence

Local Data Persistence

  • All data stored in browser localStorage (100% device-local)
  • No cloud sync, no servers, no data transmission
  • Users can clear all data at any time
  • Survives browser restart and app reload

Offline-First Architecture

  • Service Worker caches all assets on first visit
  • Subsequent loads serve from cache (instant load)
  • App functions 100% without internet
  • Updates checked in background when online

How It Was Created

Survival Mode was developed through an iterative, user-centered design process focused on accessibility and simplicity.

Design Phase

  • Extensive research into crisis intervention techniques (breathing exercises, 5-4-3-2-1 grounding)
  • Validation from mental health guidelines and accessibility standards
  • Iterative prototyping to ensure interactions require minimal cognition
  • Color palette designed for eye strain sensitivity and visibility

Architecture Phase

  • Deliberate choice of vanilla JavaScript to eliminate dependency overhead
  • Service Worker architecture designed for reliable offline function
  • localStorage chosen over IndexedDB for simplicity and privacy
  • Modular state management (app object) for maintainability without frameworks

Implementation Phase

  • Clean separation: index.html (UI), app.js (logic), style.css (animations), sw.js (offline caching)
  • Comprehensive haptic system synchronized to breathing rhythm
  • Modal-based emergency flows to reduce decision fatigue
  • Accessible forms and interactive elements tested across devices

Validation & Refinement

  • Cross-browser testing (desktop and mobile)
  • Accessibility compliance (WCAG AA, keyboard navigation, touch targets)
  • Low-bandwidth testing to ensure reliability on poor connections
  • Crisis scenario walkthroughs to verify usability under stress

Philosophy Throughout

  • Radical simplicity: no tracking, no analytics, no third-party dependencies
  • Radical compassion: textual affirmations over metrics, no judgment, meets users where they are
  • Radical privacy: zero data collection, 100% local storage, no cloud infrastructure
  • Offline-first: designed for reliability when help is most needed

The result is a production-ready PWA that provides immediate, judgment-free support during mental health crises while protecting user privacy and requiring zero infrastructure costs.

Built With

Share this project:

Updates