Onboarding
The pitch, before the password
Overview
The very first thing a new user sees. Two pages of copy that auto-rotate every 3 seconds, fading in over the Protocol Four logo with a small animated indicator at the bottom. The CTA is intentionally disabled (styled with the muted secondary color) until the second slide has been seen at least once — we want every agent to hear the commitment line before they tap in. The framing is deliberately exclusive. It's not 'download our productivity app' — it's 'apply to a secret organization of 676,000 people'.
How it works
A single screen with an array of two `steps` (title + body). Local component state holds the current step index.
A `setInterval` rotates `step` every 3000ms — modulo `steps.length` so it loops. The second slide flips a `hasSeenSecond` flag the first time it lands, which the CTA listens to.
Each slide fades in with Reanimated's FadeIn, so the text feels like it's surfacing rather than swapping.
The two-pill page indicator is animated with `LinearTransition`, so the active pill stretches from 4px to 16px when its slide is showing.
Tapping the CTA pushes `/sign-in` via expo-router. The disabled state uses Tailwind's `bg-secondary` and `text-card` so it reads grey but never feels broken.
Key decisions
Lock the CTA until both slides have been seen
A user could tap through in two seconds and miss the framing entirely. The commitment line — 'surrender of your distractions' — is the entire reason this screen exists. So the button is muted until `hasSeenSecond` flips. It's quietly hostile in a way the brand wants to be.
Auto-rotation, not swipe
We considered a Pager / swipe paradigm. But swiping invites speed, and the slides need to be read. A 3 second auto-rotation forces the cadence of reading on the user. The interval is short enough that nothing feels stuck.
Instrument Serif for the headlines
Productivity apps default to geometric sans. Protocol Four uses Instrument Serif because the brand voice is closer to a literary magazine than a habit tracker. It's the same typeface used across every other hero moment in the app.
