Friction

• 

  Friction

Inspiration

Modern digital architecture is built on frictionless design: infinite scroll, one-click purchases, auto-play, and instant gratification. While this drives user engagement for tech giants, it leaves individuals struggling with behavioral loops and impulsive habits completely defenseless.

When we looked at existing recovery and habit-breaking apps, we noticed a toxic paradox. They rely heavily on gamified mechanics like "streak counters" and "days clean" trackers. If a user breaks a 47-day streak, the counter violently drops to zero. According to behavioral psychology, this triggers the Abstinence Violation Effect (AVE)—a deep sense of failure and shame that actively drives the user into a deeper binge or total abandonment of the app. The very tools meant to cure the cycle were exacerbating the trauma of a slip.

We realized that addiction is a frictionless slide. We wanted to build the handrail.

What it does

Friction is an adaptive, zero-barrier progressive web application (PWA) designed to interrupt impulsive urges in real-time. Instead of passively tracking long-term behavior, it acts as an emergency psychological brake.

When an urge strikes, the user hits a single button to enter a sequential pipeline of 4 Adaptive Cognitive Gates—speed bumps designed to delay momentum and shift brain activity from the emotional amygdala to the logical prefrontal cortex:

1. The Reality Anchor (Time Theft): Forces the user to explicitly quantify the true cost of giving in using a tactile slider (e.g., trading 4 hours of your evening for 5 minutes of relief).
2. Sensory Override (Stroop Effect): Injects cognitive interference by forcing the user to tap the visual color of a word rather than reading the word text itself.
3. Decay Matrix (Working Memory): Taxes visuospatial working memory using a fading grid puzzle that visually mirrors how physical cravings naturally peak and dissolve if left unacted upon.
4. Physical Grounding (Breath & Hold): Shifts the autonomic nervous system from a high-beta fight-or-flight panic state to a calming parasympathetic alpha-wave state via a synchronized breathing interface.

The Ultimate Anti-Streak: Friction features a Resilience Ledger instead of a streak counter. It logs "Interventions Survived" (qualitative victories of effort) rather than punishing slips, displaying an unshakeable archive of past resilience alongside a Future Self Vault filled with personal notes written during moments of absolute clarity.

How we built it

Friction was developed to be fundamentally bulletproof, lightweight, and offline-first:

1. Frontend: Built completely with semantic HTML5, CSS3 variables (with custom calming dark modes bypassing high-stress red indicators), and modern Vanilla JavaScript (ES6+).
2. Zero-Framework Architecture: We intentionally avoided frontend frameworks (like React or Vue) and build steps to ensure near-zero deployment times, zero dependency vulnerabilities, and absolute instantaneous load speeds when an emergency crisis hits.
3. Storage: Upgraded entirely to IndexedDB wrapped in a lightweight, native asynchronous storage utility. Unlike traditional localStorage, which mobile operating systems aggressively purge during background cleanup cycles, IndexedDB ensures that deeply personal Future Self notes and resilience history survive long-term.
4. Hardware Integrations: Leveraged native browser APIs including the Pointer Events API for highly specific touch-and-hold tracking, the Vibration API for tactile haptic feedback, and a fallback system utilizing responsive mobile-first parameters (optimized for standard 430px layouts).

Challenges we ran into

Our biggest challenge was building a system that challenges the brain without causing a rage-quit. During development, early testing revealed that forcing a highly anxious user into strict, game-like states could backfire drastically:

1. Cognitive Fatigue: If a user failed a puzzle because they were too overwhelmed, the artificial barrier induced pure frustration. We solved this by implementing an intelligent "Escape Hatch." If the app detects more than two failures on the cognitive gates, it recognizes the high cognitive load, bypasses the games entirely, and adapts gracefully by redirecting the user straight to the stabilizing breathing module.
2. Physical Tremors & Touch Slips: Craving spikes often come with physiological anxiety or sweaty hands. A rigid touch sensor would reset a 24-second breathing hold back to zero if a thumb slipped for a millisecond, causing immense user rage. We built a custom "Dead Man's Switch" grace period—injecting a 500ms window on the pointerup event to let the user re-engage their thumb before resetting progress.

Accomplishments that we're proud of

1. The Adaptive Shuffling Logic: Successfully preventing muscle memory in the Stroop Effect. By programmatically randomizing and shuffling the exact physical coordinates of UI targets every single round, we created a truly dynamic puzzle that forces genuine cognitive evaluation every time.
2. The Clinical Alignment: Moving completely away from cheap gamification metrics like confetti, levels, and scores. We successfully created an environment that feels like a clean, protective medical instrument or a safe, non-judgmental space rather than a dopamine-seeking mobile game.
3. The Technical Reliability: Designing an application requiring $0 in server overhead or backend architecture. It functions flawlessly on a subway, in a bathroom, or in a parking lot on airplane mode.

What we learned

We discovered that software engineering can heavily benefit from behavioral psychology when we prioritize human well-being over corporate retention loops. We learned the deep nuances of the Abstinence Violation Effect and how modern applications unintentionally trigger relapse sequences through rigid UI choices. Building this project underscored the immense power of vanilla web technologies—proving you don't need sprawling node modules or massive server pipelines to deliver an impactful, robust utility capable of helping someone change their life.

What's next for Friction

1. End-to-End Encrypted Data Backups: Creating a client-side crypto utility enabling users to safely export and migrate their local IndexedDB Resilience Ledger data between devices without exposing sensitive entries to any centralized cloud servers.
2. Wearable Integration via WebBluetooth: Pulling real-time biometric indicators (like elevated heart rates or galvanic skin responses) from smartwatches to actively prompt a subtle "Create Friction" push notification before the user is even consciously aware an emotional wave or impulse is surging.
3. Therapeutic Export Portals: Crafting a clean, highly customized markdown generation system allowing users to safely format and print their logged "Interventions Survived" entries to seamlessly review and talk through with their healthcare providers or therapists.

Built With

• css3
• events
• frontend:-html5
• offline-first-pwa-hardware-apis:-vibration-api-(haptics)
• pointer
• touch/hold
• vanilla-javascript-(es6+)-storage:-native-indexeddb-(via-zero-dependency-wrapper)-no-backend-required:-100%-client-side
• web-audio-api-(ambient-sound)