/* eslint-disable */ /* ============================================================ kevinz.ai — enhancements bundle ------------------------------------------------------------ • AsciiRain — sparse cursor-aware Matrix-y bg • StickyNewsletter — bottom dock that appears past hero • CommanderDemo — sandboxed terminal w/ canned prompts • CareerTimeline — horizontal 20-yr timeline, dismissible ============================================================ */ const { useEffect: _useEffectE, useRef: _useRefE, useState: _useStateE, useMemo: _useMemoE } = React; /* ============================================================ 1. ASCII RAIN — canvas-based, cursor-aware, very subtle ============================================================ */ function AsciiRain({ density = 0.35, fontSize = 13, repelRadius = 110 }) { const canvasRef = _useRefE(null); const rafRef = _useRefE(0); const mouseRef = _useRefE({ x: -9999, y: -9999 }); _useEffectE(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d", { alpha: true }); const dpr = Math.min(window.devicePixelRatio || 1, 2); const CHARS = "01░▒▓·:-+*=#@▌▐▀▄│─┼├┤┬┴"; let cols = 0; let drops = []; // {x, y, speed, ch, age} const resize = () => { canvas.width = window.innerWidth * dpr; canvas.height = window.innerHeight * dpr; canvas.style.width = window.innerWidth + "px"; canvas.style.height = window.innerHeight + "px"; ctx.scale(dpr, dpr); cols = Math.floor(window.innerWidth / fontSize); drops = []; for (let i = 0; i < cols; i++) { // sparse — only ~density of cols actually have a drop if (Math.random() < density) { drops.push({ col: i, y: Math.random() * window.innerHeight, speed: 0.4 + Math.random() * 0.9, ch: CHARS[(Math.random() * CHARS.length) | 0], chTimer: 0 }); } } }; resize(); const onMove = (e) => { mouseRef.current.x = e.clientX; mouseRef.current.y = e.clientY; }; const onLeave = () => { mouseRef.current.x = -9999; mouseRef.current.y = -9999; }; window.addEventListener("resize", resize); window.addEventListener("pointermove", onMove, { passive: true }); window.addEventListener("pointerleave", onLeave); const tick = () => { // soft trail — clear with low alpha ctx.fillStyle = "rgba(8, 9, 10, 0.18)"; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); ctx.font = `${fontSize}px var(--mono, monospace)`; const mx = mouseRef.current.x; const my = mouseRef.current.y; const r2 = repelRadius * repelRadius; for (let i = 0; i < drops.length; i++) { const d = drops[i]; const x = d.col * fontSize; // distance to cursor const dx = x - mx; const dy = d.y - my; const dist2 = dx * dx + dy * dy; const inField = dist2 < r2; // fade chars near cursor (the "parting" effect) let alpha; if (inField) { const t = Math.sqrt(dist2) / repelRadius; // 0..1 alpha = 0.04 + t * 0.08; } else { alpha = 0.10 + Math.random() * 0.04; } // amber tint for the "head" of each drop const isHead = d.chTimer < 2; ctx.fillStyle = isHead ? `rgba(255, 176, 60, ${alpha + 0.18})` : `rgba(170, 170, 170, ${alpha})`; ctx.fillText(d.ch, x, d.y); d.y += d.speed * fontSize * 0.18; d.chTimer++; if (d.chTimer > 8) { d.ch = CHARS[(Math.random() * CHARS.length) | 0]; d.chTimer = 0; } if (d.y > window.innerHeight + fontSize) { d.y = -fontSize * (Math.random() * 8); d.speed = 0.4 + Math.random() * 0.9; } } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => { cancelAnimationFrame(rafRef.current); window.removeEventListener("resize", resize); window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerleave", onLeave); }; }, [density, fontSize, repelRadius]); return (