Health Bar (Delayed Ghost Bar)

.hbwrap{width:min(86%,320px);display:flex;flex-direction:column;gap:6px} .hplabel{font:700 clamp(9px,2.8vmin,12px) monospace;color:var(--muted);letter-spacing:.08em} .hbar{position:relative;height:clamp(14px,6.5vmin,22px);border-radius:6px;background:color-mix(in srgb,var(--fg) 12%,transparent);border:1px solid var(--line);overflow:hidden} .ghost,.real{position:absolute;inset:0;transform-origin:left} .ghost{background:color-mix(in srgb,var(--accent-2) 42%,var(--bg));transition:transform .6s cubic-bezier(.2,.8,.2,1) .35s} .real{background:var(--accent-2);transition:transform .12s ease-out} .hbnum{align-self:flex-end;font:700 clamp(11px,3.2vmin,13px) monospace;color:var(--fg)}

const real=document.getElementById('real'); const ghost=document.getElementById('ghost'); const num=document.getElementById('hbnum'); function setHp(v){ const hp=Math.max(0,Math.min(1,v)); real.style.transform='scaleX('+hp+')'; ghost.style.transform='scaleX('+hp+')'; num.textContent=Math.round(hp*100); } setHp(1); const seq=[0.68,0.4,0.16,1]; let i=0; function step(){ setHp(seq[i]); const delay = i===seq.length-1 ? 1500 : 1050; i=(i+1)%seq.length; setTimeout(step, delay); } setTimeout(step, 900);

Health bars are usually two stacked layers: a saturated top fill that snaps to the new value instantly, and a lighter ghost fill behind it with a transition-delay, catching up 0.3–0.6s later. The gap between the two while it catches up is a direct read of "how much you just lost."

Skip that delay and even a huge hit just becomes a number changing — no felt impact. The ghost trail staying visible for a beat is what makes a hit register as painful. Healing doesn't need the same treatment; let it snap or follow instantly, since there's no reason to make recovery feel slow.

Color often shifts green → yellow → red as the bar empties, but too many thresholds turn it noisy. Two breakpoints, around 50% and 25%, is usually enough.

When to use

Values that can drop sharply and suddenly — health, boss phase gauges. Skip it for values that change gradually, like XP.