/* venture.jsx — VENTURE / 04 · Live Status Console (stealth) Single-viewport editorial dashboard. Most fields redacted; one mission line exposed. Interactive layers (zero-to-one-click commitment): · Boot sequence on mount (telemetry rows boot in sequence ~1.2s) · Live syslog ticker (always running, ambient activity) · Click-to-attempt redact bars (single click → animated denial) · Cursor radar trail inside the console box · Auto-flicker reveals: every 14s a random redact bar briefly shows decoy text */ const { useState: useStateV, useEffect: useEffectV, useRef: useRefV, useMemo: useMemoV, } = React; /* Stealth startup — co-founded Oct 2025, right after discharge */ const VENTURE_T0 = new Date("2025-10-01T00:00:00Z").getTime(); const VENTURE_MISSION = "A personal-optimization engine."; const VENTURE_SUBLINE = "B2B2C — built first for study and learning environments. Lets an individual see and steer their own decision model."; const REDUCED_MOTION = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; /* ---- helpers ---- */ function formatUptime(ms) { const totalSec = Math.max(0, Math.floor(ms / 1000)); const days = Math.floor(totalSec / 86400); const h = Math.floor((totalSec % 86400) / 3600); const m = Math.floor((totalSec % 3600) / 60); const s = totalSec % 60; const pad = (n, w = 2) => String(n).padStart(w, "0"); return `${pad(days, 3)}d ${pad(h)}:${pad(m)}:${pad(s)}`; } function utcNow(d = new Date()) { const pad = (n) => String(n).padStart(2, "0"); return `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())} UTC`; } function rand(seed) { // tiny PRNG so syslog feels stable per-tick let x = Math.sin(seed) * 10000; return x - Math.floor(x); } /* ---- syslog data ---- */ const SYSLOG_TEMPLATES = [ () => `heartbeat ok`, () => `burn nominal`, () => `commit ${Math.random().toString(16).slice(2, 9)}`, () => `inquiry rcv ${Math.floor(10 + Math.random() * 245)}.${Math.floor(Math.random() * 256)}.*.* — queued`, () => `cron · idle-sweep complete`, () => `signal lock · 256-bit ok`, () => `model-eval · regret ↓ ${(Math.random() * 0.3).toFixed(3)}`, () => `auth · candidate ping rejected`, () => `disk · snapshot ${(Math.random() * 9 | 0)}h ago`, () => `embargo guard · ok`, ]; /* ---- boot timeline ---- */ const TELEMETRY_KEYS = [ "UPTIME", "STAGE", "SECTOR", "CORE", "TEAM", "SIGNAL", "LOCATION", "LAST PING", "INQUIRIES", "NEXT MILESTONE", ]; const BOOT_STEP_MS = 90; // delay between rows const BOOT_SETTLE_MS = 200; // post-fade time const BOOT_TOTAL_MS = TELEMETRY_KEYS.length * BOOT_STEP_MS + BOOT_SETTLE_MS; /* ---- redact bar (click → denial) + auto flicker reveal hook ---- */ const FAKE_REVEALS = [ "REDACTED", "EMBARGO", "ACCESS DENIED", "TRY AT LAUNCH", "CLEARANCE INSUFFICIENT", "SEE LAUNCH DAY", ]; const DENIAL_REASONS = [ "CLEARANCE INSUFFICIENT", "EMBARGO ACTIVE", "RETRY AT LAUNCH", "ACCESS DENIED · 403", "QUEUED · WRITE FOR EARLY ACCESS", ]; /* Each RedactBar registers itself with a ref so the parent can trigger an auto-flicker. revealText: when set, bar morphs to outlined text briefly. */ function RedactBar({ chars = 12, register }) { const [phase, setPhase] = useStateV("idle"); // idle | trying | denied | reveal const [denial, setDenial] = useStateV(null); const [reveal, setReveal] = useStateV(null); const idRef = useRefV(Symbol("bar")); useEffectV(() => { if (!register) return; const handlers = { flash: (text) => { setReveal(text); setPhase("reveal"); setTimeout(() => { setReveal(null); setPhase("idle"); }, 900); }, }; register(idRef.current, handlers); return () => register(idRef.current, null); }, [register]); const onClick = (e) => { e.preventDefault(); e.stopPropagation(); if (phase !== "idle") return; setPhase("trying"); setTimeout(() => { setDenial(DENIAL_REASONS[Math.floor(Math.random() * DENIAL_REASONS.length)]); setPhase("denied"); }, 420); setTimeout(() => { setDenial(null); setPhase("idle"); }, 2200); }; const baseStyle = { display: "inline-block", minWidth: `${chars * 0.58}ch`, height: "1.05em", padding: "0 0.3ch", verticalAlign: "-0.18em", marginInline: 2, cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: "0.78em", letterSpacing: "0.04em", textAlign: "center", lineHeight: "1.05em", transition: "background 180ms var(--easing-default), color 180ms var(--easing-default)", userSelect: "none", }; if (phase === "reveal") { return ( {reveal} ); } if (phase === "trying") { return ( ACCESSING... ); } if (phase === "denied") { return ( {denial} ); } // idle return ( █ ); } /* ---- Telemetry row with boot fade ---- */ function TelemetryRow({ k, children, last, bootIdx, bootProgress }) { const visible = bootProgress > bootIdx; return (
{k} {children}
); } /* Mission line — chars emerge left→right in the FINAL font from frame 1. No glyph substitution, no font swap: each character holds its final shape and width throughout, fading in through a soft leading edge. Subtle parallax tilt follows the cursor. */ function MissionLine({ text }) { useLang(); // re-render on language toggle const isKR = window.__lang === "kr"; const [progress, setProgress] = useStateV(REDUCED_MOTION ? text.length : 0); const [armed, setArmed] = useStateV(REDUCED_MOTION); const wrapRef = useRefV(null); /* Arm reveal only after the Preloader is gone, so the animation isn't wasted behind the overlay. If the preloader is already done (route change after first load), arm on next frame. */ useEffectV(() => { if (REDUCED_MOTION) return; let cancelled = false; const arm = () => { if (cancelled) return; requestAnimationFrame(() => requestAnimationFrame(() => setArmed(true))); }; if (window.__preloaderDone) { arm(); return () => { cancelled = true; }; } const onDone = () => arm(); window.addEventListener("preloader:done", onDone, { once: true }); return () => { cancelled = true; window.removeEventListener("preloader:done", onDone); }; }, []); /* Reveal timeline: settle one character every ~38ms */ useEffectV(() => { if (!armed) return; let i = 0; setProgress(0); const settle = setInterval(() => { i += 1; setProgress(i); if (i >= text.length) clearInterval(settle); }, 38); return () => clearInterval(settle); }, [armed, text]); /* Parallax tilt — subtle, capped at ~5deg */ useEffectV(() => { if (REDUCED_MOTION) return; const el = wrapRef.current; if (!el) return; let raf = 0; let target = { rx: 0, ry: 0, sx: 0, sy: 0 }; let current = { rx: 0, ry: 0, sx: 0, sy: 0 }; const onMove = (e) => { const r = el.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const nx = (e.clientX - cx) / (window.innerWidth / 2); const ny = (e.clientY - cy) / (window.innerHeight / 2); target.ry = Math.max(-1, Math.min(1, nx)) * 4; // deg target.rx = -Math.max(-1, Math.min(1, ny)) * 3; // deg target.sx = Math.max(-1, Math.min(1, nx)) * 6; // px target.sy = Math.max(-1, Math.min(1, ny)) * 4; // px }; const tick = () => { const k = 0.08; current.rx += (target.rx - current.rx) * k; current.ry += (target.ry - current.ry) * k; current.sx += (target.sx - current.sx) * k; current.sy += (target.sy - current.sy) * k; el.style.transform = `perspective(900px) rotateX(${current.rx.toFixed(2)}deg) rotateY(${current.ry.toFixed(2)}deg) translate3d(${current.sx.toFixed(2)}px, ${current.sy.toFixed(2)}px, 0)`; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); window.addEventListener("mousemove", onMove); return () => { cancelAnimationFrame(raf); window.removeEventListener("mousemove", onMove); }; }, []); /* Render every character in its final glyph from the start. A leading edge of ~7 characters ahead of `progress` is partially-faded with a tiny blur so the line reads as "materializing" without ever swapping a glyph or font. */ const LEAD = 7; const chars = text.split(""); return (

{chars.map((c, i) => { if (c === " ") return " "; // distance: <0 already settled (full opacity); 0..LEAD emerging; >LEAD hidden const distance = i - progress; let opacity, blur; if (distance < 0) { opacity = 1; blur = 0; } else if (distance < LEAD) { const k = distance / LEAD; // 0 (just emerging) → 1 (still hidden) opacity = 1 - k; // fade leading edge in blur = k * 1.4; // tiny blur on far edge only } else { opacity = 0; blur = 1.6; } return ( 0.05 ? `blur(${blur.toFixed(2)}px)` : "none", transition: "opacity 260ms var(--easing-default), filter 260ms var(--easing-default)", }} >{c} ); })}

); } /* Lombardi-style background graph driven by mouse motion. Drops a hairline node every ~35px of movement; connects each new node to its 1–2 nearest recent neighbours with a gentle bezier arc. Nodes/edges fade over ~9s and the buffer caps so the page never feels crowded. */ function NodeGraph({ boxRef }) { const canvasRef = useRefV(null); const nodesRef = useRefV([]); // {x,y,r,filled,bornAt} const edgesRef = useRefV([]); // {a,b,cx,cy,bornAt} const lastRef = useRefV(null); // last sampled cursor pos const rafRef = useRefV(0); const NODE_LIFE = 2200; const EDGE_LIFE = 1800; const SAMPLE_DIST = 32; // px const MAX_NODES = 90; const MAX_EDGES = 140; const NEIGHBOUR_RADIUS = 380; // px — wider reach so the graph spreads const NEIGHBOUR_K = 4; // connect new node to up to N recent neighbours useEffectV(() => { if (REDUCED_MOTION) return; const box = boxRef.current; const canvas = canvasRef.current; if (!box || !canvas) return; const ctx = canvas.getContext("2d"); function size() { const r = box.getBoundingClientRect(); const dpr = window.devicePixelRatio || 1; canvas.width = r.width * dpr; canvas.height = r.height * dpr; canvas.style.width = `${r.width}px`; canvas.style.height = `${r.height}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } size(); const ro = new ResizeObserver(size); ro.observe(box); function spawnAt(x, y) { const now = performance.now(); const filled = Math.random() < 0.28; const r = filled ? 2.2 + Math.random() * 1.8 : 3 + Math.random() * 3.5; const node = { x, y, r, filled, bornAt: now }; nodesRef.current.push(node); if (nodesRef.current.length > MAX_NODES) nodesRef.current.shift(); // Connect to up to K nearest *recent* nodes within radius const recent = nodesRef.current.slice(-40, -1); const ranked = recent .map(n => ({ n, d: Math.hypot(n.x - x, n.y - y) })) .filter(o => o.d > 14 && o.d < NEIGHBOUR_RADIUS) .sort((a, b) => a.d - b.d) .slice(0, NEIGHBOUR_K); for (const { n: other } of ranked) { // Perpendicular control point gives a hand-drawn bezier feel const mx = (other.x + x) / 2; const my = (other.y + y) / 2; const dx = x - other.x; const dy = y - other.y; const len = Math.hypot(dx, dy) || 1; const nx = -dy / len; const ny = dx / len; const sag = (Math.random() - 0.5) * len * 0.35; edgesRef.current.push({ a: other, b: node, cx: mx + nx * sag, cy: my + ny * sag, bornAt: now, }); } while (edgesRef.current.length > MAX_EDGES) edgesRef.current.shift(); } function onMove(e) { const r = box.getBoundingClientRect(); const x = e.clientX - r.left; const y = e.clientY - r.top; if (x < 0 || y < 0 || x > r.width || y > r.height) return; const last = lastRef.current; if (!last) { lastRef.current = { x, y }; spawnAt(x, y); return; } const d = Math.hypot(x - last.x, y - last.y); if (d >= SAMPLE_DIST) { // Step along the segment so fast moves still drop nodes evenly const steps = Math.min(4, Math.floor(d / SAMPLE_DIST)); for (let i = 1; i <= steps; i++) { const t = i / steps; spawnAt(last.x + (x - last.x) * t, last.y + (y - last.y) * t); } lastRef.current = { x, y }; } } window.addEventListener("mousemove", onMove); function loop() { const r = box.getBoundingClientRect(); ctx.clearRect(0, 0, r.width, r.height); const now = performance.now(); // Drop dead nodes/edges (compact in place) nodesRef.current = nodesRef.current.filter(n => now - n.bornAt < NODE_LIFE); edgesRef.current = edgesRef.current.filter(e => now - e.bornAt < EDGE_LIFE && nodesRef.current.includes(e.a) && nodesRef.current.includes(e.b) ); ctx.lineWidth = 1; ctx.strokeStyle = "rgba(10,10,10,1)"; ctx.fillStyle = "rgba(10,10,10,1)"; // Edges first so nodes sit on top for (const e of edgesRef.current) { const age = (now - e.bornAt) / EDGE_LIFE; const fadeIn = Math.min(1, (now - e.bornAt) / 200); const alpha = (1 - age) * 0.18 * fadeIn; if (alpha <= 0.01) continue; ctx.globalAlpha = alpha; ctx.beginPath(); ctx.moveTo(e.a.x, e.a.y); ctx.quadraticCurveTo(e.cx, e.cy, e.b.x, e.b.y); ctx.stroke(); } // Nodes — pop-in animation 0→r over 250ms for (const n of nodesRef.current) { const age = (now - n.bornAt) / NODE_LIFE; const pop = Math.min(1, (now - n.bornAt) / 220); const alpha = (1 - age) * (n.filled ? 0.5 : 0.38); if (alpha <= 0.01) continue; const radius = n.r * pop; ctx.globalAlpha = alpha; ctx.beginPath(); ctx.arc(n.x, n.y, radius, 0, Math.PI * 2); if (n.filled) ctx.fill(); else ctx.stroke(); } ctx.globalAlpha = 1; rafRef.current = requestAnimationFrame(loop); } rafRef.current = requestAnimationFrame(loop); return () => { window.removeEventListener("mousemove", onMove); ro.disconnect(); cancelAnimationFrame(rafRef.current); }; }, [boxRef]); return (