Motion Prompt #145｜滚动时间轴 · Timeline on scroll（中文译文）

请使用“Timeline on scroll”（タイムラインアニメーション），它是“Landing page & web effects, part 2”中的一个名称。
Motion Prompt #145

定义：时间轴的线随滚动延长。
示例展示：页面向下滚动时，橙色线沿时间轴向下延伸；到达每个圆点后，圆点填满，年份与事件从右侧滑入。向上滚动则反向还原。
规格：
- 浏览器视口为511×168。滚动在0.3–2.3 s内从0→190 px，在3.0–4.3 s内从190→0，使用三次ease-in-out。单次4.7 s，在9.4 s包循环内播放两次。
- 时间轴位于x = 168，橙色线在宽3的灰色轨道上延伸。线头位于滚动量 + 126 px，因此始终距视口顶部126 px、距底部42 px。
- 五个条目对应2018–2026，圆点位于页面y = 72、126、180、234、288；圆点白色、半径7.5、环宽2.5。
- 线头经过圆点后，再延伸22 px期间以三次ease-out完成：圆环变橙，内部圆点半径0→4，年份（18 px、橙色）和事件（15 px）淡入并从右侧滑动16 px。
- 向上滚动时使用同一公式缩短线并隐藏条目；右侧滚动条滑块跟随滚动量。
何时使用：用于按时间顺序阅读的公司历史、里程碑或分步流程。

参考实现（Canvas 2D，画面仅由时间决定的函数）：https://showheyohtaki.github.io/motion-prompt/api/v1/en/e/145.txt
共享辅助代码：https://showheyohtaki.github.io/motion-prompt/api/v1/kit/lp2.js
请保持参考实现的形状、时间安排和缓动数值不变，只调整文字、颜色和素材，以适配我正在制作的项目。