// primitives.jsx — shared visual building blocks for all three directions. // Depends on palette.jsx and animations.jsx already loaded. // ── Background: subtle dot grid + vignette ────────────────────────────────── function GridBackground({ color = CTE.bgGrid, spacing = 40, opacity = 1 }) { return (
); } // ── Soft glowing orb behind the logo, breathes with the timeline ─────────── function CenterGlow({ x, y, time, intensity = 1, size = 520 }) { const pulse = 0.7 + 0.3 * Math.sin(time * 1.5); return (
); } // ── The CTE logo, rendered as inline SVG so we can animate its parts ─────── // It's the same molecular structure as the brand mark: a central hub with // 7 satellite nodes connected by gradient lines. // // Props let scenes drive per-node activation, hub pulse, full glow, etc. // // We render at a "natural" 200×200 viewBox and the caller sets size+pos. function LogoEngine({ x, y, size = 280, // 0..1 per node — controls glow / scale / activation nodeActivation = [1, 1, 1, 1, 1, 1, 1], hubPulse = 1, rotate = 0, // 0..1 — controls the master "energizing" glow intensity = 1, }) { // Logo geometry — read off the actual logo image, normalized to 200×200. // Hub at (100, 105) with radius ~30. Then 7 satellites at varying r/theta. // Colors approximate the gradient stops from the brand mark. const HUB = { cx: 100, cy: 105, r: 30 }; // 7 satellites — matches the real CTE mark exactly. Read clockwise from top. const NODES = [ // Top — large mint { cx: 100, cy: 22, r: 18, color: CTE.teal, angle: -90 }, // Upper-right — medium cyan { cx: 168, cy: 70, r: 15, color: CTE.cyan, angle: -40 }, // Far right — small cyan, long line { cx: 198, cy: 122, r: 7, color: CTE.cyan, angle: 5 }, // Lower-right — large azure-blue (the "anchor" node) { cx: 152, cy: 185, r: 19, color: CTE.azure, angle: 50 }, // Lower-mid small — short line down from hub { cx: 96, cy: 158, r: 6, color: CTE.teal, angle: 95 }, // Lower-left — medium teal, long line { cx: 22, cy: 145, r: 13, color: CTE.teal, angle: 155 }, // Upper-left — small teal, close to hub { cx: 50, cy: 65, r: 9, color: CTE.teal, angle: -150 }, ]; return (
{/* Line-specific gradient anchored in user space so it resolves correctly on perfectly-vertical lines (200×200 viewBox extent). */} {/* Connecting lines — drawn first so they sit under the nodes. Use gradientUnits=userSpaceOnUse so the gradient resolves consistently even on perfectly-vertical lines (which would otherwise have zero x-extent and render as a single-color sample). */} {NODES.map((n, i) => { const act = nodeActivation[i] ?? 1; return ( ); })} {/* Satellite nodes */} {NODES.map((n, i) => { const act = nodeActivation[i] ?? 1; const r = n.r * (0.9 + 0.18 * act); return ( 0.6 ? 'url(#cte-glow)' : undefined}> {/* inner highlight */} ); })} {/* Hub */}
); } // ── A small "monitor chip" — the boxed labels from the existing CTE site ─── function ClassifierChip({ x, y, label, active = 0, status = 'idle', width = 200 }) { const borderCol = active > 0.5 ? CTE.teal : 'rgba(143, 240, 220, 0.25)'; const bg = active > 0.5 ? `linear-gradient(180deg, ${CTE.bg3} 0%, ${CTE.bg2} 100%)` : CTE.bg2; const dot = status === 'ok' ? CTE.ok : status === 'warn' ? CTE.warn : status === 'err' ? CTE.err : CTE.textMuted; return (
0.5 ? CTE.text : CTE.textDim, boxShadow: active > 0.5 ? `0 0 24px ${CTE.teal}33, inset 0 0 0 1px ${CTE.teal}22` : 'none', transition: 'box-shadow 200ms, border-color 200ms', }}> {label}
); } // ── A raw transaction row (chaotic, unlabeled) ───────────────────────────── // Looks like a hex hash + protocol address + raw method id. function RawTxRow({ x, y, width = 380, hash, fromAddr, methodId, opacity = 1, }) { return (
tx{' '} {hash}{' '} →{' '} {fromAddr}{' '} {methodId}
); } // ── A clean, classified ledger row — the "after" state ───────────────────── function ClassifiedRow({ x, y, width = 520, date, asset, amount, type, confidence, taxTag, opacity = 1, highlight = 0, }) { const typeColor = { SWAP: CTE.swap, BRIDGE: CTE.bridge, STAKE: CTE.stake, AIRDROP: CTE.airdrop, FEE: CTE.fee, TRADE: CTE.swap, INCOME: CTE.teal, REWARD: CTE.airdrop, }[type] || CTE.teal; return (
0 ? `linear-gradient(90deg, ${CTE.teal}${Math.round(highlight * 30).toString(16).padStart(2,'0')} 0%, transparent 100%)` : 'transparent', borderBottom: `1px solid ${CTE.bg3}`, letterSpacing: '0.02em', }}> {date} {asset} {amount} {type} = 95 ? CTE.ok : confidence >= 80 ? CTE.warn : CTE.err, fontVariantNumeric: 'tabular-nums', }}>{confidence}% {taxTag}
); } // ── A header for a ledger panel ──────────────────────────────────────────── function LedgerHeader({ x, y, width = 520, label = 'CLASSIFIED LEDGER' }) { return (
DATE ASSET AMOUNT TYPE CONF. {label}
); } // ── Floating tx hash particle — used in chaos shots ──────────────────────── function TxParticle({ x, y, hash, opacity = 1, scale = 1, color = CTE.textDim }) { return (
{hash}
); } // ── Pulsing energy dot traveling along a path ────────────────────────────── // Used to show transactions flowing into the hub or out to the ledger. function EnergyPulse({ x, y, color = CTE.teal, size = 6, glow = 1 }) { return (
); } // ── Generate deterministic-looking hex strings ───────────────────────────── function makeHash(seed, len = 10) { // Simple LCG so seeds give stable strings across renders. let s = (seed * 9301 + 49297) % 233280; const chars = '0123456789abcdef'; let out = '0x'; for (let i = 0; i < len; i++) { s = (s * 9301 + 49297) % 233280; out += chars[s % 16]; } return out; } const ASSETS = ['ETH', 'WBTC', 'USDC', 'ARB', 'OP', 'LINK', 'UNI', 'AAVE', 'stETH', 'MATIC', 'DAI']; const TYPES = ['SWAP', 'BRIDGE', 'STAKE', 'AIRDROP', 'FEE', 'INCOME', 'REWARD']; const TAX_TAGS = ['Sched D', 'Form 8949', 'Ord. income', 'Self-empl.', 'Cap. gain (LT)', 'Cap. gain (ST)', 'Cost basis']; function pickFromSeed(arr, seed) { return arr[Math.abs(seed * 2654435761 % arr.length)]; } Object.assign(window, { GridBackground, CenterGlow, LogoEngine, ClassifierChip, RawTxRow, ClassifiedRow, LedgerHeader, TxParticle, EnergyPulse, makeHash, ASSETS, TYPES, TAX_TAGS, pickFromSeed, });