{ touchStartRef.current = e.touches[0]?.clientX ?? 0; }} onTouchEnd={e => { const startX = touchStartRef.current; const endX = e.changedTouches?.[0]?.clientX ?? 0; if (startX !== null && Math.abs(endX - startX) > 60) { handleSwipeMood(endX < startX ? 'left' : 'right'); } touchStartRef.current = null; }} > {/* Ambient floating orbs */} {[0,1,2].map(i => (

))} {/* Header Zone */}

〽️ Michigan

← swipe moods → · {currentMood.name}

{(memberList || []).slice(0, 5).map((m, i) => (

0 ? -8 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 700, }}> {!m?.avatarUrl && (m?.displayName?.[0] ?? '?')}

))} {(memberList || []).length}

{/* Hero: Liquid Glass Vibe Grid */}

{(vibes || []).map((v, idx) => { if (!v) return null; const isTapped = local?.tapped === v.id; const voted = hasVoted(v); const count = getVoteCount(v); return (

handleTapVibe(v.id)} onDoubleClick={() => handleShowEcho(v.id)} style={{ ...glassCard({}), display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', position: 'relative', overflow: 'hidden', transition: 'all 0.4s cubic-bezier(0.4,0,0.2,1)', transform: isTapped ? 'scale(0.92)' : 'scale(1)', boxShadow: voted ? `0 0 30px ${v.glow ?? currentMood.accent}40, inset 0 0 30px ${v.glow ?? currentMood.accent}10` : '0 4px 20px rgba(0,0,0,0.2)', border: voted ? `1px solid ${v.glow ?? currentMood.accent}50` : '1px solid rgba(255,255,255,0.08)', animation: `popIn ${0.4 + idx * 0.08}s ease-out`, }} > {/* Ripple effect */} {isTapped && (

)} {/* Shimmer overlay */} {voted && (

)}

{v.emoji}

{v.label}

{count > 0 && (

{count}✨

)} {/* Double-tap hint */} {voted && (

double tap to explore

)}

); })}

{/* Bottom: Live Activity Bar */}

{(vibes || []).filter(v => getVoteCount(v) > 0).length} of {(vibes || []).length} vibes resonating

{(vibes || []).reduce((s, v) => s + getVoteCount(v), 0)} ✨ total

{/* Echo Overlay */} {local?.showEcho && echoItem && echoVibe && (

{echoVibe.emoji}

{echoVibe.label}

{echoItem.caption}

TAP ANYWHERE TO CLOSE

{/* Floating particles */} {[...Array(6)].map((_, i) => (

))}

)}

); }