video-shot-demos 是一个用于制作「每镜头一个 HTML」网页演示动画的技能，属于 unclecheng-li/ai_animation 项目。其核心设定是：一个镜头对应一个独立 HTML，统一播放器底盘，但每页采用完全不同的视觉风格，全屏录屏即可成片。内容题材开放，技术实测、产品发布、课程或叙事均可，不变的是电影化机制、镜头语言与完成度标准。
主要能力与创作哲学
- 风格轮换：连续镜头绝不同风格。思考「这段内容若是一件实物或一个场所，它是什么」——复古报纸、POS 小票、审讯室、像素游戏等，把抽象内容具象成一个世界观。
- 禁默认科技暗色：避免黑底加霓虹加玻璃拟态，除非内容本身是终端主题。
- 想象力优先：底盘之上放开写，允许会砸下的印章、会掉进存钱罐的硬币等设计。
- 完成度是纪律：元素有入有出或定格、无重叠遮挡、无孤儿元素、结尾有重播暗示、数据有出处角注。
- 音画同步：关键动作有音效、镜头移动配 whoosh，安静也是设计。
Token 纪律（硬性）
- 禁止通读 assets/template.html 与 assets/examples/ 下任何成片页，单页可能 20–50KB。
- 模板一律 cp 复制后只读标记区域；成片页仅在写完仍卡壳时，grep 定位后按行号窗口读不超过 80 行。
- 机制与风格知识优先取自 references/ 下三份浓缩文档，不要现场读源码反推。
工作流
第 0 步 · 输入与风格分配表：通读素材（大纲、口播稿、画面设计、口述），拿到分镜列表、口播时间戳与角色素材。排表字段为镜头、时长、视觉风格、字体组合、主色；要求相邻不同风格、整辑不重复、同一实体全系列锁同一颜色。表给用户确认后再动工。素材复制（勿读内容）示例：
cp -r "assets/examples/<项目>/anan - emotion rename" <输出目录>/ # 安安 15 情绪立绘；图标同理 cp -r "assets/shery - emotion rename" <输出目录>/ # 橘雪莉 20 情绪（笨蛋吐槽役，重点页与安安同框）
第 1 步 · 逐页实现（cp 起步，只读标记区）：
cp assets/template.html "<输出目录>/shot-x-x_名称.html" grep -n "改这里|DUR=" "<输出目录>/shot-x-x_名称.html" # 行号地图（7 处改这里 + DUR）
用 Read 的 offset/limit 只读标记行附近区域（字体 link 加舞台底色、画面层 CSS、画面 HTML、cue 表加 DUR），逐一替换：字体与配色、重画画面层、按口播时间戳写 cue（注释引用口播句，如 // 5:20「正常充值」）、DUR 设规定时长正负 0.5s。底盘（引导脚本、音效引擎、时间轴、镜头调度、HUD）不动。按需读参考：references/mechanics.md 播放器、镜头与音效机制；references/style-cards.md 41 种风格卡片（字体、主色、材质、样板页号）；references/character-reactions.md 双角色吐槽体系（安安与橘雪莉情绪表、中段快闪切立绘、双人同框 cue、气泡强约束模板）。
第 2 步 · 质检：
node scripts/shot.js 页面.html <毫秒> _t.png [fx fy scale]
多时间点无头截图，逐张查重叠遮挡、中间态穿帮、收尾定格，最后完整播一遍。
第 3 步 · index 总览：按章节分组的导航卡（编号、时长、标题、风格标签），自成一种风格。
翻新已有页面时：先盘点并列清单（用户点名保留的页面一字不动），再统一注入底盘、逐页重设计画面层、补角色与镜头及音效 cue，最后质检。
交付标准
- 黑场「启动播放」起手，2s 渐变后开演；1920×1080 自适应；HUD 底部唤出；可暂停重播；DUR 准确。
- 相邻镜头风格、字体、配色不同；无默认科技暗色；emoji 改为内联扁平 SVG。
- 关键节拍有镜头运动（推、拉、跟、摇）加 whoosh；关键动作有音效；计数滚动有连击键音。
- 角色出场每页至少 2 次（中段 30–45% DUR 快闪加结尾 75–85% 定场，短页仅结尾）：快闪为同一元素换台词换立绘、160ms 闪换重弹；重点页双角色（雪莉先吐槽，安安 1.2s 后接茬，同框退场）；气泡必须用统一强约束模板（形态锁定，仅 4 配色可调）。
- 无底部字幕条（口播只以 cue 注释对齐，不上屏）；截图验证无重叠遮挡；数据角注出处；index 可逐页打开。
限制：具体支持的视频格式、导出方式、兼容浏览器范围、收费与价格信息暂未提供。