// 22hrs — prototype screens const { useState, useEffect, useRef } = React; // ────────────────────────────────────────────── // 1. Welcome // ────────────────────────────────────────────── function ScreenWelcome({ go }) { return (
{/* faint hero glow */}
22hrs
Smart aligner case

Stay on track
without thinking
about it.

Your case logs every minute your aligners are out — so 22 hours a day takes care of itself.

go('signup')}>Get started go('signin')}>I already have an account
); } // ────────────────────────────────────────────── // 2. Sign in // ────────────────────────────────────────────── function ScreenSignIn({ go }) { const [email, setEmail] = useState('jordan@example.com'); const [pw, setPw] = useState('••••••••••'); const valid = email.includes('@') && pw.length >= 6; return (
Welcome back

Sign in to 22hrs

Show } />
Forgot password?
go('find')}>Continue
OR
go('find')} leading={ }>Continue with Apple go('find')} leading={ }>Continue with Google
); } // ────────────────────────────────────────────── // 3. Find case (intro / permission) // ────────────────────────────────────────────── function ScreenFind({ go }) { return (
Pair your case

Let's find your case.

Open the lid once. The arches on top will pulse cyan when the case is ready to pair.

We'll need Bluetooth
Used only to talk to your case. Never for tracking.
 go('scan')}>Start scanning
); } // ────────────────────────────────────────────── // 4. Scanning // ────────────────────────────────────────────── function ScreenScan({ go }) { // auto-advance after 3.2s useEffect(() => { const t = setTimeout(() => go('found'), 3200); return () => clearTimeout(t); }, [go]); const [dots, setDots] = useState(''); useEffect(() => { const i = setInterval(() => setDots((d) => d.length >= 3 ? '' : d + '.'), 400); return () => clearInterval(i); }, []); return (
Bluetooth · listening

Looking for your case{dots}

Hold the case within an arm's length.
go('find')}>Cancel
); } // ────────────────────────────────────────────── // 5. Case found // ────────────────────────────────────────────── function ScreenFound({ go }) { return (
Case detected

Found one nearby.

22hrs Case
22H–2A41–07
Battery
84%
Signal
{[6, 9, 12, 14].map((h, i) =>
)}
Strong

Tracking starts the next time aligners come out.

go('paired')}>Pair this case go('scan')}>Not this one — keep looking
); } // ────────────────────────────────────────────── // 6. Paired (success moment) // ────────────────────────────────────────────── function ScreenPaired({ go }) { useEffect(() => { const t = setTimeout(() => go('home'), 1800); return () => clearTimeout(t); }, [go]); return (
Paired
You're all set.
Wear-time tracking is on. The case will keep counting in the background.
); } // ────────────────────────────────────────────── // 7. Home / Dashboard // ────────────────────────────────────────────── function ScreenHome({ go, gamification = 'light' }) { // wear pattern today: a few in/out gaps simulating real day const segments = [ { type: 'wearing', startMin: 0, endMin: 7 * 60 + 30 }, { type: 'wearing', startMin: 8 * 60 + 5, endMin: 12 * 60 + 12 }, { type: 'wearing', startMin: 12 * 60 + 38, endMin: 18 * 60 + 45 }, { type: 'wearing', startMin: 19 * 60 + 15, endMin: 21 * 60 + 24 }]; const wornMin = segments.reduce((s, x) => s + (x.endMin - x.startMin), 0); const targetMin = 22 * 60; const pct = Math.round(wornMin / targetMin * 100); const remaining = Math.max(targetMin - wornMin, 0); const remH = Math.floor(remaining / 60),remM = remaining % 60; const wornH = Math.floor(wornMin / 60),wornM = wornMin % 60; const week = [21.8, 22.4, 20.1, 22.6, 19.4, 22.9, +(wornMin / 60).toFixed(1)]; return (
{/* Sticky status strip */}
Today · Wed
Hi, Jordan
{/* Hero ring */}
Worn
{wornH}h {String(wornM).padStart(2, '0')}m
of 22h · {pct}%
You're on track today.
{remH > 0 ? `${remH}h ` : ''}{remM}m to reach your daily target.
{/* Today's timeline */}
Today's wear 4 sessions · 4 gaps
{/* Two-up: streak + week */}
Streak
12days
{gamification === 'none' ? 'Days at or above 22h' : 'Longest stretch yet'}
{gamification !== 'none' &&
{[...Array(12)].map((_, i) =>
)}
} This week
97%
{/* Tray progress */}
Current tray
14 / 28
Switches
tomorrow
Day 6 of 7 · halfway through your plan
{/* Case status */}
Your case
Battery 84% · 3.5m away
{/* Tab bar */}
{[ { id: 'home', label: 'Today', active: true, icon: }, { id: 'insights', label: 'Insights', icon: <> }, { id: 'progress', label: 'Progress', icon: <> }, { id: 'settings', label: 'You', icon: <> }]. map((t) =>
go(t.id)} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '4px 0' }}> {t.icon}
{t.label}
)}
); } Object.assign(window, { ScreenWelcome, ScreenSignIn, ScreenFind, ScreenScan, ScreenFound, ScreenPaired, ScreenHome });