// NeuroForge — animation primitives & visualizations
const { useEffect, useRef, useState } = React;
// ============ Hero Forge Background — flowing energy mesh ============
function HeroNetwork() {
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
let raf, dpr = window.devicePixelRatio || 1;
let W = 0, H = 0;
const resize = () => {
const r = canvas.getBoundingClientRect();
W = r.width; H = r.height;
canvas.width = W * dpr; canvas.height = H * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
};
resize();
window.addEventListener('resize', resize);
// Build a triangular mesh of nodes — fixed positions, breathing
const nodes = [];
const COLS = 9, ROWS = 7;
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const xn = col / (COLS - 1);
const yn = row / (ROWS - 1);
// jitter so it doesn't look like a perfect grid
const jx = (Math.sin(col * 12.9898 + row * 78.233) * 43758.5453 % 1) * 0.5 - 0.25;
const jy = (Math.sin(col * 39.346 + row * 11.135) * 23421.631 % 1) * 0.5 - 0.25;
nodes.push({
xn: xn + jx * 0.06,
yn: yn + jy * 0.06,
phase: Math.random() * Math.PI * 2,
freq: 0.8 + Math.random() * 0.6,
});
}
}
// Build edges — connect each node to 2-3 nearest
const edges = [];
for (let i = 0; i < nodes.length; i++) {
const dists = [];
for (let j = 0; j < nodes.length; j++) {
if (i === j) continue;
const dx = nodes[i].xn - nodes[j].xn;
const dy = nodes[i].yn - nodes[j].yn;
dists.push({ j, d: Math.hypot(dx, dy) });
}
dists.sort((a, b) => a.d - b.d);
const conns = 2 + (i % 2);
for (let k = 0; k < conns; k++) {
const j = dists[k].j;
const key = i < j ? `${i}-${j}` : `${j}-${i}`;
if (!edges.find(e => e.key === key)) {
edges.push({ a: i, b: j, key, len: dists[k].d });
}
}
}
// Energy pulses traveling along edges
const pulses = [];
const COLORS = ['#00e0ff', '#a855f7', '#22f0d5', '#ec4899'];
const spawnPulse = () => {
const e = edges[Math.floor(Math.random() * edges.length)];
const dir = Math.random() < 0.5 ? 1 : -1;
pulses.push({
edge: e,
t: dir > 0 ? 0 : 1,
speed: (0.004 + Math.random() * 0.006) * dir,
color: COLORS[Math.floor(Math.random() * COLORS.length)],
life: 1,
});
};
for (let i = 0; i < 14; i++) spawnPulse();
let t0 = performance.now();
const tick = (now) => {
const dt = (now - t0) / 16.67; t0 = now;
ctx.clearRect(0, 0, W, H);
// Compute current node positions (with breathing)
const T = now * 0.001;
const positions = nodes.map(n => {
const breathe = Math.sin(T * n.freq + n.phase) * 4;
return {
x: n.xn * W + breathe,
y: n.yn * H + breathe * 0.6,
};
});
// Draw edges
edges.forEach(e => {
const a = positions[e.a], b = positions[e.b];
const grad = ctx.createLinearGradient(a.x, a.y, b.x, b.y);
grad.addColorStop(0, 'rgba(0,224,255,0.06)');
grad.addColorStop(0.5, 'rgba(168,85,247,0.10)');
grad.addColorStop(1, 'rgba(0,224,255,0.06)');
ctx.strokeStyle = grad;
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
});
// Draw pulses (with trail)
for (let i = pulses.length - 1; i >= 0; i--) {
const p = pulses[i];
p.t += p.speed * dt;
if (p.t > 1 || p.t < 0) {
pulses.splice(i, 1);
continue;
}
const a = positions[p.edge.a], b = positions[p.edge.b];
// trail
for (let k = 0; k < 6; k++) {
const tt = p.t - (k * 0.04 * Math.sign(p.speed));
if (tt < 0 || tt > 1) continue;
const x = a.x + (b.x - a.x) * tt;
const y = a.y + (b.y - a.y) * tt;
const alpha = (1 - k / 6) * 0.7;
ctx.beginPath();
ctx.fillStyle = p.color;
ctx.globalAlpha = alpha;
ctx.shadowColor = p.color;
ctx.shadowBlur = k === 0 ? 14 : 0;
ctx.arc(x, y, k === 0 ? 2.2 : 1.4 - k * 0.15, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
ctx.shadowBlur = 0;
}
// Draw nodes (small, dim — they're just anchors)
positions.forEach((p, i) => {
const breathing = 0.4 + Math.sin(T * nodes[i].freq + nodes[i].phase) * 0.3;
ctx.beginPath();
ctx.fillStyle = `rgba(0,224,255,${0.15 + breathing * 0.15})`;
ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2);
ctx.fill();
});
// Spawn new pulses to maintain count
while (pulses.length < 14 && Math.random() < 0.4) spawnPulse();
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
}, []);
return ;
}
// ============ Animated Counter ============
function Counter({ to, suffix = '', duration = 1800, decimals = 0 }) {
const [val, setVal] = useState(0);
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
let started = false;
const obs = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !started) {
started = true;
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const eased = 1 - Math.pow(1 - t, 3);
setVal(to * eased);
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.5 });
obs.observe(el);
return () => obs.disconnect();
}, [to, duration]);
const formatted = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString();
return {formatted}{suffix};
}
// ============ Reveal on scroll ============
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('in');
});
}, { threshold: 0.12 });
els.forEach(el => obs.observe(el));
return () => obs.disconnect();
});
}
// ============ Card mouse spotlight ============
function useCardSpotlight() {
useEffect(() => {
const handler = (e) => {
const card = e.target.closest('.card');
if (!card) return;
const r = card.getBoundingClientRect();
card.style.setProperty('--mx', `${e.clientX - r.left}px`);
card.style.setProperty('--my', `${e.clientY - r.top}px`);
};
document.addEventListener('mousemove', handler);
return () => document.removeEventListener('mousemove', handler);
});
}
// ============ Brand Mark ============
function BrandMark() {
return (
);
}
// ============ Capability visual: agent graph mini ============
function MiniAgentGraph() {
return (
);
}
// ============ Capability visual: RL chart ============
function MiniRLChart() {
const points = Array.from({length: 40}, (_, i) => {
const x = (i / 39) * 320;
const noise = Math.sin(i * 0.7) * 8;
const y = 120 - (i * 2.4) + noise + (i > 25 ? -8 : 0);
return `${x},${Math.max(20, Math.min(120, y))}`;
}).join(' ');
return (
);
}
// ============ Capability visual: cyber threat scope ============
function MiniCyberScope() {
return (
);
}
// ============ Capability visual: model layers ============
function MiniLLM() {
return (
);
}
// ============ Capability visual: HITL ============
function MiniHITL() {
return (
);
}
// ============ Capability visual: telemetry ============
function MiniTelemetry() {
return (
);
}
window.NF = {
HeroNetwork, Counter, useReveal, useCardSpotlight, BrandMark,
MiniAgentGraph, MiniRLChart, MiniCyberScope, MiniLLM, MiniHITL, MiniTelemetry
};