/* AutoSimHero.jsx - auto-looping simulation hero (NOT scroll-tied) ============================================================ The hero plays through 3 stages on its own ~24s loop: 1. Build the audience (0–8s) 2. Watch them decide (8–16s) 3. Talk to any of them (16–24s) Page scrolls normally; hero occupies one viewport. ============================================================ */ const useLoopClock = (durationS = 24) => { const [t, setT] = React.useState(0); const startRef = React.useRef(null); React.useEffect(() => { let raf = 0; const tick = (now) => { if (startRef.current == null) startRef.current = now; const elapsed = ((now - startRef.current) / 1000) % durationS; setT(elapsed); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [durationS]); return { t, p: t / durationS }; }; /* ============================================================ STAGE 1 - Build the audience Sub-phases: A. 0.00–0.35 Params fill in (age, income, height, skincare, brands…) B. 0.35–0.70 Agents generate (dots fly into a cloud) C. 0.70–1.00 Archetypes emerge (dots cluster into 5 colored groups) ============================================================ */ // Five archetype definitions - colors come from peacock + orange + neutrals const ARCHETYPES = [ { id: 'eco', label: 'Eco Minimalist', color: '#0F7A87', share: 0.22, cx: 0.22, cy: 0.40 }, { id: 'value', label: 'Value Hunter', color: '#F26B2C', share: 0.28, cx: 0.50, cy: 0.30 }, { id: 'social', label: 'Social Maven', color: '#7BC4CC', share: 0.18, cx: 0.78, cy: 0.42 }, { id: 'loyal', label: 'Brand Loyalist', color: '#C24F18', share: 0.16, cx: 0.30, cy: 0.74 }, { id: 'curious', label: 'Curious Sampler', color: '#095964', share: 0.16, cx: 0.70, cy: 0.74 }, ]; // Params shown filling in. Each has its own reveal timing inside phase A. const PARAMS = [ { key: 'Age', value: '28 – 42', kind: 'range', start: 0.02 }, { key: 'Household income', value: '$60k – $180k', kind: 'range', start: 0.06 }, { key: 'Geography', value: 'NYC · LA · Austin', kind: 'tags', start: 0.10 }, { key: 'Height (avg)', value: '5\u20194\u201d – 6\u20191\u201d', kind: 'range', start: 0.13 }, { key: 'Has skincare routine', value: '64% yes', kind: 'pct', start: 0.16 }, { key: 'Owns running shoes', value: '71% yes', kind: 'pct', start: 0.19 }, { key: 'Favorite brands', value: 'Patagonia · On · Aesop · Trader Joe\u2019s', kind: 'tags', start: 0.22 }, { key: 'Cooks at home', value: '4–6× / week', kind: 'range', start: 0.25 }, { key: 'Eco concern', value: 'High (μ 0.74)', kind: 'tag', start: 0.28 }, { key: 'Posts on social', value: 'Daily on IG · weekly on X', kind: 'tags', start: 0.30 }, ]; const PopulationStage = ({ progress, fade }) => { // sub-phase progress const pA = clamp(invLerp(progress, 0.00, 0.35)); const pB = clamp(invLerp(progress, 0.35, 0.70)); const pC = clamp(invLerp(progress, 0.70, 1.00)); // Phase headline morphs const phaseLabel = pC > 0.05 ? 'Archetypes emerging' : pB > 0.05 ? 'Generating agents' : 'Defining the audience'; // Total agents & visible count by phase const TOTAL_AGENTS = 512; const generated = Math.floor(pB * TOTAL_AGENTS); const archetypesFound = Math.min(5, Math.floor(pC * 5.4)); // Build a deterministic agent set ONCE: each gets an archetype + a random pos in cloud and a target pos in its cluster const agents = React.useMemo(() => { const arr = []; const cum = []; let s = 0; ARCHETYPES.forEach(a => { s += a.share; cum.push(s); }); // simple LCG for determinism let seed = 1234567; const rand = () => { seed = (seed * 1664525 + 1013904223) % 4294967296; return seed / 4294967296; }; for (let i = 0; i < TOTAL_AGENTS; i++) { const u = rand(); let aIdx = 0; for (let k = 0; k < cum.length; k++) { if (u < cum[k]) { aIdx = k; break; } } const arch = ARCHETYPES[aIdx]; // cloud position: gaussian-ish around center const cloudX = 0.5 + (rand() - 0.5) * 0.7; const cloudY = 0.5 + (rand() - 0.5) * 0.7; // cluster offset: small radius around archetype center const ang = rand() * Math.PI * 2; const rad = 0.04 + Math.sqrt(rand()) * 0.10; const clusterX = arch.cx + Math.cos(ang) * rad; const clusterY = arch.cy + Math.sin(ang) * rad * 0.85; arr.push({ archIdx: aIdx, cloudX, cloudY, clusterX, clusterY, birthOrder: i / TOTAL_AGENTS }); } return arr; }, []); return (
0.5 ? 'auto' : 'none', }}>
01 · Build the audience
{phaseLabel}
{/* LEFT - params panel */}
Audience parameters
{PARAMS.map((p, i) => { // each param fades in over a 0.05 window starting at p.start (phase-A scaled) const local = clamp((pA - p.start / 0.35) / (0.05 / 0.35)); const filled = pA >= (p.start + 0.04) / 0.35 ? 1 : 0; return (
{p.key}
{filled ? p.value : ( )}
); })}
+ 23 more dimensions
{/* RIGHT - agents canvas */}
{/* prompt floater */}
prompt ·{' '} “urban runners, 28–42, eco-aware, $80k+, NYC + LA”
{/* agents - absolute positioned dots, animate from cloud → cluster */}
{agents.map((a, i) => { const arch = ARCHETYPES[a.archIdx]; // Visible only after birth in phase B const born = pB >= a.birthOrder * 0.92; if (!born && pC < 0.02) return null; // Position: lerp from cloud → cluster across phase C const x = lerp(a.cloudX, a.clusterX, pC); const y = lerp(a.cloudY, a.clusterY, pC); // Color: starts neutral, gains archetype color in phase C const colorMix = pC; const baseColor = '#7BC4CC'; const size = 5 + pC * 1.5; return (
0.4 ? arch.color : baseColor, transform: `translate(-50%, -50%) scale(${born ? 1 : 0.2})`, opacity: born ? (0.55 + pC * 0.4) : 0, transition: 'background-color 600ms, transform 280ms ease-out, opacity 280ms', boxShadow: pC > 0.6 ? `0 0 0 1px ${arch.color}33` : 'none', }} /> ); })}
{/* archetype labels - fade in during phase C, positioned at cluster centers */} {ARCHETYPES.map((a, i) => { const visible = pC > (i * 0.08); const local = clamp((pC - i * 0.08) / 0.12); // count of agents in this archetype const count = Math.round(TOTAL_AGENTS * a.share); return (
{a.label} · {count}
); })} {/* generation counter ticker (visible in phase B) */} {pB > 0.02 && pC < 0.4 && (
+{generated} agents · {Math.round(pB * 312)} ms / agent
)} {/* archetype legend (phase C) */} {pC > 0.5 && (
5 archetypes
)}
); }; const lerp = (a, b, t) => a + (b - a) * t; const LegendDot = ({ color, stroke, label }) => ( {label} ); /* STAGE 2 - Branching */ const BranchingStage = ({ progress, fade }) => { const STEPS = 8, COL_W = 92, X0 = 36; const VB_W = STEPS * COL_W, VB_H = 320; const LEVELS = [ [{ p: -1, h: 0.5, kind: 'root' }], [{ p: 0, h: 0.32, kind: 'consider' }, { p: 0, h: 0.68, kind: 'consider' }], [{ p: 0, h: 0.18, kind: 'post' }, { p: 0, h: 0.42, kind: 'reject' }, { p: 1, h: 0.78, kind: 'post' }], [{ p: 0, h: 0.10, kind: 'buy' }, { p: 0, h: 0.26, kind: 'consider' }, { p: 1, h: 0.50, kind: 'post' }, { p: 2, h: 0.70, kind: 'buy' }, { p: 2, h: 0.88, kind: 'consider' }], [{ p: 0, h: 0.06, kind: 'buy' }, { p: 1, h: 0.20, kind: 'consider' }, { p: 1, h: 0.32, kind: 'reject' }, { p: 2, h: 0.46, kind: 'post' }, { p: 2, h: 0.58, kind: 'buy' }, { p: 3, h: 0.72, kind: 'buy' }, { p: 4, h: 0.92, kind: 'post' }], [{ p: 0, h: 0.04, kind: 'buy' }, { p: 1, h: 0.16, kind: 'reject' }, { p: 2, h: 0.28, kind: 'consider' }, { p: 3, h: 0.40, kind: 'post' }, { p: 3, h: 0.50, kind: 'buy' }, { p: 4, h: 0.60, kind: 'buy' }, { p: 5, h: 0.74, kind: 'post' }, { p: 5, h: 0.84, kind: 'buy' }, { p: 6, h: 0.94, kind: 'consider' }], [{ p: 0, h: 0.03, kind: 'buy' }, { p: 1, h: 0.12, kind: 'reject' }, { p: 2, h: 0.22, kind: 'buy' }, { p: 3, h: 0.32, kind: 'post' }, { p: 3, h: 0.42, kind: 'buy' }, { p: 4, h: 0.50, kind: 'buy' }, { p: 5, h: 0.60, kind: 'consider' }, { p: 6, h: 0.70, kind: 'buy' }, { p: 7, h: 0.82, kind: 'post' }, { p: 8, h: 0.92, kind: 'buy' }], [{ p: 0, h: 0.02, kind: 'buy' }, { p: 1, h: 0.10, kind: 'reject' }, { p: 2, h: 0.18, kind: 'buy' }, { p: 3, h: 0.28, kind: 'buy' }, { p: 4, h: 0.38, kind: 'buy' }, { p: 4, h: 0.46, kind: 'buy' }, { p: 5, h: 0.54, kind: 'buy' }, { p: 6, h: 0.62, kind: 'consider' }, { p: 7, h: 0.72, kind: 'buy' }, { p: 8, h: 0.82, kind: 'post' }, { p: 9, h: 0.92, kind: 'buy' }], ]; const KIND_FILL = { root: 'var(--accent)', consider: 'var(--accent-soft)', post: 'var(--accent)', buy: 'var(--accent-2)', reject: 'var(--bg-elevated)' }; const KIND_STROKE = { root: 'var(--accent)', consider: 'var(--accent)', post: 'var(--accent-deep)', buy: 'var(--accent-2)', reject: 'var(--border-2)' }; const reveal = progress * STEPS; const totalNodes = LEVELS.reduce((acc, lvl, li) => acc + (li <= reveal ? lvl.length : 0), 0); const buyNodes = LEVELS.reduce((acc, lvl, li) => acc + (li <= reveal ? lvl.filter(n => n.kind === 'buy').length : 0), 0); const finalIntent = (28 + Math.min(1, progress) * 19.2).toFixed(1); return (
0.5 ? 'auto' : 'none', }}>
02 · Decide
Watch them think it through, branch by branch
{LEVELS.map((_, li) => ( ))} {LEVELS.map((_, li) => ( t{li} ))} {LEVELS.map((level, li) => li === 0 ? null : level.map((node, ni) => { const parent = LEVELS[li - 1][node.p]; const x1 = X0 + (li - 1) * COL_W, y1 = 20 + parent.h * (VB_H - 40); const x2 = X0 + li * COL_W, y2 = 20 + node.h * (VB_H - 40); const r = Math.max(0, Math.min(1, reveal - li + 0.5)); const stroke = node.kind === 'reject' ? 'var(--border-2)' : node.kind === 'buy' ? 'var(--accent-2)' : node.kind === 'post' ? 'var(--accent-deep)' : 'var(--accent)'; return ( ); }))} {LEVELS.map((level, li) => level.map((node, ni) => { const x = X0 + li * COL_W, y = 20 + node.h * (VB_H - 40); const r = Math.max(0, Math.min(1, reveal - li)); if (r <= 0) return null; const radius = node.kind === 'root' ? 8 : node.kind === 'buy' ? 5 : 4; return ( ); }))} SEED
sim_8f3a · refillable shampoo · $24 · what-if branching
); }; /* STAGE 3 - Chat */ const ChatStage = ({ progress, fade }) => { const SCRIPT = [ { who: 'you', text: "Why didn't you buy it?" }, { who: 'persona', text: "$24 felt steep without trying it. I'd want to smell it first or hear from someone whose hair is like mine." }, { who: 'you', text: "What would change your mind?" }, { who: 'persona', text: "A 2-pack starter at $18, or a friend posting before/after. Reviews from strangers don't move me anymore." }, { who: 'you', text: "And if a friend posted about it?" }, { who: 'persona', text: "Then I'd buy without thinking. That's how I tried the last three things in my bathroom, honestly." }, ]; const N = SCRIPT.length; const slot = 1 / (N + 0.5); const visibleCount = Math.min(N, Math.floor(progress / slot)); const inSlot = (progress / slot) - visibleCount; const typing = visibleCount < N && inSlot > 0.15 && inSlot < 0.95; const visible = SCRIPT.slice(0, visibleCount); const nextSpeaker = visibleCount < N ? SCRIPT[visibleCount].who : null; return (
0.5 ? 'auto' : 'none', }}>
03 · Talk
Pull any one aside and ask them why
MR
Maya R., 34 · Brooklyn
Rejected at t=4 · eco_concern 84 · brand_loyalty 62
LIVE
{visible.map((m, i) => )} {typing && nextSpeaker === 'persona' && }
Ask Maya something…
Beliefs
Recent context
New apartment lease last month. Started training for a half-marathon. Switched grocery brand after a packaging change.
Why she rejected: price-anchor on drugstore baseline, no in-network social proof yet.
); }; const ChatBubble2 = ({ who, text, fresh }) => { const isPersona = who === 'persona'; return (
{text}
); }; const TypingDots = () => (
{[0, 1, 2].map(i => ( ))}
); const BarRow2 = ({ label, value, color }) => (
{label} {value}
); const Stat = ({ label, value, accent, mono }) => (
{label}
{value}
); /* ============================================================ The hero - auto-loop, single viewport, NOT scroll-tied ============================================================ */ const ScrollSimHero = () => { const { p } = useLoopClock(24); const liveSims = (typeof window !== 'undefined' && window.useLiveSims) ? window.useLiveSims() : 423; // Stage windows const s1 = clamp(invLerp(p, 0.00, 0.30)); const s2 = clamp(invLerp(p, 0.33, 0.62)); const s3 = clamp(invLerp(p, 0.66, 0.98)); const fade1 = smoothstep(p, 0.02, 0.06) * (1 - smoothstep(p, 0.30, 0.34)); const fade2 = smoothstep(p, 0.30, 0.34) * (1 - smoothstep(p, 0.62, 0.66)); const fade3 = smoothstep(p, 0.62, 0.66); const activeStage = p < 0.33 ? 0 : p < 0.66 ? 1 : 2; const STAGES = [ { num: '01', label: 'Build the audience' }, { num: '02', label: 'Watch them decide' }, { num: '03', label: 'Talk to any of them' }, ]; return (
{/* LEFT - copy */}
LIVE · {liveSims.toLocaleString()} SIMULATIONS RUNNING

Focus groups take weeks.
Lokara takes minutes.

Build a thousand simulated customers. Watch them decide. Then talk to any one of them - like a real focus group, only faster, at any scale.

{/* Inline signup */}
{ e.preventDefault(); alert('Thanks - we\'ll be in touch.'); }} style={{ display: 'flex', gap: 8, marginBottom: 14, background: 'var(--bg-elevated)', border: '1px solid var(--border-2)', borderRadius: 10, padding: 6, boxShadow: 'var(--shadow-sm)', maxWidth: 480, }}>
Free during beta · No credit card · or request a demo →
{/* Stage progression rail (now reflects auto-loop, not scroll) */}
How Lokara works - three steps
{STAGES.map((st, i) => { const active = i === activeStage; const done = i < activeStage; const fillP = i === 0 ? s1 : i === 1 ? s2 : s3; return (
{st.num} {st.label}
); })}
{/* RIGHT - device frame, all 3 stages cross-fading on a loop */}
lokara · sim_8f3a · refillable shampoo ● LIVE
); }; const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v)); const invLerp = (v, a, b) => (v - a) / (b - a); const smoothstep = (v, a, b) => { const t = clamp(invLerp(v, a, b)); return t * t * (3 - 2 * t); }; window.ScrollSimHero = ScrollSimHero;