{/* Floating reactions */} {(reactions || []).slice(-15).map((r, i) => (

{r?.emoji ?? '✨'}

))} {/* Vote burst animations */} {(showReactionBurst || []).map(b => (

⚡

))} {/* TOP ZONE: Header */}

UNSW COLLECTIVE

{local?.headline ?? 'WHO WE ARE'}

{(memberList || []).length} {(memberList || []).length === 1 ? 'SOUL' : 'SOULS'}

{totalVotes} VOTE{totalVotes !== 1 ? 'S' : ''}

{/* Members strip */}

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

{!m?.avatarUrl ? (m?.displayName?.[0] ?? '?') : null}

))}

{/* HERO ZONE: Interactive Typography */}

{(words || []).map((word, idx) => { const w = word ?? {}; const isExpanded = w.expanded; const isTapped = tapFeedback === idx; const voteCount = w.votes?.length ?? 0; const hasVoted = (w.votes ?? []).includes(user?.id ?? 'solo'); const delay = idx * 0.12; return (

toggleWord(idx)} style={{ cursor: 'pointer', padding: '14px 20px', borderRadius: 4, background: isExpanded ? 'rgba(255,255,255,0.06)' : 'transparent', borderLeft: `4px solid ${isExpanded ? (w.color ?? '#FFD200') : 'transparent'}`, transform: isTapped ? 'scale(0.97)' : 'scale(1)', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }} >

{w.text ?? 'WORD'}

voteWord(idx, e)} style={{ minWidth: 52, height: 36, borderRadius: 18, background: hasVoted ? (w.color ?? '#FFD200') : 'rgba(255,255,255,0.08)', color: hasVoted ? '#0A0A0A' : '#888', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4, fontSize: 14, fontWeight: 800, cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: hasVoted ? 'scale(1.05)' : 'scale(1)', flexShrink: 0 }} > ⚡ {voteCount}

{/* Expanded detail */}

{w.detail ?? ''}

{isExpanded && (

{(w.votes ?? []).slice(-5).map((vid, vi) => { const voter = (memberList || []).find(m => m?.id === vid); return (

{voter?.displayName ?? 'Someone'}

); })}

)}

); })}

{/* BOTTOM ZONE: Reaction bar */}

DROP YOUR ENERGY

{(reactionEmojis || []).map((emoji, i) => (

addReaction(emoji)} style={{ width: 56, height: 56, borderRadius: 16, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26, cursor: 'pointer', transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)', ':active': { transform: 'scale(0.9)' } }} onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.85)'; e.currentTarget.style.background = 'rgba(255,255,255,0.12)'; }} onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; }} onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; }} >{emoji}

))}

{/* Bottom signature */}

BUILT DIFFERENT · UNSW · 2025

); }