Sports Social

Logo
Hub with Glass High Textures
Hub with Experimental Liquid Glass Textures
Golfing Gameplay
Bowling Gameplay
Ping Pong Gameplay
Room Code Page on Phone
Game Calibration Page on Phone
Settings Page on Phone

Inspiration

The magic of the original Wii Sports was bringing everyone together to swing imaginary rackets and roll virtual bowling balls. We wanted to recapture that energy without the hassle of a dedicated console. Modern smartphones are packed with high-precision motion sensors, and practically every home has a laptop, so Sports Social bridges the two. Your laptop becomes the console, your phone becomes the motion controller, and all it takes to start playing is a quick QR scan.

What it does

The Host: Your laptop opens a room with a four-digit code and a QR code, showing a glossy 3D hub floating in a soft Frutiger Aero world.
The Controller: Each player scans the code on their phone, which streams motion and touch data to the laptop in real time.
The Games:
- Ping Pong: Split-screen action where you swing your phone like a paddle.
- Bowling: Hold the screen to pick up the ball, swing underhand, and let go.
- Golf: Swing your phone like a putter. A physical cup model decides whether the ball drops or lips out.
Smart Calibration: The game learns your natural rest pose and swing strength during practice, so every hit feels right.

How we built it

The Stack: Next.js 15, React Three Fiber for 3D graphics, Rapier for physics, and Supabase for accounts.
Built with Claude Code: We used Claude Code throughout development to scaffold the architecture, manage our project context, and quickly iterate on complex physics calculations.
Low-Latency Networking: Instead of routing gameplay through a traditional server, we use WebRTC DataChannels to connect the phone and laptop directly. Raw motion updates go straight to the game engine, so swings register without noticeable lag.
Motion Tracking: Phones report their rotation, not their exact position in the room. We built a virtual arm model that translates the tilt and swing speed of your phone into convincing physical momentum.

Challenges we ran into

The Backward Swing: Getting the game to understand which way was "forward" was a major headache. We built a recentering tool that uses quaternions to flip the orientation when it detects you swinging in reverse.
Glass vs. Frame Rate: Realistic, refractive glass is very heavy on a GPU. We built a custom "Liquid Glass" system that shares a single rendering pass across all objects, so players can adjust graphics settings without freezing the screen.
Browser Security: Mobile browsers block motion sensors by default. We added a tap-to-enable permission step and generated self-signed local network certificates so the phone and laptop could talk to each other.

What's next

More Sports: Tennis, Baseball, and Boxing.
Player Accounts: Global leaderboards and career stats.
Real-World Playtesting: Fine-tuning swing sensitivity with a broader audience.