🎹 pitchd.

A hardcore, mathematically precise 5-round acoustic memory game. Built for competitive musicians and audiophiles alike to test exactly how well their ears measure up against the rest of the world.

Overview

pitchd is a full-stack Next.js web application engineered around a custom Tone.js audio synthesis engine. The application challenges users to listen to a 4-note polyphonic sequence and flawlessly recreate it using a responsive digital piano.

The game operates on a continuous 5-round state machine. Each key pressed is graded against the target note using a partial-credit exponential decay algorithm (2.5 * 0.8^dist). If you miss a note by a single half-step, you receive partial points. If you hit all notes flawlessly, you receive a perfect 50.00.

Viral Hooks & Mechanics

• Wordle-Style Share Loops: At the end of 5 rounds, your performance is compiled into a high-contrast emoji grid (🟩🟨🟥) directly to your clipboard alongside a link to the app.
• Deterministic Daily Runs: Users can play Endless Practice, or the Daily Run. The Daily Run utilizes a date-fns PRNG seeder to ensure that everyone in the world plays the exact same 5 melodies on that date.
• Dynamic Percentiles: Instead of displaying an absolute leaderboard rank (e.g., #4,010), the Supabase backend dynamically calculates exactly how many players you defeated that day and returns an ego-centric headline (e.g., "Top 2% Today").

Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS v4
• Audio Synthesis: Tone.js (PolySynth + Reverb + Feedback Delay)
• Animations/3D: GSAP + Three.js (Instanced Particle Mesh)
• Database: Supabase (PostgreSQL)

Local Development

Prerequisites

You will need a Supabase project. In your Supabase SQL Editor, run the schema provided in supabase/schema.sql to initialize the scores and game_sessions tables.

Set up your .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

Running the App

npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

Architecture

• app/page.tsx: The core game state machine (home -> listen -> play -> reveal -> results).
• lib/audio.ts: Initializes the Tone.js context, handles JIT-compilation latency warmups, and dispatches precise note scheduling.
• lib/seed.ts: The deterministic PRNG generator parsing YYYY-MM-DD inputs to maintain sequence congruency for the Daily Run.
• components/Piano.tsx: Absolute-positioned CSS matrix binding keys to Tone.js events.
• app/api/scores/route.ts: Upserts daily ranks and tracks global percentile math.