/* ============================================= KINASE ATLAS — MAIN SCRIPT - Animated molecule canvas (hero) - Scroll-reveal observer - Stat counter animation - Kinome tree SVG visualization - Search tag interactions ============================================= */ document.addEventListener('DOMContentLoaded', () => { initMoleculeCanvas(); initScrollReveal(); initStatCounters(); initKinomeTree(); initSearchTags(); }); /* ───────────────────────────────────────────── 1. MOLECULE CANVAS — animated network of nodes representing kinase-substrate interactions ───────────────────────────────────────────── */ function initMoleculeCanvas() { const canvas = document.getElementById('mol-canvas'); if (!canvas) return; const dpr = window.devicePixelRatio || 1; const size = 560; canvas.width = size * dpr; canvas.height = size * dpr; canvas.style.width = size + 'px'; canvas.style.height = size + 'px'; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); const NODE_COUNT = 38; const CENTER = { x: size / 2, y: size / 2 }; // Kinase-themed color palette — darker for light bg const NODE_COLORS = ['#008F7A', '#5B4FCF', '#D4580A', '#2563EB', '#9333EA']; // Build nodes in a rough circular cluster with some randomness const nodes = Array.from({ length: NODE_COUNT }, (_, i) => { const angle = (i / NODE_COUNT) * Math.PI * 2 + Math.random() * 0.8; const radius = 60 + Math.random() * 190; const color = NODE_COLORS[Math.floor(Math.random() * NODE_COLORS.length)]; const size_n = 2.5 + Math.random() * 5; return { x: CENTER.x + Math.cos(angle) * radius, y: CENTER.y + Math.sin(angle) * radius, vx: (Math.random() - 0.5) * 0.25, vy: (Math.random() - 0.5) * 0.25, color, r: size_n, baseR: size_n, pulse: Math.random() * Math.PI * 2, }; }); // A few "hub" nodes for the core kinase cluster const HUBS = [0, 5, 12, 19, 28]; HUBS.forEach(i => { nodes[i].r = 7; nodes[i].baseR = 7; }); // Build edges: connect each node to 2–3 nearby nodes const edges = []; nodes.forEach((n, i) => { const others = nodes .map((m, j) => ({ j, d: Math.hypot(m.x - n.x, m.y - n.y) })) .filter(o => o.j !== i) .sort((a, b) => a.d - b.d) .slice(0, 2 + Math.floor(Math.random() * 2)); others.forEach(o => { if (!edges.find(e => (e.a === i && e.b === o.j) || (e.a === o.j && e.b === i))) { edges.push({ a: i, b: o.j }); } }); }); let frame = 0; function draw() { ctx.clearRect(0, 0, size, size); frame++; // Animate nodes nodes.forEach(n => { n.x += n.vx; n.y += n.vy; n.pulse += 0.025; // Soft boundary bounce if (n.x < 40 || n.x > size - 40) n.vx *= -1; if (n.y < 40 || n.y > size - 40) n.vy *= -1; // Gentle pull toward center n.vx += (CENTER.x - n.x) * 0.00008; n.vy += (CENTER.y - n.y) * 0.00008; }); // Draw edges edges.forEach(e => { const a = nodes[e.a], b = nodes[e.b]; const dist = Math.hypot(a.x - b.x, a.y - b.y); const alpha = Math.max(0, 0.25 - dist / 600); if (alpha < 0.01) return; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.strokeStyle = `rgba(0, 100, 120, ${alpha})`; ctx.lineWidth = 0.8; ctx.stroke(); }); // Draw nodes nodes.forEach(n => { const pulse = n.baseR + Math.sin(n.pulse) * 0.8; // Glow halo const grad = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, pulse * 4); grad.addColorStop(0, n.color + '40'); grad.addColorStop(1, n.color + '00'); ctx.beginPath(); ctx.arc(n.x, n.y, pulse * 4, 0, Math.PI * 2); ctx.fillStyle = grad; ctx.fill(); // Core dot ctx.beginPath(); ctx.arc(n.x, n.y, pulse, 0, Math.PI * 2); ctx.fillStyle = n.color; ctx.fill(); }); requestAnimationFrame(draw); } draw(); } /* ───────────────────────────────────────────── 2. SCROLL REVEAL Adds .revealed class when element enters viewport ───────────────────────────────────────────── */ function initScrollReveal() { const targets = document.querySelectorAll('[data-reveal]'); if (!targets.length) return; const observer = new IntersectionObserver( entries => entries.forEach(entry => { if (entry.isIntersecting) { // Stagger siblings if inside a grid const siblings = entry.target.parentElement.querySelectorAll('[data-reveal]'); const idx = Array.from(siblings).indexOf(entry.target); entry.target.style.transitionDelay = `${idx * 80}ms`; entry.target.classList.add('revealed'); observer.unobserve(entry.target); } }), { threshold: 0.12 } ); targets.forEach(t => observer.observe(t)); } /* ───────────────────────────────────────────── 3. STAT COUNTERS Animate numbers up from 0 when hero is visible ───────────────────────────────────────────── */ function initStatCounters() { const stats = document.querySelectorAll('.stat-num[data-target]'); if (!stats.length) return; const ease = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; const animate = (el, target, duration = 1800) => { const start = performance.now(); const step = now => { const t = Math.min((now - start) / duration, 1); const val = Math.floor(ease(t) * target); el.textContent = val.toLocaleString(); if (t < 1) requestAnimationFrame(step); else el.textContent = target.toLocaleString(); }; requestAnimationFrame(step); }; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { animate(entry.target, parseInt(entry.target.dataset.target, 10)); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); stats.forEach(s => observer.observe(s)); } /* ───────────────────────────────────────────── 4. KINOME TREE SVG VISUALIZATION Draws a schematic dendrogram/tree of the human kinome groups using SVG ───────────────────────────────────────────── */ function initKinomeTree() { const container = document.getElementById('kinomeTree'); if (!container) return; const W = 440, H = 440, CX = W / 2, CY = H / 2; // Kinome groups — angle, radius, color, label, member count const groups = [ { label: 'TK', count: 90, color: '#008F7A', angle: -72 }, { label: 'CMGC', count: 61, color: '#5B4FCF', angle: -36 }, { label: 'AGC', count: 60, color: '#D4580A', angle: 0 }, { label: 'CAMK', count: 74, color: '#2563EB', angle: 36 }, { label: 'STE', count: 47, color: '#9333EA', angle: 72 }, { label: 'CK1', count: 12, color: '#B45309', angle: 108 }, { label: 'TKL', count: 43, color: '#065F46', angle: 144 }, { label: 'RGC', count: 5, color: '#BE185D', angle: 180 }, { label: 'Atyp', count: 83, color: '#475569', angle: -108 }, ]; const toRad = deg => (deg * Math.PI) / 180; const R_INNER = 58; const R_OUTER = 155; let svg = ``; container.innerHTML = svg; } /* ───────────────────────────────────────────── 5. SEARCH TAG INTERACTIONS Clicking a tag fills the search input ───────────────────────────────────────────── */ function initSearchTags() { const input = document.getElementById('kinaseSearch'); const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', () => { if (input) { input.value = tag.textContent; input.focus(); } tags.forEach(t => t.classList.remove('tag--active')); tag.classList.add('tag--active'); }); }); }

Decode thekinome withprecision.

Discover Our Products

Decode the
kinome with
precision.