Free
🧘 Wellness
CROSS_PLATFORM

Ember Meditation

Meditation & sleep app with breathing orb, ambient soundscape mixer and gentle streak-free habit design.

3.5k views 839 copies 372 words

The Prompt

# Ember β€” Meditation & Sleep App

## Goal
Design and build "Ember", a meditation & sleep app. Feel: dim candle-lit room β€” the UI itself lowers your heart rate. Every screen should feel native-quality β€” fluid, tactile, zero jank.

## Visual Language
- **Palette**: deep dusk #12101A base, warm ember gradient (#F97316 β†’ #FBBF24) used only for the breathing orb and progress, text in soft lavender-gray
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Tonight** β€” time-aware home: evening shows wind-down sessions, morning shows focus starts; one hero session card + 2 smaller; no grids of 100 sessions.
2. **Session player** β€” breathing orb center: expands 4s, holds 4s, contracts 6s with soft glow; timer ring around it; pause by holding the orb.
3. **Soundscape mixer** β€” 5 vertical sliders (rain, fire, wind, waves, birds) with live mixing; save custom mix with a name.
4. **Sleep stories** β€” horizontal cards with duration and narrator voice chip; player has 15-min sleep timer default.
5. **Journey** β€” calendar of practiced days as soft ember dots (no streak counter, no broken-chain guilt); minutes-practiced gentle line chart.

## Interactions & Motion
- Orb breathing is the master clock: haptic soft-tap at each phase change if enabled.
- Slider thumbs glow faintly while their sound is audible; mix crossfades over 800ms.
- Every screen transition is a slow 400ms fade β€” no slides, no pops, nothing sudden.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- App refuses hurry: buttons respond on release with an 80ms grace β€” intentional slowness.
- 'Do not disturb' suggestion when starting a session, one tap to enable.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.

You may also like