Pika Pao Play

Rock Paper Scissors reimagined as a real-time multiplayer web game with 5 themes and 26 languages

Visit Pika Pao Play

Project Overview

What We Worked On

Solo vs CPU & Real-Time Multiplayer Modes
5 Switchable Visual Themes
26-Language Internationalization with Auto-Detection
Global Leaderboard with Persistent Stats
Premium Animations (GSAP + Framer Motion + Canvas Confetti)
Sound Effects System with Mute Toggle
Supabase Realtime for Multiplayer Sync

Background

Pika Pao Play transforms the classic Rock Paper Scissors into a polished, competitive digital experience. The goal was to prove that even a simple game concept can become a premium product when built with the right tech stack and attention to detail.

The Challenge

Instant responsiveness — no loading screens or perceived lag, even during real-time multiplayer sessions across geographies.
Real-time synchronization — both players must see choices, scores, and round progression simultaneously with zero drift.
Visual identity at scale — 5 fully distinct themes that transform the entire UI without touching component code.
Global accessibility — 26 languages including RTL support (Arabic) with automatic browser detection.
Mobile-first gaming — delivering a premium, native-app-like experience entirely in the browser with no install.

The Solution

Phase 1: Tokenized Theme System

A fully tokenized design system using CSS custom properties. All 5 themes are defined in a single CSS file with semantic tokens, enabling instant theme switching.

Phase 2: Real-Time Multiplayer Engine

Built on Supabase Realtime subscriptions on a game_rooms table with instant choice detection, synchronized round progression, and automatic score tracking.

Phase 3: 26-Language i18n

26 locale JSON files with consistent key structure. i18next-browser-languagedetector auto-selects the user's language. Full RTL support for Arabic.

Phase 4: Premium Animation Layer

GSAP + Framer Motion for buttery-smooth transitions, Canvas Confetti on victory, custom sound effects system with mute toggle, and particle background effects.

Phase 5: Global Leaderboard

Player stats persisted in Supabase with cloud-synced rankings. Players save scores and compete for top positions on a global leaderboard.

Results

Install required

Browser-only

App StoreZero-install

Visual themes

On-the-fly switching

1 default5 themes

Language support

Auto-detected

English only26 languages

Multiplayer

Supabase Realtime

Local onlyReal-time global

Sub-second load time thanks to Vite's optimized bundling and code splitting
Real-time multiplayer working across devices and geographies via Supabase Realtime
5 fully distinct visual identities switchable on-the-fly without page reload
Global reach with 26-language support including RTL (Arabic)
Premium feel with GSAP + Framer Motion animations, confetti effects, and sound design