R to re-roll · Esc to reset

Escalation acknowledged (hairline)

Variant: Hairline

The quietest reading of the escalation status row: 1px rails and ticks, a small marker, a short lift, and a faint return sweep that barely tints the track. Use it inside dense case lists or admin tables where several rows may be animating at once and the standard weight would shout. Every timing value is identical to the standard variant — only stroke widths, travel distance, and opacity ceilings were lowered.

statusloopambientsubtleindicator

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 — hairline</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 — lightest position. */
  --_track-w: 1px;
  --_mark: 9px;
  --_ring-w: 1px;
  --_tick-w: 1px;
  --_tick-len: 12px;
  --_sweep-op: 0.5;
  --_pulse-scale: 1.32;
  --_lift: 3px;
}

* { 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: 500;
  letter-spacing: 0.01em;
}

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

.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;
}

/* Linear: a transmission opening back down the channel, not an object arriving. */
.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); }
}

.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.65; transform: scaleY(1); }
  46%  { opacity: 0.65; 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);
  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.34; 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.5;
}

.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.2; }
  82%     { opacity: 0.85; }
  100%    { opacity: 0.85; }
}

@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.55; 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.14);
  }
  .ring.b { animation-delay: calc(var(--t) * -0.8); }

  @keyframes ring-hold {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.36; }
  }

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

  @keyframes foot-hold {
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 0.75; }
  }
}
</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 (ghost)

Ghost

Escalation acknowledged (heavy)

Heavy