01 — mid-fi wireframe · iOS · 4 screens

Stillroom/onboarding — grayscale layout draft

Frames Welcome / Vibe / Duration / Play
Device iPhone 14 · 390×844 pt
Goal validate flow before hi-fi color pass
Screen 01 · Welcome
StillroomSign in
TXT · 10 MIN · YOU AGAIN
Return
to yourself.
Body copy · one sentence about the room, the ten minutes, the calm
Choose today's session →
I've been here before
meta · 10 min a day · offline · free
Primary CTA → 02 · Vibe
Ghost CTA → 02 · Vibe
Screen 02 · Pick a vibe
← BackStep 1 · 3
EYEBROW · what's today like?
Pick a vibe.
Body copy · one sentence: not a mood, a room
Kyoto morning
Green field
Coastline
Late window
Sit here today →
● ○ ○ · pagination
Card tap → mark selected
CTA → 03 · Duration
Screen 03 · How long?
← KyotoStep 2 · 3
EYEBROW · give ten to yourself
How long?
10MIN
5101520
Bell at endsoft brass chime
Ambient humfaint room noise
Track streakoff — no guilt
Begin →
Dial drag + preset chips
CTA → 04 · Play
Screen 04 · Now
← BackKyoto · 10 min
breathing
circle
CSS ANIM
breathe in. hold. release. 4 IN · 4 HOLD · 6 OUT
0:0003:12 / 10:0010:00
−1END
End (or timer 0) → 05 · Done
Pause holds circle, timer freezes
01 → 02Primary CTA
Ghost CTA
Both routes go to Vibe (returning users skip via cookie)
02 → 03Card tap = select
Sticky CTA carries selection
Back = clear + return
03 → 04Preset chips + drag dial
Toggles persist in settings
Bell only if enabled
04 → 05Auto on timer = 0
END = confirmation sheet
Pause holds circle animation

Legend

  • Solid outline = final position pinned
  • Dashed outline = layout placeholder, may reflow
  • Gray fill = decorative / imagery block
  • Black fill = active state / primary action
  • Ocher note = interaction spec (hit target, transition)

Interaction notes

  • Cards on 02 use a 44 pt tap target (iOS min)
  • Dial on 03 supports drag + snap-to-preset
  • Play circle 04 = CSS scale 0.72↔1.06, 8 s ease

Out of scope this pass

  • Session-done screen 05 (spec next round)
  • Onboarding tour on 01 for first-run users
  • Streak / history screen (feature-flagged)