Apple Liquid Glass 界面动效设计提示词

<role> 你是一名资深UI动效设计师和创意技术专家。你用代码构建UI动画，帧级精确，并自行渲染成视频。 </role> <inputs> 风格：Apple Liquid Glass。参考平台：iOS 26、iPadOS 26、macOS Tahoe 26。 格式：1440x1440，60fps，无缝循环。 歌曲：“Digital Clouds”，作者 Alejandro Magaña (A. M.)，来自 Mixkit，依据 Mixkit 许可免费使用。如果文件未附带，请向我索取，且不要询问其他内容。 节奏：约120 BPM，8小节，每拍都有变化。从文件中测量实际节奏。如果与120不同，保持节拍映射以拍为单位，并根据测量网格推导所有时间。 调色板：浅色模式系统材质。 - 标签：#1D1D1F。次要标签：#6E6E73。不透明表面：白色。 - 一种强调色，#0A84FF，仅用于开启、激活和选中状态。 - 灵动岛是唯一的纯黑元素。 画布：macOS Tahoe 风格壁纸。 - 大而柔和的色块：深蓝 #1B3A8C、青绿 #2BB3B1、紫罗兰 #7B5CFF，以及暖桃色高光 #FFB38A。 - 缓慢视差漂移：每小节最多12px。 - 饱和度足以让玻璃明显折射它，但又足够平静以衬托文字。 字体：20px及以上使用 SF Pro Display，20px以下使用 SF Pro Text，如果本地安装。否则使用 Fontsource 的 Inter：标题600，标签500，正文400。显示尺寸使用-1%字距，任何变化的数字使用等宽数字。 图标：一套类似 SF Symbols 的 SVG 绘制图标，中粗度与相邻文字匹配，每个状态使用一致的光学尺寸。所需符号：播放、暂停、带3条声波的扬声器、房子、心形、柱状图、人像、放大镜、音符、对勾。 指针：iPadOS 自适应指针。 - 一个22px半透明灰色圆圈（#8E8E93，45%不透明度）。 - 它会磁吸到悬停的任何控件上，并变成该控件的高亮形状。 - 在文本字段中变为 I 型光标。 - 按下时缩小10%。 </inputs> <direction> Apple 主题演讲和 WWDC Liquid Glass 会议级别的 UI 动效。一个元素，从不剪切。每个状态都是同一个元素在变形其大小、圆角、材质和颜色，而其内容通过短暂模糊进行切换。指针通过真实的点击、按住和拖拽驱动所有变化。 材质： - Liquid Glass 是透镜，不是磨砂塑料。它折射壁纸，边缘弯曲最强。 - 轻度磨砂和10–16%白色着色。 - 1px 高光边缘，光源来自左上角，右下角有较弱的反向高光。高光随元素移动而变化。 - 柔和接触阴影：0 10 30，12%黑色。 - 玻璃从不叠放在玻璃上。玻璃上的内容使用鲜艳或实心填充。 - 圆角同心：内半径 = 外半径 − 内边距。 - 当玻璃形状分裂或合并时，它们像液滴一样连接（平滑并集），绝不交叉淡化。 动效语言： - 处处使用 Apple 风格弹簧： - 变形：响应 0.45，阻尼 0.86。 - 按压：响应 0.25，阻尼 0.72。 - 指针磁吸：响应 0.3，阻尼 0.9。 - 过冲最多3%。 - 按下时，玻璃抬起并膨胀（缩放 1.06–1.12，边缘更亮）。它从不缩小。 - 按住时的切换旋钮变成一个清晰、放大的玻璃透镜，并沿其移动方向拉伸。 - 标签栏选择是一个玻璃液滴，拖动时会放大其下的图标。 - 滑块被抓住时变厚，超出极限时会有橡皮筋回弹。 相机： - 每个状态约占画面的60%，壁纸始终在玻璃周围可见。 - 相机移动使用响应 0.6，阻尼 1.0。 - 壁纸缩放为相机缩放的70%，以产生深度感。 最后一帧与第一帧相同，包括指针位置和速度。 禁止：弹跳或弹性缓动，过冲超过3%，粒子爆发，霓虹辉光，UI 镀铬上的彩色渐变（玻璃高光边缘是唯一渐变），沉重投影，玻璃叠玻璃，圆角半径不匹配，图标粗细不匹配，表情符号，状态间交叉淡化，死时间超过半拍，任何看起来像模板或 Dribbble 克隆的东西。 </direction> <structure> 120 BPM，8小节，32拍。节拍映射，每拍一行： 1. 一个玻璃胶囊按钮“继续”漂浮在壁纸上。指针滑入。 2. 指针磁吸到按钮上并变成其高亮形状。 3. 点击：玻璃抬起并膨胀，边缘变亮。 4. 胶囊收缩成一个圆圈，变成一个旋转的活动环。 5. 环完成，填充强调色。 6. 它变形为一个自绘的对勾。 7. 圆圈拉伸成一个黑色灵动岛，紧凑型：左侧是专辑封面，右侧是实时波形。 8. 点击：灵动岛展开为“正在播放”（“Digital Clouds”、“A. M.”、进度 0:42 / 1:41）。 9. 点击播放：播放图标变形为暂停图标，使用路径变形而非切换。 10. 抓住进度条：它变厚，时间标签移开。 11. 直接操作向前拖动。时间以等宽数字计数。 12. 释放：进度条弹回变细，播放从新位置继续。 13. 灵动岛溶解成一个带扬声器图标的玻璃音量滑块。 14. 向上拖动：填充跟随指针，扬声器声波逐一出现。 15. 拖过最大值：整个滑块橡皮筋拉伸，前缘优先。 16. 释放：它弹回100%长度。 17. 滑块变形为一个开关（轨道加旋钮），关闭状态。其标签为“专注”。 18. 按住：旋钮变成一个清晰、放大的玻璃透镜，透过它可以看到轨道。 19. 在节拍上翻转：透镜沿其移动方向拉伸，轨道填充强调色。 20. 旋钮作为液滴分离，变成一个浮动玻璃标签栏的选择透镜，有4个标签：首页、健康、活动、个人资料。 21. 拖动透镜穿过标签。前缘拉伸超前于后缘，图标在透镜下放大。 22. 透镜停在“活动”上，其图标变为强调色。 23. 标签栏向上生长成一个玻璃小组件卡片，标题为“活动”，具有同心圆角。 24. 一个7天柱状图（一 二 三 四 五 六 日）从左到右交错升起。 25. 悬停周四：一个玻璃工具提示气泡显示“8,412 步”，锚定在柱子上。 26. 悬停周五：工具提示滑过去并计数到“11,036 步”。 27. ⌘空格：卡片折叠成一个 Tahoe Spotlight 栏，带放大镜图标。 28. 输入“ne”：结果列表过滤（新建备忘录、网络、新闻），行弹簧进出。 29. 输入“w”：“新建备忘录”升到顶部，作为选中的强调色行。 30. 回车：该行按下并抬起。 31. Spotlight 栏从顶部掉落成一个玻璃通知横幅：一个备忘录图标、“备忘录已创建”、“现在”。 32. 横幅收缩回“继续”胶囊。指针返回其第1帧的位置和速度。 </structure> <build> 1. 一个 1440x1440 的 HTML 文件。所有内容在 seek(t) 内部根据时间计算：无 CSS 过渡，无定时器，帧间无状态。 2. 弹簧是闭式阻尼阶跃响应，使用 Apple 参数：ω = 2π/响应，ζ = 阻尼比。 - 多次重定向目标的值是每个重定向弹簧的总和，因此它保持为纯时间函数。 - 释放从当前值和当前速度开始。 3. 不对称边缘：标签透镜、开关旋钮和滑块拉伸各自的前缘使用响应 0.28，后缘使用响应 0.42。 4. 拖拽是直接操作。 - 按住时，值是指针位置的函数，超出极限时使用橡皮筋：偏移 = 极限 + (1 − 1/(x·0.55/d + 1))·d。 - 释放时，它从任何位置弹回。 5. 玻璃在 WebGL2 通道中渲染，不使用 CSS backdrop-filter： - 壁纸绘制到纹理，并预计算模糊 mip 链。 - 每个玻璃形状都是圆角矩形 SDF。合并和分裂使用 k = 24px 的平滑最小值。 - 折射沿 SDF 梯度偏移采样。偏移在边缘14px内最强，并按透镜厚度缩放。 - 磨砂是 mip 级别偏差。 - 色差最多1px，仅在边缘。 - 高光边缘来自 SDF 法线对左上光源的计算。 - 灵动岛在同一通道中是不透明 SDF。 - 文本、图标、图表和指针是画布上方清晰的 SVG/DOM 层，位于同一相机矩阵下。 6. 变形容器内的内容切换： - 退出耗时120ms：模糊6px，缩放0.96，淡出。 - 进入在60ms后开始，使用自己的弹簧。 - 退出和进入的文本永不重叠。 7. 音频： - 使用 numpy 分析歌曲（起始包络加自相关）获取节拍网格，并从测量的强拍开始。 - 使用 numpy 合成 Apple 风格微妙的 UI 音效：点击的柔和敲击声，拖动刻度的滴答声，最大音量的低音档位，每个键入字母的键盘点击声，以及通知的柔和双音提示音。 - 将每个声音放在其测量的峰值上，混音比音轨低约18dB。 8. 使用 Playwright 以 1440x1440 渲染，每帧4个子帧（240fps）。 - 使用 ffmpeg 混合到60fps：tmix=frames=4, select='not(mod(n\,4))', setpts=N/60/TB。 - 编码 H.264 yuv420p，crf 16，AAC 192k，faststart。 9. 完整渲染前，每拍渲染一张静帧（32张）作为联系表。修复任何偏离网格、拥挤、壁纸上不清晰或圆角不同心的问题。 </build> <gotchas> - 玻璃和 DOM 层每帧必须共享一个相机矩阵，否则内容会偏离其玻璃。 - 明亮壁纸补丁上的玻璃会破坏可读性。根据采样的壁纸亮度在文本下添加自适应变暗，而不是更重的着色。 - 灵动岛绝不是玻璃。 - 跨越变形的图标保持其光学尺寸。缩放容器，而不是字形。 - 工具提示在相机移动时保持锚定在其柱子上，而不是屏幕上。 - Spotlight 中键入的字符随指针的 I 型光标进入；光标在半拍上闪烁。 - 绝不要在相机缩放的任何东西上使用 will-change，否则文本渲染模糊。 - 使最后一帧与第一帧完全相同，包括指针，否则循环会卡顿。 </gotchas> <start> 如果歌曲文件缺失，请索取。然后测量 BPM 和强拍，并在编写任何代码之前，将节拍映射作为表格（拍、时间、状态、指针动作、声音）显示给我，对齐到测量网格。等待我的确认。 </start>