微距拉出亮出产品
实物推进聚焦
线稿风 3D 笔记本合盖转正、开盖、推近键盘，再随右侧选项逐次平移到对应按键并按下。
完整配方
为什么有效
按键高亮和右侧下拉框选中发生在同一帧，用户一眼把按键与设置对应起来；长焦镜头压缩透视，推近后按键保持平整可读；材质只用白色加 1.2px 深灰描边，黄色是画面里唯一的颜色。
参数
- 时长
- 全片 10s。开场：笔记本升起 0–0.5s，合盖转正 0.5–1.2s（0.7s，21 帧），开盖 1.2–1.75s（0.55s，17 帧），推近键盘 1.6–3.2s（1.6s，48 帧）。之后三组按键：⌥+空格高亮 3.3s、按下 3.8s、熄灭 5.0s；平移 5.0–5.8s（0.8s，24 帧），⌘+⇧+K 高亮 5.6s、按下 6.0s、熄灭 7.2s；平移 7.2–8.0s（0.8s），fn 高亮 7.8s、按下 8.2s
- 缓动
- 推近和每次平移
cubic-bezier(0.16,1,0.3,1)（expo.out）；转正、开盖和镜头目标过渡用 easeInOutCubic；升起 easeOutCubic；高亮渐变 0.2s easeInOutCubic - 镜头
- 透视相机 fov 22° 长焦，观察方向固定 (0.62, 0.78, 0.9)；yaw 从 35° 转到 0°，屏幕盖 0°→112° 打开；推近把距离从 150 拉到 60 单位，对准⌥+空格那一段，之后平移到⌘+⇧+K（距离 70）和 fn（距离 30）
- 主体
- 每个按键下沉 0.22 单位，按压 0.25s（下压 0.08s，easeOutBack 回弹 0.17s）；高亮按键由白变黄，按下时加深到
#e5b92f；平移目标取自刚选中项对应的按键组 - 同步
- 下拉框在 4.95s 和 7.15s 选中，平移晚 0.05s 开始；按键高亮在平移开始后 0.6s 到位（5.6s、7.8s），按下再过 0.4s（第一组为 0.5s）
- 风格
- 白色材质加灰色描边（机身
#a9a9a92.2px，按键#b8b8b81.8px，2x 像素比），强调色黄#f6c83e（高亮#f6d45a）；左 3D（760px）右 UI 分栏
提示词
用「实物推进聚焦（Device Push-in Focus）」做一个输入法 onboarding 演示。页面左 3D（760px）右 UI 分栏：左侧是线稿风 3D 笔记本，白色材质加灰色描边（机身 2.2px，按键 1.8px，2x 像素比），强调色黄 #f6c83e，Three.js 透视相机 fov 22° 长焦，沿固定方向 (0.62, 0.78, 0.9) 观察。顺序：笔记本 0.5s 升起入场，合盖状态 yaw 35° 到 0° 转正 0.7s，屏幕盖 0° 到 112° 开盖 0.55s（两者都用 easeInOutCubic），镜头推近键盘 1.6s（expo.out，距离 150 到 60 单位），当前选项对应的按键亮成黄色（0.2s）。停 0.5s 后按键下沉 0.22 单位再回弹（0.25s）。右侧下拉框选中新选项后，镜头紧接着用 0.8s（expo.out）平移到对应按键组，新按键在平移进行 0.6s 时高亮，再过 0.4s 按下。平移目标依次是 ⌥+空格、⌘+⇧+K、fn。
常见说法
- 镜头跟着选项在笔记本上移动到对应按键
- 笔记本合上再打开，然后推到键盘
- 选哪个设置，对应的键就亮起来
容易混淆
- 微距拉出实物推进聚焦服务一次次 UI 选择，平移 0.8s 内完成；微距拉出是一条长镜头，最终拉出整机
更多「亮出产品」
