(function(){ if (typeof window === 'undefined') return; if (window.__bgCanvasInit) return; window.__bgCanvasInit = true; function start() { var canvas = document.getElementById('bg-ambient-canvas'); if (!canvas) { setTimeout(start, 50); return; } var ctx = canvas.getContext('2d'); if (!ctx) return; // Accessibility: when prefers-reduced-motion is set, render ONE static // frame and skip the RAF loop. Listen for runtime flips so toggling the // OS setting takes effect without a reload. var mqReduced = (typeof window !== 'undefined' && window.matchMedia) ? window.matchMedia('(prefers-reduced-motion: reduce)') : null; var reducedMotion = mqReduced ? mqReduced.matches : false; // Cream-canvas constellation: faint Ink nodes with a minority of Light // Signal Orange "premium" nodes — echoes Mastercard's connected-services // motif as a whisper on the warm canvas (var names kept for diff clarity). var GREEN = '#141413'; var GOLD = '#F37338'; var particles = []; var dims = { w: 0, h: 0 }; var scanY = 0; function seed(w, h) { var n = Math.min(160, Math.floor((w * h) / 16000)); particles = []; for (var i = 0; i < n; i++) { var isGold = Math.random() < 0.32; particles.push({ x: Math.random() * w, y: Math.random() * h, vx: (Math.random() - 0.5) * 0.18, vy: (Math.random() - 0.5) * 0.18, r: 0.6 + Math.random() * 1.6, c: isGold ? GOLD : GREEN, g: isGold, wd: false, // wanderer flag — false for ambient particles ph: 0, }); } // Promote a small subset of EXISTING particles to wanderer status — // bigger, brighter, faster, with a pulsing tether to their nearest // neighbor. Don't inflate total node count; just upgrade ~6-8 of them. var wn = Math.max(5, Math.min(9, Math.floor(n / 22))); var picked = {}; for (var k = 0; k < wn; k++) { var idx; // Pick a unique index do { idx = Math.floor(Math.random() * particles.length); } while (picked[idx]); picked[idx] = true; var wp = particles[idx]; wp.wd = true; wp.vx = (Math.random() - 0.5) * 0.45; wp.vy = (Math.random() - 0.5) * 0.45; wp.r = 2.6 + Math.random() * 2.2; wp.ph = Math.random() * Math.PI * 2; // Bias wanderer color toward gold so they read as premium hubs if (Math.random() < 0.7) { wp.c = GOLD; wp.g = true; } } } function resize() { var w = window.innerWidth || document.documentElement.clientWidth || 800; var h = window.innerHeight || document.documentElement.clientHeight || 600; var dpr = Math.min(2, window.devicePixelRatio || 1); canvas.width = Math.floor(w * dpr); canvas.height = Math.floor(h * dpr); canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); dims = { w: w, h: h }; seed(w, h); scanY = 0; } function tick() { var w = window.innerWidth || document.documentElement.clientWidth || 0; var h = window.innerHeight || document.documentElement.clientHeight || 0; if (w > 0 && h > 0 && (dims.w !== w || dims.h !== h)) resize(); var dw = dims.w, dh = dims.h; var t = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now(); if (dw > 0 && dh > 0) { ctx.clearRect(0, 0, dw, dh); // Advance positions for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += p.vx; p.y += p.vy; if (p.x < -4) p.x = dw + 4; if (p.x > dw + 4) p.x = -4; if (p.y < -4) p.y = dh + 4; if (p.y > dh + 4) p.y = -4; } // Neural-network connection lines (drawn BEFORE the glowing nodes so // the nodes sit on top of their connections). Quadratic in particle // count but particles capped at 160 → ~12k checks/frame, fine on // modern devices. var CONN = 170; var CONN_SQ = CONN * CONN; ctx.lineWidth = 1; for (var i = 0; i < particles.length; i++) { var a = particles[i]; for (var j = i + 1; j < particles.length; j++) { var b = particles[j]; var dx = b.x - a.x; var dy = b.y - a.y; var dsq = dx * dx + dy * dy; if (dsq > CONN_SQ) continue; var dist = Math.sqrt(dsq); var alpha = (1 - dist / CONN) * 0.16; var color; if (a.g && b.g) { // orange-orange edge — faint premium accent arc color = 'rgba(243,115,56,' + Math.min(0.22, alpha * 1.3) + ')'; } else if (a.g || b.g) { // mixed edge — muted clay color = 'rgba(154,58,10,' + (alpha * 0.9) + ')'; } else { // ink-ink edge — whisper-faint on cream color = 'rgba(20,20,19,' + (alpha * 0.7) + ')'; } ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } } // Wanderer tethers — each wanderer locks onto its nearest other // particle and draws a pulsing line. As the wanderer drifts (it's // faster than ambients), the nearest target changes, so the tether // re-forms. That re-formation is the "separate getting connected" // motion. Drawn before the nodes so glow sits on top. var REACH = 320; var REACH_SQ = REACH * REACH; ctx.lineWidth = 1.6; for (var wi = 0; wi < particles.length; wi++) { var wp = particles[wi]; if (!wp.wd) continue; var nearest = -1; var bestSq = REACH_SQ; for (var pj = 0; pj < particles.length; pj++) { if (pj === wi) continue; var ppx = particles[pj]; var ddx = ppx.x - wp.x; var ddy = ppx.y - wp.y; var dd = ddx * ddx + ddy * ddy; if (dd < bestSq) { bestSq = dd; nearest = pj; } } if (nearest >= 0) { var tgt = particles[nearest]; var d = Math.sqrt(bestSq); var pulse = 0.55 + 0.45 * Math.sin(t / 550 + wp.ph); var ta = (1 - d / REACH) * (0.12 + 0.12 * pulse); ctx.strokeStyle = wp.g ? 'rgba(243,115,56,' + Math.min(0.26, ta) + ')' : 'rgba(20,20,19,' + Math.min(0.18, ta) + ')'; ctx.beginPath(); ctx.moveTo(wp.x, wp.y); ctx.lineTo(tgt.x, tgt.y); ctx.stroke(); } } // Glowing nodes on top — wanderers get a bigger, pulsing glow for (var k = 0; k < particles.length; k++) { var nn = particles[k]; if (nn.wd) { var nPulse = 0.75 + 0.25 * Math.sin(t / 550 + nn.ph); ctx.globalAlpha = nn.g ? 0.5 : 0.32; ctx.beginPath(); ctx.arc(nn.x, nn.y, nn.r * nPulse, 0, Math.PI * 2); ctx.fillStyle = nn.c; ctx.fill(); } else { ctx.globalAlpha = nn.g ? 0.4 : 0.22; ctx.beginPath(); ctx.arc(nn.x, nn.y, nn.r, 0, Math.PI * 2); ctx.fillStyle = nn.c; ctx.fill(); } } ctx.globalAlpha = 1; // No scanline, no dark vignette — the Mastercard canvas stays clean, // warm cream; the faint ink/orange constellation is the only ambient. } if (!reducedMotion) requestAnimationFrame(tick); } resize(); window.addEventListener('resize', resize); requestAnimationFrame(tick); // If the user toggles prefers-reduced-motion at runtime, pick up the new // value on the next frame. Falling back to addListener for older Safari. if (mqReduced) { var onMqChange = function (e) { var wasReduced = reducedMotion; reducedMotion = !!e.matches; if (wasReduced && !reducedMotion) requestAnimationFrame(tick); }; if (mqReduced.addEventListener) mqReduced.addEventListener('change', onMqChange); else if (mqReduced.addListener) mqReduced.addListener(onMqChange); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); } })();

Sign In