Crosshair

조준점 (크로스헤어)

The center-screen mark that reveals firing accuracy in real time — spreading while moving or firing, tightening at rest.

Also known as: 조준선Reticle조준 UI
···
html
<div class="chstage"><div class="chgrid"></div><div class="chwrap" id="chwrap"><div class="chline up" id="cu"></div><div class="chline down" id="cd"></div><div class="chline left" id="cl"></div><div class="chline right" id="cr"></div><div class="chdot"></div></div><div class="chstate" id="chstate">IDLE</div></div>
css
.chstage{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg)}
.chgrid{position:absolute;inset:-10%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;opacity:.4}
.chwrap{position:absolute;left:50%;top:44%;width:0;height:0}
.chline{position:absolute;background:var(--fg);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 70%,transparent)}
.chline.up,.chline.down{width:2px;height:10px;left:-1px}
.chline.left,.chline.right{height:2px;width:10px;top:-1px}
.chline.up{top:calc(-1 * var(--gap,8px) - 10px)}
.chline.down{top:calc(var(--gap,8px))}
.chline.left{left:calc(-1 * var(--gap,8px) - 10px)}
.chline.right{left:calc(var(--gap,8px))}
.chdot{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;border-radius:50%;background:var(--accent-2)}
.chstate{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);font:700 clamp(8px,2.4vmin,10px) monospace;color:var(--muted);letter-spacing:.1em}
js
const wrap=document.getElementById('chwrap');
const state=document.getElementById('chstate');
function setGap(px){ wrap.style.setProperty('--gap', px+'px'); }
function anim(from,to,ms,label){
  return new Promise(function(res){
    state.textContent=label;
    const start=performance.now();
    function step(now){
      const p=Math.min(1,(now-start)/ms);
      setGap(from+(to-from)*p);
      if(p<1) requestAnimationFrame(step); else res();
    }
    requestAnimationFrame(step);
  });
}
async function seq(){
  await anim(8,8,300,'IDLE');
  await anim(8,26,500,'MOVING');
  await anim(26,26,400,'MOVING');
  await anim(26,44,90,'FIRE');
  await anim(44,26,350,'RECOVER');
  await anim(26,8,600,'IDLE');
  setTimeout(seq, 400);
}
seq();

A dynamic crosshair is usually four (or more) short line segments spaced radially from the center. That gap — the spread — is a direct visual read of how far shots will actually scatter; no need to check a numeric accuracy stat, the gap itself tells you how much a shot right now would miss by.

Spread needs to respond instantly to state: it opens while moving, tightens gradually at rest, and snaps wide on each shot before recovering. Many shooters hide the crosshair entirely while aiming down sights, letting the scope itself take over that role.

It's a tiny element at the exact center of the screen, but in a shooter it's where the eye rests dozens of times a second. Low contrast against the background — a thin white line over a bright scene — can make it vanish for a moment, which is why a darker outline layered behind the lines is common.

When to use

First- or third-person games with aim-based shooting. Unnecessary in genres without an aiming concept.