# phone-ui-demos

> 手机系统 UI 风格演示动画 Skill —— 一台"真手机"的电影化编排录屏

## 简介

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

HyperOS / MIUI 级设计语言全系列统一：大圆角 + 毛玻璃 + 动态壁纸渐变 + 系统级手感动效。内容完全开放——任何产品、课程、叙事都能转译成"手机里发生的事"。

## 核心机制

| 机制 | 说明 |
|------|------|
| **真手机舞台** | 412×868 机身全细节（挖孔/侧键/天线带/屏幕反光/状态栏 SVG/Home 条）；壁纸视差 + Ken Burns，每镜头换主题渐变 |
| **phoneTo 3D 姿态系统** | 六自由度（yaw/pitch/roll/scale/升降/透明）：登台旋入、灵动摇摆、点按前倾、横屏 rz:-90、盖章震动、熄屏后 3D 旋走退场 |
| **背景层大字幕** | 口播文案在手机图层下方左右两侧：58px+ 渐变文字，11 种入场效果库（流光上浮/逐字波浪/砸落/翻转/纵深推字…）每镜轮换 |
| **内容转译** | 论点→锁屏通知、对话→聊天气泡（打字指示器）、数据→圆环滑条、流程→设置列表、对比→ActionSheet、警示→系统弹窗、总结→熄屏+品牌卡 |
| **标志性转场** | App 打开 morph：图标精确位置/尺寸/圆角 → 铺满屏幕（62×62@r17 → 390×846@r48）+ 壁纸同步模糊 |
| **镜头连续性** | 整辑统一氛围层；首镜头手机 3D 登台，其余镜头直接在场 + 初始姿态接续上镜余韵 |
| **电影化播放器** | 黑场「启动播放」起手 / 虚拟时钟 / HUD 分段进度可点击跳镜头 / ←→ 切镜头 / Space 暂停 / 默认静音喇叭开关 |

## 使用方式

```
用 phone-ui-demos 把这个 App 的功能做成手机录屏风格的演示动画，输出到 demo/
```

```
这是我产品的功能清单（贴文），做成一辑手机系统 UI 演示，先出分镜表我确认
```

```
把这批手机 UI 演示页翻新一下：手机动作太单调，加 3D 姿态和横屏镜头；字幕移到背景两侧做大字
```

## 内置素材与实例

- **8 个成片级镜头 + index 总览**（`assets/examples/kexue/`，AI 私教「可学」产品演示，双击 index.html 即可运行）：
  锁屏通知 / App 打开·学习中心 / AI 出题 / 苏格拉底引导 / 讲解归纳 / 知识星云下钻 / 横屏能力仪表盘 / 锁屏收尾·熄屏
- **起步骨架** `assets/template.html` —— 内置全部底盘（播放器/音效/真手机/phoneTo/大字幕/HUD 分段），复制后只改画面层与 cue
- 无独立素材文件：图标全内联 SVG、壁纸全 CSS 渐变、音效 WebAudio 合成——单文件零依赖离线可跑

## 镜头预览（8 镜头 · 系统场景一览）

| 镜头 | 系统场景 | 特色手法 |
|------|---------|---------|
| shot-1 | 锁屏 + 通知堆叠 | 手机 3D 登台；通知逐条 + 摇摆回应 |
| shot-2 | 主屏 → App 打开 → 学习中心 | 标志性 morph 转场；状态栏转深色 |
| shot-3 | App 出题会话 | 打字机逐字 + AI 配图同步生成 |
| shot-4 | 苏格拉底对话 | 判题盖章 + 手机震动；打字指示器 |
| shot-5 | 解题步骤 + 横幅 | 步骤逐条点亮；掌握度横幅刷新 |
| shot-6 | 知识星云图谱 | 多级下钻 + 面包屑 + 依赖链路 |
| shot-7 | 能力仪表盘 | **手机横屏 rz:-90**；数据圆环 |
| shot-8 | 锁屏收尾 | 熄屏 → 3D 旋走 → 品牌落幕卡 |

| 预览 |
|------|
| <!-- TODO: 补充预览图 --> |

## 核心特性

- **真机感** — 机身细节/壁纸视差/状态栏深浅色切换，观众潜意识里信了这台手机
- **手机是演员** — 摇摆/前倾/横转/震动/旋走，每镜头 ≥2 次 3D 动作
- **系统组件库** — 通知/聊天/设置/ActionSheet/弹窗/App 网格，禁止普通网页元素进屏幕
- **背景大字幕** — 11 种渐变文字效果轮换，两侧大字与屏幕内容互补
- **连续性铁律** — 统一氛围 + 姿态接续，8 个独立 HTML 看起来像一镜到底的录屏
- **HyperOS 设计语言** — 大圆角/毛玻璃/超椭圆图标/MiSans 字体栈/弹性缓动/stagger

## 技术栈

- 原生 HTML/CSS/JS（零构建、零外部依赖，单文件双击即开即用）
- WebAudio API（系统音效合成，默认静音）
- CSS 3D transform（手机姿态系统，perspective 1900px）
- 内联 SVG（全部图标）

## Prompt 参考

详见 `references/`（player-and-navigation / phone-stage / bg-captions / system-ui-patterns 四份子系统规范）