Projects using HTML5 in EdmondsProjects using HTML5 in Edmondsšəq̕ʷəb — Shatterpoint: Sovereign Somatic Grounding Engine
Project Type: Full-Stack Web Application / Mobile PWA Development & UI/UX Design
Role: Lead Product Architect, Frontend Developer & Cultural Systems Designer
Live Demo: [Insert Your Vercel / Live App Link Here]
Executive Summary
šəq̕ʷəb — Shatterpoint is a mobile-first, non-pharmaceutical somatic grounding application designed to down-regulate nervous system hyper-vigilance, quiet intrusive racing thoughts, and offer rapid sensory reset during moments of anxiety or overload.
By uniting authentic Coast Salish formline artwork, 6Hz acoustic theta brainwave entrainment, and motor-kinetic visual rhythm gameplay, šəq̕ʷəb bridges indigenous cultural heritage with modern neuro-somatic grounding mechanics.
The Problem: Generic Tools & Sensory Overload
When individuals—especially youth and neurodivergent users—experience acute panic, PTSD triggers, or sensory overload, standard mental health applications often fail due to three core flaws:
High Cognitive Load: Text-heavy, clinical interfaces with multi-step menus increase anxiety rather than reducing it.
Pathologizing Labels: UI elements that force users to self-diagnose with clinical labels (e.g., "ADHD Mode" or "OCD Mode") create social stigma and medicalized friction.
Lack of Somatic Catharsis: Passive breathing apps lack physical interaction, leaving excess kinetic energy and frustration unreleased in the body. The Solution & Core Features šəq̕ʷəb delivers an immediate, zero-barrier sensory interface built entirely on a single non-scrolling 100vh viewport console.
Authentic Coast Salish Vector Architecture Instead of generic arcade shapes, active targets use precision-rendered Coast Salish formline vector elements (.svg Path2D graphics):  Positive Targets (Good Nodes): Sweeping, open cyan/teal formline trigons that build focus streaks and expand visual presence.  Negative Targets (Intrusive Noise): Constricted crimson spiked trigons that train tap-inhibition and motor discipline.  Write & Release Target: A traditional red-split U-form block providing a wide, stable cradle for cathartic text shatter mechanics.
"Write & Release" Cathartic Text Shatter Users type frustrating thoughts, anger, or intrusive stressors into a local modal. The engine locks the text upright into the center cradle of a dedicated U-form target block. Upon tapping the block:  A full-screen radial shockwave fires across the canvas.  The frustration text shatters into a 60+ particle character burst that vaporizes in 360 degrees.  Local memory immediately purges the string, providing cognitive defusion and somatic release.
Acoustic 6Hz Theta Brainwave Entrainment Integrated low-frequency 6Hz binaural acoustic beats and rhythmic audio pulses gently encourage brainwaves to synchronize with natural theta frequencies (4–8Hz)—the state naturally produced during deep meditation and light sleep.
Youth-Safe Somatic State Selection Replaces clinical diagnostic labels with dignified, body-centered state choices:  Steady Grounding: Gentle target pacing paired with soft acoustic theta tones.  High Energy / Quick Focus: Elevated contrast and rapid target spawning for high restless energy.  Rhythmic Cadence: Predictable, steady cadence designed for rhythmic flow states. Therapeutic & Neurological Mechanisms  Cognitive Defusion: Translating abstract, distressing thoughts into physical visual targets that can be shattered breaks rumination loops.  Visual-Rhythmic Focal Lock: Tracking moving formline targets re-engages the prefrontal cortex, pulling focus away from amygdala-driven fight-or-flight states.  Somatic Discharge: Combining haptic feedback, wood-crack auditory cues, and physical tap interactions releases pent-up kinetic arousal.  Nervous System Down-Regulation: Continuous exposure to 6Hz theta entrainment helps soothe hyper-vigilance without requiring complex breathing routines. Technical Stack & Architecture  Frontend Framework: React 18, TypeScript, Tailwind CSS  Render Engine: HTML5 Canvas API with custom Path2D SVG vector rendering loops  Audio Engine: Web Audio API with binaural 6Hz tone synthesizer & ambient audio channels  Mobile / PWA: Standalone Progressive Web App manifest with zero-scroll 100vh viewport constraint and touch event gesture locks (touch-action: none)  Deployment & CI/CD: Vercel automated release pipeline Key Highlights & Results  100% Single-Viewport UX: Zero vertical scrolling on mobile devices, ensuring zero-friction access during panic states.  Sub-100ms Reaction Time: Lightweight vector canvas rendering maintains 60 FPS performance on low-end mobile devices.  Cultural Parity: 1:1 alignment between onboarding instruction keys and active gameplay assets using native SVG vectors.  Dignified & Safe: Meets non-medical legal disclaimers while offering youth-safe, non-pathologizing sensory control. 
