触发方式

滚动阅读区，圆环和当前章节同步更新；鼠标悬停当前章节胶囊自动展开目录，不移动键盘焦点；移出胶囊和展开菜单区域自动收合，菜单内移动保持展开；点击章节平滑定位并收合。触屏点按或键盘激活胶囊仍可展开并聚焦当前章节。点击外部或 Escape 关闭，方向键与 Home / End 移动焦点，Enter / 空格选择。

起点与终点

初始阅读进度 0%，默认展开 false。文章标题「Attention Is All You Need」，共 4 章，按以下顺序渲染：1.「Introduction」（id introduction），正文「The 2017 paper introduced the Transformer, a model first tested on machine translation. It replaces recurrent and convolutional layers with attention, allowing more of the training computation to run in parallel.」；2.「Self-Attention」（id self-attention），正文「Each token creates a query, a key and a value. The query is compared with keys to assign attention weights. A weighted combination of values gives that token information from relevant parts of the sequence.」；3.「Multi-Head Attention」（id multi-head-attention），正文「Several attention heads work in parallel, learning different relationships between tokens. Their outputs are combined into one representation. Positional encodings add information about token order, which attention alone does not provide.」；4.「The Transformer」（id transformer），正文「An encoder builds representations of the input. A decoder uses those representations and earlier output tokens to predict the next token. A mask hides future output tokens during training. Both stacks also contain feed-forward layers. The paper demonstrated strong translation results with less sequential computation.」。面板可编辑标题、章节名称与正文，添加、删除及重排章节；这些内容随配置保存。

时序

展开与定位响应基准 500 ms，解析弹簧保留当前位置和速度；圆环响应上限 450 ms、层切换上限 240 ms、章节文字交叉淡化上限 220 ms。目录条目按响应时长的 6% 逐项错峰进入。

进入与退出

收合胶囊按当前章节测量宽度，展开为圆角目录，文字与圆点逐项淡入并轻移。章节识别偏移 120px，距底部 24px，字号 14px，强调色 #222222，配色 light。长标题换行并重新测量尺寸。

重复操作与打断

快速选择从当前位置接续。点击定位会保留章节选择，下一次真实滚轮、触屏或滚动按键解除锁定。暂停、后台和隐藏预览冻结动效与程序定位；继续后接续。工具栏演示一次展开、定位和返回。实际阅读位置、开合、焦点和观察倍速不保存到 JSON。

减少动态效果

圆环、开合和章节定位直接到位，关闭自动演示；真实滚动、目录选择与键盘仍可使用。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "scroll-progress",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "scrollProgress": {
    "title": "Attention Is All You Need",
    "sections": [
      {
        "id": "introduction",
        "label": "Introduction",
        "body": "The 2017 paper introduced the Transformer, a model first tested on machine translation. It replaces recurrent and convolutional layers with attention, allowing more of the training computation to run in parallel."
      },
      {
        "id": "self-attention",
        "label": "Self-Attention",
        "body": "Each token creates a query, a key and a value. The query is compared with keys to assign attention weights. A weighted combination of values gives that token information from relevant parts of the sequence."
      },
      {
        "id": "multi-head-attention",
        "label": "Multi-Head Attention",
        "body": "Several attention heads work in parallel, learning different relationships between tokens. Their outputs are combined into one representation. Positional encodings add information about token order, which attention alone does not provide."
      },
      {
        "id": "transformer",
        "label": "The Transformer",
        "body": "An encoder builds representations of the input. A decoder uses those representations and earlier output tokens to predict the next token. A mask hides future output tokens during training. Both stacks also contain feed-forward layers. The paper demonstrated strong translation results with less sequential computation."
      }
    ],
    "initialProgress": 0,
    "initialOpen": false,
    "offset": 120,
    "bottom": 24,
    "fontSize": 14,
    "accentColor": "#222222",
    "theme": "light"
  }
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：原创实现. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。