video-shot-demos

Files (114)

• README.md
• SKILL.md
• 01_淡漠凝睇_无口忧郁.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 02_抱书怀羊_恬静温柔.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 03_掩袖半垂_慵懒羞怯.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 04_闭目莞尔_温柔娇羞.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 05_阖眸轻语_雀跃腼腆.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 06_蹙眉闭唇_窘迫羞恼.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 07_睁眸微张_愕然疑惑.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 08_倦眼半阖_慵懒无力.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 09_垂眸出神_淡然凝思.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 10_闭目含笑_恬静满足.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 11_懵然半睁_茫然迟疑.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 12_粉颊捧笺_娇羞雀跃.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 13_掩袖低眸_羞怯暗思.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 14_红腮含颦_腼腆欣喜.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• 15_平举素纸_认真以待.png · assets/examples/doubao-paper-detective/anan - emotion rename/
• doctor_ava.jpg · assets/examples/doubao-paper-detective/
• doubaoicon.png · assets/examples/doubao-paper-detective/
• index.html · assets/examples/doubao-paper-detective/
• p1_evidence.jpg · assets/examples/doubao-paper-detective/papers/
• p1_full.jpg · assets/examples/doubao-paper-detective/papers/
• p1_read.jpg · assets/examples/doubao-paper-detective/papers/
• thumb_p1.jpg · assets/examples/doubao-paper-detective/papers/
• thumb_p2.jpg · assets/examples/doubao-paper-detective/papers/
• thumb_p3.jpg · assets/examples/doubao-paper-detective/papers/
• shot-0-1_导师的论文砸下来.html · assets/examples/doubao-paper-detective/
• shot-0-2_下马威38页术语轰炸.html · assets/examples/doubao-paper-detective/
• shot-0-3_反转预告.html · assets/examples/doubao-paper-detective/
• shot-0-4_标题卡论文侦探.html · assets/examples/doubao-paper-detective/
• shot-1-1_读两遍的习惯.html · assets/examples/doubao-paper-detective/
• shot-1-1b_横向对比.html · assets/examples/doubao-paper-detective/
• shot-2-4_疑点95条攻击零迁移.html · assets/examples/doubao-paper-detective/
• shot-4-5_卡片墙越攒越好用.html · assets/examples/doubao-paper-detective/
• shot-4-6_沉淀成工具.html · assets/examples/doubao-paper-detective/
• shot-5-1_三篇一条线与双结论.html · assets/examples/doubao-paper-detective/
• shot-5-2_指定句与三连.html · assets/examples/doubao-paper-detective/
• 01_淡漠凝睇_无口忧郁.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 02_抱书怀羊_恬静温柔.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 03_掩袖半垂_慵懒羞怯.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 04_闭目莞尔_温柔娇羞.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 05_阖眸轻语_雀跃腼腆.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 06_蹙眉闭唇_窘迫羞恼.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 07_睁眸微张_愕然疑惑.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 08_倦眼半阖_慵懒无力.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 09_垂眸出神_淡然凝思.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 10_闭目含笑_恬静满足.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 11_懵然半睁_茫然迟疑.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 12_粉颊捧笺_娇羞雀跃.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 13_掩袖低眸_羞怯暗思.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 14_红腮含颦_腼腆欣喜.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• 15_平举素纸_认真以待.png · assets/examples/glm-5.3-range-test/anan - emotion rename/
• GLMicon.png · assets/examples/glm-5.3-range-test/icons/
• GPTicon.png · assets/examples/glm-5.3-range-test/icons/
• index.html · assets/examples/glm-5.3-range-test/
• 0-1-typewriter.html · assets/examples/glm-5.3-range-test/reference/
• shot-0-1_两周2436个漏洞.html · assets/examples/glm-5.3-range-test/
• shot-0-2_CyberGym是什么.html · assets/examples/glm-5.3-range-test/
• shot-0-3_力压两位闭源标杆.html · assets/examples/glm-5.3-range-test/
• shot-0-4_实测悬念27vs23.html · assets/examples/glm-5.3-range-test/
• …and 54 more

SKILL.md (first lines)

# 视频分镜演示动画（每镜头一个 HTML）

一个镜头 = 一个独立 HTML，统一播放器底盘 + 每页一种完全不同的视觉风格，全屏录屏即成片。内容开放（技术实测/产品发布/课程/叙事皆可），不变的是电影化机制、镜头语言与完成度标准。

## 创作哲学

1. **风格轮换**：连续镜头绝不同风格。问"这段内容若是一件实物/一个场所，它是什么"——复古报纸、POS 小票、审讯室、像素游戏……把抽象内容**具象成一个世界观**，页面就活了。
2. **禁默认科技暗色**：黑底+霓虹+玻璃拟态的"乌漆墨黑油光锃亮"两页即疲劳，除非内容本身是终端主题。
3. **想象力优先**：底盘之上放开写——会砸下的印章、会掉进存钱罐的硬币，用户要惊喜感。
4. **完成度是纪律**：元素有入有出（或定格）、无重叠遮挡、无孤儿元素、结尾有重播暗示、数据有出处角注。
5. **音画同步**：关键动作有音效、镜头移动配 whoosh；安静也是设计。

## Token 纪律（硬性）

- **禁止通读** `assets/template.html` 与 `assets/examples/` 下任何成片页（单个 20–50KB，读完耗尽预算）。
- 模板一律 `cp` 复制后**只读标记区域**（第 1 步）；成片页仅当写完仍卡壳时，grep 定位后按行号窗口读 ≤80 行。
- 机制与风格知识优先取自 `references/` 三份浓缩文档，不要现场读源码反推。

## 工作流

**第 0 步 · 输入与风格分配表**：通读素材（大纲/口播稿/画面设计/口述），拿到分镜列表 + 口播时间戳（时间轴对齐基准）+ 角色素材。排表 `镜头|时长|视觉风格|字体组合|主色`：相邻不同风格、整辑不重复、**同一实体全系列锁同一颜色**（观众靠颜色跨页追踪）。表给用户确认后再动工。素材复制（勿读内容）：

```bash
cp -r "assets/examples/<项目>/anan - emotion rename" <输出目录>/    # 安安 15 情绪立绘；图标同理
cp -r "assets/shery - emotion rename" <输出目录>/                   # 橘雪莉 20 情绪（笨蛋吐槽役，重点页与安安同框）
```

**第 1 步 · 逐页实现**（cp 起步，只读标记区）：

```bash
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），逐一替换：① 字体与配色（Google Fonts 随风格）；② 重画画面层；③ 按口播时间戳写 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 配色可调，见 character-reactions.md）
- [ ] 无底部字幕条（口播只以 cue 注释对齐，不上屏）；截图验证无重叠遮挡；数据角注出处；index 可逐页打开

From Unclecheng-li/AI_Animation, MIT.

More from Unclecheng-li/AI_Animation