/* Poise onboarding - Act 3 (Proof): S9-S13 (coaching moved to S16) */ const { useState, useEffect, useRef } = React; const { Button: PButton, Badge: PBadge, Card: PCard, ProgressRing: PRing } = window.PoiseDesignSystem_eee0d2; const SUPPORTED_MODELS = ['AirPods Pro (all generations)', 'AirPods 3', 'AirPods 4', 'AirPods Max', 'Beats Fit Pro']; /* X-in-circle row mark (matches the reference's xmark.circle privacy rows) */ const XCircle = ({ size = 16 }) => ( ); /* Privacy row: x-circle mark + label, centred to match the reference card */ function PrivacyRow({ children, delay }) { return (
{children}
); } /* ============ S9 · Motion permission ============ */ /* Reworked to mirror the shipped MotionPermissionScreen reference: centred airpods icon, "Connect Poise to Motion." headline, a privacy card, an on-device footer. Logic (dialog → allow/deny → track → flow) is unchanged. */ function MotionScreen() { const flow = useFlow(); const [dialog, setDialog] = useState(false); const [denied, setDenied] = useState(flow.motionDenied); const allow = () => { setDialog(false); flow.setMotionDenied(false); track('permission_motion', { granted: true }); flow.next(); }; const deny = () => { setDialog(false); setDenied(true); flow.setMotionDenied(true); track('permission_motion', { granted: false }); }; return ( flow.back()} />} cta={ denied ? (flow.setMotionDenied(false), flow.next()) : setDialog(true)}> {denied ? 'Open Settings' : 'Allow motion access'} 100% on-device. Always. } >
Connect Poise to Motion.

Poise uses your AirPods’ motion sensors to detect when you slouch.

We don’t collect your motion data We don’t sell your data We don’t track your location
{denied && (

Poise needs motion data from your AirPods to detect your posture. The app cannot work without it. Please enable it in Settings.

)}
{dialog && ( )} ); } /* ============ S10 · Notification permission ============ */ /* Reworked to mirror the shipped NotificationPermissionScreen reference: centred bell icon, "Stay on track." headline, spam-reassurance line, and a two-tap "Skip for now → Skip anyway" urge. Logic (dialog/track/flow) intact. */ function NotificationScreen() { const flow = useFlow(); const [dialog, setDialog] = useState(false); const [denied, setDenied] = useState(false); const [skipUrge, setSkipUrge] = useState(false); const close = (granted) => { setDialog(false); if (granted) { track('permission_notifications', { granted: true }); flow.next(); } else { setDenied(true); track('permission_notifications', { granted: false }); } }; const skip = () => { if (!denied && !skipUrge) { setSkipUrge(true); return; } track('permission_notifications', { granted: false, skipped: true }); flow.next(); }; return ( flow.back()} />} cta={ denied ? flow.next() : setDialog(true)}> {denied ? 'Open Settings' : 'Allow notifications'} } >
Stay on track.

Poise sends streak reminders and session updates to keep you consistent.

We’ll never spam you. You control what notifications you receive.

{denied ? (

Notifications were denied. Poise still works without them, but you’ll miss streak reminders and session updates.

) : skipUrge ? (

Are you sure? Notifications are how Poise keeps you consistent: streak reminders and session nudges. You can always turn them off later.

) : null}
{dialog && ( close(false)} onAllow={() => close(true)} /> )} ); } /* ============ S14 / S14a · AirPods compatibility check ============ */ /* S14 (AirpodsScreen): static searching state — stays until real AirPods connect. S14a (AirpodsResultScreen): result determined by the airpodsResult tweak. */ const airpodsModelList = (delayBase, rise = true) => (
{SUPPORTED_MODELS.map((m, i) => (
{m}
))}
); /* forceIncompatible: rendered as the frozen backdrop behind the incompatible modal — shows the amber state directly with no flash. */ function AirpodsScreen({ forceIncompatible }) { const flow = useFlow(); const result = flow.t.airpodsResult; const connected = forceIncompatible || flow.airpodsConnected; const incompatible = forceIncompatible || (connected && result === 'incompatible'); const compatible = !forceIncompatible && connected && result === 'compatible'; const resolved = incompatible || compatible; const [instant] = useState(flow.s11Instant); useEffect(() => { if (forceIncompatible) return; if (flow.s11Instant) flow.setS11Instant(false); }, []); // eslint-disable-line react-hooks/exhaustive-deps // Mobile has no simulate-AirPods panel (that's a desktop review-canvas // affordance - real hardware can't be paired from a browser tab either // way), so without this a mobile visitor would sit on "Searching…" // forever. Auto-advance to S14a after a beat, as if a pair had just // connected. useEffect(() => { if (forceIncompatible || !flow.isMobile || connected) return; const id = setTimeout(() => flow.go('airpods-result'), 2000); return () => clearTimeout(id); }, [forceIncompatible, flow.isMobile, connected]); const rc = instant ? '' : 'rise'; const headline = compatible ? 'These AirPods work with Poise.' : 'Are your AirPods compatible?'; const body = compatible ? 'Their motion sensors are ready to track your posture.' : 'Connect your AirPods and put them in your ears so Poise can check if they are able to detect motion.'; return ( flow.back()} />} cta={compatible ? flow.go('calibration')}>Continue :
Continue
} >
{headline}

{body}

{incompatible ? ( These AirPods aren't compatible ) : compatible ? ( AirPods connected and compatible ) : ( Searching for AirPods… )}
Works with {airpodsModelList(0, !instant)}
); } /* ============ S14a · AirPods result ============ */ function AirpodsResultScreen() { const flow = useFlow(); const r = flow.t.airpodsResult; const phase = r === 'incompatible' ? 'incompatible' : r === 'never connected' ? 'none' : 'ok'; /* Reaching the result means a pair connected */ useEffect(() => { flow.setAirpodsConnected(true); }, []); // eslint-disable-line react-hooks/exhaustive-deps if (phase === 'ok') { return ( } cta={ flow.next()}>Continue} >
{flow.t.motion && }
Motion sensors live These AirPods are compatible.

Connected and reading motion. Keep them in your ears to see how Poise works.

 ); } if (phase === 'incompatible') { /* Pure modal overlay — AirpodsScreen is literally rendered behind this in main.jsx */ return (
Unfortunately, these AirPods don't have motion sensors.

Earlier generations of AirPods shipped without the motion hardware Poise needs. Poise can't work without them.

{ flow.setAirpodsConnected(false); flow.setS11Instant(true); flow.go('airpods'); }} style={{ marginTop: 4 }}>Try another pair
); } /* none / never connected: stay on S14 searching screen */ useEffect(() => { flow.go('airpods'); }, []); return null; } /* ============ S16 · Coaching style ============ */ const COACH_STYLES = [ { k: 'gentle', name: 'Relaxed', desc: 'Occasional reminders only. Progress takes longer, but it won’t interrupt you much.' }, { k: 'balanced', name: 'Balanced', desc: 'The middle ground. Steady improvement without constant nudges.' }, { k: 'strict', name: 'Intensive', desc: 'More nudges, faster improvement. Best if you want real change quickly.' }, ]; function CoachingScreen() { const flow = useFlow(); const [style, setStyle] = useState(flow.coachStyle || 'balanced'); const pick = (k) => { setStyle(k); }; return ( flow.back()} />} cta={ { flow.setCoachStyle(style); track('sensitivity_selected', { style }); flow.next(); }}>Continue } >
How quickly do you want to improve?

More reminders means faster progress. You can change this anytime.

{COACH_STYLES.map((c, i) => (
))}
); } /* ============ S15 · Calibration - signature moment 2 ============ */ const TOTAL_READINGS = 41; // representative: ~10 Hz × 4 s (annotated outside the frame) function CalibrationScreen() { const flow = useFlow(); const [phase, setPhase] = useState('ready'); // ready | count | sampling | analysis | done const [count, setCount] = useState(3); const [readings, setReadings] = useState(0); const [progress, setProgress] = useState(0); const [aLine, setALine] = useState(0); const [figReady, setFigReady] = useState(false); const [livePitch, setLivePitch] = useState(0); const [failed, setFailed] = useState(false); const timers = useRef([]); const pitchAnim = useRef(null); const attemptRef = useRef(0); const highPitchSince = useRef(null); const frozenPitch = useRef(0); // Keep a ref so T always reads the live motion value, even from stale closures. const motionRef = useRef(flow.t.motion); motionRef.current = flow.t.motion; const T = (fn, ms) => timers.current.push(setTimeout(fn, motionRef.current ? ms : ms * 0.05)); useEffect(() => () => { timers.current.forEach(clearTimeout); if (pitchAnim.current) cancelAnimationFrame(pitchAnim.current); }, []); useEffect(() => { let cancelled = false; const load = (src) => new Promise((res) => { const im = new Image(); const done = () => res(); im.onload = () => (im.decode ? im.decode().then(done, done) : done()); im.onerror = done; im.src = src; }); Promise.all([load(window.__resources ? window.__resources.imgHeadMint : '/onboarding-demo/app/head-mint.png'), load(window.__resources ? window.__resources.imgTorsoMint : '/onboarding-demo/app/torso-mint.png')]).then(() => { if (!cancelled) requestAnimationFrame(() => { if (!cancelled) setFigReady(true); }); }); return () => { cancelled = true; }; }, []); const tryAgain = () => { setFailed(false); setPhase('count'); setCount(3); setProgress(0); setLivePitch(0); highPitchSince.current = null; PoiseAudio.tick(); T(() => { setCount(2); PoiseAudio.tick(); }, 1000); T(() => { setCount(1); PoiseAudio.tick(); }, 2000); T(() => startSampling(), 3000); }; const begin = () => { setPhase('count'); setCount(3); PoiseAudio.tick(); T(() => { setCount(2); PoiseAudio.tick(); }, 1000); T(() => { setCount(1); PoiseAudio.tick(); }, 2000); T(() => startSampling(), 3000); }; const startSampling = () => { setPhase('sampling'); const shouldFail = flow.t.variantCalib === 'Fail'; highPitchSince.current = null; const failedDuringRun = { current: false }; const dur = motionRef.current ? 4000 : 400; const t0 = performance.now(); const step = () => { const el = Math.min(1, (performance.now() - t0) / dur); setProgress(Math.round(el * 100)); if (el < 1) { requestAnimationFrame(step); } else { if (pitchAnim.current) { cancelAnimationFrame(pitchAnim.current); pitchAnim.current = null; } if (failedDuringRun.current) { setFailed(true); } else { setLivePitch(0); startAnalysis(); } } }; requestAnimationFrame(step); /* Pitch simulation */ const FAIL_THRESHOLD = 15, FAIL_SUSTAIN_MS = 400; const pt0 = performance.now(); const pitchStep = () => { const t = (performance.now() - pt0) / 1000; const spike = shouldFail && t > 1.6 && t < 3.4 ? ( t < 2.4 ? 60 * Math.sin((t - 1.6) * Math.PI / 1.6) // swing to +60° : -50 * Math.sin((t - 2.4) * Math.PI / 2.0) // arc to -50° ) : 0; const p = 3.5 * Math.sin(t * 0.7) + 1.5 * Math.sin(t * 1.9 + 1.1) + 0.8 * Math.cos(t * 3.1) + spike; setLivePitch(p); if (Math.abs(p) >= FAIL_THRESHOLD) { if (!highPitchSince.current) highPitchSince.current = performance.now(); else if (performance.now() - highPitchSince.current > FAIL_SUSTAIN_MS) { failedDuringRun.current = true; highPitchSince.current = null; } } else { highPitchSince.current = null; } pitchAnim.current = requestAnimationFrame(pitchStep); }; pitchAnim.current = requestAnimationFrame(pitchStep); }; const startAnalysis = () => { if (pitchAnim.current) { cancelAnimationFrame(pitchAnim.current); pitchAnim.current = null; } setLivePitch(0); setPhase('analysis'); setALine(0); T(() => setALine(1), 1000); T(() => setALine(2), 2000); T(() => { setPhase('done'); PoiseAudio.success(); }, 3100); }; if (failed) { return ( }>
{/* Frozen sampling content */}
Reading your posture...

Hold still, almost done.

{/* Centered alert overlay — ios-alert texture */}
Couldn't set your baseline

You moved a bit too much. Sit still, look straight ahead, and try again.

 ); } if (phase === 'ready') { return ( flow.back()} />} cta={I'm ready} >
Let's find your baseline.

Sit up tall and look straight ahead. Tap when you're ready.

 ); } if (phase === 'count') { return ( }>
{count}
Get into position.

Sit up tall and look forward.

 ); } if (phase === 'sampling') { return ( }>
{(() => { const abs = Math.abs(livePitch); const col = abs >= 15 ? '#FF6363' : abs >= 8 ? 'var(--status-warn)' : 'var(--mint)'; const sign = livePitch >= 0 ? '+' : ''; return (
Reading your posture...
{sign}{Math.round(livePitch)}°
); })()}
); } if (phase === 'analysis') { const lines = ['Analysing your posture data', 'Finding your neutral position', 'Calculating your personal baseline']; return ( }>
{lines.map((l, i) => (
= i ? 1 : 0.18, transition: 'opacity 500ms var(--ease-out)' }}> {aLine > i ? : } {l}
))} = 1 ? 1 : 0, transition: 'opacity 500ms var(--ease-out)' }}>Your baseline is personal. Every nudge is measured against it.
); } /* done */ return ( } cta={ flow.next()}>Continue} >
Baseline set.

Your AirPods are now calibrated. Recalibrate anytime in Settings.

 ); } /* ============ S13 · Live demo - the aha ============ */ function DemoScreen() { const flow = useFlow(); const [phase, setPhase] = useState('ready'); // ready | idle | drop | hold | chime | nudge | recover | release const [hold, setHold] = useState(3); const [displayPitch, setDisplayPitch] = useState(0); const [figReady, setFigReady] = useState(false); const timers = useRef([]); const animFrame = useRef(null); const releaseTriggered = useRef(false); const T = (fn, ms) => timers.current.push(setTimeout(fn, flow.t.motion ? ms : ms * 0.08)); // Preload silhouette images useEffect(() => { let cancelled = false; const load = (src) => new Promise((res) => { const im = new Image(); im.onload = () => (im.decode ? im.decode().then(res, res) : res()); im.onerror = res; im.src = src; }); Promise.all([load(window.__resources ? window.__resources.imgHeadMint : '/onboarding-demo/app/head-mint.png'), load(window.__resources ? window.__resources.imgTorsoMint : '/onboarding-demo/app/torso-mint.png')]).then(() => { if (!cancelled) requestAnimationFrame(() => { if (!cancelled) setFigReady(true); }); }); return () => { cancelled = true; }; }, []); // Single animation loop: converges then oscillates during held phases useEffect(() => { cancelAnimationFrame(animFrame.current); const oscillating = phase === 'idle' || phase === 'hold' || phase === 'chime' || phase === 'nudge'; const oscTarget = phase === 'idle' ? 0 : 26; const base = (phase === 'ready' || phase === 'release' || phase === 'recover') ? 0 : 26; let lp = displayPitch; // local pitch — persists across frames in this closure let settled = false; let t0 = 0; const step = (now) => { if (oscillating) { if (!settled) { const diff = oscTarget - lp; if (Math.abs(diff) < 0.3) { lp = oscTarget; settled = true; t0 = now; } else { lp = lp + diff * 0.07; } } else { const t = (now - t0) / 1000; lp = phase === 'idle' ? Math.sin(t * 1.6) * 2.6 + Math.sin(t * 3.8 + 0.7) * 1.5 + Math.sin(t * 6.5 + 2.1) * 0.9 : 26 + Math.sin(t * 0.75) * 2.4 + Math.sin(t * 2.1 + 0.5) * 1.1 + Math.sin(t * 4.4 + 1.9) * 0.45; } setDisplayPitch(lp); animFrame.current = requestAnimationFrame(step); } else { const diff = base - lp; if (Math.abs(diff) < 0.3) { lp = base; setDisplayPitch(base); return; } lp = lp + diff * 0.07; setDisplayPitch(lp); animFrame.current = requestAnimationFrame(step); } }; animFrame.current = requestAnimationFrame(step); return () => cancelAnimationFrame(animFrame.current); }, [phase]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => () => { timers.current.forEach(clearTimeout); cancelAnimationFrame(animFrame.current); }, []); const start = () => { timers.current.forEach(clearTimeout); timers.current = []; releaseTriggered.current = false; setPhase('idle'); T(() => setPhase('drop'), 500); T(() => { setPhase('hold'); setHold(3); }, 1000); T(() => setHold(2), 2000); T(() => setHold(1), 3000); T(() => { setPhase('chime'); PoiseAudio.chime(); }, 4000); T(() => setPhase('nudge'), 5900); T(() => setPhase('recover'), 6500); }; // Fire release once head returns to neutral after recover (300ms grace delay) useEffect(() => { if (phase !== 'recover' || displayPitch >= 1.5 || releaseTriggered.current) return; const t = setTimeout(() => { releaseTriggered.current = true; setPhase('release'); track('demo_nudge_played', {}); }, 100); return () => clearTimeout(t); }, [phase, displayPitch]); // Auto-start as soon as images are ready — no button press needed useEffect(() => { if (!figReady) return; const t = setTimeout(start, 400); return () => clearTimeout(t); }, [figReady]); const captionText = phase === 'ready' || phase === 'idle' || phase === 'drop' ? 'Try it now' : phase === 'hold' ? 'Nudge incoming…' : phase === 'chime' ? 'Nudge incoming…' : phase === 'nudge' || phase === 'recover' ? 'Now sit back up.' : phase === 'release' ? 'See how easy that was?' : ''; const bodyText = phase === 'ready' || phase === 'idle' || phase === 'drop' ? 'Drop your head forward and hold it there' : phase === 'hold' ? 'Keep holding.' : phase === 'chime' ? null : phase === 'nudge' || phase === 'recover' ? 'Lift your head back up to your natural position.' : phase === 'release' ? 'Poise watches your posture in the background and plays a gentle reminder when you’ve been looking down for too long.' : null; const captionColor = phase === 'nudge' || phase === 'chime' || phase === 'recover' ? 'var(--text-accent)' : phase === 'hold' ? 'var(--status-warn)' : 'var(--text-primary)'; return ( flow.back()} />} cta={ phase === 'release' ? ( flow.next()}>Continue ) :
} > {(phase === 'chime' || phase === 'nudge') && flow.t.motion && (
)}
{phase !== 'release' && ( {Math.round(displayPitch)}° )} {captionText} {phase === 'hold' && ( {hold} )} {bodyText && (

{bodyText}

)}
); } Object.assign(window, { MotionScreen, NotificationScreen, AirpodsScreen, AirpodsResultScreen, CoachingScreen, CalibrationScreen, DemoScreen, COACH_STYLES });