// 3-layer architecture diagram — the centerpiece visual. // Layer 1: Rules / anomaly detection (deterministic, fast) // Layer 2: AI Model A (first LLM / ML scorer) // Layer 3: AI Model B (second LLM / ML scorer, different model) // ─── HERO variant: perspective-stacked 3 layers with a transaction flowing through. function LayerStack({ animated = true, activeLayer = null }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { if (!animated) return; const t = setInterval(() => setTick(x => x + 1), 2600); return () => clearInterval(t); }, [animated]); // Three evaluations, cycling const samples = [ { id: 'pay_01K5Z0QXM3', amt: '4,820 USDT', dec: 'BLOCK', tone: 'block', score: 92, reason: 'IP on global blocklist · velocity +21%' }, { id: 'pay_01K5Z0PN7C', amt: '180 USDT', dec: 'APPROVE', tone: 'approve', score: 8, reason: 'known client · known IP · in hours' }, { id: 'pay_01K5Z0P4BX', amt: '12,500 USDT', dec: 'REVIEW', tone: 'review', score: 64, reason: 'amount > 2× baseline · new destination' }, ]; const cur = samples[tick % samples.length]; const layers = [ { n: 1, key: 'rules', title: 'Rules & anomaly detection', sub: 'Deterministic · 40+ signals', pills: ['velocity', 'baselines', 'blocklists', 'geo/ISP'], z: 0, color: 'rgba(99,212,230,0.22)', stroke: 'rgba(99,212,230,0.5)' }, { n: 2, key: 'modelA', title: 'AI scoring · Model α', sub: 'Contextual risk in sub-20ms', pills: ['client history', 'behaviour graph', 'time-of-day', 'tx shape'], z: 1, color: 'rgba(147,135,255,0.22)', stroke: 'rgba(147,135,255,0.55)' }, { n: 3, key: 'modelB', title: 'AI reasoning · Model β', sub: 'Second model for disagreement', pills: ['narrative', 'explanation', 'escalation', 'confidence'], z: 2, color: 'rgba(129,168,255,0.22)', stroke: 'rgba(129,168,255,0.55)' }, ]; return (
{/* Input badge — the transaction entering at the top */}
Incoming tx {cur.id}
{cur.amt} inxy_main · TRON
{/* The 3 layers */}
{layers.map((l, i) => (
L{l.n}
{l.title}
{l.sub}
{l.key === 'rules' ? '3 ms' : l.key === 'modelA' ? '14 ms' : '22 ms'}
{l.pills.map(p => {p})}
{/* the 'beam' tracing through */} {animated &&
}
))}
{/* Output verdict */}
Verdict · 39 ms
{cur.dec} {cur.score}
{cur.reason}
); } // ─── Flat horizontal variant for "How it works" — 3 cards with connecting arrows. function LayerFlow() { const layers = [ { n: 1, title: 'Rules & anomaly', sub: 'Deterministic layer. 40+ signals: velocity, baselines, geo, blocklists, sanctions. Every tx hits this first.', time: '3 ms', icon: IconGitBranch, tone: 'teal' }, { n: 2, title: 'AI model α', sub: 'First AI scorer. Contextual risk from client history, transaction shape, and behavioural features. Numeric score + confidence.', time: '14 ms', icon: IconCpu, tone: 'primary' }, { n: 3, title: 'AI model β', sub: 'Second AI, different architecture. Invoked on disagreement and for the high-stakes tail. Produces an explanation operators can read.', time: '22 ms', icon: IconLayers, tone: 'blue' }, ]; return (
{layers.map((l, i) => { const Icon = l.icon; return (
L{l.n} {l.time}
{l.title}
{l.sub}
{i < layers.length - 1 && (
)} ); })}
); } Object.assign(window, { LayerStack, LayerFlow });