Kohs! • 2026
Block Design Test Mobile Game
ROLE
Full Stack
TIMELINE
March 2026
Team
Solo
SKILLS
Mobile Development
UI/UX Design
Overview
Kohs! bridges the gap between classic cognitive psychology and modern, fast-paced competitive gaming.
For decades, the "Kohs Block Design Test" has been a staple in psychological assessments, measuring spatial reasoning and tactile problem-solving. However, its digital adaptations have historically been clunky, isolated, or devoid of stakes. Kohs! was engineered to eliminate this monotony. I built a platform where the intense mental focus of a cognitive test is backed by a real-time multiplayer infrastructure and procedural audio ensuring that every satisfying "click" of a block rotation feels responsive, competitive, and distinctly modern.
Problem
The Monotony of Mobile Puzzles.
Building a compelling puzzle game shouldn't mean relying on cheap dopamine loops or pay-to-win mechanics. Currently, the mobile puzzle market is heavily fragmented between overly simplistic 2D matching games and heavily bloated, isolating "brain-training" apps. This creates a landscape where true spatial reasoning is rarely challenged in a dynamic environment. Users are forced to play alone, without the thrill of direct competition or the tactile satisfaction of manipulating 3D objects.
Why the current experience is broken.
The "Flat" Trap
Most puzzle apps restrict users to a 2D plane. They lack the depth required to truly test spatial reasoning. Rotating a 3D cube (with its distinct solid and diagonally split faces) to match a 2D target requires visualizing hidden states—a mechanic completely lost in flat grid games.
The Isolation Problem
Cognitive games are inherently lonely experiences. Users play against algorithms or static timers. There is a massive missed opportunity for real-time, head-to-head friction where players can visually outpace or sabotage their opponents.
The Engine Bloat
Developing a 3D game usually defaults to heavy engines like Unity or Unreal. For a mobile-first, highly accessible app, forcing users to download a massive binary just to flip blocks is an archaic UX pattern that kills conversion and retention.
Research & Strategy
Turning a static test into a real-time, competitive ecosystem.
I realized that modernizing Kohs wasn't just about rendering 3D cubes; it was about engineering tactile certainty and network reliability. To solve the "Isolation Problem" and the "Engine Bloat," I couldn't just build a standard app. I had to architect a lightweight, web-native engine that could handle complex 3D math, real-time multiplayer states, and procedural audio without dropping a single frame.
My Approach
Engineering Tactile Spatial Logic
The core mechanic relies on how a block's top face changes when rotated in 3D space. To fix the "Flat Trap," I engineered a strict mathematical data model for the blocks. Instead of simple sprite swapping, the game relies on Lx, Ly, Lz vector math to track the true 3D orientation of every cube (Red, White, or Diagonal). This turns visual puzzle-solving into concrete, programmatically verifiable states.
The "Real-Time Arena" Mandate
To kill the boredom of single-player brain games, we adopted a competitive-first policy. We engineered a structured matchmaking system (Best-of-5 rounds) with an HP Battle System. Solving puzzles deals "damage," converting a silent mental exercise into a visceral, high-stakes duel, complete with interactive sabotages like Freeze and Fog.
Technical Architecture
Engineering the "Frictionless" Multiplayer Infrastructure.
To support the rapid 3D animations, real-time multiplayer broadcasting, and cross-platform distribution, a traditional heavy game engine wasn't viable. I architected the application utilizing modern web technologies wrapped for native execution, focusing on absolute minimal latency and high performance.
The Lightweight Frontend: Built with React, Vite, and TypeScript, utilizing Tailwind CSS (with CSS variables for dynamic grid scaling from 2x2 to 3x3) and Radix UI. For the 3D block manipulations, I leveraged Framer Motion to ensure smooth, snappy transitions that feel physically grounded.
The Native Bridge: Wrapped entirely in Capacitor, allowing the web application to run natively on both iOS and Android with a near-zero footprint compared to traditional game engines.
The Sync Engine: Powered by Supabase. This handles Google OAuth, secure Cloud Saves (syncing Gems, Streaks, and unlocked Skins), and most importantly, the Real-Time WebSocket channels crucial for broadcasting opponent progress and sabotage triggers in the Arena.
Procedural Audio Engine: Instead of loading heavy .mp3 files that eat memory, I built a custom Web Audio API engine (audioUtils.ts). It generates satisfying, low-latency sound effects procedurally—from chiptune BGM to organic bloops, sharp ticks for block rotation, and arpeggiated victory chords.
Solution
Kohs!: Where Cognitive Depth Meets Digital Aesthetic.
I translated the complex mathematical logic of the Kohs block test into a fluid, visually striking interface. The final product isn't just a puzzle; it's a highly customizable competitive arena. I stripped away the clutter of traditional game menus to focus on smooth matchmaking and deep aesthetic personalization.
Progression & Customization
Play by Vibe, Not Just By Rules.
We replaced standard, boring game tokens with a dynamic economy. Players earn Gems through the Solo Progression snake-map or Arena victories. This feeds into a Shop system designed for deep personalization.
Understanding that UI aesthetic is paramount, the visual design language embraces both classic and modern extremes. Players can unlock block skins ranging from the traditional Classic Kohs, to the retro-tech Neon Cyber, the premium Pure Gold, and the minimalist, dark-luxury Obsidian Void. Every interface element scales flawlessly, ensuring the visual "vibe" is maintained whether you are solving a casual 2x2 grid or sweating through a Hard 3x3 Ranked match.
Reflection
What I Learned: Beyond the Codebase.
Building Kohs! was a masterclass in bridging the gap between web technologies and native-like performance. Transitioning a complex, historically analog cognitive test into a high-stakes digital arena required more than just translating rules into code it demanded a rigorous focus on architecture, state management, and the psychology of interaction.
The Illusion of Performance is Engineered
I initially feared that using DOM-based animations (Framer Motion) instead of a WebGL canvas would cause frame drops, especially on lower-end mobile devices via Capacitor. However, I learned that by strictly utilizing hardware-accelerated CSS properties (transforms and opacities) and decoupling the 3D rotation logic from the React render cycle, a web app can achieve a 60fps native feel. Performance isn't just about the framework; it's about how deeply you understand browser rendering.
Real-Time State is a Fragile Beast
Implementing the Supabase WebSocket channels for the Arena mode taught me the harsh reality of network latency. I learned to design resilient state machines. Instead of sending every single micro-movement of a block over the network, I optimized the payload to only broadcast critical state changes and sabotage triggers. This taught me the value of Optimistic UI updating the local interface instantly while the server syncs in the background, keeping the competitive flow uninterrupted.
Design Systems Must Scale Mathematically
Creating a responsive grid that transitions seamlessly from a 2x2 Easy mode to a 3x3 Hard mode forced me to rethink my CSS architecture. By heavily utilizing Tailwind CSS variables and fluid typography, I ensured that the "vibe" and readability of the board remained consistent regardless of the device screen size or the grid's complexity.