{showByline && (
By Elevaite Labs
)}
{showByline && (
By Elevaite Labs
)}
);
}
/* ── PARTICLE FIELD (full-bleed) ─────────────────────────────────────── */
function ParticleField({ density = 70, color = "#3b82f6", opacity = 0.45, accent = "#C9A227", connect = true, speed = 0.35 }) {
const canvasRef = useRef(null);
const rafRef = useRef(0);
const stateRef = useRef({ pts: [], w: 0, h: 0, dpr: 1 });
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
const s = stateRef.current;
function resize() {
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const rect = canvas.parentElement.getBoundingClientRect();
s.w = rect.width; s.h = rect.height; s.dpr = dpr;
canvas.width = rect.width * dpr; canvas.height = rect.height * dpr;
canvas.style.width = rect.width + "px"; canvas.style.height = rect.height + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
s.pts = Array.from({ length: density }, () => ({
x: Math.random() * s.w,
y: Math.random() * s.h,
vx: (Math.random() - 0.5) * speed,
vy: (Math.random() - 0.5) * speed,
r: Math.random() * 1.6 + 0.6,
gold: Math.random() < 0.12,
}));
}
function tick() {
ctx.clearRect(0, 0, s.w, s.h);
const pts = s.pts;
// connections
if (connect) {
for (let i = 0; i < pts.length; i++) {
for (let j = i + 1; j < pts.length; j++) {
const a = pts[i], b = pts[j];
const dx = a.x - b.x, dy = a.y - b.y;
const d2 = dx * dx + dy * dy;
if (d2 < 110 * 110) {
const alpha = (1 - d2 / (110 * 110)) * 0.35 * opacity;
ctx.strokeStyle = `rgba(59,130,246,${alpha})`;
ctx.lineWidth = 0.7;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
}
}
// points
for (const p of pts) {
p.x += p.vx; p.y += p.vy;
if (p.x < 0 || p.x > s.w) p.vx *= -1;
if (p.y < 0 || p.y > s.h) p.vy *= -1;
ctx.beginPath();
ctx.fillStyle = p.gold ? accent : color;
ctx.globalAlpha = p.gold ? 0.9 : opacity;
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
rafRef.current = requestAnimationFrame(tick);
}
resize();
tick();
const ro = new ResizeObserver(resize);
ro.observe(canvas.parentElement);
return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); };
}, [density, color, accent, opacity, connect, speed]);
return ;
}
/* ── ORBIT VISUAL (used on login page) ────────────────────────────────── */
function OrbitVisual({ size = 520 }) {
const moons = useMemo(() => ([
{ r: 110, dur: 14, offset: 0, color: "#3b82f6", icon: "meta" },
{ r: 110, dur: 14, offset: 0.5, color: "#10b981", icon: "check" },
{ r: 170, dur: 22, offset: 0.15, color: "#8b5cf6", icon: "spark" },
{ r: 170, dur: 22, offset: 0.7, color: "#C9A227", icon: "star" },
{ r: 230, dur: 32, offset: 0, color: "#ef4444", icon: "phone" },
{ r: 230, dur: 32, offset: 0.4, color: "#0ea5e9", icon: "mail" },
{ r: 230, dur: 32, offset: 0.8, color: "#f59e0b", icon: "chat" },
]), []);
function Glyph({ kind }) {
const sw = { strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "#fff" };
if (kind === "meta") return ;
if (kind === "check") return ;
if (kind === "spark") return ;
if (kind === "star") return ;
if (kind === "phone") return ;
if (kind === "mail") return ;
if (kind === "chat") return ;
return null;
}
return (
© 2026 ElevAIte Labs · All rights reserved
); } /* ── Export to window ───────────────────────────────────────────────── */ Object.assign(window, { KredooLogo, ParticleField, OrbitVisual, Counter, LiveTicker, Check, Arrow, Navbar, Footnote, TICKER_EVENTS, });