# video-shot-demos

> 电影级视频分镜演示动画 Skill —— 一个镜头一个 HTML，三辑 41 种风格轮换

## 简介

把一个视频项目的分镜做成一辑**可以直接全屏录屏当成片用**的网页演示动画：一个镜头 = 一个独立 HTML。整辑共享同一套电影化播放器底盘（黑场起手、虚拟时钟、HUD、可暂停重播），但**每个镜头用完全不同的视觉风格**创作——复古报纸、便利店 POS、审讯室软木板、像素平台游戏、武功秘籍、机场安检，或黑色电影档案、黄铜天平、集换式卡牌卡册、地铁线路图……把抽象内容具象成一个"世界观"。

内容完全开放：技术实测、产品发布、课程讲解、故事叙述都能套用（内置两套完整实例分别服务安全实测与论文阅读两个领域）。核心是统一的电影化机制 + 镜头语言 + 完成度标准。

## 核心机制（全部页面统一的"底盘"）

| 机制 | 说明 |
|------|------|
| **黑场起手** | 劫持 `performance.now()` 成虚拟时钟——点击「启动播放」前时间恒为 0，点击后黑场渐变 2s 再开演。CSS 动画与 JS cue 共用一时钟永不漂移，录屏干净起手 |
| **HUD 隐藏唤出** | 进度条/时间码默认隐藏，鼠标移到画面底部 60px 唤出（录屏画面纯净） |
| **镜头语言** | 全画面包进 `#cam` 层做推拉摇移：开场拉镜、关键时刻推近、转场拉回、跟拍、Ken Burns 缓推、冲击快推；慢放段落配黑边 + 暗角 + 毫秒计数器 |
| **WebAudio 合成音效** | 零音频文件，6 个原语（pop/whoosh/swipe/type/ding/thud）；镜头运动自动挂 whoosh，数字滚动配缓出连击键音 |
| **角色表情特写** | 安安 15 张情绪立绘按节拍选图，400px 级特写 + 吐槽气泡，淡入登场 |
| **字幕条同步** | 与口播稿逐句对齐，关键词高亮；cue 注释引用口播时间戳 |
| **无头截图质检** | 虚拟时钟可快进到任意毫秒截图，逐张检查重叠遮挡/完成度/动画穿帮 |

## 创作哲学

1. **风格是轮换的，不是品牌** — 连续两个镜头绝不同风格；每种风格对应它最擅长的内容类型
2. **禁用默认科技暗色** — 黑底 + 霓虹发光的"乌漆墨黑油光锃亮"风是最大败笔
3. **想象力 > 规范** — 意想不到的隐喻、实体的机械结构、会砸下来的印章、会掉进存钱罐的硬币
4. **完成度是纪律** — 每个元素有入场动画、无重叠遮挡、结尾有重播暗示、数据有出处角注

## 使用方式

```
这是我视频的口播稿和分镜（贴文），用 video-shot-demos 给每个镜头做一个演示动画 HTML，输出到 demo/
```

```
把这批演示页翻新一下，好几页都是黑底发光风格，太土了，每页换不同风格
```

```
给所有演示页补上镜头推进和音效，再整体质检一遍有没有遮挡问题
```

## 内置素材与实例

- **两套完整成片实例**（`assets/examples/`，每套自包含，直接双击 index.html 运行）：
  - `glm-5.3-range-test/` — 29 镜头 · 安全实测复盘 + 播放器原始参考，29 风格零重复
  - `doubao-paper-detective/` — 11 镜头 · 论文阅读商单「论文侦探」，同样 11 风格零重复
  - `uu-dsh/` — 1 镜头 · 拟真录屏「情景复现」样板（1:1 复刻软件界面，单页可直接当模板复制）
- **双角色立绘素材** — 安安 15 情绪（每套实例各带一份）+ 橘雪莉 shery 20 情绪（`assets/shery - emotion rename/`），各项目图标（GLM/GPT/豆包/导师头像）
- **起步骨架** `assets/template.html` —— 已内置全部底盘系统，复制后只改画面层
- **质检工具** `scripts/shot.js` —— 无头截图快进到任意毫秒

## 风格预览（节选自三辑 41 风格，完整清单见 SKILL.md / references/style-cards.md）

| 风格 | 样板页 | 适合内容 |
|------|--------|---------|
| 复古报纸头条 | `shot-0-1`（第一辑） | 震撼数字、事件宣告 |
| 便利店 POS | `shot-2-4`（第一辑） | 交易、账目、金额 |
| 嘉年华老虎机 | `shot-2-5`（第一辑）★镜头推进典范 | 概率、并发、时序 |
| 审讯室软木板 | `shot-2-6`（第一辑） | 追查、证据链 |
| 像素平台跳跃 | `shot-2-7`（第一辑）★镜头推进典范 | 逐级突破、越权 |
| 武功秘籍 | `shot-2-8`（第一辑） | 方法论、套路总结 |
| 机场安检 | `shot-2-11`（第一辑） | 护栏、拦截、合规 |
| 黑色电影档案 | `shot-0-4`（第二辑） | 标题卡、侦探定调 |
| 黄铜天平学术对比 | `shot-1-1b`（第二辑） | 对比、称量、双语对照 |
| 集换式卡牌卡册 | `shot-4-5`（第二辑） | 收藏积累、库的价值 |
| 地铁线路图 | `shot-5-1`（第二辑） | 多线索汇合、成果盘点 |
| 毕业寄语明信片 | `shot-5-2`（第二辑） | 收尾、互动引导、情感落点 |
| 拟真录屏·情景复现 | `shot-3-1b`（第三辑）★1:1 复刻界面 | 卡死/无响应/静默失败现场复现 |

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

## 核心特性

- **电影化播放器** — 黑场启动 / 虚拟时钟 / 暂停重播 / 悬停唤出进度条
- **镜头调度系统** — camTo/camFocus 推拉摇移 + 黑边慢放 RACE CAM
- **WebAudio 音效引擎** — 6 原语合成，音画逐帧同步
- **41 种视觉风格库（三辑实例）** — 每种配字体组合 + 适用内容 + 成片样板
- **双角色吐槽体系** — 安安 15 情绪（主吐槽役）× 橘雪莉 20 情绪（笨蛋吐槽役）：每页 ≥2 次出场（中段快闪连切立绘 + 结尾定场），重点页双人同框——雪莉先吐槽、安安 1.2s 后接茬
- **吐槽气泡统一模板** — 形态逐字锁定（圆角/字号/箭头/入场曲线跨项目一致），只开放 4 个配色参数与朝向镜像（雪莉品牌色锁定）
- **质检工作流** — 无头截图多时间点验证重叠/遮挡/完成度

## 技术栈

- 原生 HTML/CSS/JS（零构建、零依赖，单文件即开即用）
- WebAudio API（音效合成）
- Google Fonts（每页 2–4 族，与风格严格配对）
- Node.js + Chrome/Edge headless（可选，仅质检脚本用）

## Prompt 参考

详见 `references/`（mechanics 播放器+镜头+音效 / style-cards 40 风格卡片 / character-reactions 角色与气泡，三份浓缩规范——Skill 采用 cp 模板 + 定位读取的 Token 经济工作流，不要求通读成片样板）