Scroll-driven timelines

animation-timeline: view() — below-fold marks draw exactly as they're seen, forward and backward, because scroll position IS the playhead. Easing is always linear here: the scroll IS the curve; layering a spring on top would lie about position.

animation-timeline: view()scroll()linear only@supports

Behind @supports (animation-timeline: view()), with the time-based version as fallback — unsupported browsers get a one-shot draw on a soft ease, never a blank mark.

Pipeline marks

scroll up and down — the rules scrub with you

T+00Intakeevents land in the ingest buffer
T+04Validateschema + dedupe against the last 24h window
T+09Enrichgeo, fleet metadata, ownership tags joined in
T+13Routefan-out to storage, alerting and the live board
T+21Settleacked to the source; budget counters updated

Edge-fade affordance

the fades are wired to the scroller's own position — drag the table

node	region	cpu	mem	disk	net-in	net-out	conns	p50	p99	errs	uptime
edge-fra-01	eu-central	42%	61%	38%	1.2G	0.9G	8,412	12ms	88ms	0	41d
edge-iad-04	us-east	58%	72%	51%	2.4G	2.1G	12,930	9ms	74ms	2	17d
edge-sin-02	ap-south	31%	48%	22%	0.8G	0.7G	5,204	18ms	120ms	0	63d

How it's wired

timeline-scope hoists the scroller's timeline to the wrapper's overlays

.scroll-draw {
  transform-origin: left;
  animation: draw-x 1ms linear both;     /* duration is ignored —          */
  animation-timeline: view();            /* the viewport IS the clock      */
  animation-range: entry 15% cover 45%;
}

.edge-fade            { timeline-scope: --edge-x; }         /* wrapper     */
.edge-fade-scroller   { scroll-timeline: --edge-x x; }      /* names it    */
.edge-fade::after     { animation: fade-opacity-out 1ms linear both;
                        animation-timeline: --edge-x;       /* reads it    */
                        animation-range: 92% 100%; }