/* Mindful Balance — Baseline Quiz Funnel (IG ad conversion test) * Hybrid voice: clinical authority on the reveal, warm voice everywhere else. * All variants exposed as Tweaks for live A/B testing. */ const COLORS = { bg: '#FBF9F6', surface: '#EFECE6', raised: '#FFFFFF', ink: '#2D2B2A', ink500: '#5B5754', ink300: '#8E8A85', ink200: '#BFB9B1', hair: 'rgba(45,43,42,0.08)', border: 'rgba(45,43,42,0.14)', sage: '#A3B19B', sageDeep: '#6F8067', sageTint: '#E6EBE2', terra: '#D9A080', terraDeep: '#B5704F', terraTint: '#F4DFD0', ochre: '#E3C16F', ochreDeep: '#A88638', ochreTint: '#F4E6BD', }; // ─── Brand mark (Bisect) — small inline lockup used in headers ─ function Bisect({ size = 24 }) { const id = React.useId(); return ( ); } function HeaderLockup({ markSize = 22, wordSize = 16 }) { return (
baseline
); } // ─── Tracking ────────────────────────────────────────────── // Wire real IDs into in the index.html. Falls back to console. // Replace XX / X.X with real numbers once beta data exists. Don't ship // fabricated stats — they're the fastest way to lose trust. function track(event, props = {}) { const variantLabel = window.__VARIANT ? (window.__VARIANT.label || JSON.stringify(window.__VARIANT)) : undefined; // utm_content captures which hook angle drove the click (set on the IG ad URL) let hook; try { const u = new URLSearchParams(location.search); hook = u.get('utm_content') || u.get('hook') || undefined; } catch (e) {} const enriched = { ...props }; if (variantLabel) enriched.variant = variantLabel; if (hook) enriched.hook = hook; // eslint-disable-next-line no-console console.log('%c[track]', 'color:#6F8067;font-weight:600', event, enriched); try { if (window.fbq) window.fbq('trackCustom', event, enriched); } catch (e) {} try { if (window.gtag) window.gtag('event', event, enriched); } catch (e) {} // ── Standard Meta events for ad optimisation ────────────── // Meta's algorithm optimises delivery based on these standard event types. // These fire IN ADDITION to the custom events above (Meta deduplicates by eventID). try { if (window.fbq) { const p = enriched; if (event === 'ViewReveal') fbq('track', 'ViewContent', { content_name: p.band || 'Baseline Score' }); if (event === 'ViewPaywall') fbq('track', 'InitiateCheckout', { value: p.price, currency: 'USD', num_items: 1 }); if (event === 'ClickPurchase') fbq('track', 'AddToCart', { value: p.price, currency: 'USD' }); if (event === 'BetaReserved') fbq('track', 'Lead'); } } catch (e) {} window.__eventLog ||= []; window.__eventLog.push({ event, props: enriched, t: Date.now() }); window.dispatchEvent(new CustomEvent('quiz-track', { detail: { event, props: enriched } })); } // ─── Quiz data ───────────────────────────────────────────── const QUESTIONS_WARM = [ { title: "How soon after waking do you reach for your phone?", options: [ { text: "Under 5 minutes", score: 0 }, { text: "5 to 30 minutes", score: 10 }, { text: "Over 30 minutes", score: 20 }, ], caption: "Anonymous. Your answers stay on this device.", }, { title: "When you're trying to focus, how often do you switch tabs or check notifications?", options: [ { text: "Every few minutes", score: 0 }, { text: "Only on planned breaks", score: 10 }, { text: "I can focus for hours", score: 20 }, ], caption: "Frequent task-switching quietly drains your daily cognitive reserve.", }, { title: "When a task gets hard or boring, what do you usually do?", options: [ { text: "Drop it entirely", score: 0 }, { text: "Open another app or tab", score: 10 }, { text: "Push through the friction", score: 20 }, ], caption: "Low tolerance for boredom is a sign your brain is hunting for cheap rewards.", }, { title: "What does your last hour before sleep look like?", options: [ { text: "Scrolling or streaming", score: 0 }, { text: "Reading or journaling", score: 10 }, { text: "Screen-free wind-down", score: 20 }, ], caption: "Late-night stimulation suppresses melatonin and disrupts overnight recovery.", }, { title: "What's the one thing you most want to change?", options: [ { text: "Stop compulsive phone-checking", score: 10, type: "Dopamine Budgeting" }, { text: "Stay focused for longer stretches", score: 10, type: "Context-Switching Shields" }, { text: "Clear the brain fog and fatigue", score: 10, type: "Circadian Realignment" }, ], caption: "Your protocol is tuned to your primary friction point.", }, ]; const QUESTIONS_CLINICAL = [ { title: "How long after waking do you perform your first digital check-in?", options: [ { text: "Under 5 minutes", score: 0 }, { text: "5 to 30 minutes", score: 10 }, { text: "Over 30 minutes", score: 20 }, ], caption: "*Anonymous and encrypted. Your data remains recognizable only to you." }, { title: "When working or studying, how often do you switch tabs or check notifications?", options: [ { text: "Every few minutes", score: 0 }, { text: "Only during planned breaks", score: 10 }, { text: "Hyper-focused for hours", score: 20 }, ], caption: "*Frequent task-switching induces context-switching tax, rapidly draining your daily cognitive reserve." }, { title: "When encountering a complex problem or boring task, what is your immediate response?", options: [ { text: "Abandon the task entirely", score: 0 }, { text: "Open a secondary screen or app", score: 10 }, { text: "Push through the friction", score: 20 }, ], caption: "*Low boredom tolerance indicates low baseline dopamine, causing the brain to seek cheap rewards." }, { title: "What does your final hour before sleep look like?", options: [ { text: "Active scrolling or streaming", score: 0 }, { text: "Passive reading or journaling", score: 10 }, { text: "Screen-free rest", score: 20 }, ], caption: "*Late-night high-stimulation content suppresses melatonin and disrupts neurological recovery." }, { title: "What is your primary optimization objective?", options: [ { text: "Eliminate compulsive phone usage", score: 10, type: "Dopamine Budgeting" }, { text: "Extend deep focus intervals", score: 10, type: "Context-Switching Shields" }, { text: "Clear brain fog and constant fatigue", score: 10, type: "Circadian Realignment" }, ], caption: "*Targeted behavioral interventions are calibrated to your primary friction point." }, ]; const HOOK_HEADLINES = { curiosity: { eyebrow: "60-second assessment", h: "What's your attention baseline?", sub: "A quick read of where your focus actually stands." }, pain: { eyebrow: "If you can relate…", h: "Can't focus for more than 10 minutes?", sub: "Find out what's draining your attention budget." }, identity: { eyebrow: "For people who", h: "used to be able to read a book.", sub: "60 seconds to see what's changed and what to do about it." }, antitech: { eyebrow: "It's not willpower.", h: "It's a dopamine problem.", sub: "See your baseline, then the protocol to recalibrate it." }, }; const LOADING_LINES = { clinical: [ "Analyzing neurochemical baseline…", "Isolating cognitive friction points…", "Generating your 12-week protocol…", ], warm: [ "Reading your answers…", "Looking for patterns…", "Building your starting plan…", ], }; function getProfile(score) { if (score <= 40) return { title: "Attention Baseline: Saturated", color: COLORS.terraDeep, band: 'low', analysis: "Your profile shows high adaptation to micro-stimuli. Your brain has started expecting a hit every few minutes. Capacity is intact; the budget is just mismanaged. Start here.", intervention: "Dopamine Budgeting", }; if (score <= 70) return { title: "Attention Baseline: Miscalibrated", color: COLORS.ochreDeep, band: 'mid', analysis: "You're capable of deep work, but the friction points in your day are quietly burning through your reserve. The fix is structural, not motivational.", intervention: "Context-Switching Shields", }; return { title: "Attention Baseline: Regulated", color: COLORS.sageDeep, band: 'high', analysis: "Your defenses against micro-stimuli are strong. To close the final gap, we focus on autonomic recovery and sleep architecture.", intervention: "Circadian Realignment", }; } // ─── Shared UI ───────────────────────────────────────────── function Eyebrow({ children, color = COLORS.ink300 }) { return
{children}
; } function PrimaryButton({ children, onClick, disabled, full = true }) { return ( ); } function ProgressDots({ step, total }) { return (
{Array.from({ length: total }, (_, i) => (
))}
); } function BackButton({ onClick }) { return ( ); } // ─── Screens ─────────────────────────────────────────────── function IntroScreen({ tweaks, onStart }) { const hook = HOOK_HEADLINES[tweaks.hookAngle] || HOOK_HEADLINES.curiosity; React.useEffect(() => { track('ViewIntro', { angle: tweaks.hookAngle }); }, [tweaks.hookAngle]); return (
{hook.eyebrow}

{hook.h}

{hook.sub}

{[ ['5 questions', '60 seconds'], ['Get a score', '0–100 attention baseline'], ['See your weak point', 'and one thing to do about it'], ].map(([a,b]) => (
✓
{a} · {b}
))}
{ track('ClickStart'); onStart(); }}>Start the assessment
Anonymous. No account needed.
); } function QuizScreen({ tweaks, step, total, data, prev, onAnswer, onBack }) { const [locked, setLocked] = React.useState(false); const [picked, setPicked] = React.useState(null); React.useEffect(() => { track('ViewQuestion', { step: step + 1 }); setLocked(false); setPicked(prev != null ? prev : null); }, [step]); function pick(opt, i) { if (locked) return; setLocked(true); setPicked(i); track('AnswerQuestion', { step: step + 1, score: opt.score, type: opt.type || null }); setTimeout(() => onAnswer(opt), 380); } return (
{step + 1}/{total}

{data.title}

{data.options.map((opt, i) => { const selected = picked === i; return ( ); })}
{data.caption}
); } function EmailGate({ tweaks, onSubmit, onSkip }) { const [email, setEmail] = React.useState(''); const [touched, setTouched] = React.useState(false); React.useEffect(() => { track('ViewEmailGate'); }, []); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); return (
One more thing

Where should we send your baseline?

You'll get the full report plus the first week of your protocol, free. Unsubscribe anytime.

{ track('SubmitEmail'); onSubmit(email.trim()); }}> Show me my baseline
); } function BetaSignup({ tweaks, score, onSubmit, onBack }) { const [email, setEmail] = React.useState(''); const [touched, setTouched] = React.useState(false); React.useEffect(() => { track('ViewBetaSignup', { price: tweaks.price }); }, []); const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim()); const price = Number(tweaks.price).toFixed(2); return (
Hold on, one detail

Baseline is in private beta.

The full app ships late summer 2026. We're not charging yet. Leave your email and we'll send your personalized protocol the moment it's live.

Your spot is locked at ${price} when the app launches.

✓
No charge today. We'll only collect payment once the app is in your hands and you've confirmed.
{ track('SubmitBetaEmail', { price: tweaks.price, score }); onSubmit(email.trim()); }}> Reserve my spot
We'll email you once, when the app ships. Unsubscribe anytime.
); } function LoadingScreen({ tweaks, onDone }) { const lines = LOADING_LINES[tweaks.loadingCopy] || LOADING_LINES.warm; const [idx, setIdx] = React.useState(0); React.useEffect(() => { track('ViewLoading'); const t1 = setTimeout(() => setIdx(1), 1400); const t2 = setTimeout(() => setIdx(2), 2800); const t3 = setTimeout(() => onDone(), 4400); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, []); return (
{lines.map((line, i) => (
{line}
))}
); } function RevealScreen({ tweaks, score, onContinue }) { const profile = getProfile(score); React.useEffect(() => { track('ViewReveal', { score, band: profile.band }); }, []); // animate score count-up const [shown, setShown] = React.useState(0); React.useEffect(() => { const start = performance.now(); const dur = 900; let raf; function step(t) { const p = Math.min(1, (t - start) / dur); const eased = 1 - Math.pow(1 - p, 3); setShown(Math.round(score * eased)); if (p < 1) raf = requestAnimationFrame(step); } raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [score]); return (
Your result
{profile.title}
{shown} / 100
{/* Spectrum bar */}
SaturatedMiscalibratedRegulated
{profile.analysis}
→
Recommended starting point
{profile.intervention}
{ track('ClickViewProtocol'); onContinue(profile); }}> {tweaks.ctaText}
Targeted protocols tuned to your primary friction point.
); } function PaywallScreen({ tweaks, profile, score, onPurchase }) { React.useEffect(() => { track('ViewPaywall', { price: tweaks.price }); }, []); const price = Number(tweaks.price).toFixed(2); return (
For your baseline of {score}/100

Your 12-week recalibration protocol

{[ [profile.intervention, "A targeted protocol for your primary baseline deficit."], ["Friction mapping", "Custom constraints to eliminate compulsive checking."], ["Cognitive pacing", "Science-backed intervals that defend your deep-focus blocks."], ].map(([t, d]) => (
✓
{t}
{d}
))}
{tweaks.socialProof === 'rating' && (
★★★★★
X.X from XXX beta testers
)} {tweaks.socialProof === 'stat' && (
91% report focus gains by week 4.
)}
Full 12-week access
${price}
{ track('ClickPurchase', { price: tweaks.price }); onPurchase(); }}> Activate protocol
7-day money-back guarantee. Cancel anytime.
); } function ConfirmScreen({ email }) { React.useEffect(() => { track('BetaReserved'); }, []); return (
✓

You're on the list.

We'll email {email || 'you'} the moment Baseline ships. No charge until then.

); } // ─── App shell ───────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "hookAngle": "curiosity", "voice": "warm", "price": 29.99, "ctaText": "View recalibration protocol", "loadingCopy": "warm", "socialProof": "none" }/*EDITMODE-END*/; // Variant override hook — a deployable variant HTML can set window.__VARIANT // BEFORE this script loads to pre-seed the defaults. Tracking calls then carry // the variant label so analytics can split A/B results. const EFFECTIVE_DEFAULTS = { ...TWEAK_DEFAULTS, ...(window.__VARIANT?.tweaks || {}) }; function App() { const [tweaks, setTweak] = useTweaks(EFFECTIVE_DEFAULTS); const questions = tweaks.voice === 'clinical' ? QUESTIONS_CLINICAL : QUESTIONS_WARM; // funnel state const [stage, setStage] = React.useState('intro'); // intro | quiz | loading | reveal | paywall | beta | confirm const [step, setStep] = React.useState(0); const [scores, setScores] = React.useState([]); const [profile, setProfile] = React.useState(null); const [email, setEmail] = React.useState(''); const totalScore = scores.reduce((a, b) => a + b, 0); // Capture UTM params once from the landing URL (variants set utm_content on the ad link) const [utmParams] = React.useState(() => { try { const u = new URLSearchParams(location.search); return { utm_source: u.get('utm_source') || undefined, utm_medium: u.get('utm_medium') || undefined, utm_campaign: u.get('utm_campaign') || undefined, utm_content: u.get('utm_content') || u.get('hook') || undefined, utm_term: u.get('utm_term') || undefined, }; } catch { return {}; } }); // expose dev log const [showLog, setShowLog] = React.useState(false); React.useEffect(() => { if (location.search.includes('debug')) setShowLog(true); function onKey(e) { if (e.key === 'L' && e.shiftKey) setShowLog(s => !s); } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); function reset() { setStage('intro'); setStep(0); setScores([]); setProfile(null); setEmail(''); track('Reset'); } function startQuiz() { setStage('quiz'); setStep(0); setScores([]); } function onAnswer(opt) { const next = [...scores]; next[step] = opt.score; setScores(next); if (step + 1 < questions.length) { setStep(step + 1); } else { setStage('loading'); } } function onBack() { if (step === 0) setStage('intro'); else setStep(step - 1); } // Fire-and-forget: move to confirm immediately, POST in background. // Network errors are swallowed so the user never sees a broken confirm screen. async function submitEmail(emailAddr) { setEmail(emailAddr); setStage('confirm'); try { await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: emailAddr, score: totalScore, band: profile?.band, price: tweaks.price, variant: window.__VARIANT?.label || null, ...utmParams, }), }); } catch (e) { console.warn('[baseline] subscribe failed (continuing anyway):', e); } } let screen; if (stage === 'intro') screen = ; else if (stage === 'quiz') screen = ; else if (stage === 'loading') screen = setStage('reveal')}/>; else if (stage === 'reveal') screen = { setProfile(p); setStage('paywall'); }}/>; else if (stage === 'paywall') screen = setStage('beta')}/>; else if (stage === 'beta') screen = setStage('paywall')}/>; else if (stage === 'confirm') screen = ; return ( <>
{screen}
{/* Debug event log */} {showLog && setShowLog(false)} onReset={reset}/>} {/* Tweaks panel */} setTweak('hookAngle', v)} options={[ { value: 'curiosity', label: 'Curiosity' }, { value: 'pain', label: 'Pain' }, { value: 'identity', label: 'Identity' }, { value: 'antitech', label: 'Anti-tech' }, ]}/> setTweak('voice', v)} options={[ { value: 'warm', label: 'Warm' }, { value: 'clinical', label: 'Clinical' }, ]}/> setTweak('loadingCopy', v)} options={[ { value: 'warm', label: 'Warm' }, { value: 'clinical', label: 'Clinical' }, ]}/> setTweak('ctaText', v)}/> setTweak('price', v)} options={[ { value: 9.99, label: '$9.99' }, { value: 19.99, label: '$19.99' }, { value: 29.99, label: '$29.99' }, ]}/> setTweak('socialProof', v)} options={[ { value: 'none', label: 'None' }, { value: 'rating', label: '★ X.X from XXX beta testers' }, { value: 'stat', label: '91% report focus gains' }, ]}/> setShowLog(s => !s)} secondary/> ); } function EventLog({ onClose, onReset }) { const [events, setEvents] = React.useState(window.__eventLog || []); React.useEffect(() => { function onEvt() { setEvents([...(window.__eventLog || [])]); } window.addEventListener('quiz-track', onEvt); return () => window.removeEventListener('quiz-track', onEvt); }, []); return (
Event log shift+L to toggle · {events.length}
{events.slice(-20).map((e, i) => (
{e.event} {Object.keys(e.props).length > 0 && {JSON.stringify(e.props)}}
))}
); } ReactDOM.createRoot(document.getElementById('root')).render();