Back to the library
Escalation acknowledged
Variant: Standard
A status row for a support ticket or incident report that has been sitting unanswered: a small marker pulses on the left while a line of unanswered attempts stacks behind it, then a return signal sweeps back down the track and the marker settles. Reach for it as an ambient 'we've seen this, someone is on it' indicator on a case detail page or an escalation queue. The return sweep runs linear because it is a channel opening, not an object arriving, while the marker's settle uses ease-out so the acknowledgement lands rather than drifts.
statusloopambientescalationindicator
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Escalation acknowledged</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--round: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex
(#d97757 / #b85c3e / #788c5d / #b04a3f). */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3));
--rust: oklch(calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3));
/* Clock — every duration in the document runs off --t. */
--cycle: 5.6s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
/* File-specific: weight axis. */
--_track-w: 2px;
--_mark: 13px;
--_ring-w: 2px;
--_tick-w: 2px;
--_tick-len: 17px;
--_sweep-op: 0.85;
--_pulse-scale: 1.5;
--_lift: 5px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
color: var(--slate);
}
.card {
width: min(400px, 90vw);
background: var(--paper);
border: 1px solid var(--oat);
border-radius: calc(14px * var(--round));
padding: clamp(16px, 5vw, 22px) clamp(16px, 5vw, 24px);
display: grid;
gap: clamp(12px, 3.5vw, 16px);
}
.head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.title {
font-size: clamp(12.5px, 3.4vw, 14px);
font-weight: 600;
letter-spacing: 0.01em;
}
.meta {
font-size: clamp(11px, 3vw, 12px);
color: var(--clay-d);
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
/* ---- the track ---- */
.track {
position: relative;
height: 46px;
}
.rail {
position: absolute;
left: 0;
right: 0;
top: 50%;
height: var(--_track-w);
margin-top: calc(var(--_track-w) / -2);
background: var(--oat);
border-radius: 999px;
overflow: hidden;
}
/* The return signal: a channel opening back toward the marker. Linear —
it is a transmission, not an object with mass. */
.rail::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
var(--clay) 45%,
var(--clay) 55%,
transparent 100%);
opacity: var(--_sweep-op);
transform: translate3d(100%, 0, 0);
animation: sweep-back var(--t) linear infinite;
}
@keyframes sweep-back {
0%, 46% { transform: translate3d(110%, 0, 0); }
74% { transform: translate3d(-110%, 0, 0); }
100% { transform: translate3d(-110%, 0, 0); }
}
/* Unanswered attempts: ticks that accumulate right-to-left, then are cleared
once the return signal passes. */
.ticks {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: clamp(9px, 3vw, 14px);
padding-right: 4px;
}
.tick {
width: var(--_tick-w);
height: var(--_tick-len);
background: var(--rust);
border-radius: 999px;
transform-origin: 50% 50%;
opacity: 0;
transform: scaleY(0.35);
animation: tick-in var(--t) var(--ease-out) infinite;
animation-delay: calc(var(--_i) * 0.16s / var(--speed));
}
.tick:nth-child(1) { --_i: 0; }
.tick:nth-child(2) { --_i: 1; }
.tick:nth-child(3) { --_i: 2; }
.tick:nth-child(4) { --_i: 3; }
@keyframes tick-in {
0% { opacity: 0; transform: scaleY(0.35); }
9% { opacity: 0.9; transform: scaleY(1); }
46% { opacity: 0.9; transform: scaleY(1); }
62% { opacity: 0; transform: scaleY(0.35); }
100% { opacity: 0; transform: scaleY(0.35); }
}
/* The marker: waiting, then acknowledged. */
.mark {
position: absolute;
left: 0;
top: 50%;
width: var(--_mark);
height: var(--_mark);
margin-top: calc(var(--_mark) / -2);
border-radius: 50%;
background: var(--rust);
transform-origin: 50% 50%;
animation: mark-settle var(--t) var(--ease-out) infinite;
}
@keyframes mark-settle {
0%, 70% { transform: translate3d(0, 0, 0) scale(0.94); background: var(--rust); }
80% { transform: translate3d(0, calc(var(--_lift) * -1), 0) scale(1); background: var(--olive); }
92% { transform: translate3d(0, 0, 0) scale(1); background: var(--olive); }
100% { transform: translate3d(0, 0, 0) scale(0.94); background: var(--olive); }
}
/* Unanswered pulse — the signal going out with nobody receiving it. */
.ring {
position: absolute;
left: 0;
top: 50%;
width: var(--_mark);
height: var(--_mark);
margin-top: calc(var(--_mark) / -2);
border-radius: 50%;
border: var(--_ring-w) solid var(--rust);
transform-origin: 50% 50%;
animation: ring-out calc(var(--t) / 2) var(--ease-out) infinite;
}
.ring.b { animation-delay: calc(var(--t) / -4); }
@keyframes ring-out {
0% { opacity: 0.5; transform: scale(0.96); }
55% { opacity: 0; transform: scale(var(--_pulse-scale)); }
100% { opacity: 0; transform: scale(var(--_pulse-scale)); }
}
.foot {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(11px, 3vw, 12.5px);
color: var(--slate);
opacity: 0.6;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--olive);
animation: foot-fade var(--t) var(--ease-in-out) infinite;
}
@keyframes foot-fade {
0%, 70% { opacity: 0.25; }
82% { opacity: 1; }
100% { opacity: 1; }
}
@media (max-width: 380px) {
.card { padding: 14px 15px; gap: 11px; }
.track { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.rail::after,
.tick,
.mark { animation: none; }
.rail::after { opacity: 0; }
.tick { opacity: 0.75; transform: scaleY(1); }
.mark { transform: none; background: var(--rust); }
/* Still breathing: one slow opacity cycle keeps the card alive without travel. */
.ring {
animation: ring-hold calc(var(--t) * 1.6) var(--ease-in-out) infinite;
transform: scale(1.18);
}
.ring.b { animation-delay: calc(var(--t) * -0.8); }
@keyframes ring-hold {
0%, 100% { opacity: 0.18; }
50% { opacity: 0.5; }
}
.dot {
animation: foot-hold calc(var(--t) * 1.6) var(--ease-in-out) infinite;
}
@keyframes foot-hold {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.9; }
}
}
</style>
</head>
<body>
<div class="card">
<div class="head">
<span class="title">Case #4471</span>
<span class="meta">4 unanswered</span>
</div>
<div class="track" aria-hidden="true">
<div class="rail"></div>
<div class="ticks">
<span class="tick"></span>
<span class="tick"></span>
<span class="tick"></span>
<span class="tick"></span>
</div>
<div class="ring"></div>
<div class="ring b"></div>
<div class="mark"></div>
</div>
<div class="foot"><span class="dot"></span>Reply received</div>
</div>
</body>
</html>The variant family
Same idea, one axis moved. Compare them side by side before you commit.