dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/shotcraft/upstream/references/shots/typography/vertical-word-roll-blur-cycle.md

@@ -1,63 +1,63 @@
----
-name: vertical-word-roll-blur-cycle
-一句话: 句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色
-适用: "Crafted for ___" / "Built for ___" 这类句干 + 受众/对象列举的一句话卖点；浅底品牌片的干净一拍
-时长: 约 5.0s（150f@30fps：静置 → 3 次换词 → 尾部整组淡出）
-能量: 中（稳定三拍，无峰值）
----
-
-## 意图
-句尾换词的最优解是滚轮而不是淡入淡出：滚轮自带**方向**（往上翻页），
-观众知道"还有下一个"。这卡的两个身份记号是相邻行的**垂直 blur**
-（滚轮景深，模拟机械转筒的失焦）和落定时的**染色**（灰→强调色，
-"这个才是答案"）。句干（demo `Crafted for`）全程纹丝不动——眼睛钉在滚轮上，
-句干一晃列举感就散。
-
-## 动效核心
-- 位置量 `p` 由 3 段窗累加：`STEPS = [0.16, 0.36, 0.56]`，每段窗 0.11
-  （≈16f，约 0.55s），段间留 0.09 静置给观众读词
-- 每段缓动是**混合曲线**：`0.7·E.outQuint(u) + 0.3·E.outBack(u)`——
-  outQuint 给"前快后极慢"的机械减速，outBack 那三成给落定的微过冲回落
-- reel 定位 `translateY(ROW - p·ROW)`，ROW=44px，mask 高 `ROW·3`=132px
-  （露三行）——中心行恒定是 mask 第二行
-- 距离驱动的三通道，`d = |i - p|`：
-  - blur：`d<1` 时 `3d`，`d≥1` 时 `3 + 2·min(d-1,1)`（最远 5px）；demo 用 SVG
-    `feGaussianBlur stdDeviation="0 b"` 只糊纵向，转动时再按滚轮速度叠 ≤4px 纵向运动模糊（静止为 0）
-  - opacity：`d<1` 时 `1 - 0.65d`，否则 `max(0.1, 0.35 - 0.23(d-1))`
-  - 颜色：`mixHex(ACCENT_DIM, ACCENT, clamp01(1 - 2.4d))` —— **d>0.42 就完全
-    是暗色**，所以只有真正落定的那一刻才是强调色，滚动中途全程灰
-- 收尾 `seg(t, 0.9, 0.985)` 整组（句干 + 滚轮）淡出，不留残影给下一镜
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 词表 | 4 词（Launches→Demos→Promos→Every Shot），3 次换词 | 末词是结论（最宽那个词），前三个是例子；>5 词观众开始数，<3 词读不出"列举" |
-| 拍点 | `[0.16, 0.36, 0.56]`，窗 0.11（≈16f） | 段间 0.09（≈13f）静置是给读词的，读不完的拍子等于没换；窗 >0.18 新旧同屏太久 |
-| 缓动配方 | `0.7·outQuint + 0.3·outBack` | outQuint 是机械减速的来源；outBack 那三成给落定"咔"一下，纯 outQuint 读作电子屏滑动 |
-| 行高/视窗 | ROW 44px、mask `44×3`px、词宽 190px | 露三行才有滚筒感（露一行读作淡入淡出）；宽度写死 190 是为不挤句干，词更长要同步加 |
-| 相邻行 blur | 邻行 3px，最远 5px，**仅垂直向感知** | blur 是"滚筒景深"的身份证，删了退化成词条平移；>8px 邻行糊成灰条看不出是字 |
-| 落定染色 | `1 - 2.4d` 映射 ACCENT_DIM→ACCENT | 系数 2.4 让染色只发生在落定瞬间；<1.5 滚动中途就上色，答案感散掉 |
-| 字号字重 | 句干与滚轮同为 30px/800、`letter-spacing:-.5px` | 必须完全一致——滚轮词比句干大就读作两个元素，不是一句话 |
-| 收尾淡出 | `seg(t, 0.9, 0.985)` 整组 | 末词落定后约 40f 静置再淡出；不 hold 等于白列举 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- **mask 宽度写死 190px**：换词表时最长词（demo `Every Shot`，带空格的词组要 `white-space: nowrap`）必须能装进去，
-  否则被裁字；反之词都很短则右侧留大片空白，句子重心偏左——换词表必须
-  重量一次宽度
-- 词长差别不宜过大：mask 宽度是固定的（本卡不做宽度自适应，那是
-  pill-chip-slot-cycle-handled 的活），词长差 >2 倍时短词在框里显得孤立
-- 句干必须钉死：demo 用 `flex + gap:14px` 是因为 mask 宽度恒定不会推挤
-  句干——一旦改成宽度自适应的滚轮，就必须换成绝对定位锚左端，
-  否则句干随词宽左右甩
-- `p` 是三段窗**累加**出来的，所以三段窗不能重叠：重叠会让 p 在一帧内
-  跨越一整行，滚轮"跳格"
-- 与 pill-chip-slot-cycle-handled 分工：那卡是深色胶囊 + 宽度自适应挤开
-  （词是徽章），本卡是裸词滚轮（词是句子成分）——同片只留一个
-- 声音：每次落定是一个节奏点，配轻机械/开关音；三连发要交替双样本
-  防机枪感，配法纪律见 sound-design.md
-
-## 参考实现
-demos/typography/vertical-word-roll-blur-cycle/
-（VerticalWordRollBlurCycle.tsx）
+---
+name: vertical-word-roll-blur-cycle
+一句话: 句尾词换成竖向滚轮，3 次换词各 0.55s（outQuint 七成 + outBack 三成，前快后极慢带微过冲），相邻行按距离上垂直 blur 与灰度，中心词落定瞬间从灰染成强调色
+适用: "Crafted for ___" / "Built for ___" 这类句干 + 受众/对象列举的一句话卖点；浅底品牌片的干净一拍
+时长: 约 5.0s（150f@30fps：静置 → 3 次换词 → 尾部整组淡出）
+能量: 中（稳定三拍，无峰值）
+---
+
+## 意图
+句尾换词的最优解是滚轮而不是淡入淡出：滚轮自带**方向**（往上翻页），
+观众知道"还有下一个"。这卡的两个身份记号是相邻行的**垂直 blur**
+（滚轮景深，模拟机械转筒的失焦）和落定时的**染色**（灰→强调色，
+"这个才是答案"）。句干（demo `Crafted for`）全程纹丝不动——眼睛钉在滚轮上，
+句干一晃列举感就散。
+
+## 动效核心
+- 位置量 `p` 由 3 段窗累加：`STEPS = [0.16, 0.36, 0.56]`，每段窗 0.11
+  （≈16f，约 0.55s），段间留 0.09 静置给观众读词
+- 每段缓动是**混合曲线**：`0.7·E.outQuint(u) + 0.3·E.outBack(u)`——
+  outQuint 给"前快后极慢"的机械减速，outBack 那三成给落定的微过冲回落
+- reel 定位 `translateY(ROW - p·ROW)`，ROW=44px，mask 高 `ROW·3`=132px
+  （露三行）——中心行恒定是 mask 第二行
+- 距离驱动的三通道，`d = |i - p|`：
+  - blur：`d<1` 时 `3d`，`d≥1` 时 `3 + 2·min(d-1,1)`（最远 5px）；demo 用 SVG
+    `feGaussianBlur stdDeviation="0 b"` 只糊纵向，转动时再按滚轮速度叠 ≤4px 纵向运动模糊（静止为 0）
+  - opacity：`d<1` 时 `1 - 0.65d`，否则 `max(0.1, 0.35 - 0.23(d-1))`
+  - 颜色：`mixHex(ACCENT_DIM, ACCENT, clamp01(1 - 2.4d))` —— **d>0.42 就完全
+    是暗色**，所以只有真正落定的那一刻才是强调色，滚动中途全程灰
+- 收尾 `seg(t, 0.9, 0.985)` 整组（句干 + 滚轮）淡出，不留残影给下一镜
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 词表 | 4 词（Launches→Demos→Promos→Every Shot），3 次换词 | 末词是结论（最宽那个词），前三个是例子；>5 词观众开始数，<3 词读不出"列举" |
+| 拍点 | `[0.16, 0.36, 0.56]`，窗 0.11（≈16f） | 段间 0.09（≈13f）静置是给读词的，读不完的拍子等于没换；窗 >0.18 新旧同屏太久 |
+| 缓动配方 | `0.7·outQuint + 0.3·outBack` | outQuint 是机械减速的来源；outBack 那三成给落定"咔"一下，纯 outQuint 读作电子屏滑动 |
+| 行高/视窗 | ROW 44px、mask `44×3`px、词宽 190px | 露三行才有滚筒感（露一行读作淡入淡出）；宽度写死 190 是为不挤句干，词更长要同步加 |
+| 相邻行 blur | 邻行 3px，最远 5px，**仅垂直向感知** | blur 是"滚筒景深"的身份证，删了退化成词条平移；>8px 邻行糊成灰条看不出是字 |
+| 落定染色 | `1 - 2.4d` 映射 ACCENT_DIM→ACCENT | 系数 2.4 让染色只发生在落定瞬间；<1.5 滚动中途就上色，答案感散掉 |
+| 字号字重 | 句干与滚轮同为 30px/800、`letter-spacing:-.5px` | 必须完全一致——滚轮词比句干大就读作两个元素，不是一句话 |
+| 收尾淡出 | `seg(t, 0.9, 0.985)` 整组 | 末词落定后约 40f 静置再淡出；不 hold 等于白列举 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- **mask 宽度写死 190px**：换词表时最长词（demo `Every Shot`，带空格的词组要 `white-space: nowrap`）必须能装进去，
+  否则被裁字；反之词都很短则右侧留大片空白，句子重心偏左——换词表必须
+  重量一次宽度
+- 词长差别不宜过大：mask 宽度是固定的（本卡不做宽度自适应，那是
+  pill-chip-slot-cycle-handled 的活），词长差 >2 倍时短词在框里显得孤立
+- 句干必须钉死：demo 用 `flex + gap:14px` 是因为 mask 宽度恒定不会推挤
+  句干——一旦改成宽度自适应的滚轮，就必须换成绝对定位锚左端，
+  否则句干随词宽左右甩
+- `p` 是三段窗**累加**出来的，所以三段窗不能重叠：重叠会让 p 在一帧内
+  跨越一整行，滚轮"跳格"
+- 与 pill-chip-slot-cycle-handled 分工：那卡是深色胶囊 + 宽度自适应挤开
+  （词是徽章），本卡是裸词滚轮（词是句子成分）——同片只留一个
+- 声音：每次落定是一个节奏点，配轻机械/开关音；三连发要交替双样本
+  防机枪感，配法纪律见 sound-design.md
+
+## 参考实现
+demos/typography/vertical-word-roll-blur-cycle/
+（VerticalWordRollBlurCycle.tsx）

package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-filmstrip.md

@@ -1,57 +1,57 @@
----
-name: word-relay-filmstrip
-一句话: 左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐
-适用: "一个主体 × 多种能力"的枚举段（Shotcraft frames/builds/ships…）；作品集/案例流展示；产品多场景巡礼
-时长: 每词期 ~1.5–2s × 3–4 词；demo 180f（6s）
-能量: 中低（编辑部气质，节奏靠切词的"咔哒"感）
-标签: ui-entrance
----
-
-## 意图
-左边是证据（页面截图胶片），右边是论点（大词）：动词换一次，
-胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**：
-左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作），
-持续滚动会让左列沦为背景装饰、切词失去"咔哒"感。第二命门是
-**对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级），
-歪了整个版式的"编辑部严谨感"就塌了。
-
-## 动效核心
-- 舞台：graphite 近单色暗场 + 金色点缀；左列：等高页面卡（940×530，间距 105）纵向排列，
-  黑白（深浅）强制相间以显滚动步进；切词窗口内 18f 不对称 in-out（EASE.swift）滚动恰好一卡高，
-  其余时间零位移，快段叠纵向运动模糊
-- 景深：按离焦点距离 `dist = |卡顶 - 275| / 635`，邻卡压暗 `0.68·dist`、缩到 0.94、虚化 ≤3px——
-  步进时新证据"对焦"进来
-- 右侧：衬线体（Didot 类，140px）两行——主体名词「Shotcraft」正体次级墨恒定，动词斜体白字原位接力：
-  旧词 10f 灰化 → 切点起 8f ease-in 从遮罩上沿升出（先出），新词切点 +7f 起逐字母从遮罩下沿升起
-  （1.2f 错峰，金色句点最后到，后进），先出后进不许叠影（判例：v2 叠影"resebuilds"被抓）
-- 金色引线：从焦点卡右缘指向词块中线 y=540，切词起 6f 收回、切点 +10f 后 16f 重画；
-  词块上方 mono 序号 01/03、下方 32px 证据注脚随动词同步接力
-- 对齐：词块两行各一个 154px 行盒，`top = 540 - 154`，总高中心 = 当前卡顶 + 卡高/2 = y540@1080p
-  （精确到个位像素）
-- 滚动与切词同步：滚动起点=旧词开始灰化，滚动终点=新词落稳
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 页面卡 | 等高（530px@1080p）、黑白相间、约半屏宽 | 不等高/同色系读不出步进；卡太窄失去"证据"分量 |
-| 词期 | ~45–60f/词 | <40f 读不完词+胶片看不清；词期不必均匀 |
-| 滚动窗口 | ~16–18f 不对称 in-out，恰一卡高 | 持续滚动=命门违例；滚过头/不足读作机械故障 |
-| 词接力 | 旧词灰化后 8f 升出 → 切点 +7f 新词逐字母升起（16f/字母，1.2f 错峰） | 同帧交叉必叠影；间隙 >10f 读作断片 |
-| 垂直对齐 | 词块中心=当前卡中点（像素级） | 用户单点意见"文字高度和中间的页面中点要对齐"；差 >8px 可感 |
-| 字体 | 衬线 Didot 类、动词斜体白字 / 名词正体次级墨 | 无衬线会丢"编辑部"气质；动词要比名词亮，它才是换的那一个 |
-| 邻卡离焦 | 压暗 0.68·dist、缩 6%、虚化 ≤3px | 不压暗则邻卡和焦点卡抢戏；虚化 >5px 读不出是页面 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 与 text-column-converge 分工：那张是左右对峙合拢的揭晓戏；
-  本卡是纵向证据流+原位接力，无合拢无揭晓
-- 与 pill-slot-cycle 分工：那张是胶囊槽位轮换 UI 元素；
-  本卡是版式级的图文对位系统
-- 实战素材：页面卡应使用真实截图（demo 为手搓假页面——分镜脚本 / 渲染流水线 / 成片 PR 评审，每个动词停在
-  与之对应的证据卡上，残余差距已知）；截图亮度要人工分档保证相间可读
-
-## 参考实现
-demos/typography/word-relay-filmstrip/
-（WordRelayFilmstrip.tsx）
-原片出处：perplexity-promo.mp4 ≈76–90s
+---
+name: word-relay-filmstrip
+一句话: 左列黑白相间等高页面卡步进滚动（焦点卡全亮、邻卡离焦压暗）、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐
+适用: "一个主体 × 多种能力"的枚举段（Shotcraft frames/builds/ships…）；作品集/案例流展示；产品多场景巡礼
+时长: 每词期 ~1.5–2s × 3–4 词；demo 180f（6s）
+能量: 中低（编辑部气质，节奏靠切词的"咔哒"感）
+标签: ui-entrance
+---
+
+## 意图
+左边是证据（页面截图胶片），右边是论点（大词）：动词换一次，
+胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**：
+左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作），
+持续滚动会让左列沦为背景装饰、切词失去"咔哒"感。第二命门是
+**对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级），
+歪了整个版式的"编辑部严谨感"就塌了。
+
+## 动效核心
+- 舞台：graphite 近单色暗场 + 金色点缀；左列：等高页面卡（940×530，间距 105）纵向排列，
+  黑白（深浅）强制相间以显滚动步进；切词窗口内 18f 不对称 in-out（EASE.swift）滚动恰好一卡高，
+  其余时间零位移，快段叠纵向运动模糊
+- 景深：按离焦点距离 `dist = |卡顶 - 275| / 635`，邻卡压暗 `0.68·dist`、缩到 0.94、虚化 ≤3px——
+  步进时新证据"对焦"进来
+- 右侧：衬线体（Didot 类，140px）两行——主体名词「Shotcraft」正体次级墨恒定，动词斜体白字原位接力：
+  旧词 10f 灰化 → 切点起 8f ease-in 从遮罩上沿升出（先出），新词切点 +7f 起逐字母从遮罩下沿升起
+  （1.2f 错峰，金色句点最后到，后进），先出后进不许叠影（判例：v2 叠影"resebuilds"被抓）
+- 金色引线：从焦点卡右缘指向词块中线 y=540，切词起 6f 收回、切点 +10f 后 16f 重画；
+  词块上方 mono 序号 01/03、下方 32px 证据注脚随动词同步接力
+- 对齐：词块两行各一个 154px 行盒，`top = 540 - 154`，总高中心 = 当前卡顶 + 卡高/2 = y540@1080p
+  （精确到个位像素）
+- 滚动与切词同步：滚动起点=旧词开始灰化，滚动终点=新词落稳
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 页面卡 | 等高（530px@1080p）、黑白相间、约半屏宽 | 不等高/同色系读不出步进；卡太窄失去"证据"分量 |
+| 词期 | ~45–60f/词 | <40f 读不完词+胶片看不清；词期不必均匀 |
+| 滚动窗口 | ~16–18f 不对称 in-out，恰一卡高 | 持续滚动=命门违例；滚过头/不足读作机械故障 |
+| 词接力 | 旧词灰化后 8f 升出 → 切点 +7f 新词逐字母升起（16f/字母，1.2f 错峰） | 同帧交叉必叠影；间隙 >10f 读作断片 |
+| 垂直对齐 | 词块中心=当前卡中点（像素级） | 用户单点意见"文字高度和中间的页面中点要对齐"；差 >8px 可感 |
+| 字体 | 衬线 Didot 类、动词斜体白字 / 名词正体次级墨 | 无衬线会丢"编辑部"气质；动词要比名词亮，它才是换的那一个 |
+| 邻卡离焦 | 压暗 0.68·dist、缩 6%、虚化 ≤3px | 不压暗则邻卡和焦点卡抢戏；虚化 >5px 读不出是页面 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 text-column-converge 分工：那张是左右对峙合拢的揭晓戏；
+  本卡是纵向证据流+原位接力，无合拢无揭晓
+- 与 pill-slot-cycle 分工：那张是胶囊槽位轮换 UI 元素；
+  本卡是版式级的图文对位系统
+- 实战素材：页面卡应使用真实截图（demo 为手搓假页面——分镜脚本 / 渲染流水线 / 成片 PR 评审，每个动词停在
+  与之对应的证据卡上，残余差距已知）；截图亮度要人工分档保证相间可读
+
+## 参考实现
+demos/typography/word-relay-filmstrip/
+（WordRelayFilmstrip.tsx）
+原片出处：perplexity-promo.mp4 ≈76–90s

package/lib/motion/shotcraft/upstream/references/shots/typography/word-relay-geometry.md

@@ -1,75 +1,75 @@
----
-name: word-relay-geometry
-一句话: 三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示
-适用: 三点式利益陈述（更快/更好/更强）；品牌价值观段落；需要"一词一世界"的中段推进
-时长: 约 6.0s（180f@30fps：三段各 ≈60f，段间重叠 6f）
-能量: 中高（三拍推进 + 全程几何运动 + 背景粒子，无静止帧）
----
-
-## 意图
-三点式利益陈述最容易做成三张字卡硬切。接力的做法是给每个词配一套
-**只属于它的几何**：虚线圆是"在转"（快）、三圆相扣并收拢是"互相咬合"（紧 / 好）、
-金属扫光是"材质硬"（强）——几何本身就在替形容词做论证。第三个词
-留了升格待遇（sheen 扫光 + 收白），因为它是结论。背景微尘、共用舞台光与底部
-三段进度条把三拍缝成一个连续空间，不然还是三张卡。
-
-## 动效核心
-（demo 版本：石墨暗场电影字卡，词表 Faster / Tighter / Stronger，1920×1080 原生坐标）
-- 三段按帧排：Faster 2→62、Tighter 56→122、Stronger 116→180；每段入场 14f（snappy，
-  `scale 1.06→1` + 10px 去虚）、出场 10f（exit 强 ease-in，`scale 1→0.86` + 12px 退焦），
-  交接重叠 6f 是交棒而非硬切；末段无出场，收白后 hold 22f
-- 每词三层文字（230px/800，静态字库 Helvetica Neue）：`outline` 层 `-webkit-text-stroke:2px`
-  + 透明填充，`fill` 层纯白——**描边先到位，填充后揭示**；三层共用 `padding: 0.08em 0.1em 0.28em`，
-  否则 mask / background-clip 只画在盒内，会裁掉 g 的下伸部与末字右沿、露出底下的描边层
-- 前两词的填充是 ±7% 柔边 `mask-image` 横向擦入（入场后 10f 起、18f，swift），描边层透明度
-  同步降到 0.2 留一点重影
-- Faster 的几何：虚线大圆（r=400、`dash 10 16`）+ 外圈 120 格刻度环（r=452，反向慢转），
-  入场 22f 从 0.4 snappy 长到 1，同时多转 160° 减速刹住（飞轮感），之后匀速慢转永不停；一道 16 段
-  渐隐的白色彗星弧沿 r=400 以 7.5°/帧飞跑——"快"由两层相对转速 + 彗星的速度差读出
-- Tighter 的几何：三实线圆（r=218）`pathLength=1` + dashoffset trim 生长，起笔绕各自圆心
-  `rotate(-90 cx 0)`，延迟 0/6/12f、各 22f（out），笔头一粒发光点长满即熄；92f 起三圆间距
-  340→300 收拢 14f（swift），落定时圆线提亮一次、四个相交点亮起菱形铆钉光点（overshoot 弹出）
-  ——"紧"是看得见的收拢动作
-- Stronger 无几何：120f 起描边 → 竖向镀铬渐变（亮顶—暗腰—亮底）；124→148f 一道带香槟暖色的
-  窄白带（`100deg`、`background-size:300%`）从左扫到右；146→158f 收成纯白 + 一次泛光脉冲，
-  脚下横向光带从 0.2 宽 snappy 展开，舞台主光同拍提亮——结论词独享的升格待遇
-- 词下 40px 副句给产品证据（rise 逐词升起，demo 是 video-shotcraft 的三句宣传），左上 mono 计数「01 / 03」、
-  右上镜刻标志 + video-shotcraft 小写字标、底部三段进度条（label 级纹理）；
-  相机全程 1→1.025 smooth 极缓推进（不抖）
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 三段时段 | 各 ≈60f，重叠 6f | 每词约 2s 是"读词 + 看几何"的下限；重叠 <3f 读作硬切，>12f 两词同屏打架 |
-| 入/出场窗 | 入 14f snappy / 出 10f exit | 出场比入场短是对的（退场要决绝）；出场用 out 曲线会读作"舍不得走" |
-| outline→fill | 18f swift，±7% 柔边，outline 留 0.2 | 留一点描边做重影是质感来源，降到 0 字变扁；窗 >30f 擦入慢得像加载条 |
-| 虚线圆 | r=400、`dash 10 16`、scale 0.4→1、入场多转 160° 刹住 | 刹车是"快"的第一证据；scale 起点 >0.7 就没有"长出来" |
-| 彗星弧 | 7.5°/帧、16 段渐隐 | 比环快 8 倍以上才读得出"速度差"；段数 <8 尾巴断成虚线 |
-| trim 生长 | 延迟 6f/圆、各 22f | 相位差是"依次相扣"的关键，同时生长读作三个独立圆 |
-| 收拢 | 间距 340→300（14f swift）+ 交点铆钉 | 收拢量 <20px 看不出动作；>60px 三圆挤成一坨 |
-| sheen 扫光 | `100deg`、`background-size:300%`、24f smooth | 300% 保证白带只占字宽一小段（=金属高光）；镀铬底层不能省，否则扫光前是一块灰字 |
-| 收白 | 12f + 泛光脉冲 + 脚下光带 | 这一下是全片唯一的"结论"待遇；删了三个词就是平级，第三点没有落点 |
-| 字号配色 | 词 230px/800、副句 40px、几何 `rgba(236,238,244,.42)`、graphite 暗场 | 几何比字暗一档是层级，几何比字亮就抢主角 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- **三个词必须是同一句法的三点（demo 都是比较级单词，6–8 字母）**：
-  时段是等长的，词长差大时几何（圆半径、间距）都是写死的坐标，
-  长词会顶出虚线圆或压到相扣圆上——换词表要同步调 r 与收拢间距
-- `-webkit-text-stroke` 是前缀属性：Chromium/WebKit 才有，Firefox 下描边层
-  直接是透明（词消失）。Remotion 渲染走 Chromium 无碍，但预览环境要注意
-- SVG trim 用的 `pathLength=1` 归一化在部分老版本浏览器上对 `<circle>`
-  支持不全，退化表现是圆一次性全画出（丢生长感）——移植时先在目标
-  渲染器上验一帧
-- 出场 trim 是"入场 trim 减出场 seg"直接相减：两段窗若靠得太近
-  （段长 <40f）会出现还没长完就开始收，圆只画出一小段
-- sheen 层与 fill 层是叠着的两个 DOM：切换靠透明度交叉，若把 `white` 窗
-  与 `sh` 窗调成重叠不足，会有 1–2 帧两层都半透（字发灰）
-- 第三个词的升格待遇只能给一次：全片三个词都上 sheen 就没有结论感
-  （P4 手法去重精神）；声音上三次入场是三个节奏点，第三个词的收白值得
-  单独一记重音，配法纪律见 sound-design.md
-
-## 参考实现
-demos/typography/word-relay-geometry/
-（WordRelayGeometry.tsx）
+---
+name: word-relay-geometry
+一句话: 三个利益词各带一套专属几何接力——虚线大圆减速自转 + 彗星弧飞跑 → 三实线圆 trim 依次生长后收拢咬紧 → 镀铬金属 sheen 扫过后一拍收成纯白；旧词缩到 0.86 淡出，新词描边→填充揭示
+适用: 三点式利益陈述（更快/更好/更强）；品牌价值观段落；需要"一词一世界"的中段推进
+时长: 约 6.0s（180f@30fps：三段各 ≈60f，段间重叠 6f）
+能量: 中高（三拍推进 + 全程几何运动 + 背景粒子，无静止帧）
+---
+
+## 意图
+三点式利益陈述最容易做成三张字卡硬切。接力的做法是给每个词配一套
+**只属于它的几何**：虚线圆是"在转"（快）、三圆相扣并收拢是"互相咬合"（紧 / 好）、
+金属扫光是"材质硬"（强）——几何本身就在替形容词做论证。第三个词
+留了升格待遇（sheen 扫光 + 收白），因为它是结论。背景微尘、共用舞台光与底部
+三段进度条把三拍缝成一个连续空间，不然还是三张卡。
+
+## 动效核心
+（demo 版本：石墨暗场电影字卡，词表 Faster / Tighter / Stronger，1920×1080 原生坐标）
+- 三段按帧排：Faster 2→62、Tighter 56→122、Stronger 116→180；每段入场 14f（snappy，
+  `scale 1.06→1` + 10px 去虚）、出场 10f（exit 强 ease-in，`scale 1→0.86` + 12px 退焦），
+  交接重叠 6f 是交棒而非硬切；末段无出场，收白后 hold 22f
+- 每词三层文字（230px/800，静态字库 Helvetica Neue）：`outline` 层 `-webkit-text-stroke:2px`
+  + 透明填充，`fill` 层纯白——**描边先到位，填充后揭示**；三层共用 `padding: 0.08em 0.1em 0.28em`，
+  否则 mask / background-clip 只画在盒内，会裁掉 g 的下伸部与末字右沿、露出底下的描边层
+- 前两词的填充是 ±7% 柔边 `mask-image` 横向擦入（入场后 10f 起、18f，swift），描边层透明度
+  同步降到 0.2 留一点重影
+- Faster 的几何：虚线大圆（r=400、`dash 10 16`）+ 外圈 120 格刻度环（r=452，反向慢转），
+  入场 22f 从 0.4 snappy 长到 1，同时多转 160° 减速刹住（飞轮感），之后匀速慢转永不停；一道 16 段
+  渐隐的白色彗星弧沿 r=400 以 7.5°/帧飞跑——"快"由两层相对转速 + 彗星的速度差读出
+- Tighter 的几何：三实线圆（r=218）`pathLength=1` + dashoffset trim 生长，起笔绕各自圆心
+  `rotate(-90 cx 0)`，延迟 0/6/12f、各 22f（out），笔头一粒发光点长满即熄；92f 起三圆间距
+  340→300 收拢 14f（swift），落定时圆线提亮一次、四个相交点亮起菱形铆钉光点（overshoot 弹出）
+  ——"紧"是看得见的收拢动作
+- Stronger 无几何：120f 起描边 → 竖向镀铬渐变（亮顶—暗腰—亮底）；124→148f 一道带香槟暖色的
+  窄白带（`100deg`、`background-size:300%`）从左扫到右；146→158f 收成纯白 + 一次泛光脉冲，
+  脚下横向光带从 0.2 宽 snappy 展开，舞台主光同拍提亮——结论词独享的升格待遇
+- 词下 40px 副句给产品证据（rise 逐词升起，demo 是 video-shotcraft 的三句宣传），左上 mono 计数「01 / 03」、
+  右上镜刻标志 + video-shotcraft 小写字标、底部三段进度条（label 级纹理）；
+  相机全程 1→1.025 smooth 极缓推进（不抖）
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 三段时段 | 各 ≈60f，重叠 6f | 每词约 2s 是"读词 + 看几何"的下限；重叠 <3f 读作硬切，>12f 两词同屏打架 |
+| 入/出场窗 | 入 14f snappy / 出 10f exit | 出场比入场短是对的（退场要决绝）；出场用 out 曲线会读作"舍不得走" |
+| outline→fill | 18f swift，±7% 柔边，outline 留 0.2 | 留一点描边做重影是质感来源，降到 0 字变扁；窗 >30f 擦入慢得像加载条 |
+| 虚线圆 | r=400、`dash 10 16`、scale 0.4→1、入场多转 160° 刹住 | 刹车是"快"的第一证据；scale 起点 >0.7 就没有"长出来" |
+| 彗星弧 | 7.5°/帧、16 段渐隐 | 比环快 8 倍以上才读得出"速度差"；段数 <8 尾巴断成虚线 |
+| trim 生长 | 延迟 6f/圆、各 22f | 相位差是"依次相扣"的关键，同时生长读作三个独立圆 |
+| 收拢 | 间距 340→300（14f swift）+ 交点铆钉 | 收拢量 <20px 看不出动作；>60px 三圆挤成一坨 |
+| sheen 扫光 | `100deg`、`background-size:300%`、24f smooth | 300% 保证白带只占字宽一小段（=金属高光）；镀铬底层不能省，否则扫光前是一块灰字 |
+| 收白 | 12f + 泛光脉冲 + 脚下光带 | 这一下是全片唯一的"结论"待遇；删了三个词就是平级，第三点没有落点 |
+| 字号配色 | 词 230px/800、副句 40px、几何 `rgba(236,238,244,.42)`、graphite 暗场 | 几何比字暗一档是层级，几何比字亮就抢主角 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- **三个词必须是同一句法的三点（demo 都是比较级单词，6–8 字母）**：
+  时段是等长的，词长差大时几何（圆半径、间距）都是写死的坐标，
+  长词会顶出虚线圆或压到相扣圆上——换词表要同步调 r 与收拢间距
+- `-webkit-text-stroke` 是前缀属性：Chromium/WebKit 才有，Firefox 下描边层
+  直接是透明（词消失）。Remotion 渲染走 Chromium 无碍，但预览环境要注意
+- SVG trim 用的 `pathLength=1` 归一化在部分老版本浏览器上对 `<circle>`
+  支持不全，退化表现是圆一次性全画出（丢生长感）——移植时先在目标
+  渲染器上验一帧
+- 出场 trim 是"入场 trim 减出场 seg"直接相减：两段窗若靠得太近
+  （段长 <40f）会出现还没长完就开始收，圆只画出一小段
+- sheen 层与 fill 层是叠着的两个 DOM：切换靠透明度交叉，若把 `white` 窗
+  与 `sh` 窗调成重叠不足，会有 1–2 帧两层都半透（字发灰）
+- 第三个词的升格待遇只能给一次：全片三个词都上 sheen 就没有结论感
+  （P4 手法去重精神）；声音上三次入场是三个节奏点，第三个词的收白值得
+  单独一记重音，配法纪律见 sound-design.md
+
+## 参考实现
+demos/typography/word-relay-geometry/
+（WordRelayGeometry.tsx）

package/lib/motion/shotcraft/upstream/references/shots/ui-entrance/avatar-bracket-carousel.md

@@ -1,59 +1,59 @@
----
-name: avatar-bracket-carousel
-一句话: "Your ___ agent" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%
-适用: "一个位置，多种角色"的能力枚举；团队/身份/预设/人格类产品的核心一句话镜头
-时长: 约 5.2s（156f@30fps）
-能量: 中（三次等距切换构成稳定节拍器，对焦框脉冲是唯一装饰性动作）
----
-
-## 意图
-"我们的 agent 能当导演、剪辑、动画师、音效师"列成四行就是一张清单。塞进一句话的一个槽位里，
-它变成一个承诺加四次证明：句子不动，只有槽里的人在换。四角对焦框是这个手法的关键
-——它不参与轮换，但它把观众的眼睛钉死在那 92×92 的方框里，所以四次更换才读作
-"同一个位置"而不是"四张头像飘过"。
-
-## 动效核心
-- 位置量 `pos` 是三段 spring 的累加：`[0.24, 0.46, 0.68].forEach(s0 => pos +=
-  seg(t, s0, s0+0.14, k => E.spring(k, 0.25)))`——不是索引跳变，而是连续量，所以任意
-  时刻都能算出每个头像离槽位有多远
-- 距离驱动一切：`d = |k - pos|`，然后 `scale = max(0.5, 1-d*0.38)`、
-  `opacity = max(0, 1-d*0.62)`、`blur = min(3, d*2.4)`、`translateY = (k-pos)*76`——
-  四个属性同源于一个距离量，所以入框/出框的变化天然同步，不需要单独排时间
-- 队列是绝对定位在 `slot` 的 0×0 锚点上叠放的（`left:-29px, top:-29px` 自居中），
-  垂直位移全靠 `(k-pos)*STEP`；框外的头像照样在渲染，只是被 opacity 和 blur 藏掉
-- 入场是叠在轮换之上的另一层：`el.style.opacity = op * seg(t, 0.02+k*0.03, 0.12+k*0.03)`
-  ——四张按 0.03 错峰在开场 0.15 内建立队列，之后这一项恒为 1，轮换全权接管
-- 角色标签独立一套但共享 `pos`：`opacity = max(0, 1-|k-pos|*2.2)`，衰减斜率 2.2 比
-  头像的 0.62 陡得多——标签在 0.45 格距离外就完全消失，永远不会出现两个标签同屏
-- 对焦框呼吸：`breath = Σ sin(seg(t, s0, s0+0.1) * π)`，取 `min(1, breath)` 后乘 0.07
-  加到 scale 上；正弦包络让脉冲在切换动作的正中达峰，走完归零
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 切换点 | 0.24 / 0.46 / 0.68，间隔 0.22（≈34f / 1.14s） | 间隔就是"读得完一个角色"的时长；<0.12 观众来不及看标签，>0.3 节拍器感散掉 |
-| 切换行程 | 窗 0.14（≈22f），`E.spring(k, 0.25)` | 行程占间隔的 64% → 静置时间约 12f；阻尼 0.25 是明确一次回弹，调小会抖两下与相邻切换互相干扰 |
-| 步距 | STEP=76px（框 92px、头像 58px） | 步距必须大于头像直径否则相邻两张会咬边；76/92 意味着出框的头像仍露出一角，队列的存在被暗示 |
-| 缩放衰减 | `1 - d*0.38`，下限 0.5 | 一格距离缩到 0.62；斜率调大出框更决绝，但下限 0.5 会更早触顶，队列变成"两档尺寸" |
-| 透明度衰减 | `1 - d*0.62` | 1.6 格距离外完全消失 → 画面里始终有约 3 张可见；斜率降到 0.3 会看到整列四张都在，取景框的"锁定"语义被削弱 |
-| 模糊衰减 | `d*2.4`，上限 3px | 模糊是景深暗示，2.4 的斜率让邻位约 2.4px；>4px 邻位糊成色块，队列读不出是头像 |
-| 标签衰减 | `1 - d*2.2` | 斜率必须显著大于头像的 0.62——标签是文字，两句同时半透明叠着最难读 |
-| 框脉冲 | 窗 0.1，`sin(·π)` × 0.07 | 7% 是"咬合了一下"的量；>15% 框自己变成主角，抢过头像更换 |
-
-## 已知坑
-- 四张头像对三次切换：`pos` 最终停在 3，正好是末位。加第五张必须加第四次切换（且
-  末次切换要在 0.86 之前结束才有静置时间），否则队列末尾永远进不了框
-- 切换点是硬编码数组，出现两处（`pos` 累加与 `breath` 累加）。改节拍必须同时改两处，
-  漏改一处会出现"框脉冲和头像换位错开"
-- 入场 stagger 与首次切换的间隔只有 0.09（入场末 0.15 → 切换 0.24）。加头像数会推后
-  入场结束点（`0.12+k*0.03`），5 张以上就要把首次切换往后挪
-- 头像是白色线性图标 + 中性灰阶受光渐变圆（灰度分层仅用于区分队列项），强调色只用在对焦框的
-  四个 SVG 角标上（及标签 chip 的一粒圆点）——落地换成真实头像后仍应保持这个分工，头像本身别抢色
-- 对焦框 SVG 的四条 path 与 92×92 viewBox 是写死的坐标（`M4,26 L4,4 L26,4` 等）。改
-  框尺寸要整套重标，只改容器宽高会让角标缩放失真
-- 句子 "Your ___ agent"（demo：video-shotcraft 的 agent 摄制组 Director / Editor / Animator / Sound）用 flex + gap:22px 居中，槽宽固定 92px 所以句干不会因
-  头像更换而重排——但换成中文句子时要确认槽两侧的字宽变化不会让槽偏离画面中心
-
-## 参考实现
-demos/ui-entrance/avatar-bracket-carousel/
-（AvatarBracketCarousel.tsx）
+---
+name: avatar-bracket-carousel
+一句话: "Your ___ agent" 填空排版，四角对焦框钉在句中不动，头像队列在框内垂直 spring 轮换三次，入框放大清晰、出框按距离缩小淡化模糊，角色标签同步更换，切换瞬间对焦框呼吸 7%
+适用: "一个位置，多种角色"的能力枚举；团队/身份/预设/人格类产品的核心一句话镜头
+时长: 约 5.2s（156f@30fps）
+能量: 中（三次等距切换构成稳定节拍器，对焦框脉冲是唯一装饰性动作）
+---
+
+## 意图
+"我们的 agent 能当导演、剪辑、动画师、音效师"列成四行就是一张清单。塞进一句话的一个槽位里，
+它变成一个承诺加四次证明：句子不动，只有槽里的人在换。四角对焦框是这个手法的关键
+——它不参与轮换，但它把观众的眼睛钉死在那 92×92 的方框里，所以四次更换才读作
+"同一个位置"而不是"四张头像飘过"。
+
+## 动效核心
+- 位置量 `pos` 是三段 spring 的累加：`[0.24, 0.46, 0.68].forEach(s0 => pos +=
+  seg(t, s0, s0+0.14, k => E.spring(k, 0.25)))`——不是索引跳变，而是连续量，所以任意
+  时刻都能算出每个头像离槽位有多远
+- 距离驱动一切：`d = |k - pos|`，然后 `scale = max(0.5, 1-d*0.38)`、
+  `opacity = max(0, 1-d*0.62)`、`blur = min(3, d*2.4)`、`translateY = (k-pos)*76`——
+  四个属性同源于一个距离量，所以入框/出框的变化天然同步，不需要单独排时间
+- 队列是绝对定位在 `slot` 的 0×0 锚点上叠放的（`left:-29px, top:-29px` 自居中），
+  垂直位移全靠 `(k-pos)*STEP`；框外的头像照样在渲染，只是被 opacity 和 blur 藏掉
+- 入场是叠在轮换之上的另一层：`el.style.opacity = op * seg(t, 0.02+k*0.03, 0.12+k*0.03)`
+  ——四张按 0.03 错峰在开场 0.15 内建立队列，之后这一项恒为 1，轮换全权接管
+- 角色标签独立一套但共享 `pos`：`opacity = max(0, 1-|k-pos|*2.2)`，衰减斜率 2.2 比
+  头像的 0.62 陡得多——标签在 0.45 格距离外就完全消失，永远不会出现两个标签同屏
+- 对焦框呼吸：`breath = Σ sin(seg(t, s0, s0+0.1) * π)`，取 `min(1, breath)` 后乘 0.07
+  加到 scale 上；正弦包络让脉冲在切换动作的正中达峰，走完归零
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 切换点 | 0.24 / 0.46 / 0.68，间隔 0.22（≈34f / 1.14s） | 间隔就是"读得完一个角色"的时长；<0.12 观众来不及看标签，>0.3 节拍器感散掉 |
+| 切换行程 | 窗 0.14（≈22f），`E.spring(k, 0.25)` | 行程占间隔的 64% → 静置时间约 12f；阻尼 0.25 是明确一次回弹，调小会抖两下与相邻切换互相干扰 |
+| 步距 | STEP=76px（框 92px、头像 58px） | 步距必须大于头像直径否则相邻两张会咬边；76/92 意味着出框的头像仍露出一角，队列的存在被暗示 |
+| 缩放衰减 | `1 - d*0.38`，下限 0.5 | 一格距离缩到 0.62；斜率调大出框更决绝，但下限 0.5 会更早触顶，队列变成"两档尺寸" |
+| 透明度衰减 | `1 - d*0.62` | 1.6 格距离外完全消失 → 画面里始终有约 3 张可见；斜率降到 0.3 会看到整列四张都在，取景框的"锁定"语义被削弱 |
+| 模糊衰减 | `d*2.4`，上限 3px | 模糊是景深暗示，2.4 的斜率让邻位约 2.4px；>4px 邻位糊成色块，队列读不出是头像 |
+| 标签衰减 | `1 - d*2.2` | 斜率必须显著大于头像的 0.62——标签是文字，两句同时半透明叠着最难读 |
+| 框脉冲 | 窗 0.1，`sin(·π)` × 0.07 | 7% 是"咬合了一下"的量；>15% 框自己变成主角，抢过头像更换 |
+
+## 已知坑
+- 四张头像对三次切换：`pos` 最终停在 3，正好是末位。加第五张必须加第四次切换（且
+  末次切换要在 0.86 之前结束才有静置时间），否则队列末尾永远进不了框
+- 切换点是硬编码数组，出现两处（`pos` 累加与 `breath` 累加）。改节拍必须同时改两处，
+  漏改一处会出现"框脉冲和头像换位错开"
+- 入场 stagger 与首次切换的间隔只有 0.09（入场末 0.15 → 切换 0.24）。加头像数会推后
+  入场结束点（`0.12+k*0.03`），5 张以上就要把首次切换往后挪
+- 头像是白色线性图标 + 中性灰阶受光渐变圆（灰度分层仅用于区分队列项），强调色只用在对焦框的
+  四个 SVG 角标上（及标签 chip 的一粒圆点）——落地换成真实头像后仍应保持这个分工，头像本身别抢色
+- 对焦框 SVG 的四条 path 与 92×92 viewBox 是写死的坐标（`M4,26 L4,4 L26,4` 等）。改
+  框尺寸要整套重标，只改容器宽高会让角标缩放失真
+- 句子 "Your ___ agent"（demo：video-shotcraft 的 agent 摄制组 Director / Editor / Animator / Sound）用 flex + gap:22px 居中，槽宽固定 92px 所以句干不会因
+  头像更换而重排——但换成中文句子时要确认槽两侧的字宽变化不会让槽偏离画面中心
+
+## 参考实现
+demos/ui-entrance/avatar-bracket-carousel/
+（AvatarBracketCarousel.tsx）