Diyansey Dance is a pose-detection rhythm game I built in Flutter, deployed across web, iOS, Android, and macOS from a single codebase. The app turns webcam frames into real-time movement scoring: MediaPipe (web) and ML Kit (native) extract body landmarks at 30 fps, compare them against teacher reference choreography stored as pose-JSON in Firebase Storage, and surface PERFECT / GOOD / OK / MISS feedback weighted into a max-10,000 session score.
This case study presents the brand identity, the always-dark design system (six dance categories with distinct color identities, four-tier feedback typography, scoring data blocks), and a complete prototype tour — onboarding, auth + profile completion, dance discovery grid, the live in-game player with HUD and scoring bursts, the session result screen, leaderboards (global + per-category), profile mastery, and the Plus / Pro / VIP subscription flow. The web surfaces include the public landing (hero / features / categories / pricing) and the admin dashboard (video library, sponsors, reports, leaderboard moderation).
Firebase Auth (email + Google), Firestore (users, videos, scores, denormalized leaderboard subcollections), 16 Cloud Functions (submitScore, mirrorGoogleProfilePhoto, onUserDeleted, syncAdminClaim, etc.), and Cloudflare R2 for video CDN handle the backend. Pure logic — the ScoringEngine, leaderboard aggregation, video access rules — is decoupled into testable Dart helpers and Node validators.
CASE STUDY · 2026
DIYANSEY DANCE.
A full design system in service of a single feedback loop. Six branded category colors, four scoring tiers, one display face — every chip, card, and button composed from the same primitive kit. Adding a seventh dance category is a one-token change.
10
Screens
6
Categories
4
Tiers
00Design System
v 1.0Design System
DANCE WITH PURPOSE.
A pose-detection dance game that turns webcam frames into real-time scoring. Six categories, four feedback states, one ruthless rhythm engine.
6
Categories
4
Feedback
10k
Max score
00aFoundations · Palette
01 / FOUNDATIONS
Palette
Brand
#C81E3F
Primary · diyansey
#F5B0CE
Secondary · dance
#FFD700
Accent · Gold
#0A0908
Ink
Dance Categories · active state
High Heels
#C81E3F
Hip Hop
#4CAF50
Oryantal
#FF9800
Bachata
#FFC107
K-Pop
#9C27B0
Street Jazz
#2196F3
Surface · Always-Dark Theme
#000000
bg
#0F0F12
bg-2
#1A1A1F
bg-3
#131318
card
00bFoundations · Feedback States
02 / FOUNDATIONS
Feedback States
Pose-comparison score (0–100) maps to one of four feedback tiers, surfaced as a typography burst over the player camera. Hover PERFECT to trigger the in-game star burst.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
85–100
PERFECT!
Best body pose match
70–84
GOOD!
Within tolerance
50–69
OK
Close enough
< 50
MISS
Out of range
00cFoundations · Typography
03 / FOUNDATIONS
Typography
Display / 2XL
PERFECT!
Display / XL
High Heels
H1 / Body
Pick a dance
H2 / Body
Today's top scores
Body
Webcam-driven pose detection compares your movement to the teacher reference.
Mono / Data
9,840 · 1:47 · ×128
Kicker
01 / FEEDBACK · PERFECT
Display
BEBAS NEUE
Body
Inter
Mono
JetBrains Mono
00dLibrary · Components
04 / LIBRARY
Components
Buttons
Category chips
High HeelsHip HopOryantalBachataK-PopStreet Jazz
EasyMediumHard
Inputs
Search dances, teachers…
efe@diyansey.co
Data blocks
9,840
Total
48
Streak
×128
Combo
HIGH HEELS · Lvl 4Top 1.2%
HIGH HEELS · INT
CHOREO · INTERMEDIATE
TALL
High Heels · 2:14
High Heels
Nav · Bottom
Home
Find
Ranks
Me
01Onboarding · welcome
9:41
01 · WELCOME
DANCE WITH PURPOSE.
Pose-detection rhythm game. Real teachers, real scoring, real progress.
diyanseydance.com
POSE-DETECTION RHYTHM GAME
DANCE WITH PURPOSE.
Webcam-driven scoring against teacher reference choreography. Six categories, four feedback tiers. No equipment.
