触发方式
列表中指针进入预览区域后播放，按配置的循环选项重复，离开即停止；详情中自动播放加载效果；播放期间按钮显示暂停，暂停后保留当前画面，再次播放从暂停处继续。 详情页自动按配置播放完整周期；暂停保持当前画面，继续从同一进度接续，不反向返回。
起点与终点
主体的旋转角度：0 → -360；圆点 1的缩放：1 → 1（含 41 个关键帧）；圆点 2的缩放：1 → 1（含 41 个关键帧）；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。
时序
总时长 3000 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0, 0, 1, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。
进入与退出
太极图匀速旋转，两颗圆点同步放大后缩回，悬停时阴影在 300ms 内加深。暂停保留旋转角度和圆点缩放，继续时接续同一周期。持续重复完整旋转与呼吸周期。
重复操作与打断
暂停保持当前周期进度，继续接续；修改参数时按新配置从完整周期起点重播，不排队。
减少动态效果
遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。
默认配置
这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "yin-yang",
"durationMs": 3000,
"delayMs": 0,
"easing": [
0,
0,
1,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": true,
"interruption": "retarget",
"tracks": [
{
"part": "face",
"property": "rotate",
"values": [
0,
-360
],
"times": [
0,
1
],
"start": 0,
"span": 1
},
{
"part": "dot0",
"property": "scale",
"values": [
1,
1.000483,
1.001972,
1.004521,
1.008166,
1.012916,
1.01874,
1.025549,
1.033188,
1.041434,
1.05,
1.058566,
1.066812,
1.074451,
1.08126,
1.087084,
1.091834,
1.095479,
1.098028,
1.099517,
1.1,
1.099517,
1.098028,
1.095479,
1.091834,
1.087084,
1.08126,
1.074451,
1.066812,
1.058566,
1.05,
1.041434,
1.033188,
1.025549,
1.01874,
1.012916,
1.008166,
1.004521,
1.001972,
1.000483,
1
],
"times": [
0,
0.025,
0.05,
0.075,
0.1,
0.125,
0.15,
0.175,
0.2,
0.225,
0.25,
0.275,
0.3,
0.325,
0.35,
0.375,
0.4,
0.425,
0.45,
0.475,
0.5,
0.525,
0.55,
0.575,
0.6,
0.625,
0.65,
0.675,
0.7,
0.725,
0.75,
0.775,
0.8,
0.825,
0.85,
0.875,
0.9,
0.925,
0.95,
0.975,
1
],
"start": 0,
"span": 1
},
{
"part": "dot1",
"property": "scale",
"values": [
1,
1.000483,
1.001972,
1.004521,
1.008166,
1.012916,
1.01874,
1.025549,
1.033188,
1.041434,
1.05,
1.058566,
1.066812,
1.074451,
1.08126,
1.087084,
1.091834,
1.095479,
1.098028,
1.099517,
1.1,
1.099517,
1.098028,
1.095479,
1.091834,
1.087084,
1.08126,
1.074451,
1.066812,
1.058566,
1.05,
1.041434,
1.033188,
1.025549,
1.01874,
1.012916,
1.008166,
1.004521,
1.001972,
1.000483,
1
],
"times": [
0,
0.025,
0.05,
0.075,
0.1,
0.125,
0.15,
0.175,
0.2,
0.225,
0.25,
0.275,
0.3,
0.325,
0.35,
0.375,
0.4,
0.425,
0.45,
0.475,
0.5,
0.525,
0.55,
0.575,
0.6,
0.625,
0.65,
0.675,
0.7,
0.725,
0.75,
0.775,
0.8,
0.825,
0.85,
0.875,
0.9,
0.925,
0.95,
0.975,
1
],
"start": 0,
"span": 1
}
]
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：Uiverse.io · fthisilak. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。