# EXAMPLES —— 完整章节 / 题材 anchor

> ## ⚠️ 这是**结构示意**，不是抄袭模板
>
> 这些 example **不是给你照抄的**。它们的角色是"看一个完整章节大概
> 什么形状、动画怎么分层、CSS 用了哪些 token、outline 长什么样"。
>
> **正确使用流程**：
>
> 1. 走完 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md) Part 0 五问
> 2. 实在卡壳"我这一章的整体结构应该是什么"才翻 EXAMPLES
> 3. **保留它的"形"**（step 切分逻辑、字号关系、布局原则），**按本
>    项目的主题 + 内容换动作选型**
>
> 倒过来——先翻 EXAMPLES 选一个照搬到底 = [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
> Part 5 第 8 条「整章只用一种入场动画」同质化反模式（每个用户的视频
> 看起来像同一个模板的 N 个变奏）。

两类参考资源，让 agent 在写章节时**有具体形状可参考**，不用从零设计。

> **不是必须按这个写**。卡壳时翻一翻；用力发挥时大胆偏离。

## 目录

### A. 章节结构 anchor（与题材无关）

| 例子 | 适用场景 | 文件 |
|---|---|---|
| [`hook-chapter/`](hook-chapter/) | **钩子型开场** —— 多张图片逐张揭示后 hero takeover | `chapter.tsx` + `chapter.css` |
| [`list-reveal/`](list-reveal/) | **列举型** —— 口播说"三件事 / N 个特性"，每项 1 step | `chapter.tsx` + `chapter.css` |

每个 example 都是**完整章节**：**内容驱动主导动作** + 必要的伴随动作
（**不强求挂持续微动**，按 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
Part 0 原则 7 节制使用）、真素材（不是占位卡）、字号狠对比、绑了
`newsroom` 主题作为示范。

### B. 题材 case anchor（与题材相关）

| 例子 | 题材 | 文件 |
|---|---|---|
| [`case-tech-review/`](case-tech-review/) | 科技测评 / 实测对比 / 跑分类视频 | README + outline 节选 |

> 题材 case 展示**真实 outline 的样子**（含 article 补字段如何填、
> 章节切分如何决策）。拿到与某个 case 题材相似的需求时，先翻它再
> 写自己的 outline。

## 怎么用

### 写章节卡壳时

1. 看哪个 anchor 跟你这一章**结构最像**（钩子型 vs 列举型 vs 其它）
2. 翻 `README.md` 看这个例子的设计思路 + 节奏
3. 翻 `chapter.tsx` 看实现：JSX 结构、`step` 切分、用了哪些组件 / 类名
4. 翻 `chapter.css` 看动画用了哪些 keyframes、token、`infinite` 持续
   微动写在哪
5. 写自己这一章时**保留 anchor 的"形"，按本章内容 + 本主题气质换动画选型**

### 切换主题时

每个 example 的 README 末尾有"切到其它主题怎么换"的提示 —— 通常只需要
**换主导动作的形式**（newsroom 印章砸下 → terminal 打字机 → chalk
粉笔自绘），**结构、step 切分、字号关系不动**。

---

## ⚠️ 这两个 anchor 是"地板"，不是"天花板"

这两个例子已经引入印章砸下、stagger、accent 红条 —— 但**仍然是相对克
制的版本**。**鼓励你做得更狂、更"视频感"**：

### 进阶玩法（任选搭配）

| 维度 | 这俩 anchor 给的（地板） | 可以升级到（无上限） |
|---|---|---|
| 背景层 | 纯色 surface | + SVG turbulence filter 纸纹永不停斜向漂移 |
| 主导动作 | mask reveal + 印章砸下 | + Canvas 粒子从屏幕外汇聚成 hero 字 |
| 伴随动作 | accent 红条 scaleX | + SVG path stroke-dashoffset 自绘下划线 / 装饰花纹 |
| 持续微动 | accent 光晕呼吸 | + 多层粒子漂移 / scanline / ken burns 缓推 |
| 数字 hero | 直接显示 | + JS 数字滚动（`requestAnimationFrame` + easeOutQuart） |
| 流程 / 架构 | 仅文字列 | + SVG path 自绘流程图（每条线 stroke-dashoffset 错峰） |
| 对比图 | 两段文字 | + SVG 双柱图自绘 + 差值数字滚动 |
| 转场 | 章节边界硬切 | + clip-path inset 横向擦除转场 |

→ 详细工具箱见 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md) Part 2
"视觉手段全栈工具箱"（CSS / SVG / Canvas / JS 四层）。

### 实测原则

写章节时，**先实现 anchor 同等的地板版本**（按 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
Part 0 五问选好主导动作），跑起来确认气质对，**再决定要不要加伴随
动作 / 持续微动**。

**判断标准**：
- 如果不同 step 的主导动作够多样（PPT 警报通过 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
  Part 0 原则 7 自检）= 不需要再加持续微动
- 如果整章主导动作太单一 = 不要靠"加持续微动"补救，**回 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
  Part 1 五问换主导动作**才是正解（参 Part 5 第 8 条「整章只用一种入场动画」）

## 不在 EXAMPLES 里出现的章节类型

- **数字型 hero**（"+47%"  → "几乎快了一倍"）
- **对比型**（前后对照 / 双柱图）
- **链接卡片收尾**

这些场景的视觉原语已经在 [`../CHAPTER-CRAFT.md`](../CHAPTER-CRAFT.md)
Part 3 视觉工具箱（CSS / SVG / Canvas / JS 全栈）里覆盖了；按 anchor
的"形"组合即可。