# STYLE —— 动态视频网页的视觉原则

> 这份文档不给你一份"镜头清单"让你照着填。
> 它教你**怎么为一段内容想出贴合它的画面**——这正是好作品和八股文的分界。

## 一条铁律

**每一个镜头，都是这一句话核心意象的视觉翻译。**

不是"这一屏该放第几号动画"，而是"这句话在观众脑子里激起的画面是什么，我怎么把它放到屏幕上"。
做到这一点，画面自然贴合、自然多变；做不到，就会退化成"反正每期都这么放"的八股。

---

## 正面案例：从 case-library 拆解

以下拆解来自 `references/case-library/` 里的真实成品。注意看**每个镜头背后的推导逻辑**，不要记住具体镜头形式。

### 案例 A — 思考 vs 执行（暗黑高冲击风）
文件：`case-library/动态视频网页素材.html`

| 那句话 | 核心意象 | 视觉翻译 |
|---|---|---|
| "不是两套能量，是同一条资源池" | 两者其实共用一个池子 | 水池动画：左蓝右红此消彼长 |
| "高认知很脆弱" | 看着高大，一碰就碎 | 倾斜高塔 + 红裂纹 + 碎片飞散 |
| "思考必须以接触现实结束" | 一路冲向终点撞墙 | 小车沿轨道冲向"现实墙" |
| "模型一定是错的，让现实纠正它" | 校准、修正 | 十字准线轻微抖动归位 |

### 案例 B — 不行动才是最大的风险（暗黑炸场风）
文件：`case-library/copy_driven_visual_short (33).html`

| 那句话 | 核心意象 | 视觉翻译 |
|---|---|---|
| "大多数人卡住是因为恐惧" | 恐惧的具象 + 被自己说服的借口 | 巨型"恐惧"幽灵字 + 三项打叉清单 |
| "思考变成延迟暴露风险的机制" | 时间流逝、拖延 | CSS 沙漏：沙粒从上室流向下室 |

### 案例 C — 地球是陌生人社交游戏（电影感叙事风）
文件：`case-library/地球就是一个巨大的陌生人社交游戏-动态短片.html`

| 那句话 | 核心意象 | 视觉翻译 |
|---|---|---|
| "你向外做功，世界就开始看见你" | 三个维度同时成立 | 三个横向药丸标签（能量/印象/定价） |
| "语言、逻辑、标签、自我介绍" | 多维识别系统 | 五词标签云：机敏/流畅/清晰/精确/但不刻板 |
| "地球，就是一个巨大的陌生人社交游戏" | 宏观世界观框架 | 居中极简大字，无装饰，留白强调 |

**看出规律了吗？** 作者先问"这句话让我想到什么画面"，再去实现那个画面。
高塔、火车、水池、药丸标签——没有一个是从库里挑的，它们是这几句话各自长出来的。

**所以：这些镜头属于那一期。你做新内容，要做的是同样的事——为你的句子，想你的意象——而不是把这里的镜头搬过来。**

---

## 反面案例：八股是怎么发生的

假设你这期讲"如何读一本书"。

- ✗ 看到案例里"数字滚到999"挺酷，于是给"读书要做笔记"配数字滚动——可这句根本没有数字，滚出来的999毫无意义。
- ✗ 看到有"高塔碎裂"，于是讲到"很多人读不完"时让塔碎掉——可"读不完"的意象不是脆弱崩塌，是"半途搁置"，塔碎了反而误导。
- ✗ 每期都是：开场glitch大字 → 中间两栏对比 → 结尾大字。顺序固定，与讲什么无关。

这就是八股的根源：**把"上一期的镜头"当成了"这一期的选项"。**

正确做法：讲"读书"时，"做笔记"的意象也许是**一支笔在书页上划出高亮**；"读不完"的意象也许是**一摞书只点亮了最上面一本**。这些案例里根本没有——你得自己想，这才是 skill 要你做的事。

---

## 可复用的是"手法"，不是"镜头"

有一类东西确实通用，可以放心跨期使用，因为它们不绑定任何具体内容：

- **入场动画**：`pop`（弹入）、`glitch`（故障闪现）、`slam`（砸入）——任何文字/卡片都能套。
- **关键词高亮**：`<span class="sub-key">` 或 `.red` 色，把句子里最重的词标出来。
- **闪切**：镜头硬切时用 `cut:'red'/'blue'/'white'` 闪一下，制造节奏感。
- **氛围层**：颗粒、扫描线、HUD、canvas 背景——给作品感，与内容无关。

这些是"怎么呈现"的手法，`template.html` 的技术骨架已内置，直接用。
区别在于：**手法是中性的容器，镜头是为内容定制的内容。** 八股出在滥用"镜头"，不出在复用"手法"。

---

## 每屏只放一个重点

不管什么内容、什么风格，这条都成立：
一屏里观众的眼睛只该被引向一个地方。**两个重点 = 没有重点。**
动画的作用是"把注意力推向那个点"，不是"让画面更热闹"。

---

## 风格基调服从内容情绪

案例库里有几种风格——这些**都是选项，不是标准**：

- 暗黑高冲击（黑底/荧光色/闪切/颗粒）→ 热血、反转、情绪冲击类内容。
- 暖色科普竖版（纸色/金色/翠绿/温和切换）→ 健康、生活、教程类内容。
- 电影感叙事（极简/留白/缓节奏）→ 哲理、情感、叙事类内容。

**让风格服从内容的情绪。** 改 `template.html` 顶部的 `:root` 配色变量即可换底色。
变的是基调，不变的是上面那几条原则。

---

## 镜头时长

跟着语义停顿走，别用固定节拍。
一般每镜头 2.5–6 秒；钩子/结论句可以短而重，铺垫/解释句可以长一点。
用校准工具对齐口播停顿（见 `PIPELINE.md`）。
