// primer-components.jsx — Nav, Hero (animated demo), DashboardMockup const { useState, useEffect, useRef } = React; // ── tiny icon set ────────────────────────────────────────────────────────── const Ico = { pin: () => , arrow: () => , up: () => , check: () => , plus: () => , minus: () => , loader: () => , folder: () => , sliders: () => , file: () => , mic: () => , hammer: () => , building: () => , ext: () => , search: () => , x: () => , layers: () => }; // ── platform links (config.js → PrimerLinks) ─────────────────────────────── function platformLoginUrl() { return (window.PrimerLinks && window.PrimerLinks.login()) || "#"; } function platformTrialUrl(medium) { return (window.PrimerLinks && window.PrimerLinks.trial(medium)) || "#"; } function platformSearchUrl(address) { return (window.PrimerLinks && window.PrimerLinks.search(address)) || "#"; } function goToPlatformSearch(address) { const url = platformSearchUrl(address); if (url !== "#") window.location.assign(url); } // ── Interactive dot field (Higgs-style proximity) ────────────────────────── // Replaces the static CSS .bg-dots pattern: dots ease larger/darker near the // cursor and ease back down as it leaves. After the hero/dashboard, interaction // is muted over the center content column (.p-dot-mute-zone) so text stays clear. function InteractiveDotField() { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d", { alpha: true }); if (!ctx) return; const SPACING = 20; const BASE_RADIUS = 1; const MAX_RADIUS = 5.2; const INFLUENCE = 140; const BASE_ALPHA = 0.07; const MAX_ALPHA = 1; const GROW_SPEED = 0.22; const SHRINK_SPEED = 0.08; const MOUSE_FOLLOW = 0.18; // How strong the effect stays inside the text column (0 = off, 1 = full) const MUTE_FLOOR = 0.08; const EDGE_FADE = 72; const pointer = { x: -9999, y: -9999, active: false }; const mouse = { x: -9999, y: -9999 }; // Sparse per-cell intensity keyed by "col,row" in document space const intensity = new Map(); // Viewport-space mute rect for the content column below the dashboard const mute = { top: Infinity, bottom: -Infinity, left: 0, right: 0, ready: false }; let width = 0; let height = 0; let dpr = 1; let rafId = 0; let running = false; function cellKey(col, row) { return `${col},${row}`; } function updateMuteBounds() { const zone = document.querySelector(".p-dot-mute-zone"); if (!zone) { mute.ready = false; return; } const zoneRect = zone.getBoundingClientRect(); const column = zone.querySelector(".p-container") || zone; const colRect = column.getBoundingClientRect(); mute.top = zoneRect.top; mute.bottom = zoneRect.bottom; mute.left = colRect.left; mute.right = colRect.right; mute.ready = true; } // Soft mask: full strength outside the content column / above the mute zone; // near-zero inside the text column, with a short fade at the edges. function muteFactor(x, y) { if (!mute.ready) return 1; if (y < mute.top - EDGE_FADE || y > mute.bottom + EDGE_FADE) return 1; let vertical = 1; if (y < mute.top) { const t = (mute.top - y) / EDGE_FADE; vertical = MUTE_FLOOR + (1 - MUTE_FLOOR) * t; } else if (y > mute.bottom) { const t = (y - mute.bottom) / EDGE_FADE; vertical = MUTE_FLOOR + (1 - MUTE_FLOOR) * t; } else { vertical = MUTE_FLOOR; } let horizontal = MUTE_FLOOR; if (x < mute.left) { const t = Math.min(1, (mute.left - x) / EDGE_FADE); horizontal = MUTE_FLOOR + (1 - MUTE_FLOOR) * t; } else if (x > mute.right) { const t = Math.min(1, (x - mute.right) / EDGE_FADE); horizontal = MUTE_FLOOR + (1 - MUTE_FLOOR) * t; } // Inside the column use the quieter of the two axes; outside, restore // strength from whichever edge you're past. if (x >= mute.left && x <= mute.right && y >= mute.top && y <= mute.bottom) { return MUTE_FLOOR; } return Math.max(vertical, horizontal); } function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); width = window.innerWidth; height = window.innerHeight; canvas.width = Math.floor(width * dpr); canvas.height = Math.floor(height * dpr); canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); updateMuteBounds(); } function targetAt(x, y) { if (!pointer.active) return 0; const dx = x - mouse.x; const dy = y - mouse.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist >= INFLUENCE) return 0; const u = 1 - dist / INFLUENCE; // Ease-in curve so growth ramps up near the cursor const raw = u * u * u * (u * (u * 6 - 15) + 10); return raw * muteFactor(x, y); } function tick() { rafId = 0; // Smooth mouse chase — trail feels alive as you move if (pointer.active) { mouse.x += (pointer.x - mouse.x) * MOUSE_FOLLOW; mouse.y += (pointer.y - mouse.y) * MOUSE_FOLLOW; } const scrollY = window.scrollY || 0; const startX = SPACING / 2; const startY = SPACING / 2 - (scrollY % SPACING); // Document-space origin of the first on-screen cell const originCol = 0; const originRow = Math.floor(scrollY / SPACING); ctx.clearRect(0, 0, width, height); let anyActive = pointer.active; const seen = new Set(); let row = originRow; for (let y = startY; y < height + SPACING; y += SPACING, row++) { let col = originCol; for (let x = startX; x < width + SPACING; x += SPACING, col++) { const key = cellKey(col, row); seen.add(key); const target = targetAt(x, y); const current = intensity.get(key) || 0; const speed = target > current ? GROW_SPEED : SHRINK_SPEED; const next = current + (target - current) * speed; if (next > 0.002) { intensity.set(key, next); anyActive = true; } else { intensity.delete(key); } const t = next > 0.002 ? next : 0; const radius = BASE_RADIUS + (MAX_RADIUS - BASE_RADIUS) * t; const alpha = BASE_ALPHA + (MAX_ALPHA - BASE_ALPHA) * t; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = `rgba(0,0,0,${alpha})`; ctx.fill(); } } // Drop off-screen cells so the map stays bounded for (const key of intensity.keys()) { if (!seen.has(key)) intensity.delete(key); } // Keep animating while chasing, growing, or shrinking const mouseSettled = !pointer.active || (Math.abs(pointer.x - mouse.x) < 0.15 && Math.abs(pointer.y - mouse.y) < 0.15); if (anyActive || !mouseSettled || intensity.size > 0) { rafId = requestAnimationFrame(tick); } else { running = false; } } function startLoop() { if (running) return; running = true; rafId = requestAnimationFrame(tick); } function onMove(e) { pointer.x = e.clientX; pointer.y = e.clientY; pointer.active = true; if (mouse.x < -9000) { mouse.x = pointer.x; mouse.y = pointer.y; } startLoop(); } function onLeave() { pointer.active = false; startLoop(); } function onScroll() { updateMuteBounds(); startLoop(); } const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const finePointer = window.matchMedia("(pointer: fine)").matches; resize(); // Paint the static base field once; interaction starts the continuous loop startLoop(); function onResize() { resize(); startLoop(); } window.addEventListener("resize", onResize); window.addEventListener("scroll", onScroll, { passive: true }); if (!reduceMotion && finePointer) { window.addEventListener("mousemove", onMove, { passive: true }); document.documentElement.addEventListener("mouseleave", onLeave); } return () => { if (rafId) cancelAnimationFrame(rafId); running = false; window.removeEventListener("resize", onResize); window.removeEventListener("scroll", onScroll); window.removeEventListener("mousemove", onMove); document.documentElement.removeEventListener("mouseleave", onLeave); }; }, []); return (