R to re-roll · Esc to reset

Escalation acknowledged (ghost)

Variant: Ghost

The lowest-ink member of the family: the rail is a dotted hairline, the unanswered ticks are short and translucent, and the return sweep is a pale wash rather than a stripe. Reach for it in a sidebar or a background panel where the row must register as alive without competing with the primary content. It keeps the same 5.6s clock and the same ease-out settle, so it can sit beside a heavier sibling in the same view without the two drifting out of phase.

statusloopambientminimalindicator

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 — ghost</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 — least ink. */
  --_track-w: 1px;
  --_mark: 8px;
  --_ring-w: 1px;
  --_tick-w: 1px;
  --_tick-len: 9px;
  --_sweep-op: 0.28;
  --_pulse-scale: 1.22;
  --_lift: 2px;
}

* { 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(12px, 3.3vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.015em;
  opacity: 0.8;
}

.meta {
  font-size: clamp(11px, 3vw, 12px);
  color: var(--clay-d);
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}

.track {
  position: relative;
  height: 44px;
}

/* Dotted rail: the channel is barely drawn at this weight. */
.rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--_track-w);
  margin-top: calc(var(--_track-w) / -2);
  background: repeating-linear-gradient(90deg,
    var(--oat) 0 3px,
    transparent 3px 7px);
  overflow: hidden;
}

/* Linear: a transmission opening back down the channel, not an object arriving. */
.rail::after {
  content: '';
  position: absolute;
  inset: -2px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--clay) 40%,
    var(--clay) 60%,
    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); }
}

.ticks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 2.8vw, 13px);
  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.42; transform: scaleY(1); }
  46%  { opacity: 0.42; transform: scaleY(1); }
  62%  { opacity: 0; transform: scaleY(0.35); }
  100% { opacity: 0; transform: scaleY(0.35); }
}

.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);
  opacity: 0.75;
  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); }
}

.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.22; 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, 12px);
  color: var(--slate);
  opacity: 0.4;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olive);
  animation: foot-fade var(--t) var(--ease-in-out) infinite;
}

@keyframes foot-fade {
  0%, 70% { opacity: 0.18; }
  82%     { opacity: 0.7; }
  100%    { opacity: 0.7; }
}

@media (max-width: 380px) {
  .card { padding: 14px 15px; gap: 11px; }
  .track { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .rail::after,
  .tick,
  .mark { animation: none; }

  .rail::after { opacity: 0; }
  .tick { opacity: 0.36; transform: scaleY(1); }
  .mark { transform: none; background: var(--rust); }

  .ring {
    animation: ring-hold calc(var(--t) * 1.6) var(--ease-in-out) infinite;
    transform: scale(1.1);
  }
  .ring.b { animation-delay: calc(var(--t) * -0.8); }

  @keyframes ring-hold {
    0%, 100% { opacity: 0.09; }
    50%      { opacity: 0.28; }
  }

  .dot {
    animation: foot-hold calc(var(--t) * 1.6) var(--ease-in-out) infinite;
  }

  @keyframes foot-hold {
    0%, 100% { opacity: 0.22; }
    50%      { opacity: 0.62; }
  }
}
</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.

Escalation acknowledged

Standard

Escalation acknowledged (hairline)

Hairline

Escalation acknowledged (heavy)

Heavy