Streamlined transit loader

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" />
<meta name="animation-knobs" content="overshoot: ok; speed: 0.7-1.3" />
<title>Streamlined transit loader — spring overshoot</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: 2.6s;
  --t: calc(var(--cycle) / var(--speed));

  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-accent: cubic-bezier(0.34, 1.56, 0.64, 1); /* the run curve under test */

  --_rail-h: 2px;
  --_trail-step: calc(0.06s / var(--speed));
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  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);
  -webkit-font-smoothing: antialiased;
}

.card {
  width: min(420px, 92vw);
  padding: clamp(18px, 5vw, 28px);
  background: var(--paper);
  border: 1px solid var(--oat);
  border-radius: calc(14px * var(--round));
  display: grid;
  gap: clamp(12px, 3.4vw, 18px);
}

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.title {
  font-size: clamp(12px, 3.4vw, 13.5px);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.curve {
  font-size: clamp(10.5px, 3vw, 11.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-d);
}

/* Clipping here is what makes the recoil safe on a narrow frame. */
.track {
  position: relative;
  height: clamp(48px, 15vw, 62px);
  overflow: hidden;
}

.rail {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--_rail-h) / 2);
  height: var(--_rail-h);
  background: var(--oat);
  border-radius: 999px;
}

.runner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
}

.body, .trail {
  position: absolute;
  top: 0;
  left: 0;
  animation: run var(--t) var(--ease-accent) infinite;
}

.body {
  width: clamp(30px, 9vw, 38px);
  height: clamp(14px, 4.2vw, 17px);
  margin-top: calc(clamp(14px, 4.2vw, 17px) / -2);
  background: var(--clay);
  border-radius: 999px;
  clip-path: polygon(0% 24%, 18% 4%, 62% 0%, 100% 50%, 62% 100%, 18% 96%, 0% 76%);
}

.nose {
  position: absolute;
  right: 14%;
  top: 50%;
  width: 22%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--paper);
  opacity: 0.62;
  border-radius: 999px;
}

.trail {
  height: 2px;
  border-radius: 999px;
  background: var(--clay);
}

.trail.a { width: clamp(20px, 6vw, 26px); margin-top: -9px; opacity: 0.42; animation-delay: calc(var(--_trail-step) * -1); }
.trail.b { width: clamp(26px, 8vw, 34px); margin-top: -1px;  opacity: 0.30; animation-delay: calc(var(--_trail-step) * -2); }
.trail.c { width: clamp(16px, 5vw, 22px); margin-top: 7px;   opacity: 0.42; animation-delay: calc(var(--_trail-step) * -3); }

@keyframes run {
  0%   { transform: translateX(-14%); opacity: 0; }
  10%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(102%); opacity: 0; }
}

.foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10.5px, 3vw, 11.5px);
  color: color-mix(in oklab, var(--slate) 58%, var(--ivory));
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olive);
  animation: breathe calc(var(--t) / 2) var(--ease-in-out) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (max-width: 380px) {
  .card { padding: 16px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Springs are the first thing to go; the ongoing state survives as a fade. */
  .body, .trail {
    left: 50%;
    transform: translateX(-50%);
    animation: hold calc(var(--t) * 2) var(--ease-in-out) infinite;
  }
  .trail.a { animation-delay: calc(var(--_trail-step) * -2); }
  .trail.b { animation-delay: calc(var(--_trail-step) * -4); }
  .trail.c { animation-delay: calc(var(--_trail-step) * -6); }
  .dot { animation-duration: var(--t); }

  @keyframes hold {
    0%, 100% { opacity: 0.32; }
    50%      { opacity: 1; }
  }
}
</style>
</head>
<body>
  <div class="card">
    <div class="head">
      <span class="title">Transferring records</span>
      <span class="curve">Overshoot</span>
    </div>

    <div class="track">
      <div class="rail"></div>
      <div class="runner">
        <div class="trail a"></div>
        <div class="trail b"></div>
        <div class="trail c"></div>
        <div class="body"><span class="nose"></span></div>
      </div>
    </div>

    <div class="foot"><span class="dot"></span> Holding the connection open</div>
  </div>
</body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.