Motionboard
原片 · Dia · 0:42–0:53YouTube ↗
Motionboard 复刻

斜拍景深界面

UI 平面倾斜 10–15° 贴近拍摄，只有当前操作行在焦内，其余行虚化。

原片出处

YouTube ↗
YouTube ↗
YouTube ↗
YouTube ↗
完整配方

为什么有效

倾斜、浅景深和颗粒让屏幕界面读成实拍物体，和前后真人镜头的调色连成一体；焦内只有正在输入的那一行，视线不用寻找。

参数

时长
全片 10s。面板滑入 0–1.0s（30 帧）；镜头线性横移 0–8.0s；打字 1.4–3.2s（47 个字符）；3.3s 结果替换列表，各行错开 0.05s（3.5s 起每行 0.5s）；高亮 4.4s 出现，5.1s 和 5.82s 各跳一行（0.22s，7 帧）；选中按下 6.3s；答案 6.72–7.8s 逐行流出（7 行，每行间隔 0.18s）；拉回 8.0–8.9s（0.9s，27 帧）；字标 8.3–8.9s
缓动
横移与背景漂移 linear；面板滑入、行显现、高亮跳转、焦点跳转和拉回 cubic-bezier(0.16,1,0.3,1)（expo.out）；选中按压 back.out(2)
镜头
CSS 3D，perspective 1200px；面板（760×500px）rotateX 18°、rotateY −16°、rotateZ 5°，scale 2.3；镜头贴近，缓慢横移（x 110→−150px），跟随偏移让当前行保持在画面高约 40% 处；焦内带是面板高度 168px，约占画面高 36%；8.0s 拉回把倾斜减半（9°、−8°、2.5°），scale 2.3→1.5，焦带放宽到整个面板
主体
当前行清楚；同一面板的两份虚化副本（紧邻焦带 blur 4px，更远 13px）在 60px 和 200px 的蒙版上交叉渐变；逐字打出，每个字母约 30ms、空格 75ms，光标 1s 周期闪烁；高亮在结果里向下移动两行，之后答案逐行流出
同步
焦带跳到与高亮相同的行（0.22–0.35s expo.out），并跟随每一行答案（0.18s）；按压（scale 0.98 后 back.out(2) 回弹）与标签变橙 #ff6a3d 在 6.3s 同一帧发生
风格
近黑 #070708 背景，五条模糊的白色斜带（−25°，不透明度 0.07–0.14）在 9s 内漂移 288px（15% 画面宽）；面板 rgba(28,28,30,0.78)，圆角 14px，1px 边框 rgba(255,255,255,0.10)；颗粒 8% 不透明度、每 3 帧重抽一次；暗角到 45% 黑；强调色橙 #ff6a3d

提示词

用「斜拍景深界面（Tilted UI with Depth of Field）」做一段你的界面特写，整段 10 秒。把 760×500px 的命令面板放进 CSS 3D 容器，perspective 1200px，rotateX 18°、rotateY −16°、rotateZ 5°，放大 2.3 倍，背景近黑 #070708，叠模糊的斜向光带、8% 颗粒和暗角。面板用 expo.out 滑入 1.0 秒，镜头以 linear 横移 8 秒。只有当前行清晰：叠三份面板（清晰、blur 4px、blur 13px），用 60px 和 200px 交叉渐变的蒙版，焦内带取面板高度 168px（约占画面 36%），用 expo.out 跳到当前行。从 1.4 秒起逐字打出 47 个字符的查询，每个字母约 30ms、空格 75ms，光标 1 秒闪烁；3.3 秒切换成结果列表，各行错开 0.05 秒淡入；4.4 秒起高亮向下移动两行（每次 0.22 秒），6.3 秒选中按压（scale 0.98 后 back.out(2)），标签在同一帧变橙；随后答案按每行 0.18 秒流出 7 行。8.0 秒用 expo.out 拉回 0.9 秒：倾斜减半，scale 从 2.3 倍到 1.5 倍，焦带放宽到整个面板，然后淡入字标。

常见说法

  • 界面像放在桌上拍的实物
  • 只有正在输入的那一行是清楚的
  • 界面斜着放、前后虚化

容易混淆

  • 微距拉出微距拉出的主体是产品实物并拉出全貌；本条主体是平面 UI，靠倾斜和景深当实物拍，镜头不拉远
  • 推近操作再拉回推近再拉回靠缩放服务一次操作；本条镜头保持贴近，只做缓慢横移
配方文件 (.md)

更多「亮出产品」