phone-ui-demos

手机系统 UI 演示动画（一台"真手机"的电影化录屏）

把任意内容做成一辑看起来像真手机精心编排录屏的网页动画：1920×1080 舞台中央一台 3D 姿态活灵活现的手机，内容通过锁屏通知、聊天、设置页、控制中心、App 界面等系统组件逐镜头呈现。整辑接入电影化播放器（黑场起手 / 虚拟时钟 / 分段进度跳转 / 静音开关），可直接全屏录屏当成片用。

与 video-shot-demos（分镜风格轮换体系）同源的播放器底盘，但本 Skill 的画面法则完全不同：不是 29 种风格轮换，而是全系列统一一套 HyperOS/MIUI 设计语言，靠"壁纸渐变 + 系统场景 + 手机 3D 动作"制造镜头差异。

创作哲学（决定一切产出质量）

1. 一切信息都要变成"手机里发生的事"。禁止把普通网页元素（普通段落/按钮/导航栏）铺进屏幕——论点变锁屏通知、对话变聊天气泡、数据变圆环滑条、流程变设置列表。像真录屏，不是 PPT。
2. 真机感来自细节：机身侧键与天线带、挖孔摄像头、屏幕反光、实时状态栏、Home 指示条、壁纸视差。观众潜意识里信了这台手机，演示才有说服力。
3. 手机是活的演员：有 3D 姿态（摇摆/前倾/横过来/旋走退场），点按会前倾、盖章会震动、强调会转向观众。一台静止的手机=一张截图。
4. 镜头连续性是铁律：整辑统一背景氛围；除首镜头外手机直接在场（不重播登场动画），每镜初始姿态"接续上镜余韵"。
5. 两侧大字幕是舞台的一部分：口播文案不放底部字幕条，而是放在背景层（手机图层下方）左右两侧，渐变文字 + 多种入场效果，大而有冲击力。
6. 每个镜头只讲一件事：一句话 + 一个视觉主体，6–12 秒一次完整的系统交互。

工作流

第 0 步 · 理解输入与分镜表确认

通读用户素材（产品功能清单/大纲/口播稿/知识点），把内容拆成 5–9 个镜头（每个 6–12s），输出分镜表让用户确认后再动工：

镜头 | 时长 | 系统场景(锁屏/通知/聊天/设置/控制中心/弹窗/App页…) | 壁纸渐变主题 | 手机 3D 动作设计 | 承载的信息点

叙事弧参考（实测有效）：锁屏开场（手机登场+通知）→ 核心交互（App 打开/对话/流程）→ 数据沉淀（仪表盘/图谱）→ 锁屏收尾（回顾+熄屏+品牌卡）。

第 1 步 · 逐页实现

从 assets/template.html 复制起步——内置全部底盘：虚拟时钟播放器、音效引擎（默认静音+喇叭开关）、1920×1080 舞台 + 统一氛围层、真手机（全细节）、phoneTo 3D 姿态系统、背景大字幕（两种效果示例）、HUD 分段进度 + 镜头跳转、镜头调度。然后只改画面层与 cue。

子系统规范按需读：

• references/player-and-navigation.md — 播放器底盘 / HUD 分段跳转 / 静音开关 / 镜头间导航
• references/phone-stage.md — 手机解剖（机身细节/壁纸/状态栏）与 phoneTo 3D 姿态系统全部动作
• references/bg-captions.md — 背景层大字幕：11 种入场效果库 + 逐字拆字工具
• references/system-ui-patterns.md — 系统 UI 组件库（通知/聊天/设置/弹窗/App 打开转场…）+ 内容转译映射表 + 镜头连续性规则

写某种系统场景前，先读实例 assets/examples/kexue/ 里的对应镜头（成片级样板，双击 index.html 可运行）。cue 注释标注节拍（// 通知②：AI 出题），DUR = 规定时长 ±0.5s。

第 2 步 · 质检

无头截图（虚拟时钟可快进到任意毫秒）：

node ../video-shot-demos/scripts/shot.js 页面.html 6000 _t6s.png

逐张检查：真机感（像录屏吗？）/ 重叠遮挡（两侧大字与手机、屏幕内元素）/ 中间态穿帮（玻璃面板后的孤儿元素）/ 连续性（本镜初始姿态是否接上镜结尾）/ 收尾定格。最后完整播一遍听音效节奏。

第 3 步 · index 总览

与正片同一设计语言的导航页：按幕分组卡片（编号/时长/标题/系统场景标签/壁纸色 glow），页脚标注快捷键与录屏指引。

交付标准（缺一即未完成）

• [ ] 黑场「启动播放」起手；1920×1080 舞台自适应；HUD 默认隐藏、底部唤出
• [ ] HUD 分段进度条（每镜头一段）可点击跳转；Space 暂停 / R 重播 / ←→ 切镜头
• [ ] 音效 WebAudio 合成、默认静音、HUD 喇叭开启
• [ ] 手机全细节：侧键/天线带/挖孔/反光/状态栏 SVG 图标/Home 条；壁纸视差 + Ken Burns
• [ ] 全系列统一背景氛围；每镜头独立壁纸渐变，实体颜色全系列锁定
• [ ] 首镜头手机 3D 登台；其余镜头手机直接在场、初始姿态接续上镜
• [ ] 每镜头 ≥2 次手机 3D 动作（摇摆/前倾/横转…）；标志性 App 打开转场 ≥1 次
• [ ] 口播文案在背景层左右两侧：渐变文字、大字号、每镜换效果
• [ ] 屏幕内一切元素都是系统组件；图标全内联 SVG；无 emoji、无真实品牌商标
• [ ] 弹性入场 cubic-bezier(.34,1.56,.64,1)；列表 stagger 60–80ms；毛玻璃层级 ≥2 层
• [ ] 无重叠遮挡、无中间态穿帮；结尾定格体面（收尾镜头熄屏 + 品牌卡）
• [ ] index.html 总览可逐页打开