Design Atlas
한국어
◆ Game UI & game feel

Hit-Stop

히트스톱 (타격 정지)

Freezing all motion for a handful of frames right at the moment of impact, to make a hit land with weight.

Also known as: 프레임 프리즈Freeze frame타격 정지역경직
···
html
<div class="hsstage"><div class="hshero" id="hero"></div><div class="hstarget" id="tgt2"><div class="hsburst" id="burst"></div></div></div><div class="hslabel" id="lbl">STRIKING</div>
css
.hsstage{position:relative;width:100%;height:100%}
.hshero{position:absolute;left:22%;top:50%;width:clamp(18px,8vmin,28px);height:clamp(18px,8vmin,28px);margin-top:-14px;border-radius:5px;background:var(--accent)}
.hstarget{position:absolute;left:58%;top:50%;width:clamp(24px,10vmin,38px);height:clamp(24px,10vmin,38px);margin-top:-19px;border-radius:6px;background:var(--surface);border:2px solid var(--line)}
.hsburst{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 70%,transparent), transparent 70%);opacity:0;transform:scale(0.3)}
.hslabel{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);font:700 clamp(9px,2.6vmin,11px) monospace;color:var(--muted);letter-spacing:.1em}
js
const hero=document.getElementById('hero');
const tgt=document.getElementById('tgt2');
const burst=document.getElementById('burst');
const lbl=document.getElementById('lbl');
hero.style.transition='transform .34s cubic-bezier(.5,0,.4,1)';
tgt.style.transition='transform .06s linear';
burst.style.transition='opacity .18s ease-out, transform .18s ease-out';
function swing(){
  lbl.textContent='STRIKING';
  hero.style.transform='translateX(0)';
  requestAnimationFrame(function(){ hero.style.transform='translateX(90px)'; });
  setTimeout(impact, 330);
}
function impact(){
  lbl.textContent='HIT-STOP';
  hero.style.transitionDuration='0s';
  tgt.style.transform='scale(0.82)';
  burst.style.opacity='1'; burst.style.transform='scale(1)';
  setTimeout(function(){
    lbl.textContent='RECOVER';
    tgt.style.transitionDuration='.3s';
    tgt.style.transform='scale(1)';
    burst.style.opacity='0'; burst.style.transform='scale(1.4)';
    hero.style.transitionDuration='.3s';
    hero.style.transform='translateX(40px)';
    setTimeout(function(){
      hero.style.transitionDuration='.34s';
      hero.style.transform='translateX(0)';
      setTimeout(swing, 500);
    }, 320);
  }, 90);
}
setTimeout(swing, 400);

Hit-stop briefly freezes animation and physics updates — usually 30–120ms — the instant a hit connects. It doesn't read as a pause to the eye; it reads as weight, the same intuition as watching two heavy objects lock together for a split second on impact in real life.

Duration scales with the size of the hit: a weak jab gets 30–50ms, barely perceptible, while a finisher or a crit stretches past 100ms so it unmistakably registers. Chaining a screen shake or hit-effect right as the freeze releases builds a stop-then-burst rhythm that reads as real impact.

Freeze too long and the game starts to feel like it's actually stalled, hurting perceived input responsiveness. Buffering player input during the freeze — queuing it and applying the moment the freeze lifts — is the standard fix.

When to use

Action games with instantaneous collisions — melee hits, kills, finisher connects. Not for non-combat screens like dialogue or menus.