(() => { const root = document.querySelector("[data-nn]"); if (!root) return; const canvas = root.querySelector("[data-nn-canvas]"); const ctx = canvas.getContext("2d"); const countEl = root.querySelector("[data-nn-count]"); const linksEl = root.querySelector("[data-nn-links]"); const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const LABELS = ["Idee", "Progetti", "Lisbona", "Ricette", "Blog", "Libri", "Clienti", "Palestra", "Foto", "Musica", "Appunti", "Viaggi", "Citazioni", "Podcast", "Spesa", "Corsi", "Film", "Regali", "Giardino", "Codice"]; const COLORS = ["34, 211, 238", "232, 121, 249", "251, 191, 36"]; const LINK_DISTANCE = 170; const MAX_NODES = 42; let width = 0; let height = 0; let labelIndex = 0; let pointer = { x: -9999, y: -9999 }; const nodes = []; const pulses = []; function resize() { const rect = root.getBoundingClientRect(); const dpr = Math.min(window.devicePixelRatio || 1, 2); width = rect.width; height = rect.height; canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } function addNode(x, y, burst = false) { if (nodes.length >= MAX_NODES) nodes.shift(); const angle = Math.random() * Math.PI * 2; const speed = burst ? 0.9 : 0.25 + Math.random() * 0.25; nodes.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, r: 3.5 + Math.random() * 3.5, color: COLORS[labelIndex % COLORS.length], label: LABELS[labelIndex % LABELS.length], born: performance.now(), }); labelIndex += 1; } function links() { const result = []; for (let i = 0; i < nodes.length; i += 1) { for (let j = i + 1; j < nodes.length; j += 1) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const d = Math.hypot(dx, dy); if (d < LINK_DISTANCE) result.push([nodes[i], nodes[j], 1 - d / LINK_DISTANCE]); } } return result; } function step() { for (const n of nodes) { n.x += n.vx; n.y += n.vy; n.vx *= 0.995; n.vy *= 0.995; if (Math.hypot(n.vx, n.vy) < 0.2) { n.vx += (Math.random() - 0.5) * 0.05; n.vy += (Math.random() - 0.5) * 0.05; } if (n.x < 20 || n.x > width - 20) n.vx *= -1; if (n.y < 20 || n.y > height - 20) n.vy *= -1; n.x = Math.max(20, Math.min(width - 20, n.x)); n.y = Math.max(20, Math.min(height - 20, n.y)); } } function nearestNode() { let best = null; let bestDistance = 60; for (const n of nodes) { const d = Math.hypot(n.x - pointer.x, n.y - pointer.y); if (d < bestDistance) { best = n; bestDistance = d; } } return best; } function draw(now) { ctx.clearRect(0, 0, width, height); const edges = links(); const focus = nearestNode(); for (const [a, b, strength] of edges) { const lit = focus && (a === focus || b === focus); ctx.strokeStyle = `rgba(${lit ? "232, 121, 249" : "34, 211, 238"}, ${lit ? 0.9 : strength * 0.45})`; ctx.lineWidth = lit ? 1.6 : 1; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } if (!reduceMotion && edges.length && Math.random() < 0.06 && pulses.length < 14) { const [a, b] = edges[Math.floor(Math.random() * edges.length)]; pulses.push({ a, b, t: 0 }); } for (let i = pulses.length - 1; i >= 0; i -= 1) { const p = pulses[i]; p.t += 0.02; if (p.t >= 1) { pulses.splice(i, 1); continue; } const x = p.a.x + (p.b.x - p.a.x) * p.t; const y = p.a.y + (p.b.y - p.a.y) * p.t; ctx.fillStyle = "rgba(251, 191, 36, 0.95)"; ctx.shadowColor = "rgba(251, 191, 36, 0.9)"; ctx.shadowBlur = 10; ctx.beginPath(); ctx.arc(x, y, 2.2, 0, Math.PI * 2); ctx.fill(); } for (const n of nodes) { const age = Math.max(0.05, Math.min((now - n.born) / 600, 1)); const isFocus = n === focus; const radius = n.r * age * (isFocus ? 1.8 : 1); ctx.shadowColor = `rgba(${n.color}, 0.9)`; ctx.shadowBlur = isFocus ? 24 : 12; ctx.fillStyle = `rgba(${n.color}, 1)`; ctx.beginPath(); ctx.arc(n.x, n.y, radius, 0, Math.PI * 2); ctx.fill(); if (isFocus || n.r > 5.6) { ctx.shadowBlur = 0; ctx.font = `${isFocus ? 13 : 11}px "JetBrains Mono", ui-monospace, Consolas, monospace`; ctx.fillStyle = isFocus ? "#eef0ff" : "rgba(168, 173, 216, 0.85)"; ctx.fillText(n.label, n.x + radius + 6, n.y + 4); } } ctx.shadowBlur = 0; countEl.textContent = String(nodes.length); linksEl.textContent = String(edges.length); } function frame(now) { if (!reduceMotion) step(); draw(now); requestAnimationFrame(frame); } root.addEventListener("pointermove", (event) => { const rect = root.getBoundingClientRect(); pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top }; }); root.addEventListener("pointerleave", () => { pointer = { x: -9999, y: -9999 }; }); root.addEventListener("click", (event) => { const rect = root.getBoundingClientRect(); addNode(event.clientX - rect.left, event.clientY - rect.top, true); }); resize(); new ResizeObserver(resize).observe(root); for (let i = 0; i < 22; i += 1) { addNode(40 + Math.random() * (width - 80), 40 + Math.random() * (height - 80)); } requestAnimationFrame(frame); })();

Neural Notes