// Sections 5–8: Check-ins, Continuity, Who it's for, CTA + footer // ─── Section 5 — Daily check-ins ────────────────────────────────── function CheckIns() { const [pain, setPain] = useState(4); const [swelling, setSwelling] = useState('mild'); const [submitted, setSubmitted] = useState(false); const submit = () => { setSubmitted(true); setTimeout(() => setSubmitted(false), 5000); }; // History data — yesterday/today const history = [ { day: 'Day 12', pain: 7, swelling: 'mod' }, { day: 'Day 13', pain: 6, swelling: 'mod' }, { day: 'Day 14', pain: 5, swelling: 'mild' }, { day: 'Day 15', pain: pain, swelling: swelling, today: true }, ]; return (

Daily check-ins


The streak isn't gamification. It's the smallest thing we can ask for that builds the dataset that makes coaching real.

{/* Mock UI */}
DAY 15 · STREAK 12
9:14 AM
Pain right now {pain}/10
setPain(parseInt(e.target.value))} className="pain-slider" />
NONEWORST
Swelling
{[['none', 'None'], ['mild', 'Mild'], ['mod', 'Moderate'], ['high', 'High']].map(([k, l]) => ( ))}
{/* Coached response */}
PROTOCOL
{submitted ? ( <>Pain down from 7 to {pain} over four days — that's progress. Swelling trending down too. Today's session: light cycling, 12 minutes. ) : ( <>Submit to see today's coached response. )}
{/* Trend visualization */}
PAIN, LAST 4 DAYS Trending down
{history.map((h, i) => (
{h.pain}
{h.day.replace('Day ', 'D')}
))}
STREAK
12
AVG PAIN, WK
5.2
FLARES
0
); } // ─── Section 6 — Longitudinal continuity ────────────────────────── function Continuity() { const [ref, progress] = useStickyProgress(); // Path draws as user scrolls; messages light up at thresholds const pathLen = 1200; const dashOffset = lerp(pathLen, 0, smoothstep(0.05, 0.85, progress)); const moments = [ { day: 3, side: 'L', text: '"My quad won\'t fire."', tone: 'concern' }, { day: 11, side: 'R', text: 'Quad sets, 3 × 10. Twice today.', tone: 'coach' }, { day: 22, side: 'L', text: '"Worried about left calf."', tone: 'concern' }, { day: 30, side: 'R', text: 'Calf trending fine — but on Day 3 you said your quad wouldn\'t fire. It\'s firing now.', tone: 'callback' }, ]; return (

Longitudinal

Remembers Day 3
when you're on Day 30.

Stateless chatbots forget you between sessions. Protocol carries the thread — early concerns surface again later, when they matter.

{/* Thread visualization */}
{/* dots at moment positions */} {[ { x: 100, y: 84, threshold: 0.10 }, { x: 300, y: 220, threshold: 0.32 }, { x: 540, y: 170, threshold: 0.54 }, { x: 800, y: 250, threshold: 0.78 }, ].map((dot, i) => { const lit = progress > dot.threshold; return ( ); })} {/* Moment cards */}
{moments.map((m, i) => { const reveal = smoothstep(0.08 + i * 0.18, 0.22 + i * 0.18, progress); const isCallback = m.tone === 'callback'; const align = m.side === 'L' ? 'flex-start' : 'flex-end'; return (
DAY {String(m.day).padStart(2, '0')} {isCallback && '· CALLBACK'}
{m.text}
); })}
); } // ─── Section 7 — Who it's for ───────────────────────────────────── function WhoItsFor() { const forList = ['ACL reconstruction', 'Fracture', 'Rotator cuff', 'Back injury', 'Sprain', 'Tendon repair', 'Meniscus', 'Achilles', 'Ligament repair']; const notFor = ['Acute emergencies', 'Undiagnosed pain', 'Mental-only conditions']; return (

Who it's for


If you're recovering from a defined musculoskeletal injury where the appointments are weeks apart and the days in between feel uncertain — Protocol is for you.

BUILT FOR
{forList.map(t => {t})}
NOT FOR
{notFor.map(t => {t})}

Protocol is not a replacement for medical care. If you're in acute pain or your symptoms are escalating, call your clinician.

); } // ─── Section 8 — CTA ────────────────────────────────────────────── function CTA() { return (

Begin


Protocol is in closed beta. Open the app and recover with something on your side.

Closed Beta · iOS, Android, Web

); } // ─── Footer ─────────────────────────────────────────────────────── function Footer() { return ( ); } // ─── Nav ────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } Object.assign(window, { CheckIns, Continuity, WhoItsFor, CTA, Footer, Nav });