<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Agentic Flow</title> <meta name="description" content="An AI agent core that orchestrates its tools — hover a module to trace its link, click to run a task through the core." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" /> <style> *{margin:0;padding:0;box-sizing:border-box} /* dark (default) */ :root{ --bg:#0a0a0d; --dot:rgba(255,255,255,.10); --tile:#141419; --tile-line:#26262e; --ink:#e9e9ee; --muted:#7a7a86; --accent:#7c9cff; --accent-soft:rgba(124,156,255,.16); --line:rgba(255,255,255,.13); --ok:#4ecb8d; --spot:rgba(124,156,255,.10); --core-1:#191922; --core-2:#0c0c11; --core-ring:rgba(255,255,255,.06); --track:rgba(255,255,255,.08); } /* light */ body.light{ --bg:#f4f5f8; --dot:rgba(20,22,40,.11); --tile:#ffffff; --tile-line:#e6e6ee; --ink:#17171d; --muted:#8a8a97; --accent:#4f63d2; --accent-soft:rgba(79,99,210,.14); --line:rgba(20,24,60,.16); --ok:#1f9d5b; --spot:rgba(79,99,210,.08); --core-1:#ffffff; --core-2:#eef0f5; --core-ring:rgba(20,22,50,.08); --track:rgba(20,22,50,.10); } html,body{height:100%} body{ background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; display:flex; align-items:center; justify-content:center; min-height:100vh; overflow:hidden; position:relative; } .mono{font-family:'Geist Mono',ui-monospace,monospace} /* dotted grid + pointer spotlight */ .grid{position:absolute; inset:0; background-image:radial-gradient(var(--dot) 1px, transparent 1px); background-size:24px 24px; background-position:center; -webkit-mask-image:radial-gradient(circle at center, #000 55%, transparent 100%); mask-image:radial-gradient(circle at center, #000 55%, transparent 100%);} .spot{position:absolute; inset:0; pointer-events:none; transition:background .2s ease; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 70%);} /* theme toggle */ .theme{position:fixed; top:16px; right:16px; z-index:6; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--muted); background:var(--tile); border:1px solid var(--tile-line); transition:color .2s, transform .15s, border-color .2s} .theme:hover{color:var(--ink); border-color:var(--accent)} .theme:active{transform:scale(.9)} .theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .stage{position:relative; width:min(82vmin,440px); aspect-ratio:1; z-index:2} svg.wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible} .wire{stroke:var(--line); stroke-width:.4; fill:none; stroke-dasharray:2 3; animation:flow 3.2s linear infinite; opacity:0; transition:opacity .4s ease;} .stage.open .wire{opacity:1; transition-delay:calc(var(--i) * 55ms)} .wire.hot{stroke:var(--accent); stroke-width:.7; filter:drop-shadow(0 0 3px var(--accent)); stroke-dasharray:none} @keyframes flow{to{stroke-dashoffset:-20}} /* nodes */ .node{position:absolute; transform:translate(-50%,-50%); z-index:3} /* satellites stay collapsed behind the core until it's hovered */ .node.sat{opacity:0; pointer-events:none; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.35); transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);} .stage.open .node.sat{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); transition-delay:calc(var(--i) * 55ms);} .mod{ width:clamp(58px,14cqi,78px); aspect-ratio:1; border-radius:16px; background:var(--tile); border:1px solid var(--tile-line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--muted); cursor:pointer; font:inherit; position:relative; transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, color .22s, box-shadow .22s; } .mod:hover,.mod:focus-visible{transform:translateY(-5px); border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 12px 34px -12px rgba(124,156,255,.6), 0 0 0 4px var(--accent-soft); outline:none} .mod:active{transform:translateY(-2px) scale(.97)} .mod.run{border-color:var(--accent); background:var(--accent); color:#fff; animation:jolt .4s ease} .mod svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; transition:transform .3s cubic-bezier(.22,1,.36,1)} .mod:hover svg,.mod:focus-visible svg{transform:translateY(-1px) scale(1.12)} .mod .lbl{font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; max-width:100%; overflow:hidden; text-overflow:ellipsis; transition:letter-spacing .3s ease} .mod:hover .lbl{letter-spacing:.12em} /* per-module icon signature on hover */ .mod[data-k="prompt"]:hover svg{animation:nudge 1.4s ease-in-out infinite} .mod[data-k="vision"]:hover svg{animation:blink2 1.6s ease-in-out infinite} .mod[data-k="output"]:hover svg{animation:blink2 1.8s ease-in-out infinite} .mod[data-k="terminal"]:hover svg{animation:nudge 1s steps(2) infinite} @keyframes nudge{0%,100%{transform:translateY(-1px) scale(1.12)}50%{transform:translateY(-3px) scale(1.12)}} @keyframes blink2{0%,92%,100%{opacity:1}96%{opacity:.35}} /* completion tick */ .mod .tick{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%; background:var(--ok);display:grid;place-items:center;opacity:0;transform:scale(.4); box-shadow:0 0 0 3px var(--bg)} .mod .tick svg{width:11px;height:11px;stroke:#fff;stroke-width:3} .mod.done .tick{animation:tick .9s cubic-bezier(.22,1,.36,1)} @keyframes tick{15%{opacity:1;transform:scale(1.15)}40%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1)}} @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1}} @keyframes jolt{0%,100%{transform:translateY(-5px)}40%{transform:translateY(-5px) scale(1.08)}} /* core */ .core{width:clamp(92px,24cqi,118px); aspect-ratio:1; border-radius:50%; position:relative; display:grid; place-items:center; cursor:pointer; background:radial-gradient(circle at 50% 35%, var(--core-1), var(--core-2) 70%); box-shadow:inset 0 0 0 1px var(--core-ring), 0 0 60px -12px var(--accent); animation:breathe 4s ease-in-out infinite; transition:transform .3s cubic-bezier(.22,1,.36,1)} .stage.open .core{transform:scale(1.04)} @keyframes breathe{0%,100%{box-shadow:inset 0 0 0 1px var(--core-ring), 0 0 46px -16px var(--accent)} 50%{box-shadow:inset 0 0 0 1px var(--core-ring), 0 0 68px -10px var(--accent)}} /* faint full ring + a bright conic arc that we rotate from JS. Both share the same geometry so they line up perfectly. */ .track2,.spinner{position:absolute; inset:-6px; border-radius:50%; -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));} .track2{background:var(--track)} .spinner{background:conic-gradient(from -35deg, var(--accent) 0deg 70deg, transparent 70deg 360deg); filter:drop-shadow(0 0 4px var(--accent)); will-change:transform;} .core .pulse-ring{position:absolute; inset:0; border-radius:50%; border:1px solid var(--accent); opacity:0} .core.busy .pulse-ring{animation:ripple 1.1s ease-out} @keyframes ripple{from{opacity:.6; transform:scale(1)}to{opacity:0; transform:scale(1.6)}} .core .ct{font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--ink)} .core .cst{font-size:9px;letter-spacing:.1em;color:var(--muted);margin-top:2px;text-transform:uppercase} /* status pill */ .status{position:absolute; left:50%; bottom:-2px; transform:translate(-50%,140%); display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px; background:var(--tile); border:1px solid var(--tile-line); font-size:11.5px; color:var(--muted); white-space:nowrap; z-index:4; opacity:0; transition:opacity .3s ease} .stage.open .status{opacity:1} .status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);transition:background .2s} .status.busy .dot{background:var(--accent);animation:blink 1s steps(2) infinite} .status.done .dot{background:var(--ok)} .status .who{color:var(--ink);font-weight:500} @keyframes blink{50%{opacity:.3}} .pmark{fill:var(--accent);filter:drop-shadow(0 0 3px var(--accent))} @media (prefers-reduced-motion:reduce){ .wire,.arc,.mod,.core,.core.busy .pulse-ring,.mod svg{animation:none!important} .spot{display:none} } </style> </head> <body> <div class="grid"></div> <div class="spot" id="spot"></div> <button class="theme" id="theme" type="button" aria-label="Toggle theme"></button> <div class="stage" id="stage" style="container-type:inline-size"> <svg class="wires" id="wires" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"></svg>  <div class="node" style="left:50%;top:50%"> <div class="core" id="core" tabindex="0" role="button" aria-label="Expand agent modules"> <div class="track2"></div> <div class="spinner" id="spinner"></div> <span class="pulse-ring"></span> <div style="text-align:center"> <div class="ct">CORE</div> <div class="cst mono" id="coreState">idle</div> </div> </div> </div> <div class="status" id="status"> <span class="dot"></span> <span id="statusText">Idle</span> </div> </div> <script> (function(){ var RM = matchMedia('(prefers-reduced-motion: reduce)').matches; // icon paths (stroke) var ICON = { terminal:'<path d="M5 7l4 4-4 4"/><path d="M12 16h7"/>', code:'<path d="M9 7l-5 5 5 5"/><path d="M15 7l5 5-5 5"/>', prompt:'<path d="M4 5h16v10h-9l-4 4v-4H4z"/>', vision:'<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/><circle cx="12" cy="12" r="3"/>', output:'<path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>', file:'<path d="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/>' }; // hexagon layout (x,y in 0..100), plus flavour text for the run state var R = 33; function pt(deg){ var a=deg*Math.PI/180; return [50+R*Math.cos(a), 50+R*Math.sin(a)]; } var MODULES = [ { k:'terminal', label:'Terminal', p:pt(-90), task:'Executing command' }, { k:'prompt', label:'Prompt', p:pt(-30), task:'Thinking' }, { k:'output', label:'Output', p:pt(30), task:'Rendering output' }, { k:'file', label:'File', p:pt(90), task:'Reading files' }, { k:'vision', label:'Vision', p:pt(150), task:'Analyzing image' }, { k:'code', label:'Code', p:pt(210), task:'Compiling' } ]; var stage = document.getElementById('stage'); var wires = document.getElementById('wires'); var core = document.getElementById('core'); var coreState = document.getElementById('coreState'); var status = document.getElementById('status'); var statusText = document.getElementById('statusText'); var SVGNS = 'http://www.w3.org/2000/svg'; // build wires + nodes MODULES.forEach(function(m, i){ var line = document.createElementNS(SVGNS,'line'); line.setAttribute('x1', m.p[0]); line.setAttribute('y1', m.p[1]); line.setAttribute('x2', 50); line.setAttribute('y2', 50); line.setAttribute('class','wire'); line.style.animationDelay = (i*0.15)+'s'; line.style.setProperty('--i', i); m.line = line; wires.appendChild(line); // collapse vector: how far each satellite sits toward the core when hidden var dx = 50 - m.p[0], dy = 50 - m.p[1], len = Math.hypot(dx, dy) || 1, k = 44; var node = document.createElement('div'); node.className = 'node sat'; node.style.left = m.p[0]+'%'; node.style.top = m.p[1]+'%'; node.style.setProperty('--dx', (dx/len*k).toFixed(1)+'px'); node.style.setProperty('--dy', (dy/len*k).toFixed(1)+'px'); node.style.setProperty('--i', i); var btn = document.createElement('button'); btn.className = 'mod'; btn.type='button'; btn.setAttribute('aria-label', m.label); btn.setAttribute('data-k', m.k); btn.innerHTML = '<svg viewBox="0 0 24 24">'+ICON[m.k]+'</svg><span class="lbl">'+m.label+'</span>' + '<span class="tick"><svg viewBox="0 0 24 24" stroke="#fff" fill="none"><path d="M5 12l5 5L20 6"/></svg></span>'; m.btn = btn; node.appendChild(btn); stage.appendChild(node); // conic angle (0deg = top) that points the arc at this module m.conic = Math.atan2(m.p[1]-50, m.p[0]-50) * 180/Math.PI + 90; btn.addEventListener('pointerenter', function(){ hovered=m; if(!busy){ m.line.classList.add('hot'); pulse(m); lockTo(m); } }); btn.addEventListener('pointerleave', function(){ if(hovered===m) hovered=null; m.line.classList.remove('hot'); if(!busy) unlock(); }); btn.addEventListener('focus', function(){ hovered=m; if(!busy){ m.line.classList.add('hot'); lockTo(m); } }); btn.addEventListener('blur', function(){ if(hovered===m) hovered=null; m.line.classList.remove('hot'); if(!busy) unlock(); }); btn.addEventListener('click', function(){ run(m); }); }); var busy = false; function setStatus(cls, text, who){ status.className = 'status' + (cls ? ' '+cls : ''); statusText.innerHTML = who ? (text+' <span class="who">'+who+'</span>') : text; } // send a pulse along the wire from the module to the core function pulse(m){ if (RM) return; var c = document.createElementNS(SVGNS,'circle'); c.setAttribute('r','1.3'); c.setAttribute('class','pmark'); wires.appendChild(c); var start = performance.now(), dur = 560; (function step(now){ var t = Math.min(1,(now-start)/dur); c.setAttribute('cx', m.p[0]+(50-m.p[0])*t); c.setAttribute('cy', m.p[1]+(50-m.p[1])*t); if (t<1) requestAnimationFrame(step); else c.remove(); })(performance.now()); } function run(m){ if (busy) return; busy = true; m.btn.classList.add('run'); m.line.classList.add('hot'); core.classList.add('busy'); coreState.textContent = 'busy'; setStatus('busy', m.task+'…', m.label); pulse(m); spinSpeed = FAST; unlock(); // whirl while processing setTimeout(function(){ core.classList.remove('busy'); m.btn.classList.remove('run'); m.line.classList.remove('hot'); coreState.textContent = 'ready'; setStatus('done', 'Completed', m.label); m.btn.classList.add('done'); setTimeout(function(){ m.btn.classList.remove('done'); }, 900); spinSpeed = NORMAL; if (hovered) lockTo(hovered); else unlock(); // settle on the module or resume idle busy = false; setTimeout(function(){ if(!busy){ coreState.textContent='idle'; setStatus('', 'Idle'); } }, 1600); }, 1150); } // theme toggle var SUN='<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.2"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>'; var MOON='<svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>'; var themeBtn = document.getElementById('theme'); function paintTheme(){ themeBtn.innerHTML = document.body.classList.contains('light') ? MOON : SUN; } themeBtn.addEventListener('click', function(){ document.body.classList.toggle('light'); paintTheme(); }); paintTheme(); // ---- core spinner: a slow idle spin that eases to point at the hovered module ---- var spinner = document.getElementById('spinner'); var NORMAL = 360/6000, FAST = 360/900; // deg per ms (6s idle, ~0.9s when busy) var spinOn = !RM, spinSpeed = NORMAL, ang = 0, hovered = null, last = performance.now(); function applyRot(ease){ spinner.style.transition = ease ? 'transform .5s cubic-bezier(.68,-.55,.27,1.55)' : 'none'; spinner.style.transform = 'rotate(' + ang + 'deg)'; } function lockTo(m){ spinOn = false; var diff = ((m.conic - ang + 540) % 360) - 180; // shortest path from current angle ang += diff; applyRot(!RM); } function unlock(){ if(!RM){ spinOn = true; last = performance.now(); } } function frame(now){ var dt = now - last; last = now; if (spinOn){ ang += spinSpeed * dt; applyRot(false); } requestAnimationFrame(frame); } if (RM) applyRot(false); else requestAnimationFrame(frame); // expand on core hover (mouse) / tap; collapse on leaving the stage / tapping away function open(){ stage.classList.add('open'); } function close(){ if(!busy) stage.classList.remove('open'); } core.addEventListener('pointerenter', open); stage.addEventListener('pointerleave', function(e){ if(e.pointerType==='mouse') close(); }); stage.addEventListener('focusin', open); stage.addEventListener('focusout', function(e){ if(!stage.contains(e.relatedTarget)) close(); }); document.addEventListener('pointerdown', function(e){ if(!stage.contains(e.target)) close(); }); // idle: fire a pulse along a random wire now and then (only while expanded) if (!RM) setInterval(function(){ if(!busy && stage.classList.contains('open')) pulse(MODULES[(Math.random()*MODULES.length)|0]); }, 2200); // pointer spotlight var spot = document.getElementById('spot'); if (!RM) window.addEventListener('pointermove', function(e){ spot.style.setProperty('--mx', e.clientX+'px'); spot.style.setProperty('--my', e.clientY+'px'); }); })(); </script> </body> </html>

Code & assets

Design System