Staggered list entrance

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>Staggered list entrance</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. */
        --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)
        );

        --_meta: #87867f;

        /* Clock — every duration in the document runs off --t. The 60ms row
           step divides by the same --speed, so the cascade keeps its shape
           against the loop at any pace. */
        --cycle: 3.4s;
        --t: calc(var(--cycle) / var(--speed));
        --_step: calc(60ms / var(--speed));
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 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);
      }

      .list {
        width: 300px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
      }

      .list li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: calc(10px * var(--round));
        border: 1.5px solid var(--oat);
        background: var(--paper);
        font-size: 14px;
        letter-spacing: -0.01em;
        /* 260ms of travel over 8px — short enough that the last row is on
           screen well inside a third of a second. */
        animation: row-in var(--t) infinite;
        animation-delay: calc(var(--_i) * var(--_step));
      }

      /* 60ms between rows. Under 30ms the cascade disappears; over 80ms the
         list feels like it is being dealt out to you one card at a time. */
      .list li:nth-child(1) {
        --_i: 0;
      }
      .list li:nth-child(2) {
        --_i: 1;
      }
      .list li:nth-child(3) {
        --_i: 2;
      }
      .list li:nth-child(4) {
        --_i: 3;
      }
      .list li:nth-child(5) {
        --_i: 4;
      }

      .list .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--clay);
        flex: none;
      }

      .list .meta {
        margin-left: auto;
        font-size: 12px;
        color: var(--_meta);
        font-variant-numeric: tabular-nums;
      }

      @keyframes row-in {
        0% {
          opacity: 0;
          transform: translateY(8px);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
        }
        8%,
        88% {
          opacity: 1;
          transform: translateY(0);
        }
        /* Exit is faster than entry: the system responding, not the user
           deciding. */
        94%,
        100% {
          opacity: 0;
          transform: translateY(0);
        }
      }

      /* Small stages: the list keeps its 300px ceiling but stops being a fixed
         box, and the rows give back a little padding so five of them clear a
         short viewport. */
      @media (max-width: 380px) {
        .list {
          width: 100%;
          max-width: 300px;
          padding: 0 12px;
        }

        .list li {
          gap: 10px;
          padding: 10px 12px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .list li {
          animation-name: row-fade;
        }

        @keyframes row-fade {
          0% {
            opacity: 0;
          }
          8%,
          88% {
            opacity: 1;
          }
          94%,
          100% {
            opacity: 0;
          }
        }
      }
    </style>
  </head>
  <body>
    <ul class="list">
      <li><span class="dot"></span>Parse the transcript<span class="meta">1.2s</span></li>
      <li><span class="dot"></span>Extract the citations<span class="meta">0.8s</span></li>
      <li><span class="dot"></span>Check each source<span class="meta">3.4s</span></li>
      <li><span class="dot"></span>Draft the summary<span class="meta">2.1s</span></li>
      <li><span class="dot"></span>Review for tone<span class="meta">0.6s</span></li>
    </ul>
  </body>
</html>