触发方式
内容与动效库的用途分类同步，所有分类处于同一层。进入导航区域查看名称，点击直接选中分类，再次点击保持选择。支持触屏点按；方向键和 Home/End 在同一层移动焦点。移开、离焦或 Escape 后平滑收回横线并隐藏文字，保留当前选择。 详情页播放按钮同步演示两侧：普通动效从初态进入终态，再返回初态一次；加载类按循环配置持续播放。暂停保留当前画面，继续时从暂停进度接续。
起点与终点
单层用途分类；横线从收拢态平滑伸出，最大长度 38 px。整体缩放 100%，在初态和展开时一致；横线、间距和标签同步缩放。
时序
演示与收回时长 400 ms，触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0.4, 0, 0.2, 1)。悬停伸展使用固定响应的解析临界阻尼弹簧；时长与曲线用于演示轨道和移开收回。
进入与退出
初态显示各用途分类的短线。进入导航区域后，附近横线按距离伸长并显示名称；点击直接选中分类。移开时平滑收回横线并淡出名称，保留当前选择。完成后保留终态，不自动重复。
重复操作与打断
指针位置、焦点和当前项为临时交互状态，不写入配置。点击直接切换分类；方向键和 Home/End 在同一层移动焦点。横线使用持续时钟跟随指针，换方向时保留当前速度。移开、焦点移出或按 Escape 后保留当前项，标签在原来的位置淡出，横线从当前长度平滑收回；退出始终接续当前画面，不排队。
减少动态效果
遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。
默认配置
这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "mini-sidebar",
"durationMs": 400,
"delayMs": 0,
"easing": [
0.4,
0,
0.2,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [
{
"part": "item0",
"property": "y",
"values": [
-10.5,
-18
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item1",
"property": "y",
"values": [
-3.5,
-6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item2",
"property": "y",
"values": [
3.5,
6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "item3",
"property": "y",
"values": [
10.5,
18
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "width",
"values": [
8,
13.457852349679698
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "opacity",
"values": [
0.2,
0.34554272932479196
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line0",
"property": "scaleY",
"values": [
0.76,
0.8182170917299167
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "width",
"values": [
18,
31.061863099396838
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "opacity",
"values": [
0.96,
0.96
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line1",
"property": "scaleY",
"values": [
0.76,
0.9689898095903494
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "width",
"values": [
8,
38
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "opacity",
"values": [
0.2,
1
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line2",
"property": "scaleY",
"values": [
0.76,
1.08
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "width",
"values": [
8,
27.59279464909526
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "opacity",
"values": [
0.2,
0.7224745239758736
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "line3",
"property": "scaleY",
"values": [
0.76,
0.9689898095903494
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "panel",
"property": "x",
"values": [
-8,
0
],
"times": [
0,
1
],
"start": 0,
"span": 0.8461538461538461
},
{
"part": "panel",
"property": "y",
"values": [
6,
6
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "panel",
"property": "scale",
"values": [
0.96,
1
],
"times": [
0,
1
],
"start": 0,
"span": 0.8461538461538461
},
{
"part": "panel",
"property": "opacity",
"values": [
0,
1
],
"times": [
0,
1
],
"start": 0,
"span": 0.5384615384615384
}
]
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：Ariadne. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。