화면 흔들림 (스크린 셰이크)

<div class="ssouter"><div class="ssworld" id="world"><div class="ssgrid"></div><div class="sshero"></div><div class="sstarget" id="tgt"></div></div><div class="ssflash" id="flash"></div></div>

.ssouter{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);box-shadow:inset 0 0 clamp(20px,8vmin,60px) color-mix(in srgb,var(--fg) 12%,transparent)}
.ssworld{position:absolute;inset:-8%;display:grid;place-items:center}
.ssgrid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:13% 13%;opacity:.6}
.sshero{position:absolute;left:34%;top:50%;width:clamp(24px,13vmin,44px);height:clamp(24px,13vmin,44px);margin-top:-22px;border-radius:7px;background:var(--accent);box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.sstarget{position:absolute;left:62%;top:50%;width:clamp(30px,16vmin,54px);height:clamp(30px,16vmin,54px);margin-top:-27px;border-radius:8px;background:var(--surface);border:3px solid var(--line)}
.ssflash{position:absolute;inset:0;background:var(--fg);opacity:0;pointer-events:none}

const world=document.getElementById('world');
const tgt=document.getElementById('tgt');
const flash=document.getElementById('flash');
let trauma=0, t=0;
function loop(){
  t+=1;
  if(trauma>0) trauma=Math.max(0, trauma-0.045);
  const s=trauma*trauma;
  const ox=(Math.sin(t*1.7)+Math.sin(t*3.1+1))*10*s;
  const oy=(Math.sin(t*2.3+2)+Math.sin(t*4.1))*7*s;
  const rot=(Math.sin(t*2.7))*6*s;
  world.style.transform='translate('+ox+'px,'+oy+'px) rotate('+rot+'deg)';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
function hit(){
  trauma=1;
  flash.style.transition='none'; flash.style.opacity='0.5';
  requestAnimationFrame(function(){ flash.style.transition='opacity .3s ease-out'; flash.style.opacity='0'; });
  tgt.style.transition='transform .08s ease-out';
  tgt.style.transform='translateX(10px) scale(0.9)';
  setTimeout(function(){ tgt.style.transform='translateX(0) scale(1)'; }, 100);
}
setInterval(hit, 1300);
setTimeout(hit, 500);