Suni — Approved Mockups
Locked screens from the design sessions, in order. Click any to view. This set grows as we approve more.
01
Mirror / home — chromatic + glass
The visual language: chromatic gradient scenes, Apple glass chrome, you stand in a selectable backdrop.
02
Mirror / home — backdrop selector
On-demand glass popover from the scene button. Top = the space, bottom = the outfit.
03
Mirror / home — skinny look bar
Compact glass capsule hugged to the nav; pull-up handle for the styling tray.
04
Onboarding — the arc
Welcome → face capture → body turn → first magic → land in the Mirror.
05
Onboarding — Step 1: Welcome
Brand moment, "See yourself in anything.", entrance choreography + states.
06
Onboarding — Step 2a: Face capture
Face ID-exact enrollment: oval frame, green ticks per angle, two passes. States + edge cases.
07
Onboarding — Step 2b: Body scan (assembled)
Hands-free setup → pose-lock → scan turn → quality check → targeted retake → frosted reveal. All 9 beats.
08
Onboarding — Step 2b: The reveal
Frosted glass forms you, dissolves with iOS-style confetti → "Meet your reflection" + Build my closet.
09
Step 3 — Build closet → Magic 2 (arc)
Scan clothes → auto-tag → closet fills → first try-on & mix → land in the Mirror.
10
Achievement-reveal + reward system
"Add N items" pre-render → frosted forming → Glow "Closet leveled up" pop. Reusable "Suni moment" component.
11
Bring-to-life (premium hero)
Love a look → template library of real viral formats + drop-synced Suni Sounds → upgrade → feed-native "Living look," saved forever.
12
Rewards hub + buy-with-Glow
Glow, streak, earn/redeem, Pro upsell — and the cash-back loop paying off in the shop.
13
Shopping center + smart search
"Blue shirt" → every blue shirt across 43 stores; full product page on you (angles, size+fit, reviews, dimensions, Glow pricing).
14
Streak / Glow animations + recovery
Streak +1 burst → flies to top bar; Glow flies to balance; streak-loss recovery pop-up ($0.99 / 100 Glow).
15
The Feed — a style community
Mirror-first, social as the distribution layer. Living-look + Ask-the-closet posts, Suni Sounds, shop-the-look; chromatic-glass system.
16
Create a post — "Share to Suni"
The content-creation flow: Post a fit · Living look · Ask the closet · Haul. Plus the Living-look editor (bring-to-life + Suni sound + shop tag).
17
Direct messages
Style talk 1:1 — advice, an Ask-the-closet poll inside chat, and buy/sell coordination cards.
18
Profile — public closet & looks
Famgram pattern exactly: cover + left avatar + Edit profile + stats. Looks grid + Saved split into "Clothes I own" vs "don't own (yet)." Rewards + Closet here.
Full reasoning trail lives in
../decision-log.md
. Business model + reward economy locked. Next up: the Feed, then Step 4 (land in the Mirror).