mirror-game

A full-stack Next.js 15 app built with React 19 and React Three Fiber. Players choose a side (chaos vs. order), debate Claude Sonnet 4.6 across 3 rounds via a streaming API endpoint, and are scored live. A Supabase backend stores transcripts and streams updates to spectators watching the arena in real time.

Key figures

3 Rounds

6 Screens

Sonnet 4.6 Model

What it does

— Claude Sonnet 4.6 debate endpoint with streaming responses and graceful mock fallback
— State machine across 6 screens: home → setup → debate → result → spectator-setup → spectator-debate
— React Three Fiber WebGL scene morphs between 3 modes (home, debate, result) with winner reveal animation
— Supabase real-time backend: transcript storage, live spectator updates, vote tallying
— Framer Motion screen transitions; Tailwind CSS v4; TypeScript strict throughout