Alert on how quickly the error budget is being spent.
<div class="demo"><div class="title">MULTI-WINDOW BURN</div><div class="scene"><div class="burn-lines"><div>5 min <i></i><b id="short">2×</b></div><div>1 hour <i></i><b id="long">1×</b></div></div><div class="burn-status" id="burn-status">within budget</div></div></div>.demo{width:min(94vw,690px);height:min(88vh,320px);box-sizing:border-box;padding:clamp(9px,2.5vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);font:600 clamp(12px,2.4vmin,16px)/1.25 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);overflow:hidden}.title{color:var(--accent);font:700 clamp(12px,2.4vmin,16px)/1.2 var(--font-sans,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:.04em}.scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.scene{flex-direction:column;gap:8px}.burn-lines{width:95%;display:grid;gap:10px}.burn-lines div{display:flex;align-items:center;gap:7px;white-space:nowrap;font:600 clamp(12px,2.4vmin,15px)/1.1 ui-monospace,monospace}.burn-lines i{height:11px;width:28%;border-radius:6px;background:var(--accent);transition:width .4s,background .4s}.burn-lines b{min-width:22px}.burn-status{padding:5px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:clamp(12px,2.4vmin,15px)}.scene.alert .burn-lines i{background:var(--accent-3)}.scene.alert .burn-status{border-color:var(--accent-3);color:var(--accent-3)}let n=0;function draw(){const alert=n%3===2;document.querySelector(".scene").classList.toggle("alert",alert);document.querySelectorAll(".burn-lines i").forEach((bar,i)=>bar.style.width=(alert?i?78:92:i?32:55)+"%");document.getElementById("short").textContent=alert?"14×":"2×";document.getElementById("long").textContent=alert?"7×":"1×";document.getElementById("burn-status").textContent=alert?"ALERT · both windows high":"within budget";n++}draw();setInterval(draw,800)Burn rate compares the current failure rate with the failure rate allowed by an SLO. Combining a short and long window catches fast incidents while reducing transient noise.
The demo alerts only when both windows cross the threshold. Tune windows and thresholds to the SLO period and response target; alerting on a single brief error count can be noisy.
Use it to detect incidents that spend an SLO error budget unusually fast.