触发方式
列表中指针进入预览区域后播放，按配置的循环选项重复，离开即停止；详情中自动播放加载效果；播放期间按钮显示暂停，暂停后保留当前画面，再次播放从暂停处继续。 详情页自动按配置播放完整周期；暂停保持当前画面，继续从同一进度接续，不反向返回。
起点与终点
打字机整体的纵向位移：0 → 0（含 6 个关键帧）；字车的横向位移：14 → 14（含 106 个关键帧）；前层纸张的纵向位移：46 → 46（含 12 个关键帧）；按键 1的纵向位移：0 → 0（含 5 个关键帧）；按键 2的纵向位移：0 → 0（含 5 个关键帧）；按键 3的纵向位移：0 → 0（含 5 个关键帧）；按键 4的纵向位移：0 → 0（含 5 个关键帧）；按键 5的纵向位移：0 → 0；按键 6的纵向位移：0 → 0（含 5 个关键帧）；按键 7的纵向位移：0 → 0（含 5 个关键帧）；按键 8的纵向位移：0 → 0（含 5 个关键帧）；按键 9的纵向位移：0 → 0（含 5 个关键帧）；按键 10的纵向位移：0 → 0（含 5 个关键帧）；按键 11的纵向位移：0 → 0（含 5 个关键帧）；按键 12的纵向位移：0 → 0（含 5 个关键帧）；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。
时序
总时长 3000 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0, 0, 1, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。
进入与退出
按键依次敲击，纸张分段上移；一轮末尾字车回位，纸张复位，机身轻微弹跳。暂停保留所有部件的当前进度，继续时接续同一周期。持续重复完整打字周期。
重复操作与打断
暂停保持当前周期进度，继续接续；修改参数时按新配置从完整周期起点重播，不排队。
减少动态效果
遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。
默认配置
这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "typewriter",
"durationMs": 3000,
"delayMs": 0,
"easing": [
0,
0,
1,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": true,
"interruption": "retarget",
"tracks": [
{
"part": "machine",
"property": "y",
"values": [
0,
0,
-4,
0,
2,
0
],
"times": [
0,
0.85,
0.89,
0.92,
0.95,
1
],
"start": 0,
"span": 1
},
{
"part": "carriage",
"property": "x",
"values": [
14,
14,
13.73639,
13.24163,
12.51635,
11.63805,
10.73192,
9.89348,
9.16164,
8.53968,
8.01717,
7.58077,
7.21798,
6.91817,
6.67253,
6.47388,
6.31633,
6.195,
6.10584,
6.04547,
6.011,
6,
6,
5.80229,
5.43122,
4.88726,
4.22853,
3.54894,
2.92011,
2.37123,
1.90476,
1.51288,
1.18558,
0.91349,
0.68862,
0.5044,
0.35541,
0.23725,
0.14625,
0.07938,
0.0341,
0.00825,
0,
0,
-0.13181,
-0.37919,
-0.74183,
-1.18098,
-1.63404,
-2.05326,
-2.41918,
-2.73016,
-2.99141,
-3.20961,
-3.39101,
-3.54092,
-3.66374,
-3.76306,
-3.84184,
-3.9025,
-3.94708,
-3.97727,
-3.9945,
-4,
-4,
-4.26361,
-4.75837,
-5.48365,
-6.36195,
-7.26808,
-8.10652,
-8.83836,
-9.46032,
-9.98283,
-10.41923,
-10.78202,
-11.08183,
-11.32747,
-11.52612,
-11.68367,
-11.805,
-11.89416,
-11.95453,
-11.989,
-12,
-12,
-11.14326,
-9.5353,
-7.17813,
-4.32365,
-1.37872,
1.34619,
3.72466,
5.74605,
7.44419,
8.86249,
10.04155,
11.01596,
11.81428,
12.45988,
12.97193,
13.36626,
13.65601,
13.85223,
13.96424,
14
],
"times": [
0,
0.05,
0.055,
0.06,
0.065,
0.07,
0.075,
0.08,
0.085,
0.09,
0.095,
0.1,
0.105,
0.11,
0.115,
0.12,
0.125,
0.13,
0.135,
0.14,
0.145,
0.15,
0.3,
0.305,
0.31,
0.315,
0.32,
0.325,
0.33,
0.335,
0.34,
0.345,
0.35,
0.355,
0.36,
0.365,
0.37,
0.375,
0.38,
0.385,
0.39,
0.395,
0.4,
0.55,
0.555,
0.56,
0.565,
0.57,
0.575,
0.58,
0.585,
0.59,
0.595,
0.6,
0.605,
0.61,
0.615,
0.62,
0.625,
0.63,
0.635,
0.64,
0.645,
0.65,
0.7,
0.705,
0.71,
0.715,
0.72,
0.725,
0.73,
0.735,
0.74,
0.745,
0.75,
0.755,
0.76,
0.765,
0.77,
0.775,
0.78,
0.785,
0.79,
0.795,
0.8,
0.89,
0.8955,
0.901,
0.9065,
0.912,
0.9175,
0.923,
0.9285,
0.934,
0.9395,
0.945,
0.9505,
0.956,
0.9615,
0.967,
0.9725,
0.978,
0.9835,
0.989,
0.9945,
1
],
"start": 0,
"span": 1
},
{
"part": "paper",
"property": "y",
"values": [
46,
46,
34,
34,
22,
22,
10,
10,
0,
0,
46,
46
],
"times": [
0,
0.05,
0.2,
0.3,
0.4,
0.55,
0.65,
0.7,
0.8,
0.85,
0.92,
1
],
"start": 0,
"span": 1
},
{
"part": "key0",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.05,
0.09,
0.12,
1
],
"start": 0,
"span": 1
},
{
"part": "key1",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.48,
0.54,
0.57,
1
],
"start": 0,
"span": 1
},
{
"part": "key2",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.66,
0.72,
0.75,
1
],
"start": 0,
"span": 1
},
{
"part": "key3",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.12,
0.18,
0.21,
1
],
"start": 0,
"span": 1
},
{
"part": "key4",
"property": "y",
"values": [
0,
0
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "key5",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.39,
0.45,
0.48,
1
],
"start": 0,
"span": 1
},
{
"part": "key6",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.21,
0.27,
0.3,
1
],
"start": 0,
"span": 1
},
{
"part": "key7",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.75,
0.81,
0.84,
1
],
"start": 0,
"span": 1
},
{
"part": "key8",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.3,
0.36,
0.39,
1
],
"start": 0,
"span": 1
},
{
"part": "key9",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.3,
0.36,
0.39,
1
],
"start": 0,
"span": 1
},
{
"part": "key10",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.3,
0.36,
0.39,
1
],
"start": 0,
"span": 1
},
{
"part": "key11",
"property": "y",
"values": [
0,
0,
2,
0,
0
],
"times": [
0,
0.57,
0.63,
0.66,
1
],
"start": 0,
"span": 1
}
]
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：Uiverse.io · Nawsome. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。