触发方式
点击左右箭头切换；方向键、Home / End 和横向滑动可操作。切换保持在当前页面。
起点与终点
白框卡片高度 202px、图片宽高比 0.756、圆角 14.2px、边框 4.5px。默认第 1 张；共 6 张图片。
时序
单次过渡 800 ms。从点击侧的按钮位置向外扩散，连续波纹随扩散边界移动，折射集中在边缘附近，扭曲强度 0.2、边缘起伏 0.1。
进入与退出
下一张从右侧按钮、上一张从左侧按钮开始扩散；新旧图片在边界附近同时产生局部折射，圆角白框和切换按钮保持固定。完全覆盖后停止绘制。
重复操作与打断
快速连续切换会保留当前混合画面，并接续到最新图片，不排队。目录悬停、聚焦和手机 Preview 共用演示；离开后完成当前切换再停止，后台和离屏立即停止。
参数与导出
图片、名称、顺序、默认图片、尺寸和液态参数均写入配置。预览当前页码与观察倍速不写入 JSON。Motion、提示词工程与离线 HTML 共用同一渲染器和内嵌图片。
减少动态效果
关闭自动演示和液态扭曲，图片立即切换，保留按钮、触摸和键盘。WebGL 不可用时降级为不规则径向遮罩。
默认配置
这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "liquid-carousel",
"durationMs": 800,
"delayMs": 0,
"easing": [
0.22,
1,
0.36,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [],
"liquidCarousel": {
"items": [
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22176%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Orchid orbit"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%2264%22%2F%3E%3Crect%20x%3D%22434%22%20y%3D%22116%22%20width%3D%2258%22%20height%3D%2258%22%20fill%3D%22%23dedede%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Fuchsia wave"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20308a176%20176%200%200%201%20352%200Z%22%20fill%3D%22%23929292%22%2F%3E%3Cpath%20d%3D%22M144%20332a176%20176%200%200%200%20352%200Z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Coral fold"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%22144%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23dedede%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22264%22%20width%3D%22232%22%20height%3D%22232%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Rose balance"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Cpath%20d%3D%22m320%20128%20200%20352H120Z%22%20fill%3D%22%23a0a0a0%22%2F%3E%3Cpath%20d%3D%22m320%20252%2092%20162H228Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Violet steps"
},
{
"src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20184h352M144%20368h352%22%20stroke%3D%22%23929292%22%20stroke-width%3D%2240%22%2F%3E%3Cpath%20d%3D%22M144%20276h352M144%20460h352%22%20stroke%3D%22%23cccccc%22%20stroke-width%3D%2240%22%2F%3E%3C%2Fsvg%3E%0A",
"title": "Amber loop"
}
],
"selectedIndex": 0,
"height": 202,
"aspect": 0.755939524838013,
"radius": 14.2,
"border": 4.5,
"buttonSize": 19.2,
"distortion": 0.2,
"edge": 0.1,
"autoplay": false,
"interval": 1800,
"disabled": false
}
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。
目录来源标注：用户录屏 · 独立实现. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。