MyPick.io / Product Design / Solo Build

MyPick.io

Random number generators work. They're also boring. MyPick.io turns list shuffling into a dramatic pixel car race across 4 terrain environments and 4 weather conditions. Mechanical failures create real drama. A dynamic camera follows the leader. 17 custom audio tracks bring every race to life. Zero dependencies, pure Canvas 2D, cryptographically fair.

4

Terrains

4

Weather Modes

17

Audio Tracks

0

Dependencies

MyPick.io race in progress showing pixel cars competing on a stadium track

02 — THE CHALLENGE

THE PROBLEM WITH RANDOMIZERS

Every group decision has a dead moment. Someone pulls out their phone, opens a random number generator, taps a button, reads a number. Nobody watches. Nobody remembers.

How might we turn the most boring moment in group decisions into the most exciting one?

Role

Solo Creator — Design + Engineering. Every pixel, every line of code, every audio integration.

Stack
Canvas 2D, Web Crypto API, Custom Audio

Status
Production v2.9.1

Year
2025–2026

03 — DESIGN APPROACH

THE RACE MECHANIC

Instead of showing a number, show a race. Each option becomes a pixel car. Randomization drives race physics — speed variations, mechanical failures, recovery boosts. The result is cryptographically fair (Web Crypto API), but the journey to get there is pure drama.

The design principle: every race should feel like it could go either way until the final stretch.

Add Picks

→

Choose Terrain

→

Race Starts

→

Winner Revealed

04 — USER FLOW

HOW IT WORKS

Three steps. No accounts, no setup friction. Enter your picks, choose a terrain, and watch the race unfold.

01

Add Your Picks

Enter team names, food options, draft picks. Up to 25 entries. Choose your terrain and weather.

02

Start the Race

Pixel cars race across Stadium, Neon, Desert, or Retro tracks. Rain and snow affect speed. Mechanical failures create drama.

03

Winner Revealed

Finish line appears at 88%. Cars sprint. 3.5s victory celebration with confetti and fanfare.

MyPick.io setup screen with terrain and weather selection

05 — MULTIPLAYER

REAL-TIME MULTIPLAYER

Supabase Realtime

Races are better with an audience. Host creates a room with a 6-character code, viewers join and watch the race live with 100% sync accuracy. Authoritative host pattern ensures every viewer sees the exact same race.

Host controls, viewers watch. Presence-based disconnect handling with 7s/12s thresholds. Built on Supabase Realtime free tier.

MyPick.io homepage with multiplayer lobby

Outcome / UI Showcase / Product

UI SHOWCASE

4 terrain environments, each with distinct procedural scenery and color palettes. 4 weather conditions layer on top with rain particles, snow, and night mode lighting. Each terrain-weather combo has unique speed modifiers and failure rates. 16 unique race experiences.

MyPick.io race with dynamic camera following the leader

MyPick.io winner celebration with confetti

07 — RESULTS

THE BUILD

v2.9.1 ships the full experience. Built from scratch in vanilla JS and Canvas 2D. Zero dependencies. Every pixel is intentional.

4

Terrains

Stadium, Neon, Desert, Retro. Each with procedural scenery and distinct color palettes.

4

Weather

Clear, Rain, Snow, Night. Terrain-specific speed modifiers and failure rates.

17

Audio Tracks

Terrain ambient, weather layers, announcer calls with smart ducking.

16

Race Combos

4 terrains x 4 weather conditions. Every race feels different.

25

Max Teams

Pixel art sprites with shadows, top-down perspective, 8 car colors.

Crypto

Secure

Web Crypto API for truly random, unbiased, cryptographically fair results.

MyPick.io

Solo Creator — Design + Engineering. 2025–2026

Try MyPick.io View Portfolio →