// The Dealer's Fan — six tarot cards fanned out, each an arcana for a primitive.
// Hover to pull one forward; the others tilt back and fan wider.
// Scroll cycles through the "drawn" card if no hover.
const { useEffect: useEffC, useRef: useRefC, useState: useStateC } = React;
// ── The six cards ──
const ARCANA = [
{
num: "I", name: "MEMORY", arcana: "THE SCHOLAR",
subtitle: "Of shared recall",
body: "A semantic substrate shared across agents, sessions, and teams. The scholar remembers everything, forgets nothing, and speaks to every hand at the table.",
keywords: ["recall", "substrate", "continuity"],
},
{
num: "II", name: "FLEET", arcana: "THE SWARM",
subtitle: "Of many as one",
body: "A thousand agents move in concert. Parallel, deterministic, unbroken. The swarm is orchestrated by intent — not by rule.",
keywords: ["parallel", "concord", "intent"],
},
{
num: "III", name: "TOOL", arcana: "THE SMITH",
subtitle: "Of the forged API",
body: "Every tool, typed end-to-end. The smith hammers schemas into shape and guarantees the fit. Two hundred and twelve instruments, zero drift.",
keywords: ["type-safe", "registry", "bind"],
},
{
num: "IV", name: "TRACE", arcana: "THE SCRIBE",
subtitle: "Of the replayable",
body: "Every decision is recorded, signed, and eternal. The scribe misses nothing. Rewind any moment; the truth is cryptographically preserved.",
keywords: ["audit", "replay", "signed"],
},
{
num: "V", name: "STREAM", arcana: "THE CURRENT",
subtitle: "Of the real-time",
body: "A living river of tokens, events, and state. Thirty-eight milliseconds median. Ninety-ninth percentile under one twenty. The current never falters.",
keywords: ["latency", "realtime", "flow"],
},
{
num: "VI", name: "POLICY", arcana: "THE JUDGE",
subtitle: "Of the guardrail",
body: "Rules made manifest. SOC2, HIPAA, EU AI Act — all signed into the fabric. The judge stands at every gate, a quiet, unsleeping sentinel.",
keywords: ["compliance", "gate", "audit"],
},
];
// Simple SVG arcana illustrations — ornate, monochrome with gold accent
const arcanaSVG = {
"THE SCHOLAR": (
{/* Book open with pages */}
{[0,1,2,3].map(i => (
))}
{/* Eye of memory above book */}
{/* Rays from eye */}
{[0,1,2,3,4].map(i => {
const a = -Math.PI/2 + (i - 2) * 0.3;
return ;
})}
),
"THE SWARM": (
{/* Central node */}
{/* Surrounding swarm nodes in hexagonal-ish pattern */}
{[
[100, 70], [140, 90], [160, 130], [140, 170], [100, 190], [60, 170], [40, 130], [60, 90],
[120, 50], [170, 70], [185, 110], [185, 150], [170, 190], [120, 210], [80, 210], [30, 190],
].map(([x,y], i) => {
const scale = (i % 3) * 0.6 + 1;
return ;
})}
),
"THE SMITH": (
{/* Anvil */}
{/* Hammer */}
{/* Sparks */}
{[0,1,2,3,4,5,6].map(i => {
const a = -Math.PI/2 + (i - 3) * 0.3;
const r = 30 + (i % 2) * 8;
return ;
})}
),
"THE SCRIBE": (
{/* Scroll */}
{/* Lines of text */}
{[0,1,2,3,4,5,6].map(i => (
))}
{/* Seal — wax stamp */}
J
{/* Feather quill */}
),
"THE CURRENT": (
{/* Wavy streams */}
{[0,1,2,3,4].map(i => {
const y = 80 + i * 22;
return ;
})}
{/* Fish/arrows darting */}
{[[70, 100], [130, 145], [90, 180]].map(([x,y], i) => (
))}
{/* Droplet at top */}
),
"THE JUDGE": (
{/* Scales */}
{/* Left pan */}
{/* Right pan */}
{/* Base */}
{/* Crown on top */}
),
};
function DealerFan() {
const [hovered, setHovered] = useStateC(null);
const [auto, setAuto] = useStateC(0);
const ref = useRefC(null);
// Gentle auto-cycle when nothing is hovered
useEffC(() => {
if (hovered !== null) return;
const id = setInterval(() => setAuto(a => (a + 1) % ARCANA.length), 2800);
return () => clearInterval(id);
}, [hovered]);
const active = hovered !== null ? hovered : auto;
return (
{/* Ornamental background */}