/* global React */ const { useState } = React; // ---- Header --------------------------------------------------------------- function SiteHeader({ active = "studio", onNav }) { const links = [ ["studio", "Studio"], ["worlds", "Worlds"], ["artifacts", "Artifacts"], ["inquiries", "Inquiries"], ]; return (
{ e.preventDefault(); onNav && onNav("studio"); }}> WISE & SAVVY { e.preventDefault(); onNav && onNav("worlds"); }}> Enter Worlds
); } // ---- Eyebrow -------------------------------------------------------------- function Eyebrow({ children }) { return {children}; } // ---- Buttons -------------------------------------------------------------- function Button({ children, variant = "primary", onClick, href }) { const cls = "ws-btn ws-btn-" + variant; const external = href && href.startsWith("http"); if (href) return {children}; return ; } // ---- Vector divider (brand asset) ----------------------------------------- function VectorDivider({ flip = false }) { return ( ); } // ---- Ambient smoke (runs forever) ----------------------------------------- // Multi-layer turbulence-displaced plumes + curl-noise fibers + drifting embers. // Six independent CSS-keyframe layers (38–90s, none aligning) keep the field // from ever visibly looping. Scroll just nudges intensity. function AmbientBackground() { const fibersRef = React.useRef(null); const embersRef = React.useRef(null); const scrollRef = React.useRef(0); React.useEffect(() => { const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduceMotion) return; const fibers = fibersRef.current; const embers = embersRef.current; if (!fibers || !embers) return; const fCtx = fibers.getContext('2d'); const eCtx = embers.getContext('2d'); function sizeCanvas(c) { const dpr = Math.min(2, window.devicePixelRatio || 1); c.width = Math.floor(window.innerWidth * dpr); c.height = Math.floor(window.innerHeight * dpr); c.style.width = window.innerWidth + 'px'; c.style.height = window.innerHeight + 'px'; c.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0); } const sizeAll = () => { sizeCanvas(fibers); sizeCanvas(embers); }; sizeAll(); window.addEventListener('resize', sizeAll); const onScroll = () => { const max = Math.max(1, document.documentElement.scrollHeight - window.innerHeight); scrollRef.current = Math.max(0, Math.min(1, (window.scrollY || 0) / max)); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); // Cheap value-noise → curl const H = new Uint8Array(512); for (let i = 0; i < 256; i++) H[i] = H[i + 256] = Math.floor(Math.random() * 256); const fade = t => t * t * t * (t * (t * 6 - 15) + 10); const lerp = (a, b, t) => a + (b - a) * t; const grad = (h, x, y) => { switch (h & 3) { case 0: return x + y; case 1: return -x + y; case 2: return x - y; default: return -x - y; } }; const noise2 = (x, y) => { const xi = Math.floor(x) & 255, yi = Math.floor(y) & 255; const xf = x - Math.floor(x), yf = y - Math.floor(y); const u = fade(xf), v = fade(yf); const aa = H[H[xi] + yi], ab = H[H[xi] + yi + 1]; const ba = H[H[xi + 1] + yi], bb = H[H[xi + 1] + yi + 1]; return lerp( lerp(grad(aa, xf, yf), grad(ba, xf - 1, yf), u), lerp(grad(ab, xf, yf - 1), grad(bb, xf - 1, yf - 1), u), v ); }; const curl = (x, y) => { const e = 0.08; return [ (noise2(x, y + e) - noise2(x, y - e)) / (2 * e), -(noise2(x + e, y) - noise2(x - e, y)) / (2 * e), ]; }; // Fibers const N_FIB = 220; const fibs = []; const resetFib = (i, hard = true) => { fibs[i] = { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, life: Math.random() * 300 + 160, age: hard ? Math.random() * 300 : 0, hue: Math.random() < 0.7 ? 'cyan' : 'violet', w: 0.4 + Math.random() * 0.9, seed: Math.random() * 1000, }; }; for (let i = 0; i < N_FIB; i++) resetFib(i); // Embers const N_EMB = 80; const ems = []; for (let i = 0; i < N_EMB; i++) { ems.push({ x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight, vx: (Math.random() - 0.5) * 0.25, vy: -0.04 - Math.random() * 0.22, r: 0.4 + Math.random() * 1.4, tw: Math.random() * Math.PI * 2, }); } let t = 0; let raf; const frame = () => { t += 1; const tt = t * 0.0025; const W = window.innerWidth, Hpx = window.innerHeight; const flow = 1.6 + 0.4 * Math.sin(tt * 0.3); const updraft = -0.30 - 0.05 * Math.sin(tt * 0.2); const intensity = 0.85 + 0.15 * scrollRef.current; fCtx.globalCompositeOperation = 'destination-out'; fCtx.fillStyle = 'rgba(0,0,0,0.085)'; fCtx.fillRect(0, 0, W, Hpx); fCtx.globalCompositeOperation = 'lighter'; for (let i = 0; i < N_FIB; i++) { const f = fibs[i]; f.age += 1; if (f.age > f.life || f.x < -20 || f.x > W + 20 || f.y < -20 || f.y > Hpx + 20) { resetFib(i, false); continue; } const nx = (f.x + f.seed) * 0.0018; const ny = (f.y + f.seed) * 0.0018 + tt * 0.6; const [cx, cy] = curl(nx, ny); const px = f.x, py = f.y; f.x += cx * flow + 0.05 * Math.sin(tt + i * 0.1); f.y += cy * flow + updraft; const lifeRatio = f.age / f.life; const alpha = Math.sin(lifeRatio * Math.PI) * 0.30 * intensity; fCtx.strokeStyle = f.hue === 'cyan' ? `rgba(180,230,255,${alpha.toFixed(3)})` : `rgba(170,165,240,${(alpha * 0.85).toFixed(3)})`; fCtx.lineWidth = f.w; fCtx.beginPath(); fCtx.moveTo(px, py); fCtx.lineTo(f.x, f.y); fCtx.stroke(); } eCtx.clearRect(0, 0, W, Hpx); eCtx.globalCompositeOperation = 'lighter'; for (let i = 0; i < N_EMB; i++) { const e = ems[i]; e.tw += 0.05; e.x += e.vx + Math.sin(e.tw * 0.5 + i) * 0.12; e.y += e.vy; if (e.y < -10) { e.y = Hpx + 10; e.x = Math.random() * W; } if (e.x < -10) e.x = W + 10; if (e.x > W + 10) e.x = -10; const flick = 0.5 + Math.sin(e.tw) * 0.5; const a = (0.16 + flick * 0.30) * intensity; const r = e.r * (1 + flick * 0.4); const g = eCtx.createRadialGradient(e.x, e.y, 0, e.x, e.y, r * 6); g.addColorStop(0, `rgba(220,240,255,${a.toFixed(3)})`); g.addColorStop(0.4, `rgba(87,216,255,${(a * 0.35).toFixed(3)})`); g.addColorStop(1, 'rgba(87,216,255,0)'); eCtx.fillStyle = g; eCtx.beginPath(); eCtx.arc(e.x, e.y, r * 6, 0, Math.PI * 2); eCtx.fill(); } raf = requestAnimationFrame(frame); }; raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', sizeAll); window.removeEventListener('scroll', onScroll); }; }, []); return (