Scroll Progress Timeline Use one progress line to connect ordered information. The sequence must remain complete, readable, and navigable before animation is added. Model the steps Keep the content data-driven: Render it as an ordered list with real headings. The line, dots, media, and active state enhance that structure; they do not replace it. Build the line 1. Render a quiet base line behind every point. 2. Place one progress line on top with for vertical or for horizontal. 3. Measure the first and last point centers, not arbitrary section edges. 4. Normalize scroll position between those…