SpotOn is a daily color hunt game. Every day, a new color is revealed and players use their phone's camera to find that color in the real world — on a vintage car, a parrot, their grandma's teapot, whatever they can find.
The daily game loop:
- See today's color — A big swatch, the color name, community stats, and your streak badge greet you
- Hunt — Tap to open your phone's camera and photograph something that matches
- The Reveal — A cinematic animation zooms out from 14x on the sampled pixel to 1x, revealing your full photo with crosshairs, film grain, and scanlines. This is the moment. "Wait... you found it on a FLAMINGO?!"
- Retake or submit — See your score and decide: try again, or lock it in
- Caption it — Add a short story. This is what drives the comments
- Compete — Two leaderboards: By Score (accuracy) and By Votes (community favorite). A 76% match with a great caption can beat a 99% paint swatch
How we built it
Color Science — CIEDE2000
Getting color matching right was non-negotiable. Naive RGB distance produces absurd results (perceptually similar colors score poorly, while visually different colors score well). We implemented the full CIEDE2000 color difference algorithm, the same standard used by Pantone and industrial color matching:
$$ \Delta E_{00} = \sqrt{ \left(\frac{\Delta L'}{k_L S_L}\right)^2 + \left(\frac{\Delta C'}{k_C S_C}\right)^2 + \left(\frac{\Delta H'}{k_H S_H}\right)^2 + R_T \frac{\Delta C'}{k_C S_C} \frac{\Delta H'}{k_H S_H} } $$
This converts RGB to CIELAB color space and applies perceptual weighting corrections for lightness, chroma, and hue — including the rotation term that handles the problematic blue region where human perception is least linear. The result: a match percentage that actually feels right.
Camera Pipeline
On mobile, the capture button triggers a native file input with capture="environment", which opens the rear camera directly. Once the player takes a photo, we load it into a canvas and sample the center region to extract the dominant color. That color is run through CIEDE2000 against the daily target to produce the match score. On desktop, we show a QR code linking to the Reddit post so players can switch to their phone.
The Reveal Animation
After capture, the HuntScreen plays a requestAnimationFrame-driven zoom-out from 14x to 1x over 4 seconds with cubic easing. A crosshair overlay fades as zoom decreases, film grain and CRT scanlines layer on atmosphere, and the score slams in at the end. If you hit 95%+, confetti fires.
Stack
- Frontend: React 19, Vite, Tailwind CSS 4
- Backend: Devvit server runtime — all server-side logic runs on Devvit's infrastructure
- Storage: Devvit Redis for submissions, leaderboards, voting, and streaks (with TTL-based expiration)
- Platform: Devvit Web with dual entry points (splash + game)
- Testing: Vitest with 199+ tests, color science validated against Sharma, Wu, and Dalal (2005) reference dataset
- AI Tools: Devvit MCP, Claude Code
Challenges we ran into
Camera access in webviews. This was the biggest technical risk from day one. Devvit web apps run inside an iframe, and direct camera streaming via getUserMedia behaves unpredictably across iOS Safari, Android Chrome, and desktop browsers. We sidestepped this by using a file input with capture="environment" — it opens the native camera on mobile without requiring streaming permissions, and works reliably across platforms.
Making color matching feel fair. Early testers consistently complained that their "perfect match" scored 82%. The problem was using Euclidean RGB distance, which doesn't account for how humans actually perceive color. Switching to CIEDE2000 fixed this — a match that looks right now scores right. This single change transformed the experience from frustrating to satisfying.
Designing for discussion, not just gameplay. The hardest design challenge wasn't technical — it was ensuring the game generates comments. We realized the caption is the most important feature in the entire app. Without it, submissions are just scores. With it, every submission becomes a story: "Had to photograph my boss's tie during a meeting," "My cat was NOT cooperative," "Home Depot, aisle 7." The caption is what turns a solo game into a community experience.
Accomplishments that we're proud of
- The reveal animation. The cinematic zoom from 14x to 1x makes the score reveal a moment people react to in comments — it's the reason submissions feel like stories, not just numbers.
- Dual leaderboards that create debate. "By Score" rewards precision. "By Votes" rewards creativity. When the paint swatch guy hits 99% but the cat nose caption gets 200 upvotes, the comments write themselves.
- Streaks that build habits. Consecutive-day tracking with a visible badge on the intro screen. Miss a day and your streak resets, creating daily return motivation.
- A game that works without the camera. Gallery browsing, voting, and leaderboards are accessible from every screen state — intro, result, and already-played. No player is locked out of the community experience.
What we learned
Building for Reddit means building for conversation, not just engagement. Every design decision — the caption, the slow reveal, the dual leaderboard — was optimized for giving people something to talk about.
We also learned that perceptual color science is a rabbit hole with no bottom.
What's next for SpotOn
- Community color nominations — Colors submitted by the subreddit
- "Best Of" compilations — Auto-generated weekly recap posts featuring top submissions
- Weekly themes — "Ocean Week" where all colors are aquatic, creating narrative arcs across days
Log in or sign up for Devpost to join the conversation.