01 — WHO

左竖排跑马灯 · 顶导航 · 右段轨

占位文案。这一屏用来验证「当前段」是否随滚动与点击切换:整页只有一套 chrome, 左侧是竖排跑马灯,顶部是居中小写导航,右侧是段轨,底部是进度线。

• 视口 1440px 下满屏布景,舞台内部滚动并预留滚动条槽位,不抖。
• 段轨当前条加长并发光,顶导航同段落同步高亮。
• 进度线宽度 = (当前段序号 + 1) / 段数,由脚本写入。

02 — WORKS

占位条目

占位文案。点击顶部 works 或右侧 WORKS,两处当前态应当同时切换, 底部进度线走到第二格。

• 条目一 · 占位
• 条目二 · 占位
• 条目三 · 占位

03 — DEMOS

占位条目

占位文案。滚动到这里时,段轨的 DEMOS 条自动变亮,顶导航的 demos 同步高亮, 进度线走到第三格,不需要点任何东西。

• 示例 A · 占位
• 示例 B · 占位
• 示例 C · 占位

04 — ABOUT

无障碍与键盘

占位文案。每个可点项都有 44px 命中区与 aria-label,当前项写 aria-current="page"; Tab 可达并显示焦点环,段轨用上下键、顶导航用左右键移动焦点; 系统开启「减少动效」时跑马灯停跑、过渡归零。

• Tab / Shift+Tab 在两组导航之间移动
• Enter / Space 跳到该段
• Home / End 到首尾项