05

List stagger

CSS-only: the parent gets one class, each child carries an inline --i. The delay is min(--i × 35ms, 360ms) — a 200-row table must never hide its tail behind arithmetic.

stagger-rise--icap 360ms

Job queue

6 rows · 35ms apart on the 500ms spring

  • job-9182rebuild search index412ms
  • job-9183compact segment store96ms
  • job-9184rotate access tokens33ms
  • job-9185warm edge caches187ms
  • job-9186replay event backlog1240ms
  • job-9187verify snapshot305ms

The cap at work

28 tiles — indexes 11+ all land together at 360ms instead of trailing to a full second

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
min(i × 35ms, 360ms)the tail arrives with the group, not after it

Usage

one keyframe, one class, one inline index

.stagger-rise > * {
  animation: rise-in var(--motion-spring) var(--ease-spring) backwards;
  animation-delay: min(calc(var(--i, 0) * var(--stagger-step, 35ms)), 360ms);
}

<ul className="stagger-rise">
  {rows.map((row, i) => <li key={row.id} style={{ "--i": i }}>…</li>)}
</ul>