Event Timeline

Build a vertical timeline of dated events with a rail that draws itself. Structure: a relatively positioned block holding two absolutely positioned rails and an ordered list of rows, each row indented past the rail with a dot, a title and a date. The two rails matter: 1. A full-height track in your hairline token, always there. 2. An accent line on top of it whose height covers only as far as the LAST FINISHED event. The filled length is the status, and it is readable before a single word is. Animate the accent rail with scaleY from 0 to 1, transformOrigin TOP, 500ms on ease [0.22, 1, 0.36, 1]. Use scaleY, never an animated height: height animations trigger layout on every frame and the rows beside them jitter. Sequence: the rail draws first and the first row arrives at about 160ms, then 110ms apart. The line has to exist before things can sit on it. Rows enter 6px from the LEFT, from the rail side, so they look attached to it rather than dropped in beside it. Done and upcoming must look different: filled dots and full-strength ink for what has happened, hollow dots and muted ink for what has not. A timeline where every row looks identical is just a list with dates. Use a real ol, because the sequence is the meaning, and say "upcoming" in TEXT on the unfinished rows rather than carrying that only in colour. Make the whole block replayable (data-demo-trigger) and re-key the rows per run. Under prefers-reduced-motion, render the rail at full length and every row in place with no stagger. Colors as tokens: accent for the filled rail and finished dots, hairline for the track, muted ink for upcoming. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.