Cursor · 12.10.2026
Inspect Cursor
A focused developer-tool interaction zone where the pointer becomes a small inspection reticle over a code-like target. The target exposes the nearest token and its type, giving cursor movement a practical debugging purpose rather than a decorative trail.
Interactive preview
About this effect
What is Inspect Cursor?
A reusable cursor inspection pattern that identifies the nearest code token inside a small developer-oriented interaction zone.
How it’s built
Pointer coordinates are compared with the center of each token. The closest token receives an emphasis class and its text and type appear in the compact readout; coarse pointers receive the normal cursor instead.
Ideal for
- Inspecting syntax tokens in code documentation
- Developer-tool onboarding hints
- Interactive explanations of configuration snippets
Accessibility
The zone has a visible keyboard focus ring and an accessible label. Cursor decoration is supplementary, while the code remains readable and the status is announced through aria-live. The effect is disabled on coarse pointers.
Performance
The interaction only runs while the pointer is inside the small zone, uses lightweight DOM measurements, and avoids animation loops or external assets.
Source code
Explore, copy and reuse the original HTML, CSS and JavaScript.
<div class="aurora-stage"><div class="component-wrap"><div class="intro"><div><p class="eyebrow">DEVELOPER TOOL / 04</p><h1>Inspect Cursor</h1></div><p class="dek">Move across the expression to identify the nearest token and its role.</p></div><div class="inspect-zone" tabindex="0" aria-label="Code inspection area"><div class="zone-topline"><span>runtime/cache.ts</span><span class="status"><i></i> READY TO INSPECT</span></div><div class="inspect-grid" aria-hidden="true"></div><div class="code-frame"><span class="line-number">08</span><code class="inspect-code"><span class="token keyword" data-type="keyword">const</span> <span class="token variable" data-type="variable">cache</span> <span class="token operator" data-type="operator">=</span> <span class="token function" data-type="function">load</span><span class="token punctuation" data-type="punctuation">(</span><span class="token string" data-type="string">"edge"</span><span class="token punctuation" data-type="punctuation">)</span><span class="token punctuation" data-type="punctuation">;</span></code></div><div class="reticle" aria-hidden="true"></div><div class="inspect-readout"><span class="readout-label">NEAREST TOKEN</span><strong>Move over a token</strong></div></div><div class="footnote"><span>Pointer inspection</span><span>Each token is classified by syntax role</span></div></div></div>:root{--inspect-accent:#d9a55d;--inspect-size:34px;--inspect-grid:.42;--ink:#17232b;--muted:#71808a;--paper:#e9e6df;--panel:#f8f7f3;--line:rgba(23,35,43,.14)}*{box-sizing:border-box}.aurora-stage{width:960px;height:640px;overflow:hidden;background:radial-gradient(circle at 78% 18%,rgba(217,165,93,.18),transparent 28%),linear-gradient(135deg,#e9e6df 0%,#f4f1eb 52%,#e4e8e5 100%);color:var(--ink);font-family:Arial,Helvetica,sans-serif}.component-wrap{width:864px;margin:0 auto;padding-top:72px}.intro{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.eyebrow{margin:0 0 10px;color:#8c6b3d;font-size:10px;font-weight:700;letter-spacing:.18em}.intro h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:42px;line-height:1;font-weight:400;letter-spacing:-.04em}.dek{width:260px;margin:0 4px 2px 0;color:#53616a;font-size:13px;line-height:1.55}.inspect-zone{position:relative;width:100%;height:358px;overflow:hidden;border:1px solid rgba(23,35,43,.18);border-radius:3px;background:var(--panel);box-shadow:0 18px 42px rgba(36,48,53,.1);cursor:none;isolation:isolate}.inspect-zone:focus-visible{outline:2px solid var(--inspect-accent);outline-offset:5px}.zone-topline{position:absolute;z-index:2;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;border-bottom:1px solid var(--line);color:#78858b;font:10px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.status{display:flex;align-items:center;gap:8px;color:#77837e}.status i{display:block;width:6px;height:6px;border-radius:50%;background:#829f87;box-shadow:0 0 0 3px rgba(130,159,135,.14)}.inspect-grid{position:absolute;inset:54px 0 0;opacity:var(--inspect-grid);background-image:linear-gradient(rgba(23,35,43,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(23,35,43,.11) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}.code-frame{position:absolute;left:154px;right:90px;top:50%;display:flex;align-items:center;transform:translateY(-42%)}.line-number{width:38px;color:#a9b0ae;font:11px/1.8 'SFMono-Regular',Consolas,monospace}.inspect-code{color:#2e3c42;font:22px/1.8 'SFMono-Regular',Consolas,monospace;letter-spacing:-.04em;white-space:nowrap}.token{transition:color .18s ease,text-shadow .18s ease,opacity .18s ease}.token.keyword{color:#71649b}.token.variable{color:#267f78}.token.operator,.token.punctuation{color:#879096}.token.function{color:#a26143}.token.string{color:#ad7832}.token.is-nearest{color:#17232b;text-shadow:0 0 0 transparent,0 0 16px rgba(217,165,93,.8)}.reticle{position:absolute;width:var(--inspect-size);height:var(--inspect-size);border:1px solid var(--inspect-accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;box-shadow:0 0 0 6px rgba(217,165,93,.12),0 0 24px rgba(217,165,93,.25);transition:opacity .2s ease}.reticle:before,.reticle:after{content:"";position:absolute;background:var(--inspect-accent)}.reticle:before{width:7px;height:1px;left:50%;top:50%;transform:translateX(-50%)}.reticle:after{height:7px;width:1px;left:50%;top:50%;transform:translateY(-50%)}.inspect-readout{position:absolute;left:25px;right:25px;bottom:22px;display:flex;align-items:baseline;gap:16px;margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:10px;letter-spacing:.16em}.readout-label{color:#9a8b76}.inspect-readout strong{color:var(--ink);font:14px/1.2 Georgia,'Times New Roman',serif;letter-spacing:0;font-weight:400}.footnote{display:flex;justify-content:space-between;padding:13px 2px;color:#879197;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.footnote span:last-child{color:#9a8b76}@media(max-width:700px){.aurora-stage{width:100%;height:640px}.component-wrap{width:calc(100% - 96px)}.intro{display:block}.dek{margin-top:14px;width:auto}.code-frame{left:48px;right:30px}.inspect-code{font-size:clamp(14px,3vw,22px)}}@media(pointer:coarse){.inspect-zone{cursor:default}.reticle{display:none}}@media(prefers-reduced-motion:reduce){.token,.reticle{transition:none}}const zone=document.querySelector('.inspect-zone');const reticle=zone.querySelector('.reticle');const tokens=[...zone.querySelectorAll('.token')];const readout=zone.querySelector('.inspect-readout strong');function resetInspection(){reticle.style.opacity='0';tokens.forEach(token=>token.classList.remove('is-nearest'));readout.textContent='Move over a token'}function inspect(event){const rect=zone.getBoundingClientRect();const x=event.clientX-rect.left;const y=event.clientY-rect.top;reticle.style.left=x+'px';reticle.style.top=y+'px';reticle.style.opacity='1';let nearest=null;let distance=Infinity;tokens.forEach(token=>{const box=token.getBoundingClientRect();const tx=box.left+box.width/2-rect.left;const ty=box.top+box.height/2-rect.top;const d=Math.hypot(x-tx,y-ty);if(d<distance){distance=d;nearest=token}});tokens.forEach(token=>token.classList.toggle('is-nearest',token===nearest&&distance<78));if(nearest&&distance<78){readout.textContent=nearest.textContent.trim()+' · '+nearest.dataset.type.toUpperCase()}else{readout.textContent='Move over a token'}}zone.addEventListener('pointermove',inspect);zone.addEventListener('pointerleave',resetInspection);zone.addEventListener('blur',resetInspection);