mindquark

• 

  kv

Inspiration

In an era of relentless hyper-connectivity and cognitive overload, millions of individuals struggle with silent emotional turmoil—ranging from late-night catastrophic thinking to workplace burnout. Traditional psychotherapy,while invaluable, often presents high barriers: prohibitive financial costs, lengthy waiting lists, and lingering social stigma.

I asked myself: Can modern agentic AI bridge this gap—not by acting as an artificial therapist, but by serving as an immediate, empathetic, and scientifically grounded cognitive sanctuary? My theoretical foundation is rooted in Aaron Beck’s Cognitive Behavioral Therapy (CBT) and Richard Lazarus’s Cognitive Appraisal Theory: Emotional Response = f Big (Cognitive Appraisal (Antecedent Event) Big)

By helping users identify automatic negative thoughts (ANTs), deconstruct cognitive distortions, and regulate their autonomic nervous system through somatic grounding, we envisioned MindQuark: a 24/7 private harbor where technology meets human vulnerability with warmth and ethical restraint.

What it does

MindQuark is a full-stack, multimodal mental wellbeing sanctuary designed to guide users through emotional turbulence using evidence-based psychology and somatic feedback:

Dual Empathetic CBT Personas: Users can choose between Maya (warm, intuitive, and nurturing) and Liam (grounded, structured, and pragmatic),personalizing their reflective dialogue according to their emotional state. Dual-Axis Mood Radar (Russell’s Circumplex Model): Maps user emotions across a 2D continuous spectrum of Valence and Arousal: Affective State = (𝒱,𝒜) ∈ [-1.0,1.0] × [-1.0,1.0] Paired with 5-4-3-2-1 sensory grounding techniques to restore present-moment awareness. Sacred Mandala Somatic Breath Guide: Visual breath pacing calibrated to parasympathetic resonance frequencies (0.1 Hz or ≈6 breaths/min), featuring clinical ratios such as the 4-7-8 Relaxing Breath: Cycle = T (4 s) + T (7 s) + T (8 s) = 19 s 4 - 7 - 8 Inhale Hold Exhale Zero-Latency Multi-Tier Crisis Gateway: Deterministic safety screening that intercepts self-harm or acute distress cues before LLM inference, immediately short-circuiting to verified human crisis hotlines. Multimodal Voice Interaction: Integrates iFlytek real-time speech transcription (IAT) and text-to-speech (TTS) with local browser speech fallbacks.

How we built it

MindQuark was engineered from the ground up with high performance, strict privacy, and motion polish: • Frontend Architecture: Built with React 19, TypeScript, and Vite, styled with Tailwind CSS v4 and Radix UI primitives for accessible, responsive, and glassmorphic UI design. • Motion & Physics Engine: Powered by GSAP 3 and @gsap/react. We developed a custom Dual-Layer SVG Bezier Liquid Wave Morphing transition governed by quadratic Bezier interpolation: 𝐁(t) = (1 - t)²𝐏₀ + 2(1 - t)t𝐏₁ + t²𝐏₂, t ∈ [0,1] delivering an organic, fluid White & Emerald curtain reveal on initial entrance. • Backend & Serverless Cloud: Deployed on Tencent CloudBase (TCB) utilizing Serverless Express functions (/api) with primary-backup model failover (DeepSeek-V3, GLM-4, and OpenRouter), WebSocket signing proxies, and strict CORS origin allowlists. • Client-Side Zero-Leak Security: 100% credential-free client bundle; all API keys and signing secrets reside solely inside CloudBase encrypted environment variables.

Challenges we ran into

Safety Interception vs. Conversational Latency: Ensuring that crisis detection executes with O(1) deterministic speed while avoiding false positives during normal venting required architecting a dual-phase regex-semantic filter before any token is sent to the LLM. Deterministic 60 FPS Wave Morphing: Animating full-screen SVG paths (d attribute morphing) across diverse mobile viewports without layout thrashing required fine-tuning GSAP string interpolation and using hardware-accelerated CSS transform layers. Graceful Degradation under Network Jitter: Building resilient local CBT reflection fallbacks that guarantee the user is never left with a blank screen or a broken error message even if cloud providers experience intermittent rate limits.

Accomplishments that we're proud of

• Bulletproof Quality: Achieved a clean codebase with 0 TypeScript Errors and a passing 15/15 automated test suite across crisis detection, storage persistence, and emotion calculation. • Holistic Aesthetic & Motion Polish: Created a tranquil White & Emerald aesthetic that feels like a living,breathing sanctuary rather than a cold enterprise dashboard. • Full-Stack CloudBase Deployment: Seamless integration of CloudBase static hosting and Serverless APIs, capable of scaling on-demand with minimal cold-start overhead.

What we learned

• Restraint over Capability: In mental health technology, emotional safety and ethical boundaries outweigh model versatility. An AI companion must know its limits and gracefully step back when human intervention is needed. • Visual Rhythm as Therapy: Fluid, predictable UI transitions (such as Apple-inspired spring dampings and breath-synchronized animations) directly influence user relaxation by reducing cognitive friction.

What's next for mindquark

• Wearable Biometric Sync: Integrating Apple Health / Web Bluetooth to synchronize breathing visualizers with real-time Heart Rate Variability (HRV). • On-Device Local AI: Leveraging WebGPU / WebAssembly to run lightweight CBT inference entirely client-side for complete offline privacy. • Localized Psychoeducation: Expanding multi-lingual dialect support and culturally informed mindfulness practices.

Built With

• class-variance-authority
• clsx
• framer-motion
• gsap
• lucide-react
• radix-ui
• react
• tailwindcss
• tcloudbase
• thinking
• typescript
• vite