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

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

## 一条铁律

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

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

## 正面案例：拆解一个真实作品

参考样例 `references/sample-思考vs执行.html`（一期讲"思考 vs 执行"的成品）。
它好看，**不是因为用了某套固定动画，而是因为每个镜头都是为那句话定制的意象**：

| 那句话 | 核心意象 | 作者的视觉翻译 |
|---|---|---|
| "不是两套能量，是同一条资源池" | 两者其实共用一个池子 | 一条水池，左右两色此消彼长 |
| "拼命干，结果开始计数" | 连击、累积 | 数字从0滚到999 + COMBO字样 |
| "高认知很脆弱" | 看着高大，一碰就碎 | 一座高塔出现裂纹、碎片飞散 |
| "思考必须以接触现实结束" | 一路冲向终点撞墙 | 一列"思考"小车沿轨道冲向"现实墙" |
| "模型一定是错的，让现实纠正它" | 校准、修正 | 十字校准线轻微抖动归位 |

看出来了吗？**作者先问"这句话让我想到什么画面"，再去实现那个画面。**
"高塔""火车""水池"不是从某个库里挑的——是这几句话各自长出来的。

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

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

假设你这期讲"如何读一本书"。错误做法：

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

这就是你之前遇到的问题。**根源是把"上一期的镜头"当成了"这一期的选项"。**

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

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

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

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

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

## 每屏只放一个重点

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

## 风格基调可变，原则不变

样例是暗黑高冲击风（黑底、荧光色、闪切、颗粒）。**这是一种风格，不是唯一风格。**
- 讲冷静的分析、温和的科普 → 也许浅色、克制、慢转场更合适，别硬套荧光绿闪白。
- 讲热血、反转、情绪冲击 → 暗黑高冲击就很对。

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

## 镜头时长

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