// Zeno — shared chrome
const ZenoLogo = ({ size = 26 }) => (
);
const Nav = ({ active }) => {
const links = [
{ href: "index.html", label: "Home", key: "home" },
{ href: "features.html", label: "Features", key: "features" },
{ href: "downloads.html", label: "Download", key: "downloads" },
{ href: "credits.html", label: "Credits", key: "credits" },
];
return (
);
};
// Particle network background — connected dots that react to mouse.
// Reads window.__zenoTweaks for { density, energy, dotColor, lineColor, mouseColor }
const ParticleBG = () => {
const ref = React.useRef(null);
React.useEffect(() => {
const canvas = ref.current; if (!canvas) return;
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
let w = 0, h = 0, raf = 0;
const mouse = { x: -9999, y: -9999, active: false };
let particles = [];
const cfg = () => window.__zenoTweaks || {};
const resize = () => {
w = innerWidth; h = innerHeight;
canvas.width = w * dpr; canvas.height = h * dpr;
canvas.style.width = w + "px"; canvas.style.height = h + "px";
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.scale(dpr, dpr);
const density = (cfg().density ?? 50) / 50; // 0..2
const count = Math.min(180, Math.floor((w * h) / 18000 * density));
particles = Array.from({ length: count }, () => ({
x: Math.random() * w,
y: Math.random() * h,
vx: (Math.random() - 0.5) * 0.35,
vy: (Math.random() - 0.5) * 0.35,
r: 1 + Math.random() * 1.6,
}));
};
// Re-spawn particles when tweaks change
window.__zenoParticleResize = resize;
resize();
addEventListener("resize", resize);
const onMove = (e) => { mouse.x = e.clientX; mouse.y = e.clientY; mouse.active = true; };
const onLeave = () => { mouse.active = false; mouse.x = -9999; mouse.y = -9999; };
addEventListener("mousemove", onMove);
addEventListener("mouseout", onLeave);
const tick = () => {
const c = cfg();
const energy = (c.energy ?? 50) / 50; // 0..2
const linkDist = 130;
const mouseDist = 160;
const dotColor = c.dotColor || "rgba(150, 190, 255, 0.85)";
const lineColor = c.lineColor || "91, 155, 255";
const mouseColor = c.mouseColor || "184, 212, 255";
ctx.clearRect(0, 0, w, h);
// mouse repel + draw
for (const p of particles) {
if (mouse.active) {
const dx = p.x - mouse.x, dy = p.y - mouse.y;
const d2 = dx * dx + dy * dy;
if (d2 < mouseDist * mouseDist && d2 > 0.01) {
const d = Math.sqrt(d2);
const f = (mouseDist - d) / mouseDist * 0.6;
p.vx += (dx / d) * f * 0.4 * energy;
p.vy += (dy / d) * f * 0.4 * energy;
}
}
p.vx *= 0.985; p.vy *= 0.985;
p.x += p.vx * energy; p.y += p.vy * energy;
if (p.x < 0) { p.x = 0; p.vx *= -1; }
if (p.x > w) { p.x = w; p.vx *= -1; }
if (p.y < 0) { p.y = 0; p.vy *= -1; }
if (p.y > h) { p.y = h; p.vy *= -1; }
// base drift
p.vx += (Math.random() - 0.5) * 0.01 * energy;
p.vy += (Math.random() - 0.5) * 0.01 * energy;
ctx.beginPath();
ctx.fillStyle = dotColor;
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fill();
}
// links
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const a = particles[i], b = particles[j];
const dx = a.x - b.x, dy = a.y - b.y;
const d2 = dx * dx + dy * dy;
if (d2 < linkDist * linkDist) {
const d = Math.sqrt(d2);
const alpha = (1 - d / linkDist) * 0.35;
ctx.strokeStyle = `rgba(${lineColor}, ${alpha})`;
ctx.lineWidth = 0.6;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
// mouse links
if (mouse.active) {
const a = particles[i];
const dx = a.x - mouse.x, dy = a.y - mouse.y;
const d2 = dx * dx + dy * dy;
if (d2 < mouseDist * mouseDist) {
const d = Math.sqrt(d2);
const alpha = (1 - d / mouseDist) * 0.5;
ctx.strokeStyle = `rgba(${mouseColor}, ${alpha})`;
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
}
}
raf = requestAnimationFrame(tick);
};
tick();
return () => {
cancelAnimationFrame(raf);
removeEventListener("resize", resize);
removeEventListener("mousemove", onMove);
removeEventListener("mouseout", onLeave);
};
}, []);
return ;
};
// Reveal-on-scroll wrapper
const Reveal = ({ children, delay = 0, as = "div", ...rest }) => {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current; if (!el) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setTimeout(() => el.classList.add("visible"), delay); obs.disconnect(); }
}, { threshold: 0.12 });
obs.observe(el);
return () => obs.disconnect();
}, [delay]);
const Tag = as;
return {children};
};
Object.assign(window, { ZenoLogo, Nav, Footer, ParticleBG, Reveal });
// --- removed legacy code below ---
const _removed = () => {
const starRef = React.useRef(null);
const coreRef = React.useRef(null);
const canvasRef = React.useRef(null);
React.useEffect(() => {
if (!matchMedia("(hover: hover) and (pointer: fine)").matches) return;
const star = starRef.current, core = coreRef.current, canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const resize = () => {
canvas.width = innerWidth * dpr;
canvas.height = innerHeight * dpr;
canvas.style.width = innerWidth + "px";
canvas.style.height = innerHeight + "px";
ctx.scale(dpr, dpr);
};
resize();
window.addEventListener("resize", resize);
let mx = innerWidth / 2, my = innerHeight / 2;
let cx = mx, cy = my;
const particles = [];
const isInteractive = (el) => !!el?.closest?.("a, button, .filter-chip, .feat-item, .person, .nav-icon-btn, input, textarea, [role='button']");
const onMove = (e) => {
mx = e.clientX; my = e.clientY;
const interactive = isInteractive(e.target);
star.classList.toggle("hover", interactive);
core.classList.toggle("hover", interactive);
star.classList.remove("hidden"); core.classList.remove("hidden");
// emit stardust
for (let i = 0; i < 2; i++) {
particles.push({
x: mx + (Math.random() - 0.5) * 6,
y: my + (Math.random() - 0.5) * 6,
vx: (Math.random() - 0.5) * 0.3,
vy: (Math.random() - 0.5) * 0.3 + 0.2,
life: 1,
size: 0.8 + Math.random() * 1.6,
hue: 200 + Math.random() * 40,
});
}
if (particles.length > 220) particles.splice(0, particles.length - 220);
};
const onLeave = () => { star.classList.add("hidden"); core.classList.add("hidden"); };
const onDown = (e) => {
// cosmic ring burst
for (let i = 0; i < 2; i++) {
const burst = document.createElement("div");
burst.className = "click-burst" + (i === 1 ? " b2" : "");
burst.style.left = e.clientX + "px";
burst.style.top = e.clientY + "px";
document.body.appendChild(burst);
setTimeout(() => burst.remove(), 950);
}
// particle explosion
for (let i = 0; i < 18; i++) {
const a = (i / 18) * Math.PI * 2;
const s = 1 + Math.random() * 2.5;
particles.push({
x: e.clientX, y: e.clientY,
vx: Math.cos(a) * s, vy: Math.sin(a) * s,
life: 1, size: 1.2 + Math.random() * 1.5,
hue: 200 + Math.random() * 50,
});
}
};
let raf = 0;
const tick = () => {
cx += (mx - cx) * 0.18;
cy += (my - cy) * 0.18;
star.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%)`;
core.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.x += p.vx; p.y += p.vy;
p.vx *= 0.97; p.vy *= 0.97;
p.life -= 0.018;
if (p.life <= 0) { particles.splice(i, 1); continue; }
const alpha = p.life;
ctx.beginPath();
ctx.fillStyle = `hsla(${p.hue}, 100%, 78%, ${alpha})`;
ctx.shadowBlur = 8;
ctx.shadowColor = `hsla(${p.hue}, 100%, 70%, ${alpha})`;
ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
ctx.fill();
}
ctx.shadowBlur = 0;
raf = requestAnimationFrame(tick);
};
tick();
window.addEventListener("mousemove", onMove);
document.addEventListener("mouseleave", onLeave);
window.addEventListener("mousedown", onDown);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseleave", onLeave);
window.removeEventListener("mousedown", onDown);
window.removeEventListener("resize", resize);
};
}, []);
// Page transition: intercept internal link clicks
React.useEffect(() => {
const onClick = (e) => {
const a = e.target.closest("a");
if (!a) return;
const href = a.getAttribute("href") || "";
if (!href || href.startsWith("#") || a.target === "_blank") return;
// only same-origin internal pages
if (!/^[\w\-\/.]+(\?.*)?$/.test(href) && href !== ".") return;
e.preventDefault();
const curtain = document.createElement("div");
curtain.className = "page-curtain in";
// sprinkle stars
for (let i = 0; i < 24; i++) {
const s = document.createElement("div");
s.className = "page-curtain-star";
s.style.left = Math.random() * 100 + "%";
s.style.top = Math.random() * 100 + "%";
s.style.animationDelay = (Math.random() * 0.4) + "s";
curtain.appendChild(s);
}
document.body.appendChild(curtain);
setTimeout(() => { window.location.href = href; }, 480);
};
document.addEventListener("click", onClick);
return () => document.removeEventListener("click", onClick);
}, []);
return null;
};