Design Atlas
한국어
◆ Game UI & game feel

Level-Up Burst

레벨업 연출

A bouncy banner that pops in the instant a character levels up, with light rays bursting outward behind it to mark the moment.

Also known as: 레벨업 배너Level-up celebration레벨업 이펙트
···
html
<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>
css
.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)}
js
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);

A level-up is one of the few moments in a game that's unambiguously good news, which earns it more spectacle than almost any other UI event. The banner text typically overshoots slightly past its final size before settling, and behind it, light rays burst outward from the center — a radial conic-gradient or a handful of rotating lines.

This leans on the peak-end rule: what shapes how a session is remembered isn't the average moment but the peaks, so giving players frequent, short, intense peaks like a level-up improves the overall impression of play. That's why level-up moments stay brief (1–2 seconds) without ever toning down the intensity.

In games where leveling happens very often — fast early-game progression — a full-screen celebration every single time gets old fast; scaling it down to a small corner badge as frequency increases is a common adjustment.

When to use

Any RPG with an XP/level system. For stretches where leveling happens very often, pair it with a toned-down compact version.