Title: Meditation Orbs — Breathfield
Prompt: A slow, cinematic breathing companion where glowing orbs gather and release with your breath. Design a dark-teal sanctuary with a living canvas field beside a tactile control rail for inhale, hold, exhale, and orb count. It should feel warm, quiet, and ritual-like, rewarding steady practice with calm scores and session dots.
Design: A two-column sanctuary pairs a full-bleed orb canvas with a deep-teal control rail; serif italic breath words float over radial orbs in teal, coral, and gold, while pill buttons, stat tiles, and mantra selectors give the right rail a ritual-manual feel. Thin rules, asymmetric card radii, and a soft drift animation keep the mood calm without hero-gradient cliches.
Visual techniques:
- Full-bleed canvas with radial-gradient orbs and concentric breath rings
- Serif italic focal type over generative motion field
- Asymmetric card radii (14px/4px) and thin teal rules
- CSS drift + pulse keyframes with prefers-reduced-motion guard
- Warm sand-on-deep-teal palette with coral accents
Interaction model: Users set inhale/hold/exhale durations and orb count with sliders, start or pause the breath cycle, toggle a soft WebAudio tone and a still mode, and collect breaths, time, calm score, and session dots; mantra buttons swap the closing affirmation while the canvas phase word and tone shift with each breath phase.