钩线侧栏：交互规则、默认参数与动效说明

触发方式

点击菜单项确认选择；悬停或 Tab 聚焦另一项仅显示灰色钩线。上下方向键、Home / End 移动焦点，Enter / 空格确认。

起点与终点

组标题「TuneShape」（留空隐藏），共 7 项：Controls / Navigation / Containers / Text / Images / Indicators / Backgrounds。预选「Controls」。最小行高 32px，字号 14px。

时序

钩线跟随基准 360 ms，解析临界阻尼弹簧保留当前位置与速度；灰线显隐响应上限 200 ms。此值控制弹簧响应，不是精确的落稳时刻。

进入与退出

强调色 #fc4c01 的轨道从列表顶部延伸到选中行中心；悬停在选中项下方时灰线接在其后，上方时只显示弯钩，避免重复覆盖。虚线轨道，light 配色。文字换行后重新测量行中心。

重复操作与打断

快速切换从当前位置接续；移开并离焦后灰线淡出，保留选中项。暂停、后台与隐藏预览冻结时钟，继续后接续。播放按钮完成一次往返演示；菜单、标题和外观修改立即更新。点击选择、悬停、焦点和观察倍速不写入 JSON。

减少动态效果

选中项和焦点轨道直接到位，关闭自动往返演示；点击与键盘仍可操作。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "hook-sidebar",
  "durationMs": 360,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "hookSidebar": {
    "label": "TuneShape",
    "items": [
      "Controls",
      "Navigation",
      "Containers",
      "Text",
      "Images",
      "Indicators",
      "Backgrounds"
    ],
    "initialIndex": 0,
    "rowHeight": 32,
    "fontSize": 14,
    "accentColor": "#fc4c01",
    "dashed": true,
    "theme": "light"
  }
}

源码与复用

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

用于自己的项目

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

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