Skip to content

weimic/wavelength

Repository files navigation

Wavelength (Web Companion)

A modern, polished web adaptation of the social guessing game Wavelength by CMYK. Designed as a local shared-screen experience where players work together to tune into the same frequency.

✨ Features

  • Interactive Gameplay: Fully functional Wavelength dial with smooth SVG animations.
  • "Juicy" Interactions: Implements "Game Feel" concepts including screen shake, confetti celebrations, and synthesized sound effects.
  • Modern UI: Built with Next.js 16 and Tailwind CSS v4, featuring a persistent layout and fluid transitions.
  • Theming: Comprehensive Dark Mode support using next-themes and soft OKLCH color palettes.
  • Responsive: Optimized for desktop and mobile play.

🚀 Getting Started

Open weimic.github.io/wavelength to start playing.

📂 Project Structure

  • app/: Next.js App Router structure.
    • page.tsx: Landing page with game rules.
    • game/page.tsx: The core game loop (Setup → Clue → Guess → Reveal → Summary).
  • components/: Reusable UI components.
    • WavelengthWheel.tsx: The core SVG dial component.
    • GameSummary.tsx: End-of-game stats with circular progress animation.
    • ui/: Shared primitives (Buttons, etc.).
  • lib/: Utilities.
    • categories.ts: Game data (binary oppositions).
    • math.ts: Geometry helpers for the wheel.
  • hooks/: Custom React hooks for effects (useSoundEffects, useCameraShake, useConfetti).

🛠 Tech Stack

  • Framework: Next.js 16 (App Router)
  • Styling: Tailwind CSS v4 (CSS Variables, OKLCH colors)
  • Icons: Lucide React
  • Audio: Web Audio API (No external assets)

About

A virtual assist for the popular board game.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published