web-app gamification product-design responsive

Emma-O-Rama – Detective Breed Prediction Web App

2026-10-08

Models Used

Google Gemini 3.6 Flash

Tools Used

HTML5 CSS Glassmorphism Headless Chrome CDP Node.js Linear GraphQL API

Interesting Facts

Built around 3D Detective Emma holding a gold magnifying glass in her tweed deerstalker hat and coat.
Full-bleed modern web application architecture: 2-column asymmetric grid on desktop (≥992px) and fluid single-column stack on mobile.
Glassmorphic dark aesthetic (#0D0C10) layered with semi-transparent frosted panels (rgba(28, 24, 33, 0.75)), subtle 1px white border strokes, and 12px backdrop-blur filters.
Interactive rank prediction rack supporting color-coded slots for top 5 dominant breeds with lock-in confetti celebration.
Tracked in Linear under project Emma-O-Rama (P-BLD-58) and issue BLD-1093.

A modern, responsive, gamified web application for Emma-O-Rama – guessing Detective Emma's top 5 DNA breed mix.

"Detective Emma on the Case" – Modern Web Application

Designed to move beyond simple constrained phone frames, Emma-O-Rama is built as a full-bleed, responsive web application that puts Detective Emma center stage.

Features an asymmetric 2-column grid layout on desktop that seamlessly folds into a single-column stack on mobile viewports.

Interactive Features & Game Mechanics

3D Detective Emma Showcase – Polaroid-style hero unit pinned with a red pushpin featuring Detective Emma artwork and cursive handwriting caption.
Segmented Control Panel – Toggle between the Top 5 Rank Rack and 36-Breed Suspect Search with smooth tab transitions.
Color-Coded Rank Hierarchy – Distinct rank slots (#1 Amber Gold, #2 Hot Pink, #3 Sky Blue, #4 Bright Purple, #5 Emerald Green).
Lock-In Action Flow – Investigator alias entry + lock-in submission triggering canvas confetti animations.

Assets

Emma-O-Rama – Detective Breed Prediction Web App - asset 1

Emma-O-Rama – Detective Breed Prediction Web App - asset 2