/* RibbonVisual — "Aurora Bloom" A glass orb floating in an aurora field. The Method 8 ribbon lives suspended inside, slowly rotating in 3D. Cursor pushes the aurora; click pulses a shockwave; triple-click collapses everything into a singularity that re-blooms. */ const RibbonVisual = (function() { const { useState, useEffect, useRef } = React; function Ribbon({ onEgg, reduceMotion, accent }) { const wrapRef = useRef(null); const canvasRef = useRef(null); const mouseRef = useRef({ x: 0.5, y: 0.5, has: false }); const stateRef = useRef({ pulse: 0, collapse: 0, time: 0 }); const clickTimes = useRef([]); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio || 1; let W = 0, H = 0; const resize = () => { const r = wrapRef.current.getBoundingClientRect(); W = r.width; H = r.height; canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); const ro = new ResizeObserver(resize); ro.observe(wrapRef.current); // Aurora ribbons (3 layered curves) const ribbons = [ { hue: 198, amp: 0.18, freq: 1.1, phase: 0, speed: 0.0006, alpha: 0.55 }, { hue: 198, amp: 0.22, freq: 0.85, phase: 1.7, speed: 0.0004, alpha: 0.45 }, { hue: 198, amp: 0.16, freq: 1.4, phase: 3.4, speed: 0.0008, alpha: 0.35 }, ]; // Orbiting particles const N = 80; const particles = Array.from({length: N}, (_, i) => ({ a: (i / N) * Math.PI * 2, r: 130 + Math.random() * 90, speed: 0.0003 + Math.random() * 0.0008, size: 0.5 + Math.random() * 1.8, bright: 0.3 + Math.random() * 0.7, depth: Math.random(), })); let raf; const draw = (now) => { stateRef.current.time = now; const cx = W / 2, cy = H / 2; const collapse = stateRef.current.collapse; // 0..1 (1 = fully collapsed) // Background — deep cosmic gradient const bg = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(W, H)); bg.addColorStop(0, "#1a2540"); bg.addColorStop(0.5, "#0c111d"); bg.addColorStop(1, "#050912"); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H); // Cursor influence const mx = mouseRef.current.has ? (mouseRef.current.x - 0.5) : 0; const my = mouseRef.current.has ? (mouseRef.current.y - 0.5) : 0; // Aurora ribbons — sweeping wave field ctx.save(); ctx.globalCompositeOperation = "screen"; for (const rib of ribbons) { const y0 = cy + my * 60; ctx.beginPath(); for (let x = 0; x <= W; x += 4) { const tx = x / W; const wave = Math.sin(tx * rib.freq * Math.PI * 2 + now * rib.speed + rib.phase) * H * rib.amp; const wave2 = Math.cos(tx * rib.freq * 1.7 + now * rib.speed * 1.3 + rib.phase) * H * 0.06; const y = y0 + wave + wave2; if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } // Vertical gradient stroke const grad = ctx.createLinearGradient(0, 0, W, 0); grad.addColorStop(0, `hsla(${rib.hue}, 90%, 65%, 0)`); grad.addColorStop(0.5, `hsla(${rib.hue}, 90%, 70%, ${rib.alpha * (1 - collapse)})`); grad.addColorStop(1, `hsla(${rib.hue}, 90%, 65%, 0)`); ctx.strokeStyle = grad; ctx.lineWidth = 80; ctx.filter = "blur(40px)"; ctx.stroke(); } ctx.filter = "none"; ctx.restore(); // Tighter aurora glow near center const glowR = 240 * (1 - collapse * 0.7); const glow = ctx.createRadialGradient(cx + mx * 30, cy + my * 30, 0, cx, cy, glowR); glow.addColorStop(0, accent + "55"); glow.addColorStop(0.5, accent + "22"); glow.addColorStop(1, accent + "00"); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc(cx, cy, glowR, 0, Math.PI * 2); ctx.fill(); // Pulse shockwave (on click) if (stateRef.current.pulse > 0) { const p = stateRef.current.pulse; ctx.save(); ctx.strokeStyle = `rgba(255,255,255,${p * 0.4})`; ctx.lineWidth = 2 * p; ctx.beginPath(); ctx.arc(cx, cy, 80 + (1 - p) * 220, 0, Math.PI * 2); ctx.stroke(); ctx.strokeStyle = `${accent}${Math.round(p * 255).toString(16).padStart(2,'0')}`; ctx.lineWidth = 4 * p; ctx.beginPath(); ctx.arc(cx, cy, 100 + (1 - p) * 180, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); if (!reduceMotion) stateRef.current.pulse = Math.max(0, p - 0.018); } // Orbiting particles (3D-ish via depth) — DISABLED, replaced by ribbon centerpiece // ctx.save(); // for (const p of particles) { ... } // ctx.restore(); // Glass orb at center — DISABLED, ribbon stands alone const orbR = 0; // Singularity flare during collapse if (collapse > 0.4) { const flareR = 4 + (1 - collapse) * 60; const flare = ctx.createRadialGradient(cx, cy, 0, cx, cy, flareR * 6); flare.addColorStop(0, "rgba(255,255,255,1)"); flare.addColorStop(0.2, accent + "ff"); flare.addColorStop(1, accent + "00"); ctx.fillStyle = flare; ctx.beginPath(); ctx.arc(cx, cy, flareR * 6, 0, Math.PI * 2); ctx.fill(); } // Update collapse state if (!reduceMotion) { if (stateRef.current.collapseTarget === 1) { stateRef.current.collapse = Math.min(1, stateRef.current.collapse + 0.03); if (stateRef.current.collapse >= 1) { setTimeout(() => { stateRef.current.collapseTarget = 0; }, 400); } } else { stateRef.current.collapse = Math.max(0, stateRef.current.collapse - 0.025); } } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); const onMove = (e) => { const r = wrapRef.current.getBoundingClientRect(); mouseRef.current.x = (e.clientX - r.left) / r.width; mouseRef.current.y = (e.clientY - r.top) / r.height; mouseRef.current.has = true; }; const onLeave = () => { mouseRef.current.has = false; }; wrapRef.current.addEventListener("mousemove", onMove); wrapRef.current.addEventListener("mouseleave", onLeave); return () => { cancelAnimationFrame(raf); ro.disconnect(); if (wrapRef.current) { wrapRef.current.removeEventListener("mousemove", onMove); wrapRef.current.removeEventListener("mouseleave", onLeave); } }; }, [accent, reduceMotion]); const onClick = () => { stateRef.current.pulse = 1; const t = Date.now(); clickTimes.current = [...clickTimes.current.filter((x) => t - x < 600), t]; if (clickTimes.current.length >= 3) { clickTimes.current = []; stateRef.current.collapseTarget = 1; onEgg && onEgg("∞ — singularity"); } }; return (
{/* Floating M8 ribbon mark inside the orb */}
{/* Three nested ribbons in brand sky-blue */}
); } return Ribbon; })(); window.RibbonVisual = RibbonVisual;