/* global React */
const { useEffect, useRef } = React;
// ===== Hero particle mesh =====
function ParticleMesh({ variant = 'mesh', intensity = 'subtle' }) {
const canvasRef = useRef(null);
const rafRef = useRef(0);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
let w = 0,h = 0,dpr = Math.min(window.devicePixelRatio || 1, 2);
const isDark = () => document.documentElement.getAttribute('data-theme') === 'dark';
let particles = [];
const COUNT = variant === 'topo' ? 0 : variant === 'voronoi' ? 80 : 120;
const LINK_DIST = 140;
function resize() {
const rect = canvas.getBoundingClientRect();
w = rect.width;h = rect.height;
canvas.width = w * dpr;canvas.height = h * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed();
}
function seed() {
particles = [];
for (let i = 0; i < COUNT; i++) {
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.7 + Math.random() * 1.4,
life: Math.random()
});
}
}
let mouse = { x: -9999, y: -9999 };
function onMove(e) {
const r = canvas.getBoundingClientRect();
mouse.x = e.clientX - r.left;mouse.y = e.clientY - r.top;
}
function onLeave() {mouse.x = -9999;mouse.y = -9999;}
function drawMesh() {
const dark = isDark();
const inkRgb = dark ? '244,241,236' : '15,15,14';
const mintRgb = '164,210,197';
ctx.clearRect(0, 0, w, h);
// soft atmospheric orb (mint, very subtle)
const orb = ctx.createRadialGradient(w * 0.3, h * 0.55, 0, w * 0.3, h * 0.55, Math.max(w, h) * 0.55);
orb.addColorStop(0, `rgba(${mintRgb}, ${dark ? 0.10 : 0.18})`);
orb.addColorStop(0.5, `rgba(${mintRgb}, ${dark ? 0.04 : 0.06})`);
orb.addColorStop(1, `rgba(${mintRgb}, 0)`);
ctx.fillStyle = orb;
ctx.fillRect(0, 0, w, h);
const orb2 = ctx.createRadialGradient(w * 0.85, h * 0.2, 0, w * 0.85, h * 0.2, Math.max(w, h) * 0.4);
orb2.addColorStop(0, `rgba(${mintRgb}, ${dark ? 0.06 : 0.10})`);
orb2.addColorStop(1, `rgba(${mintRgb}, 0)`);
ctx.fillStyle = orb2;
ctx.fillRect(0, 0, w, h);
// particles
for (let p of particles) {
p.x += p.vx;p.y += p.vy;
if (p.x < 0 || p.x > w) p.vx *= -1;
if (p.y < 0 || p.y > h) p.vy *= -1;
// mouse repel
const dx = p.x - mouse.x,dy = p.y - mouse.y;
const md = Math.sqrt(dx * dx + dy * dy);
if (md < 120) {
const f = (120 - md) / 120 * 0.5;
p.x += dx / md * f;
p.y += dy / md * f;
}
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${inkRgb}, ${dark ? 0.55 : 0.42})`;
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 d = Math.sqrt(dx * dx + dy * dy);
if (d < LINK_DIST) {
const alpha = (1 - d / LINK_DIST) * (dark ? 0.18 : 0.14);
ctx.strokeStyle = `rgba(${inkRgb}, ${alpha})`;
ctx.lineWidth = 0.6;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
}
}
function drawOrbs() {
const dark = isDark();
const t = performance.now() / 1000;
ctx.clearRect(0, 0, w, h);
const orbs = [
{ hue: '164,210,197', x: 0.3 + Math.sin(t * 0.18) * 0.05, y: 0.5 + Math.cos(t * 0.22) * 0.04, r: 0.55, a: dark ? 0.18 : 0.32 },
{ hue: '26,58,57', x: 0.78 + Math.cos(t * 0.15) * 0.04, y: 0.3 + Math.sin(t * 0.2) * 0.05, r: 0.42, a: dark ? 0.16 : 0.10 },
{ hue: '164,210,197', x: 0.65 + Math.sin(t * 0.12) * 0.03, y: 0.78 + Math.cos(t * 0.18) * 0.03, r: 0.38, a: dark ? 0.10 : 0.18 }];
for (const o of orbs) {
const g = ctx.createRadialGradient(o.x * w, o.y * h, 0, o.x * w, o.y * h, Math.max(w, h) * o.r);
g.addColorStop(0, `rgba(${o.hue}, ${o.a})`);
g.addColorStop(0.5, `rgba(${o.hue}, ${o.a * 0.25})`);
g.addColorStop(1, `rgba(${o.hue}, 0)`);
ctx.fillStyle = g;
ctx.fillRect(0, 0, w, h);
}
}
function drawTopo() {
const dark = isDark();
const inkRgb = dark ? '244,241,236' : '15,15,14';
const mintRgb = '164,210,197';
const t = performance.now() / 1000;
ctx.clearRect(0, 0, w, h);
// mint orb
const orb = ctx.createRadialGradient(w * 0.5, h * 0.5, 0, w * 0.5, h * 0.5, Math.max(w, h) * 0.6);
orb.addColorStop(0, `rgba(${mintRgb}, ${dark ? 0.12 : 0.18})`);
orb.addColorStop(1, `rgba(${mintRgb}, 0)`);
ctx.fillStyle = orb;
ctx.fillRect(0, 0, w, h);
const cx = w * 0.5,cy = h * 0.55;
const rings = 22;
for (let i = 0; i < rings; i++) {
const phase = (t * 0.4 + i * 0.16) % 1;
const radius = phase * Math.max(w, h) * 0.7;
const alpha = (1 - phase) * (dark ? 0.22 : 0.16);
ctx.strokeStyle = `rgba(${inkRgb}, ${alpha})`;
ctx.lineWidth = 0.7;
ctx.beginPath();
ctx.ellipse(cx, cy, radius, radius * 0.35, 0, 0, Math.PI * 2);
ctx.stroke();
}
}
function drawVoronoi() {
const dark = isDark();
const inkRgb = dark ? '244,241,236' : '15,15,14';
const mintRgb = '164,210,197';
const t = performance.now() / 1000;
ctx.clearRect(0, 0, w, h);
// orb
const orb = ctx.createRadialGradient(w * 0.4, h * 0.5, 0, w * 0.4, h * 0.5, Math.max(w, h) * 0.55);
orb.addColorStop(0, `rgba(${mintRgb}, ${dark ? 0.12 : 0.20})`);
orb.addColorStop(1, `rgba(${mintRgb}, 0)`);
ctx.fillStyle = orb;
ctx.fillRect(0, 0, w, h);
// tessellation: triangulate moving particles via simple nearest-pairs
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
p.x += p.vx;p.y += p.vy;
if (p.x < 0 || p.x > w) p.vx *= -1;
if (p.y < 0 || p.y > h) p.vy *= -1;
}
// draw lines from each point to its nearest 3 neighbours
for (let i = 0; i < particles.length; i++) {
const a = particles[i];
const ds = [];
for (let j = 0; j < particles.length; j++) {
if (i === j) continue;
const b = particles[j];
const d = Math.hypot(a.x - b.x, a.y - b.y);
ds.push({ d, b });
}
ds.sort((x, y) => x.d - y.d);
for (let k = 0; k < 3 && k < ds.length; k++) {
const { d, b } = ds[k];
if (d < 220) {
ctx.strokeStyle = `rgba(${inkRgb}, ${(1 - d / 220) * (dark ? 0.20 : 0.16)})`;
ctx.lineWidth = 0.55;
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.stroke();
}
}
ctx.beginPath();
ctx.arc(a.x, a.y, 1.1, 0, Math.PI * 2);
ctx.fillStyle = `rgba(${inkRgb}, ${dark ? 0.55 : 0.4})`;
ctx.fill();
}
}
function loop() {
if (variant === 'orbs') drawOrbs();else
if (variant === 'topo') drawTopo();else
if (variant === 'voronoi') drawVoronoi();else
drawMesh();
rafRef.current = requestAnimationFrame(loop);
}
resize();
window.addEventListener('resize', resize);
canvas.addEventListener('mousemove', onMove);
canvas.addEventListener('mouseleave', onLeave);
loop();
return () => {
cancelAnimationFrame(rafRef.current);
window.removeEventListener('resize', resize);
canvas.removeEventListener('mousemove', onMove);
canvas.removeEventListener('mouseleave', onLeave);
};
}, [variant]);
return ;
}
// ===== Pillar visualizers (small SVG animations) =====
function PillarViz({ kind }) {
// Three pillars: predictive (scatter+regression), sentiment (waveform/heatmap), cyber (lock + lattice)
if (kind === 'predictive') {
return (
);
}
if (kind === 'sentiment') {
return (
);
}
if (kind === 'cyber') {
return (
);
}
return null;
}
// ===== Bento visualizers =====
function BentoNewsViz() {
// News: ticker rows + "feed" lines
return (
);
}
function BentoTalksViz() {
// Talks: long oscilloscope waveform with timecode
return (
);
}
// ===== Founder portraits (generative) =====
function PortraitCode() {
// Janakan M. — code mesh / lattice
return (
);
}
function PortraitGround() {
// Janakan S. — signal waves / topographic lines
return (
);
}
Object.assign(window, { ParticleMesh, PillarViz, BentoNewsViz, BentoTalksViz, PortraitCode, PortraitGround });