// Avakata — interactive demo: "Drive the engine." // A real state machine the visitor runs: scan -> diagnose -> rewrite -> critic // gate -> ship -> measure. Outcomes only (never agent internals). Themed via // site.css variables so the Tweaks panel restyles it live. const { useState, useEffect, useRef, useCallback } = React; /* ---------- content per industry ---------- */ const INDUSTRIES = { ecom: { tag: 'E-commerce · DTC', url: 'kickhaus.shop / vapor-strike-fg', title: 'Vapor Strike FG Cleats', meta: '$280', media: 'cleat', oldCopy: 'Firm-ground soccer cleats. Synthetic upper, molded studs. Sizes 7–13. Lightweight build suitable for all positions.', newCopy: 'The boot that turns your first step into your fastest. A second-skin upper welds your foot to the ball; the stud plate bites firm ground and fires you forward. 280 grams of pure acceleration — laced, lethal, ready for kickoff.', diagnosis: 'High CTR, strong add-to-cart — but checkout conversion is bottom-decile. The copy spec-sheets the boot; it never makes a player feel faster wearing it.', signals: [ { label: 'Click-through', fill: 84, tone: 'green', val: 'High' }, { label: 'Add to cart', fill: 52, tone: 'amber', val: 'Mid' }, { label: 'Conversion', fill: 22, tone: 'red', val: 'Low' }], lift: 186, metric: 'PDP conversion' }, legal: { tag: 'Legal · personal injury', url: 'hawthornereed.law / free-consultation', title: 'Injured? Talk to a lawyer.', meta: 'Free consult', media: 'art', art: '', oldCopy: 'We handle personal injury cases. Contact our office to schedule a consultation with one of our attorneys. We have years of experience.', newCopy: 'If someone else\u2019s mistake put you in pain, you have less time to act than you think. Talk to a senior injury attorney today — no fee unless we win. Most calls are returned within the hour.', diagnosis: 'Page ranks but is rarely cited by generative engines, and form-starts are low. Copy is generic and buries the only thing that matters: act now, no upfront fee.', signals: [ { label: 'Impressions', fill: 78, tone: 'green', val: 'High' }, { label: 'LLM citations', fill: 30, tone: 'red', val: 'Rare' }, { label: 'Form starts', fill: 34, tone: 'amber', val: 'Low' }], lift: 74, metric: 'consultation starts' }, saas: { tag: 'B2B · developer tools', url: 'nudge.dev / home', title: 'Ship reliable webhooks.', meta: 'Start free', media: 'art', art: '', oldCopy: 'Nudge is a webhook infrastructure platform. It offers retries, logging, and a dashboard. Sign up to get started with our service today.', newCopy: 'Webhooks fail silently and take your weekend with them. Nudge retries, replays, and tells you the moment one breaks — so you find out before your customer does. Live in five minutes, free to 100k events.', diagnosis: 'Heavy hero traffic, thin demo-request rate. The copy lists features instead of naming the 2 a.m. pain a developer actually feels.', signals: [ { label: 'Hero traffic', fill: 80, tone: 'green', val: 'High' }, { label: 'Scroll depth', fill: 48, tone: 'amber', val: 'Mid' }, { label: 'Demo requests', fill: 24, tone: 'red', val: 'Low' }], lift: 112, metric: 'demo requests' } }; const PHASES = ['scan', 'diagnose', 'rewrite', 'gate', 'ship', 'measure', 'done']; const PHASE_LABEL = { idle: 'Idle · press run', scan: 'Scanning traffic, heatmaps, search console…', diagnose: 'Diagnosing the friction…', rewrite: 'Rewriting copy…', gate: 'Critic gate · brand voice · factual · 3 negative controls…', ship: 'Shipping variant to 18% of traffic…', measure: 'Measuring the 48-hour test window…', done: 'Done · change live and logged' }; /* ---------- small components ---------- */ function Dot({ tone = 'acc', size = 7 }) { const map = { acc: 'var(--accent)', cyan: 'var(--signal-cyan)', green: 'var(--signal-green)', amber: 'var(--signal-amber)', red: 'var(--signal-red)', warm: 'var(--signal-warm)' }; const c = map[tone] || map.acc; return ; } function Signal({ s, armed }) { const map = { green: 'var(--signal-green)', amber: 'var(--signal-amber)', red: 'var(--signal-red)' }; return (
{s.label} {s.val}
); } function Sparkline({ progress, lift }) { const data = [12, 13, 13, 14, 13, 15, 18, 24, 33, 46, 62, 80, 100]; const w = 280,h = 84,max = 100,min = 10; const pts = data.map((v, i) => [i / (data.length - 1) * w, h - (v - min) / (max - min) * (h - 8) - 4]); const n = Math.max(2, Math.floor(progress * data.length)); const sub = pts.slice(0, n); const d = sub.map((p, i) => i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`).join(' '); const last = sub[sub.length - 1]; return ( ); } /* ---------- main app ---------- */ function CleatVisual() { return ( ); } function EngineDemo() { const [industry, setIndustry] = useState('ecom'); const [phase, setPhase] = useState('idle'); const [log, setLog] = useState([]); const [typed, setTyped] = useState(0); // chars of new copy revealed const [spark, setSpark] = useState(0); // 0..1 const [liftNum, setLiftNum] = useState(0); const [heat, setHeat] = useState(false); const [accepted, setAccepted] = useState(null); // null | 'accepted' | 'rolledback' const timers = useRef([]); const data = INDUSTRIES[industry]; const running = phase !== 'idle' && phase !== 'done'; const rewritten = PHASES.indexOf(phase) >= PHASES.indexOf('rewrite'); const showResults = phase === 'measure' || phase === 'done'; const clearTimers = () => {timers.current.forEach(clearTimeout);timers.current = [];}; const after = (ms, fn) => {const id = setTimeout(fn, ms);timers.current.push(id);}; const pushLog = useCallback((icon, tone, text) => { setLog((l) => [...l.slice(-7), { icon, tone, text, t: Date.now() }]); }, []); const reset = () => { clearTimers(); setPhase('idle');setLog([]);setTyped(0);setSpark(0);setLiftNum(0);setAccepted(null); }; const switchIndustry = (k) => {if (k === industry) return;reset();setIndustry(k);}; const run = () => { clearTimers(); setLog([]);setTyped(0);setSpark(0);setLiftNum(0);setAccepted(null); setPhase('scan'); pushLog('⟳', 'cyan', 'Connected · GA4 · Search Console · heatmaps'); after(1400, () => {setPhase('diagnose');pushLog('⚠', 'warm', 'Friction found · ' + data.signals[data.signals.length - 1].label + ' bottom-decile');}); after(2900, () => {setPhase('rewrite');pushLog('✎', 'acc', 'Drafting variant · brand voice locked');}); // typewriter handled by effect on phase==='rewrite' after(6400, () => {setPhase('gate');pushLog('◈', 'cyan', 'Critic gate · 3 negative controls');}); after(7800, () => {setPhase('gate');pushLog('✓', 'green', 'Critic gate passed · confidence 0.94');}); after(8600, () => {setPhase('ship');pushLog('◈', 'cyan', 'Variant live · 18% of traffic');}); after(10000, () => {setPhase('measure');pushLog('▲', 'acc', 'Measuring 48h window…');}); after(13200, () => {setPhase('done');pushLog('✓', 'green', '+' + data.lift + '% ' + data.metric + ' · kept & logged');}); }; // typewriter during rewrite useEffect(() => { if (phase !== 'rewrite') return; setTyped(0); const full = data.newCopy.length; const dur = 3200;const t0 = performance.now(); let raf; const tick = (now) => { const p = Math.min(1, (now - t0) / dur); setTyped(Math.floor(p * full)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [phase, industry, data.newCopy]); // sparkline + lift counter during measure useEffect(() => { if (phase !== 'measure' && phase !== 'done') return; const dur = 3000;const t0 = performance.now(); let raf; const tick = (now) => { const p = Math.min(1, (now - t0) / dur); const e = 1 - Math.pow(1 - p, 3); setSpark(e);setLiftNum(Math.floor(e * data.lift)); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [phase, data.lift]); useEffect(() => () => clearTimers(), []); const phaseIdx = PHASES.indexOf(phase); const progressPct = phase === 'idle' ? 0 : Math.min(100, (phaseIdx + 1) / PHASES.length * 100); return (
{/* toolbar */}
{Object.keys(INDUSTRIES).map((k) => )}
{/* LEFT — the page */}
{data.url}
{data.media === 'cleat' &&
Nike Mercurial soccer cleat — side Nike Mercurial soccer cleat — pair Nike Mercurial soccer cleat — profile Nike Mercurial soccer cleat — top Nike Mercurial soccer cleat — heel Nike Mercurial soccer cleat — sole
} {data.media === 'art' && data.art &&
} {heat &&
}
{data.title} {data.meta}
{data.oldCopy}
{rewritten &&
Engine rewrite · auto-rewritten just now
{data.newCopy.slice(0, phase === 'rewrite' ? typed : data.newCopy.length)} {phase === 'rewrite' && typed < data.newCopy.length && ▍}
}
{accepted &&
{accepted === 'accepted' ? '✓ Variant kept · promoted to 100% of traffic' : '↺ Rolled back · original restored · logged'}
}
{/* RIGHT — the control room */}
{/* run / status */}
{PHASE_LABEL[phase]} {Math.round(progressPct)}%
{/* signals OR results */} {!showResults ?
Live signals GA4 · Hotjar
{data.signals.map((s, i) => )} {phase === 'diagnose' &&
{data.diagnosis}
}
:
+{liftNum}% {data.metric}
48h since rewrite
} {/* console log */}
{log.length === 0 &&
Engine idle. Press Run the engine to watch a self-heal, end to end.
} {log.map((l, i) =>
{l.icon} {l.text}
)}
{/* accept / rollback — only when done */} {phase === 'done' && !accepted &&
}

Outcomes only. The engine\u2019s operators, prompts, and orchestration stay under NDA — a black box on purpose.

); } ReactDOM.createRoot(document.getElementById('demo-app')).render();