/* global React */ // Wireframe data cube — sky-blue grid cube aligned to the Ajaia // design system (navy ground, sky-400 lines + nodes). // ──────────────────────────────────────────────────────────────── // Six faces, each subdivided into a 4×4 grid. Lines + node dots are // rendered with a soft glow so the cube reads as a luminous wire // lattice rotating slowly in space. const { useEffect: useEffectCV, useRef: useRefCV } = React; function ParticleCube({ height = 600 }) { const canvasRef = useRefCV(null); const wrapRef = useRefCV(null); const callouts = [ { label: "Role-based labs", pos: "top-left", icon: }, { label: "Governance guardrails", pos: "top-right", icon: }, { label: "Manager reinforcement", pos: "bottom-left", icon: }, { label: "Adoption measurement", pos: "bottom-right", icon: }]; useEffectCV(() => { const canvas = canvasRef.current; const wrap = wrapRef.current; if (!canvas || !wrap) return; const ctx = canvas.getContext("2d"); const DPR = Math.min(window.devicePixelRatio || 1, 2); let W = 0,H = 0; const resize = () => { const r = wrap.getBoundingClientRect(); W = Math.max(320, r.width); H = Math.max(320, r.height); canvas.width = W * DPR; canvas.height = H * DPR; canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); }; resize(); const ro = new ResizeObserver(resize); ro.observe(wrap); // ─── Build the wireframe geometry ──────────────────────────── // The cube has edge length 1, centered on the origin. Each face // is divided into DIV × DIV cells, so each face has (DIV+1)² grid // nodes, and the visible lattice is the union of axis-aligned // lines lying on the six faces. const DIV = 4; const half = 0.5; const step = 1 / DIV; // 1. Vertices — every node on every face, deduplicated by key // 2. Edges — connect adjacent grid nodes along each face const vertexMap = new Map(); // key "x,y,z" → index const vertices = []; const edges = []; // [aIdx, bIdx] const addVertex = (x, y, z) => { const key = `${x.toFixed(4)},${y.toFixed(4)},${z.toFixed(4)}`; if (vertexMap.has(key)) return vertexMap.get(key); vertexMap.set(key, vertices.length); vertices.push([x, y, z]); return vertices.length - 1; }; // Build one face as a 2D grid in face-local (u, v) coordinates, // then map to 3D space via the face's axis spec. const buildFace = (toXYZ) => { // Lay out (DIV+1) × (DIV+1) nodes const grid = []; for (let i = 0; i <= DIV; i++) { const row = []; for (let j = 0; j <= DIV; j++) { const u = -half + i * step; const v = -half + j * step; const [x, y, z] = toXYZ(u, v); row.push(addVertex(x, y, z)); } grid.push(row); } // Horizontal segments for (let i = 0; i <= DIV; i++) { for (let j = 0; j < DIV; j++) { edges.push([grid[i][j], grid[i][j + 1]]); } } // Vertical segments for (let j = 0; j <= DIV; j++) { for (let i = 0; i < DIV; i++) { edges.push([grid[i][j], grid[i + 1][j]]); } } }; // Six faces — front, back, right, left, top, bottom buildFace((u, v) => [u, v, half]); // front (z = +half) buildFace((u, v) => [u, v, -half]); // back (z = -half) buildFace((u, v) => [half, u, v]); // right (x = +half) buildFace((u, v) => [-half, u, v]); // left (x = -half) buildFace((u, v) => [u, half, v]); // top (y = +half) — note: y+ goes "down" in screen space buildFace((u, v) => [u, -half, v]); // bottom (y = -half) // ─── Render loop ───────────────────────────────────────────── const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let rafId; const startTime = performance.now(); const draw = (now) => { const t = (now - startTime) / 1000; // Clear background — the wrapper itself has the radial halo, // so the canvas only needs to wipe transparent. ctx.clearRect(0, 0, W, H); // Camera-space projection params. We use a near-orthographic // projection (very long focal length) so the cube reads as a // PERFECT square-faced cube without perspective foreshortening // skewing the faces during rotation. const cx = W / 2; const cy = H / 2; const scale = Math.min(W, H) * 0.34; const focal = 30; // near-orthographic // Rotation: locked isometric X tilt + smooth continuous Y // rotation. The X tilt is the classic ~35° isometric angle so // the cube always reads as a recognizable 3-face cube no matter // where the Y rotation is. const ry = reduced ? Math.PI / 4 : t * 0.30 + Math.PI / 4; const rx = -0.61; // ~ -35° isometric tilt const cosY = Math.cos(ry),sinY = Math.sin(ry); const cosX = Math.cos(rx),sinX = Math.sin(rx); // Project all vertices once. With a long focal length the // projection is effectively orthographic: face proportions // stay square regardless of rotation angle. const proj = new Array(vertices.length); for (let i = 0; i < vertices.length; i++) { const [x0, y0, z0] = vertices[i]; // Rotate around Y const x1 = x0 * cosY + z0 * sinY; const z1 = -x0 * sinY + z0 * cosY; const y1 = y0; // Rotate around X const y2 = y1 * cosX - z1 * sinX; const z2 = y1 * sinX + z1 * cosX; // Near-orthographic projection — inv stays close to 1 const depth = focal + z2; const inv = focal / depth; proj[i] = { x: cx + x1 * scale * inv, y: cy + y2 * scale * inv, depth, z: z2 }; } // ─── Draw edges ──────────────────────────────────────────── // Two passes for a glow effect: a wide soft underlay first, // then a crisper line on top. Edges further from the camera // are dimmer so the cube has clear front/back hierarchy. const drawEdges = (lineWidth, alphaMul, color) => { for (let i = 0; i < edges.length; i++) { const [aIdx, bIdx] = edges[i]; const a = proj[aIdx],b = proj[bIdx]; const midZ = (a.z + b.z) / 2; // Map depth in [-half-cushion, +half+cushion] to alpha const t01 = Math.max(0, Math.min(1, (midZ + 0.75) / 1.5)); const alpha = (0.30 + 0.70 * t01) * alphaMul; ctx.strokeStyle = color.replace(/A/, alpha.toFixed(3)); ctx.lineWidth = lineWidth; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } }; // Soft outer glow (additive) ctx.globalCompositeOperation = "lighter"; drawEdges(6, 0.10, "rgba(151,194,247,A)"); drawEdges(3.5, 0.18, "rgba(182,212,250,A)"); ctx.globalCompositeOperation = "source-over"; // Crisp line drawEdges(1.3, 1.0, "rgba(151,194,247,A)"); // ─── Draw nodes at intersections ────────────────────────── ctx.globalCompositeOperation = "lighter"; for (let i = 0; i < proj.length; i++) { const p = proj[i]; const t01 = Math.max(0, Math.min(1, (p.z + 0.75) / 1.5)); const alpha = 0.30 + 0.70 * t01; const r = 2.2 + 1.6 * t01; // Halo ctx.fillStyle = `rgba(151,194,247,${alpha * 0.30})`; ctx.beginPath(); ctx.arc(p.x, p.y, r * 2.4, 0, Math.PI * 2); ctx.fill(); // Core ctx.fillStyle = `rgba(220,233,255,${alpha})`; ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); ctx.fill(); } ctx.globalCompositeOperation = "source-over"; if (!reduced) rafId = requestAnimationFrame(draw); }; rafId = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafId); ro.disconnect(); }; }, []); return (