{/* Floating botanical elements */} {/* Header */}

Zen Pause

a moment of stillness

{/* Streak bar */}

{currentStreak} day streak

{totalBreaks} sessions

{/* Main orb area */}

{/* Celebration particles */} {(particles || []).map(p => ( ))} {/* Progress ring behind orb */} {timerState === 'active' && ( )} {/* The Focus Orb */}

{ if (timerState === 'idle') startTimer(); }} style={{ width: 200, height: 200, borderRadius: '50%', background: orbGrad, boxShadow: orbShadow, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: timerState === 'idle' ? 'pointer' : 'default', transform: `scale(${orbPulse})`, transition: 'transform 0.3s ease, box-shadow 0.5s ease, background 1s ease', zIndex: 5, position: 'relative', userSelect: 'none', WebkitTapHighlightColor: 'transparent', }} > {/* Inner glow */}

{timerState === 'idle' && ( <> Tap to Begin )} {timerState === 'active' && ( <> {formatTime(timeLeft)} breathe... )} {timerState === 'complete' && ( <> Zen Achieved )}

{/* Ambient indicator */} {timerState === 'active' && (

gentle focus

)}

{/* Streak milestone overlay */} {streakMilestone && (

setStreakMilestone(null)}>

🏆

Milestone!

{streakMilestone}-day streak achieved

Your consistency is blooming 🌸

)} {/* Reflection section */} {showReflection && !streakMilestone && (

{/* Reflection animation overlay */} {reflectionAnim && (

{reflectionAnim === 'calm' && (

😌

)} {reflectionAnim === 'nature' && (

{[0,1,2].map(i => ( 🍃 ))}

)} {reflectionAnim === 'sparkle' && (

{[0,1,2,3,4].map(i => ( ✨ ))}

)}

How do you feel?

{[ { emoji: '😌', label: 'Calm', type: 'calm' }, { emoji: '🌿', label: 'Refreshed', type: 'nature' }, { emoji: '✨', label: 'Inspired', type: 'sparkle' }, ].map(r => ( ))}

)} {/* Bottom controls */}

{timerState === 'idle' && (

choose your pause

{(durations || []).map(d => ( ))}

)} {timerState === 'active' && (

)} {timerState === 'complete' && !showReflection && !streakMilestone && (

)} {/* Recent reflections */} {timerState === 'idle' && (reflections || []).length > 0 && (

recent reflections

{(reflections || []).slice(-7).map((r, i) => ( {r.emoji} ))}

)}

); }