Levin Kipkemboi

Calm - Minimalist Mindfulness Countdown

An elegant 5-minute breathing and pause countdown built with React Native and Expo, featuring smooth radial halo animations, drift-free background timers, and web accessibility.

  • React Native
  • Expo
  • React Native Animated API
  • Web Accessibility
  • TypeScript
View code

Problem

Meditation and mindfulness apps are cluttered with paywalls, gamified streaks, and complex catalog menus that increase cognitive overhead rather than relieving stress.

Solution

Calm is an intentional single-screen experience providing a frictionless 5-minute pause with a gentle radial breathing halo, drift-free timer tracking, and accessible motion controls.

My role

Mobile & Web Engineer - designed the ambient breathing animation loop, drift-free interval synchronization, and keyboard/motion accessibility.

Impact

Delivers instant relaxation in zero clicks—opens straight into the pause canvas with no onboarding screens or sign-ins.

Challenges

Eliminating timer drift caused by JavaScript event loop lag and mobile background throttling, while crafting an organic breathing animation that adapts to reduced-motion system preferences.

Screenshots

The problem

Modern wellness apps have adopted the very engagement mechanics they were intended to counter—notifications, subscription prompts, and elaborate goal tracking. When someone needs a quick moment to reset their breath, navigating multiple screens is counterproductive.

The approach

Calm removes everything non-essential:

  • Single Tap Activation: The entire screen is interactive. Tapping anywhere pauses or resumes the session.
  • Organic Breathing Halo: A continuous radial gradient gently expands and contracts on an alternating 4.5-second inhalation/exhalation cycle, guiding the user's breathing without distracting audio cues.
  • Drift-Free Precision: Uses timestamp delta reconciliation against the system clock (Date.now()) rather than naive interval increments, preventing time drift when the app is backgrounded.
  • Accessibility & Web Support: Respects prefers-reduced-motion system settings by flattening animations gracefully, and provides keyboard controls (Space to toggle, Escape/R to reset) on desktop viewports.