Onboarding cascade prototype

Visual fidelity prototype per 08-ux-design.md. Interactive throughout. No backend.

▶ Walk the cascade
13 screens
10 locked decisions
~35s Build climax
7 min full operator path

Locked decisions

  • 1. Hybrid manifestation (subdomain at Step 1, full reveal at Build)
  • 2. Voice input at Step 1 (opt-in)
  • 3. Always-visible audit counter + [why?] drill-in
  • 4. Persistent mobile bottom drawer with peek
  • 5. Geometric sigil (breathing) Lora identity
  • 6. Silent autosave + magic-link return
  • 7. Brief 5-second pre-step
  • 8. Light mode with warm accents
  • 9. Three task cards + welcome dashboard handoff
  • 10. Visible confidence + offer alternative (AI uncertainty)

Entry

Pre-step

5-second establishing shot. Lora sigil + sentence + 2 CTAs.

View →

Step 1

Step 1a: Voice capture

Hold-to-speak with waveform animation, 30s timer, listening state, transcribing transition.

View →

Step 1b: Transcript review

Operator sees own words quoted. Lora's parse with confidence marks. Email + magic link.

View →

Step 1c: Type path

3 fields + live subdomain hint (try typing) + magic-link CTA.

View →

Step 1d: Magic-link return

Welcome back, your account is live, subdomain reserved. Warming-flash trust deposit.

View →

Reverse forms

Step 2: Profile

Reverse-form. Pre-filled state, county, services, funding. Visible confidence + try-again.

View →

Step 3: Operations

Slider for size + ratio. Pre-filled hours and transport. Reverse-form pattern continues.

View →

Step 4: Policies

14 SOPs materialize one by one. Tap [read] for the styled policy view. Tap [why?] on 5700 for the universal trust drawer.

View →

Step 5: Strategy

Year-1 roadmap visualization. Capital posture + growth aim pre-fills.

View →

Decision

Brief preview (surprise)

Tomorrow morning's brief, styled with the operator's brand. Trust deposit before the Hatch.

View →

Hatch: Choose relationship

Three equal-weight cards. Lora speaks first. Brief preview below. No 'recommended' badge.

View →

Climax

Build phase

Full-screen takeover. ~35-second progressive reveal: subdomain dots fill, brand kit assembles, 14 SOPs seal, public site renders, brief schedules, CTA unlocks. Watch.

View →

Resolution

Welcome moment

Welcome + 3 task cards + 'What I built for you' (welcome PDF, brand kit, year-1, Origin tier). Not a full dashboard yet, intentionally; we have more to figure out.

View →

Recommended viewing order: Pre-step → Step 1 voice → Step 1 review → Step 2 → Step 4 → Hatch → Build → Welcome.

Try at narrow viewport for the mobile drawer-peek behavior.

Try [why?] at Step 4 on the 5700 SOP row to see the universal trust-drawer.