win11-ui-demos

仿 Win11 系统仿真演示动画（1:1 还原 · 光标演出）

观众看到的是一台真 Win11 电脑在"自己操作"：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复——一支会自己操作的鼠标引导观众看完全程，教学标记（问号徽章/警告牌/红圈）在还原界面上叠加解释。每镜头一个独立 HTML，电影化播放器底盘，全屏录屏即成片。

创作哲学

1. 像素级还原是生命线：窗底 #f3f6fb、accent #0067c0、圆角 10px、双层阴影、亚克力任务栏 rgba(238,244,252,.82)+blur(18px)——观众潜意识信了这台电脑，演示才有说服力。宁可少做一屏，不可做歪一像素。
2. 光标是主角：一支全程可见的鼠标（移动→悬停→单击→双击）就是叙事者，观众跟着它走。没有光标演出的系统演示=截图集。
3. 教学标记层与还原层分离：界面归界面（1:1），讲解归讲解（问号徽章、警告牌、容量爆红、占比浮层——都是"老师的手"搭在真界面上）。
4. 真实系统文案：错误码（0xc0000142）、"存储空间不足"、面包屑路径、状态栏项目数——细节真实感来自真文案。
5. 因果链叙事：乱删 → 报错 → 蓝屏修复，系统界面的"剧情感"天然适合问题→恶化→解决弧线。
6. 每镜头 15–45s，一次完整交互；口播对齐只写 cue 注释（无字幕条）。

Token 纪律（硬性）

• 禁止通读 assets/template.html 与 assets/examples/ 下任何成片页（单个 20–50KB）。
• 模板 cp 复制后 grep -n "改这里\|DUR=" 拿行号，只读标记区改写；成片页仅卡壳时 grep 定位后窗口读 ≤80 行。
• 组件规格与手法优先查 references/ 两份浓缩文档。

工作流

第 0 步 · 分镜表：通读素材（口播稿/操作流程/知识点），拆成 镜头|时长|系统场景(桌面/资源管理器/对话框/蓝屏…)|交互动作(光标走位)|教学标记 分配表，给用户确认。需要壁纸与角色时：

cp -r "assets/examples/wukong-c-clean/material" <输出目录>/     # Bloom 壁纸（或用模板 CSS 渐变兜底）
cp "assets/examples/wukong-c-clean/Shark-GIF/<编号_情绪>.gif" <输出目录>/Shark-GIF/   # 按需 GIF

第 1 步 · 逐页实现：cp assets/template.html 输出目录/shot-xx_名称.html → grep 定位 → 只改【改这里】区（桌面图标/窗口内容/弹窗/cue）。底盘与 WIN11 仿真套件 CSS 不动。cue 注释引用口播节拍（// (0:07) 想自己清理一下）。

第 2 步 · 质检：node ../video-shot-demos/scripts/shot.js 页面.html <毫秒> _t.png 多时间点截图，查：还原度（像 Win11 吗）/ 光标轨迹合理 / 重叠遮挡 / 中间态穿帮 / 状态栏·地址栏与视图同步。

第 3 步 · index 总览：按章节分组的导航卡（编号/时长/系统场景标签），并保留"界面为演示还原"声明。

交付标准

• [ ] 黑场「启动播放」起手；1920×1080 自适应；HUD 底部唤出；可暂停重播；DUR 准确
• [ ] Win11 Light Fluent 关键色/圆角/阴影/亚克力精确（见 win11-kit.md）；系统字体栈零 webfont
• [ ] 光标演出贯穿：移动有 fly 轨迹、点击有缩放反馈、双击进二级界面
• [ ] 视图切换三同步（标签页/地址栏面包屑/状态栏项目数）；真实系统文案
• [ ] 教学标记不越位（叠在界面上但保持"手"的轻盈）；角色 GIF 吐槽在情绪锚点
• [ ] 角注含"界面为演示还原 · Windows 11 版式"；截图验证无遮挡穿帮