[teamai] Push 87 resource(s) from XingfenD

.teamai/skills/common/web-video-presentation/references/EXAMPLES/hook-chapter/README.md

@@ -0,0 +1,86 @@
+# Anchor: hook-chapter（钩子型开场）
+
+> ⚠️ **这是结构示意，不是抄袭模板**。先走 [`../../CHAPTER-CRAFT.md`](../../CHAPTER-CRAFT.md)
+> Part 0 五问。本 anchor 给的是"钩子型开场的结构骨架"——你要保留它的
+> step 切分逻辑、字号关系、布局原则，**按本项目的主题 + 内容换动作
+> 选型**。倒过来照抄 = [`../../CHAPTER-CRAFT.md`](../../CHAPTER-CRAFT.md)
+> Part 5 第 8 条「整章只用一种入场动画」同质化反模式。
+
+## 定位
+
+视频开头最常用的章节类型：**抛 N 张可疑图 / 反例 / 截图 → 引出主题 →
+切大字 hero takeover**。
+
+## 适用场景
+
+- 悬念型开头：先甩 3~4 张让人怀疑 / 困惑的图，再揭示原因
+- "今天聊聊 X 的几个翻车现场"：先看翻车，再切主题
+- 产品发布的"问题感"开场：先看痛点截图，再揭示新功能
+
+## 假设的 outline.md 章节段（抽象）
+
+```markdown
+## 2. hook — <章节标题>（6 steps）
+
+- **step 1** (~4s) — N 张可疑图片占位（虚线 ghost 卡片）
+- **step 2** (~5s) — 第 1 张露出：<反例 1 描述>（独占视觉）
+- **step 3** (~5s) — 第 2 张露出：<反例 2 描述>（独占视觉）
+- **step 4** (~5s) — 第 3 张露出：<反例 3 描述>（独占视觉）
+- **step 5** (~4s) — 三张图同时缩入侧栏，中间出 <主题大字> takeover
+- **step 6** (~3s) — 切到下一句钩子（被 brush 划掉）
+```
+
+## 关键节奏决策
+
+| step | 节奏意图 | 视觉 |
+|---|---|---|
+| 1 | 抛悬念 —— N 张未知 | 虚线 ghost 卡片，1/3 屏一张 |
+| 2-N | **每张图独占视觉** —— 重点不是"凑数"，是让观众盯着每张图想"这是真的吗" | 大图占据 ~70% 屏幕，旁边小字标注图源 |
+| N+1 | takeover —— 揭示主题 | 三张缩成左侧迷你卡，中间巨字 |
+| 末 | 钩子收束 | brush 划掉旧概念，引下一章 |
+
+## 为什么 2-N 不能 stagger 同时上
+
+口播会**逐个念出来** —— 必须 1 项 = 1 step（[CHAPTER-CRAFT.md Part 0 原则 8](../../CHAPTER-CRAFT.md#8-多点内容必须逐个揭示绝不同时上)）。
+同时 stagger 上 = 观众扫一眼看完，讲者还在念第一张 = PPT 直觉。
+
+## 文件结构
+
+```
+hook-chapter/
+├── README.md       ← 本文件
+├── chapter.tsx     ← 完整章节示例 —— 默认绑 newsroom 主题
+└── chapter.css
+```
+
+## 关键手段（地板线）
+
+| 维度 | 这个 anchor 怎么实现 |
+|---|---|
+| 素材 | `<img src="/hook/<asset>.png" />` 真截图 |
+| 字号 | hero = 144px serif (`var(--t-display-1)`) |
+| 主导动作 | brush-stroke + 印章砸下（newsroom 气质） |
+| 伴随动作 | accent 红条 scaleX + 副标 stagger 200ms |
+| 持续微动 | accent 红条光晕 `infinite` 呼吸；图片 ken burns 缓推 |
+| 卡片样式 | drop-shadow + 微旋转 1deg |
+| takeover | 三张图缩入 + hero 巨字爆出 + accent 红条贯穿 |
+
+> **新写章节时**：抄结构和字号关系，按本章内容 + 本主题气质自由
+> 设计动画形式。**持续微动按需挂**，不强求 —— 详见
+> [`../../CHAPTER-CRAFT.md`](../../CHAPTER-CRAFT.md)「避免 AI 味」一节
+> 关于「每步都挂 ken burns / 持续闪烁」的反模式。
+
+## 切到其它主题时
+
+- `bauhaus-bold` → brush 划掉换 hard-cut 大色块；hero 字体换 Archivo Black
+- `terminal-green` → 三张图换"FILE_001/002/003"占位框；hero 用打字机
+- `chalk-garden` → 粉笔感虚线 + 慢速 wiggle 入场
+- `midnight-press` → blur clear 慢镜入场 + ken burns + scanline；
+  takeover 改"主标 blur 锐化 + 暖橙光晕呼吸"
+
+**结构（N+2 步、独占节奏、takeover、收束）保持不变。**
+
+## 想看具象题材应用
+
+- 科技测评 / 实测对比类视频用这个 anchor 开场长什么样 →
+  [`../case-tech-review/`](../case-tech-review/)

.teamai/skills/common/web-video-presentation/references/EXAMPLES/hook-chapter/chapter.css

@@ -0,0 +1,197 @@
+/* ─────────────────────────────────────────────────────────────────
+ * hook-chapter · 完整章节示例样式
+ * 默认绑 newsroom 主题。所有视觉属性走语义 token，零硬编码。
+ * ───────────────────────────────────────────────────────────────── */
+
+.hk-scene {
+  color: var(--text);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* ── kicker ── */
+.hk-kicker {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-6);
+  font-family: var(--font-mono);
+  font-size: var(--t-cue);
+  color: var(--accent);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.hk-kicker-line {
+  width: 64px;
+  height: 2px;
+  background: var(--accent);
+}
+
+/* ── step 1 三 ghost ── */
+.hk-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-5);
+  align-items: center;
+}
+.hk-ghost {
+  aspect-ratio: 16 / 9;
+  border: var(--rule-w) dashed var(--rule);
+  border-radius: var(--r-card);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  padding: var(--space-4);
+  background: var(--surface);
+}
+.hk-ghost-num {
+  font-family: var(--font-mono);
+  font-size: var(--t-h2);
+  color: var(--text-mute);
+  letter-spacing: 0.08em;
+}
+.hk-ghost-label {
+  font-family: var(--font-mono);
+  font-size: var(--t-cue);
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  align-self: end;
+}
+
+/* ── step 2-4 单图独占 ── */
+.hk-solo-frame {
+  width: 78%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.hk-solo-img-wrap {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--r-card);
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+  background: var(--surface-2);
+}
+.hk-solo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.hk-stamp {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  padding: var(--space-2) var(--space-3);
+  border: 3px solid var(--accent);
+  color: var(--accent);
+  font-family: var(--font-display-en);
+  font-size: var(--t-h3);
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  transform: rotate(-8deg);
+  background: color-mix(in oklch, var(--surface) 60%, transparent);
+  animation: hk-stamp-drop var(--dur-base) var(--ease-quart) backwards;
+  animation-delay: 600ms;
+}
+@keyframes hk-stamp-drop {
+  0%   { transform: rotate(-8deg) scale(2.4); opacity: 0; }
+  60%  { transform: rotate(-8deg) scale(0.92); opacity: 1; }
+  100% { transform: rotate(-8deg) scale(1); }
+}
+.hk-solo-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-family: var(--font-mono);
+  font-size: var(--t-cue);
+  color: var(--text-2);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.hk-solo-label  { color: var(--accent); }
+.hk-solo-caption {
+  font-family: var(--font-display-cn);
+  font-size: var(--t-body);
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+/* ── step 5 takeover ── */
+.hk-takeover {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6);
+  justify-content: center;
+}
+.hk-mini-row {
+  display: flex;
+  gap: var(--space-3);
+}
+.hk-mini {
+  width: 140px;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  border-radius: calc(var(--r-card) * 0.5);
+  box-shadow: var(--shadow-card);
+  animation: hk-mini-shrink var(--dur-base) var(--ease-quart) backwards;
+}
+@keyframes hk-mini-shrink {
+  from { transform: scale(2.4); opacity: 0; }
+  to   { transform: scale(1);  opacity: 1; }
+}
+.hk-accent-bar {
+  width: 60%;
+  height: 4px;
+  background: var(--accent);
+  animation: hk-bar-grow 700ms var(--ease-quart) 250ms backwards;
+}
+@keyframes hk-bar-grow {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+.hk-hero {
+  margin: 0;
+  font-family: var(--font-display-en);
+  font-size: var(--t-display-1);
+  letter-spacing: -0.025em;
+  color: var(--text);
+  line-height: 0.95;
+}
+
+/* ── step 6 close + brush ── */
+.hk-close {
+  display: grid;
+  place-items: center;
+}
+.hk-quote-wrap {
+  position: relative;
+  display: inline-block;
+}
+.hk-quote {
+  margin: 0;
+  font-family: var(--font-display-cn);
+  font-size: var(--t-display-2);
+  color: var(--text);
+}
+.hk-brush {
+  position: absolute;
+  left: -4%;
+  right: -4%;
+  top: 50%;
+  height: 0.18em;
+  background: var(--accent);
+  transform-origin: left center;
+  transform: scaleX(0) translateY(-50%);
+  animation: hk-brush-strike 700ms var(--ease-expo) 500ms forwards;
+}
+@keyframes hk-brush-strike {
+  to { transform: scaleX(1) translateY(-50%); }
+}

.teamai/skills/common/web-video-presentation/references/EXAMPLES/hook-chapter/chapter.tsx

@@ -0,0 +1,125 @@
+// ⚠️ 这是 anchor 参考代码，不会被任何项目编译。
+//    抄到真实项目时（presentation/src/chapters/NN-hook/），
+//    把下面两个 import 改成：
+//      import { MaskReveal } from "../../components/MaskReveal";
+//      import type { ChapterStepProps } from "../../registry/types";
+import { MaskReveal } from "../../../templates/src/components/MaskReveal";
+import type { ChapterStepProps } from "../../../templates/src/registry/types";
+import "./chapter.css";
+
+/**
+ * hook-chapter · 完整章节示例
+ * ─────────────────────────────────────────
+ * 默认绑 newsroom 主题（serif + 报头红 + 印刷盖章 motion）。
+ *
+ * 关键手段：
+ * - 真素材：<img src="/hook/{name}.png" /> 而不是 placeholder
+ * - 字号狠对比：hero 用 --t-display-1（≥ 144px）+ 微微负字距
+ * - 主导动作：mask reveal + 印章砸下（贴 newsroom 印刷气质）
+ * - takeover：三张图缩入 + 巨字爆出 + accent 红条贯穿
+ * - 收束：brush 划掉旧概念
+ *
+ * 切其它主题时按那个主题的气质自由换"印章砸下 / brush"等效动作，
+ * 结构和字号节奏保持。
+ */
+export default function HookChapter({ step }: ChapterStepProps) {
+  // step 1 — 三张 ghost（精修：加 kicker 引子 + accent 红条）
+  if (step === 0) {
+    return (
+      <div className="hk-scene scene-pad">
+        <div className="hk-kicker">
+          <span className="hk-kicker-line" />
+          <span className="hk-kicker-text">这几天</span>
+        </div>
+        <div className="hk-grid" key={step}>
+          {["01", "02", "03"].map((i, idx) => (
+            <MaskReveal show key={i} delay={idx * 200} duration={900}>
+              <div className="hk-ghost">
+                <span className="hk-ghost-num">{i}</span>
+                <span className="hk-ghost-label">image</span>
+              </div>
+            </MaskReveal>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // step 2-4 — 每张图独占（真素材 + 角章 + 旁白）
+  // ⚠️ 这是结构示例。具体反例 caption / src 应该来自 outline.md 本章
+  //    article 补字段（双源原则）—— 别照抄下面这些占位字符串。
+  const reveals: Array<{ src: string; label: string; caption: string }> = [
+    {
+      src: "/hook/<asset-1>.png",
+      label: "01 / 03",
+      caption: "<反例 1 caption，来自 article §X>",
+    },
+    {
+      src: "/hook/<asset-2>.png",
+      label: "02 / 03",
+      caption: "<反例 2 caption>",
+    },
+    {
+      src: "/hook/<asset-3>.png",
+      label: "03 / 03",
+      caption: "<反例 3 caption>",
+    },
+  ];
+  if (step >= 1 && step <= 3) {
+    const r = reveals[step - 1];
+    return (
+      <div className="hk-scene scene-pad" key={step}>
+        <div className="hk-solo-frame">
+          <MaskReveal show duration={1100}>
+            <div className="hk-solo-img-wrap">
+              <img className="hk-solo-img" src={r.src} alt={r.caption} />
+              <div className="hk-stamp">FAKE?</div>
+            </div>
+          </MaskReveal>
+          <MaskReveal show delay={400} duration={900}>
+            <div className="hk-solo-meta">
+              <span className="hk-solo-label">{r.label}</span>
+              <span className="hk-solo-caption">{r.caption}</span>
+            </div>
+          </MaskReveal>
+        </div>
+      </div>
+    );
+  }
+
+  // step 5 — takeover：三张缩入 + 巨字爆出 + accent 红条
+  if (step === 4) {
+    return (
+      <div className="hk-scene scene-pad hk-takeover" key={step}>
+        <div className="hk-mini-row">
+          {reveals.map((r, idx) => (
+            <img
+              key={r.src}
+              className="hk-mini"
+              src={r.src}
+              alt={r.caption}
+              style={{ animationDelay: `${idx * 80}ms` }}
+            />
+          ))}
+        </div>
+        <span className="hk-accent-bar" />
+        <h1 className="hk-hero">
+          <MaskReveal show duration={1100}>
+            {/* hero 文案来自 outline 本章 step 5；这里只是占位 */}
+            &lt;主题大字 takeover&gt;
+          </MaskReveal>
+        </h1>
+      </div>
+    );
+  }
+
+  // step 6 — 钩子收束：brush 划掉
+  return (
+    <div className="hk-scene scene-pad hk-close" key={step}>
+      <div className="hk-quote-wrap">
+        <h2 className="hk-quote">&lt;下一句钩子&gt;</h2>
+        <span className="hk-brush" aria-hidden />
+      </div>
+    </div>
+  );
+}