레벨업 연출

<div class="lustage"><div class="lurays" id="rays"></div><div class="luhero"></div><div class="lubanner" id="banner"><div class="lubig">LEVEL UP</div><div class="lusmall" id="lvl">Lv. 7 → Lv. 8</div></div></div>

.lustage{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}
.lurays{position:absolute;width:220%;height:220%;background:conic-gradient(from 0deg, transparent 0 10deg, color-mix(in srgb,var(--accent) 30%,transparent) 12deg, transparent 22deg, transparent 34deg, color-mix(in srgb,var(--accent) 30%,transparent) 36deg, transparent 46deg);opacity:0;transform:scale(0.4) rotate(0deg)}
.luhero{position:absolute;width:clamp(16px,7vmin,26px);height:clamp(16px,7vmin,26px);border-radius:5px;background:var(--accent-3);bottom:16%}
.lubanner{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;transform:scale(0);opacity:0}
.lubig{font:900 clamp(16px,6vmin,28px)/1 inherit;color:var(--accent-2);letter-spacing:.03em;text-shadow:0 2px 10px color-mix(in srgb,var(--accent-2) 45%,transparent)}
.lusmall{font:700 clamp(9px,3vmin,12px) monospace;color:var(--muted)}

const rays=document.getElementById('rays');
const banner=document.getElementById('banner');
function burst(){
  rays.style.transition='none';
  rays.style.opacity='0'; rays.style.transform='scale(0.4) rotate(0deg)';
  banner.style.transition='none';
  banner.style.transform='scale(0)'; banner.style.opacity='0';
  requestAnimationFrame(function(){
    rays.style.transition='opacity .3s ease-out, transform 2.2s linear';
    rays.style.opacity='1'; rays.style.transform='scale(1) rotate(60deg)';
    banner.style.transition='transform .55s cubic-bezier(.2,1.8,.3,1), opacity .3s ease-out';
    banner.style.transform='scale(1)'; banner.style.opacity='1';
  });
  setTimeout(function(){ rays.style.transition='opacity .6s ease-in'; rays.style.opacity='0'; }, 1600);
  setTimeout(function(){ banner.style.transition='opacity .4s ease-in, transform .4s ease-in'; banner.style.opacity='0'; banner.style.transform='scale(0.85)'; }, 1800);
}
burst();
setInterval(burst, 3200);