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:

const steps = [
  { id: "brief", number: "01", title: "Set the direction", body: "..." },
  { id: "build", number: "02", title: "Make the system", body: "..." },
  { id: "ship", number: "03", title: "Release and learn", body: "..." }
];

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