Cursore · 12.10.2026
Inspect Cursor
Una zona interattiva ispirata agli strumenti per sviluppatori, dove il puntatore diventa un piccolo reticolo sopra un bersaglio di codice. Il token più vicino mostra nome e tipo, offrendo una funzione di ispezione concreta invece di una scia decorativa.
Anteprima interattiva
Informazioni sull’effetto
Cos’è Inspect Cursor?
Un pattern di cursore riutilizzabile che identifica il token di codice più vicino all’interno di una piccola area tecnica.
Come è costruito
Le coordinate del puntatore vengono confrontate con il centro di ogni token. Il token più vicino riceve un’enfasi visiva e il suo testo, insieme al tipo, appare nella lettura compatta; sui dispositivi touch resta il cursore standard.
Ideale per
- Ispezionare token sintattici nella documentazione tecnica
- Suggerimenti per l’avvio di strumenti destinati agli sviluppatori
- Spiegazioni interattive di brevi frammenti di configurazione
Accessibilità
L’area presenta un anello di focus visibile e un’etichetta accessibile. Il cursore è solo un supporto, mentre il codice resta leggibile e lo stato viene annunciato tramite aria-live. L’effetto si disattiva sui dispositivi touch.
Prestazioni
L’interazione si attiva solo dentro una zona ridotta, usa misurazioni DOM leggere ed evita cicli di animazione o risorse esterne.
Codice sorgente
Esplora, copia e riutilizza HTML, CSS e JavaScript originali.
<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);