dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/shotcraft/upstream/references/shots/interaction/hashtag-to-pill-materialize.md

@@ -1,60 +1,60 @@
----
-name: hashtag-to-pill-materialize
-一句话: 话题词打字实体化——居中打出 "#word"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；"两次硬切一次滑动"的节奏骨架
-适用: 标签/分类/关键词功能的演示段（笔记 app 打 tag、话题聚合）；"输入 → 变成 UI 实体 → 归位到成品"的三段式叙事
-时长: 120f（4s）——打字 ~40f + 硬切胶囊 hold ~18f + 缩移 ~14f + 硬切揭示后静置 ~1.2s（原片 18–21.5s）
-能量: 中（干脆利落，靠硬切给劲，不靠弹跳）
-标签: typography
----
-
-## 意图
-文字变实体的常规做法是渐变/morph/展开，原片帧级拆解证明 Bear 反着
-来：**实体化是 1 帧硬切**——上一帧还是文字+光标，下一帧就是完整
-胶囊，无展开无 cross-fade 无回弹。硬切给的是"啪、成了"的确定感，
-任何渐变都会把"实体"软化成"特效"。全段骨架是**两次硬切夹一次
-滑动**：硬切实体化 → 平滑缩移归位 → 硬切揭示成品页。唯一的连续
-运动（缩移）被两记硬切框住，才显得又快又稳。这个节奏骨架是命门，
-三段挪动任何一段的性质（把硬切改渐变、把滑动改硬切）整卡就塌。
-
-## 动效核心
-- 打字段：几何无衬线（Futura 气质）居中打 "#word"，**红实心光标
-  恒亮不闪**（原片实测，别加 blink）；人手节奏 4–6f/字带确定性抖动
-- **实体化 = 1 帧硬切**：文字+光标整层消失，同帧出现无描边浅灰
-  胶囊 + 图标 + 词（字号不变、原位等大，# 被图标替换）；仅允许
-  3f 1.03→1 微落定防死板
-- 胶囊 hold ~0.6s → 一段 bezier easeInOut 缩小左移（~0.55x、
-  ~14f）落到页面标签位，位置/缩放同曲线同起止，中途不分段
-- 落位后**再 1 帧硬切**揭示成品页：底色/标题/正文/胶囊配色同帧
-  全变，之后真静止收尾
-- 实现要点：胶囊按大字号绘制、整体 transform 缩放，且
-  transformOrigin 必须 0 0 + translate 先行，否则落位中心漂移
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 打字节奏 | 4–6f/字（原片 ~6 字/秒），mulberry32 抖动 | 均匀间隔读作机打；光标必须恒亮（**原片实测**不闪烁） |
-| 实体化 | **1 帧硬切**（原片帧级实测无任何过渡）+ 3f 1.03→1 微落定 | 加淡入/展开立刻降级成普通 morph；微落定 >4f 读作弹跳 |
-| 胶囊几何 | 740×236@1920（**原片实测** 493×157@720p ×1.5），无描边 | 胶囊要"宽大过头"才有实体感；加描边读作按钮 |
-| hold | ~18f（0.6s，**原片实测**） | <12f 观众没看清胶囊长啥样就飞了 |
-| 缩移 | ~0.55x（**原片实测** 273/493）、14f、bezier(0.5,0,0.25,1) | 缩放与位移必须同曲线；分开调会读作两个动画 |
-| 揭示 | 落位 +3f 再 1 帧硬切全页 | 揭示若做转场，第二记硬切没了，骨架塌一半 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 与 typewriter-moves（打字呈现）、ui-to-brand-morph（渐变变形成形）
-  撞领域：本卡命门是**硬切实体化非渐变变形**——只要你想加过渡，
-  就该去用那两张卡而不是改这张
-- 早期版本曾杜撰"胶囊飞入下方滑入笔记卡"段，原片对照证伪已砍；
-  别复活飞行段
-- transformOrigin 默认 50% 50% 会让缩放落位中心漂移 (1−s)×半宽，
-  必须 origin 0 0 + translate 到目标中心再 scale（demo 内注释）
-- 与原片残余差距：Futura 回退字重、揭示帧正文间距 ~10px 级别偏差；
-  节奏与硬切时点已密帧对齐。demo 内容已换成 video-shotcraft 的世界
-  （原片 "#music" + 音符 → "#shots" + 场记板图标，成品页 "My favorite shots"），
-  话题词与原词等长，胶囊几何不变
-
-## 参考实现
-demos/interaction/hashtag-to-pill-materialize/
-（HashtagToPillMaterialize.tsx）
-原片出处：bear-app.mp4 18–21.5s
+---
+name: hashtag-to-pill-materialize
+一句话: 话题词打字实体化——居中打出 "#word"（红实心光标恒亮），1 帧硬切变成宽大胶囊标签，hold 后缩小左移落到页面标签位，再 1 帧硬切揭示成品页；"两次硬切一次滑动"的节奏骨架
+适用: 标签/分类/关键词功能的演示段（笔记 app 打 tag、话题聚合）；"输入 → 变成 UI 实体 → 归位到成品"的三段式叙事
+时长: 120f（4s）——打字 ~40f + 硬切胶囊 hold ~18f + 缩移 ~14f + 硬切揭示后静置 ~1.2s（原片 18–21.5s）
+能量: 中（干脆利落，靠硬切给劲，不靠弹跳）
+标签: typography
+---
+
+## 意图
+文字变实体的常规做法是渐变/morph/展开，原片帧级拆解证明 Bear 反着
+来：**实体化是 1 帧硬切**——上一帧还是文字+光标，下一帧就是完整
+胶囊，无展开无 cross-fade 无回弹。硬切给的是"啪、成了"的确定感，
+任何渐变都会把"实体"软化成"特效"。全段骨架是**两次硬切夹一次
+滑动**：硬切实体化 → 平滑缩移归位 → 硬切揭示成品页。唯一的连续
+运动（缩移）被两记硬切框住，才显得又快又稳。这个节奏骨架是命门，
+三段挪动任何一段的性质（把硬切改渐变、把滑动改硬切）整卡就塌。
+
+## 动效核心
+- 打字段：几何无衬线（Futura 气质）居中打 "#word"，**红实心光标
+  恒亮不闪**（原片实测，别加 blink）；人手节奏 4–6f/字带确定性抖动
+- **实体化 = 1 帧硬切**：文字+光标整层消失，同帧出现无描边浅灰
+  胶囊 + 图标 + 词（字号不变、原位等大，# 被图标替换）；仅允许
+  3f 1.03→1 微落定防死板
+- 胶囊 hold ~0.6s → 一段 bezier easeInOut 缩小左移（~0.55x、
+  ~14f）落到页面标签位，位置/缩放同曲线同起止，中途不分段
+- 落位后**再 1 帧硬切**揭示成品页：底色/标题/正文/胶囊配色同帧
+  全变，之后真静止收尾
+- 实现要点：胶囊按大字号绘制、整体 transform 缩放，且
+  transformOrigin 必须 0 0 + translate 先行，否则落位中心漂移
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 打字节奏 | 4–6f/字（原片 ~6 字/秒），mulberry32 抖动 | 均匀间隔读作机打；光标必须恒亮（**原片实测**不闪烁） |
+| 实体化 | **1 帧硬切**（原片帧级实测无任何过渡）+ 3f 1.03→1 微落定 | 加淡入/展开立刻降级成普通 morph；微落定 >4f 读作弹跳 |
+| 胶囊几何 | 740×236@1920（**原片实测** 493×157@720p ×1.5），无描边 | 胶囊要"宽大过头"才有实体感；加描边读作按钮 |
+| hold | ~18f（0.6s，**原片实测**） | <12f 观众没看清胶囊长啥样就飞了 |
+| 缩移 | ~0.55x（**原片实测** 273/493）、14f、bezier(0.5,0,0.25,1) | 缩放与位移必须同曲线；分开调会读作两个动画 |
+| 揭示 | 落位 +3f 再 1 帧硬切全页 | 揭示若做转场，第二记硬切没了，骨架塌一半 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 typewriter-moves（打字呈现）、ui-to-brand-morph（渐变变形成形）
+  撞领域：本卡命门是**硬切实体化非渐变变形**——只要你想加过渡，
+  就该去用那两张卡而不是改这张
+- 早期版本曾杜撰"胶囊飞入下方滑入笔记卡"段，原片对照证伪已砍；
+  别复活飞行段
+- transformOrigin 默认 50% 50% 会让缩放落位中心漂移 (1−s)×半宽，
+  必须 origin 0 0 + translate 到目标中心再 scale（demo 内注释）
+- 与原片残余差距：Futura 回退字重、揭示帧正文间距 ~10px 级别偏差；
+  节奏与硬切时点已密帧对齐。demo 内容已换成 video-shotcraft 的世界
+  （原片 "#music" + 音符 → "#shots" + 场记板图标，成品页 "My favorite shots"），
+  话题词与原词等长，胶囊几何不变
+
+## 参考实现
+demos/interaction/hashtag-to-pill-materialize/
+（HashtagToPillMaterialize.tsx）
+原片出处：bear-app.mp4 18–21.5s

package/lib/motion/shotcraft/upstream/references/shots/interaction/picker-carousel-feature-cycle.md

@@ -1,55 +1,55 @@
----
-name: picker-carousel-feature-cycle
-一句话: 移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸
-适用: 逐个念出功能名/场景名的列表镜头；"选一个"的交互演示；移动端产品的 picker 类控件展示
-时长: 约3.6s（108f@30fps）
-能量: 中（每一次吸附都是一个节拍点，5 拍匀速推进）
----
-
-## 意图
-把"选择"这件事的物理感做出来：焦点框是固定的，是内容在滚动并被吸住。
-每项停下后必须**真的静止几帧**——连续滚动读作 loading 动画，停顿才读作
-"这一项被选中了"。距离衰减（透明度 + 字号 + 灰度三通道同时衰减）是让
-观众视线始终锁在中间那一行的唯一手段。
-
-## 动效核心
-- 视口 300×170px（5 行 × rowH 34），焦点药丸固定在第 3 行位置
-  （`top: rowH*2`），白底 + 1px `#E3E3E6` 描边 + `0 2px 8px rgba(0,0,0,.06)`
-- 全程 `t 0.05→0.95` 匀速切成 STEPS=5 步；步内位移
-  `outQuint(min(1, local/(1−HOLD)))`，HOLD=5/14 的尾段完全不动
-  （每步≈0.65s = 走位≈0.42s + 静止≈0.23s）
-- 列表整体 `translateY(rowH*2 − pos*rowH)`——移动的是内容，药丸零位移
-- 距离衰减（`d = |i − pos|`）分三段：opacity `d≤1` 时 1→0.55、
-  `1<d≤2` 时 0.55→0.18；fontSize 17→14px（按 `d/2`）；
-  color `d<0.5` 用 INK、`d<1.5` 用 MID、更远用 `#B9B9BE`
-- 行内图标 opacity `max(0, 1 − d*1.6)`——只有焦点行看得见图标
-- 落定后药丸 `scaleY 1 + sin(min(1, land/0.6)·π)*0.06` 呼吸一下
-  （`land` 只在 HOLD 段内 >0，即吸附完成才呼吸）
-- 视口上下各 26% 的 alpha 渐隐遮罩（`mask-image` 透明→不透明），让进出项自然消隐
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 行高/可见行数 | rowH 34px × 5 行，焦点在第 3 行 | 可见行数必须是奇数，否则焦点行不在视觉正中 |
-| 步数 | STEPS=5，窗口 t 0.05→0.95 匀速 | 5 拍是 3.6s 的舒适上限；7 拍每拍就压到 0.46s 读不清 |
-| HOLD | 5/14 ≈ 0.357（每步尾段静止≈0.23s） | **命门**：HOLD 归零就变成匀速滚动，完全丢掉"吸附"语义 |
-| 吸附缓动 | outQuint（作用在 local/(1−HOLD) 上） | outQuint 的急减速就是"被磁铁吸住"的手感，outCubic 太软 |
-| opacity 衰减 | 1 → 0.55（d≤1）→ 0.18（d≤2） | 相邻行留 0.55 是让观众感知"上下还有内容"；降到 0.3 就孤立了 |
-| fontSize 衰减 | 17→14px，按 min(1, d/2) | 字号差是第二重景深；只做透明度会显得扁 |
-| 图标可见性 | max(0, 1 − d·1.6) | 只有焦点行带图标，是"当前项"的额外标记 |
-| 药丸呼吸 | scaleY 1→1.06→1，落定后 0.6·HOLD 内走完 | 0.06 已到上限；再大就读作药丸自己在动，抢了内容的戏 |
-
-## 已知坑
-- 药丸必须是 **`translateY` 零位移的固定层**，`scaleY` 呼吸也不能带
-  位移，否则焦点框漂移，"内容穿过焦点"的语义立刻失效
-- 距离衰减写在 `fontSize` 上会触发逐帧重排（行高固定所以布局不跳），
-  行高若改成 auto 就会抖；rowH 必须写死
-- 渐隐用 `mask-image` 做 alpha 遮罩，不要叠纸色色块：底色一旦是渐变/有光斑，色块遮罩就会露出矩形边界带
-- 左外侧 24×24 的方形 app 图标（深底 + video-shotcraft 标志反白版）用
-  `margin:-12px 0 0 -186px` 相对画面中心定位；改视口宽度必须同改 186px
-- ITEMS 是 video-shotcraft 的 7 条功能名（"Shot recipe cards" 等），换成别的功能名时
-  字长变化会影响居中观感——单行超过 300px 就要缩字号而不是换行
-
-## 参考实现
-demos/interaction/picker-carousel-feature-cycle/
-（PickerCarouselFeatureCycle.tsx）
+---
+name: picker-carousel-feature-cycle
+一句话: 移动端风竖向选择器——焦点药丸不动、内容穿过它，每项带明显 outQuint 减速吸附后完全静止，按到中心距离分层控制透明度/字号/灰度，落定时药丸做 scaleY 极轻呼吸
+适用: 逐个念出功能名/场景名的列表镜头；"选一个"的交互演示；移动端产品的 picker 类控件展示
+时长: 约3.6s（108f@30fps）
+能量: 中（每一次吸附都是一个节拍点，5 拍匀速推进）
+---
+
+## 意图
+把"选择"这件事的物理感做出来：焦点框是固定的，是内容在滚动并被吸住。
+每项停下后必须**真的静止几帧**——连续滚动读作 loading 动画，停顿才读作
+"这一项被选中了"。距离衰减（透明度 + 字号 + 灰度三通道同时衰减）是让
+观众视线始终锁在中间那一行的唯一手段。
+
+## 动效核心
+- 视口 300×170px（5 行 × rowH 34），焦点药丸固定在第 3 行位置
+  （`top: rowH*2`），白底 + 1px `#E3E3E6` 描边 + `0 2px 8px rgba(0,0,0,.06)`
+- 全程 `t 0.05→0.95` 匀速切成 STEPS=5 步；步内位移
+  `outQuint(min(1, local/(1−HOLD)))`，HOLD=5/14 的尾段完全不动
+  （每步≈0.65s = 走位≈0.42s + 静止≈0.23s）
+- 列表整体 `translateY(rowH*2 − pos*rowH)`——移动的是内容，药丸零位移
+- 距离衰减（`d = |i − pos|`）分三段：opacity `d≤1` 时 1→0.55、
+  `1<d≤2` 时 0.55→0.18；fontSize 17→14px（按 `d/2`）；
+  color `d<0.5` 用 INK、`d<1.5` 用 MID、更远用 `#B9B9BE`
+- 行内图标 opacity `max(0, 1 − d*1.6)`——只有焦点行看得见图标
+- 落定后药丸 `scaleY 1 + sin(min(1, land/0.6)·π)*0.06` 呼吸一下
+  （`land` 只在 HOLD 段内 >0，即吸附完成才呼吸）
+- 视口上下各 26% 的 alpha 渐隐遮罩（`mask-image` 透明→不透明），让进出项自然消隐
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 行高/可见行数 | rowH 34px × 5 行，焦点在第 3 行 | 可见行数必须是奇数，否则焦点行不在视觉正中 |
+| 步数 | STEPS=5，窗口 t 0.05→0.95 匀速 | 5 拍是 3.6s 的舒适上限；7 拍每拍就压到 0.46s 读不清 |
+| HOLD | 5/14 ≈ 0.357（每步尾段静止≈0.23s） | **命门**：HOLD 归零就变成匀速滚动，完全丢掉"吸附"语义 |
+| 吸附缓动 | outQuint（作用在 local/(1−HOLD) 上） | outQuint 的急减速就是"被磁铁吸住"的手感，outCubic 太软 |
+| opacity 衰减 | 1 → 0.55（d≤1）→ 0.18（d≤2） | 相邻行留 0.55 是让观众感知"上下还有内容"；降到 0.3 就孤立了 |
+| fontSize 衰减 | 17→14px，按 min(1, d/2) | 字号差是第二重景深；只做透明度会显得扁 |
+| 图标可见性 | max(0, 1 − d·1.6) | 只有焦点行带图标，是"当前项"的额外标记 |
+| 药丸呼吸 | scaleY 1→1.06→1，落定后 0.6·HOLD 内走完 | 0.06 已到上限；再大就读作药丸自己在动，抢了内容的戏 |
+
+## 已知坑
+- 药丸必须是 **`translateY` 零位移的固定层**，`scaleY` 呼吸也不能带
+  位移，否则焦点框漂移，"内容穿过焦点"的语义立刻失效
+- 距离衰减写在 `fontSize` 上会触发逐帧重排（行高固定所以布局不跳），
+  行高若改成 auto 就会抖；rowH 必须写死
+- 渐隐用 `mask-image` 做 alpha 遮罩，不要叠纸色色块：底色一旦是渐变/有光斑，色块遮罩就会露出矩形边界带
+- 左外侧 24×24 的方形 app 图标（深底 + video-shotcraft 标志反白版）用
+  `margin:-12px 0 0 -186px` 相对画面中心定位；改视口宽度必须同改 186px
+- ITEMS 是 video-shotcraft 的 7 条功能名（"Shot recipe cards" 等），换成别的功能名时
+  字长变化会影响居中观感——单行超过 300px 就要缩字号而不是换行
+
+## 参考实现
+demos/interaction/picker-carousel-feature-cycle/
+（PickerCarouselFeatureCycle.tsx）

package/lib/motion/shotcraft/upstream/references/shots/interaction/segmented-thumb-hero.md

@@ -1,57 +1,57 @@
----
-name: segmented-thumb-hero
-一句话: 分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起
-适用: "模式切换/二选一"功能的宣告镜头（demo 的 video-shotcraft Prompt→Film、Chat→Agent 式）；一个 UI 微交互撑一整镜的特写拍法
-时长: ~3.5s（demo 110f：浮入 18f + 光标 24f + 点击 + 滑动 8f + 图标弹出 + hold）
-能量: 中（微交互特写，精致不轰）
----
-
-## 意图
-产品切到新模式，通常拍法是整个界面换掉。本卡反着来：把 segmented
-control 放大到 1080px 宽拍特写，**thumb 那 8 帧位移本身就是叙事**——
-"我们从 A 走到了 B"。没有任何页面上下文，控件即舞台。因果链完整：
-光标滑入（有人来了）→ 按下+涟漪（做了决定）→ thumb 滑动（世界响应）
-→ 新图标弹出（新身份确立）。四拍缺一不可，缺了光标就是 UI 自己在动，
-缺了图标弹出就是切换没有奖励。
-
-## 动效核心
-- 控件特写尺寸 1080×220，从下 200px 弹簧浮入
-  （spring damping 14 / stiffness 120），大阴影随落位收小（24→12px）
-- 光标是超大描边箭头（130px，白底墨描边）：24f Easing.out(cubic)
-  从右下画外滑到目标段上；按下 scale 1→0.86→1（3f 下 4f 回）
-- **thumb 严格 8f** Easing.out(cubic)（demo 52→60f）——还原原片手感；
-  这 8f 是全镜的心跳，前后各拍都在为它服务
-- 到位瞬间双动作同帧起：新图标 spring(damping 10, stiffness 220)
-  过冲弹出；旧图标 6f Easing.in 塌缩且 width 同步归零让文字自然回流
-- 点击涟漪：3px 强调色细环 12f 从点击点（光标尖端）扩散淡出（Easing.out(quad)）
-  ——涟漪确认"按下"发生过，无涟漪点击读作光标路过
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 控件尺寸 | 1080×220，thumb 内缩 16px | 缩到 <600px 宽就不是特写了，thumb 位移读不出重量 |
-| thumb 时长 | 8f Easing.out(cubic) | >14f 读作慢动作演示视频；<5f 读作瞬移，"滑"没了 |
-| 光标滑入 | 24f 从画外，ease-out | linear 或 <14f 读作光标被扔进来；起点必须画外 |
-| 按下 | scale 0.86 + 涟漪 12f | 无按下直接滑 thumb，因果链断，读作自动播放 |
-| 图标弹出 | spring damping 10/stiffness 220 | damping <8 弹三下抢 thumb 的戏；旧图标不收起文字会挤出控件 |
-| 收尾 hold | 新态静置 ≥30f | 切换完立刻切镜，"新模式"没被看清 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 与 cursor-flyover 分工：那张是光标在完整页面里
-  点击推近（有上下文），本卡是控件脱离页面拍无背景特写——同片可共存，
-  但同一次点击别既拍页面版又拍特写版
-- 图标塌缩用 width 归零而不是只 scale——只 scale 会留空位，文字不回流，
-  控件内出现"幽灵缝"（demo 里 width 与 scale 同步驱动）
-- 二段以上（3+ 段）控件慎用：thumb 跨多段滑行 8f 太快读不出停靠，
-  拉长又破手感——本卡吃"二选一"最顺
-- 涟漪圆环要 zIndex 压在 thumb 之上、圆心锁点击点——跟着 thumb 走
-  就成了 thumb 的拖尾，语义变错
-- 实战替换素材：段标签/图标换成真功能名即可，但"新段图标带表情"
-  （demo 笑脸场记板）是奖励感的一半，纯线框图标会淡不少
-
-## 参考实现
-demos/interaction/segmented-thumb-hero/
-（SegmentedThumbHero.tsx）
-原片出处：perplexity-promo 2.3–5s
+---
+name: segmented-thumb-hero
+一句话: 分段控件 thumb 位移当主角特写——超大胶囊 segmented control 弹簧浮入，描边箭头光标画外滑入按下，白 thumb 8f ease-out 滑到另一段，到位瞬间新图标 spring 弹出、旧图标收起
+适用: "模式切换/二选一"功能的宣告镜头（demo 的 video-shotcraft Prompt→Film、Chat→Agent 式）；一个 UI 微交互撑一整镜的特写拍法
+时长: ~3.5s（demo 110f：浮入 18f + 光标 24f + 点击 + 滑动 8f + 图标弹出 + hold）
+能量: 中（微交互特写，精致不轰）
+---
+
+## 意图
+产品切到新模式，通常拍法是整个界面换掉。本卡反着来：把 segmented
+control 放大到 1080px 宽拍特写，**thumb 那 8 帧位移本身就是叙事**——
+"我们从 A 走到了 B"。没有任何页面上下文，控件即舞台。因果链完整：
+光标滑入（有人来了）→ 按下+涟漪（做了决定）→ thumb 滑动（世界响应）
+→ 新图标弹出（新身份确立）。四拍缺一不可，缺了光标就是 UI 自己在动，
+缺了图标弹出就是切换没有奖励。
+
+## 动效核心
+- 控件特写尺寸 1080×220，从下 200px 弹簧浮入
+  （spring damping 14 / stiffness 120），大阴影随落位收小（24→12px）
+- 光标是超大描边箭头（130px，白底墨描边）：24f Easing.out(cubic)
+  从右下画外滑到目标段上；按下 scale 1→0.86→1（3f 下 4f 回）
+- **thumb 严格 8f** Easing.out(cubic)（demo 52→60f）——还原原片手感；
+  这 8f 是全镜的心跳，前后各拍都在为它服务
+- 到位瞬间双动作同帧起：新图标 spring(damping 10, stiffness 220)
+  过冲弹出；旧图标 6f Easing.in 塌缩且 width 同步归零让文字自然回流
+- 点击涟漪：3px 强调色细环 12f 从点击点（光标尖端）扩散淡出（Easing.out(quad)）
+  ——涟漪确认"按下"发生过，无涟漪点击读作光标路过
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 控件尺寸 | 1080×220，thumb 内缩 16px | 缩到 <600px 宽就不是特写了，thumb 位移读不出重量 |
+| thumb 时长 | 8f Easing.out(cubic) | >14f 读作慢动作演示视频；<5f 读作瞬移，"滑"没了 |
+| 光标滑入 | 24f 从画外，ease-out | linear 或 <14f 读作光标被扔进来；起点必须画外 |
+| 按下 | scale 0.86 + 涟漪 12f | 无按下直接滑 thumb，因果链断，读作自动播放 |
+| 图标弹出 | spring damping 10/stiffness 220 | damping <8 弹三下抢 thumb 的戏；旧图标不收起文字会挤出控件 |
+| 收尾 hold | 新态静置 ≥30f | 切换完立刻切镜，"新模式"没被看清 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 cursor-flyover 分工：那张是光标在完整页面里
+  点击推近（有上下文），本卡是控件脱离页面拍无背景特写——同片可共存，
+  但同一次点击别既拍页面版又拍特写版
+- 图标塌缩用 width 归零而不是只 scale——只 scale 会留空位，文字不回流，
+  控件内出现"幽灵缝"（demo 里 width 与 scale 同步驱动）
+- 二段以上（3+ 段）控件慎用：thumb 跨多段滑行 8f 太快读不出停靠，
+  拉长又破手感——本卡吃"二选一"最顺
+- 涟漪圆环要 zIndex 压在 thumb 之上、圆心锁点击点——跟着 thumb 走
+  就成了 thumb 的拖尾，语义变错
+- 实战替换素材：段标签/图标换成真功能名即可，但"新段图标带表情"
+  （demo 笑脸场记板）是奖励感的一半，纯线框图标会淡不少
+
+## 参考实现
+demos/interaction/segmented-thumb-hero/
+（SegmentedThumbHero.tsx）
+原片出处：perplexity-promo 2.3–5s

package/lib/motion/shotcraft/upstream/references/shots/interaction/theme-switch-moves.md

@@ -1,47 +1,47 @@
----
-name: theme-switch-moves
-一句话: 主题切换两式——theme-sweep 斜向扫场（边界扫过处就地换肤）与 palette-ripple 组合款（⌘K 面板收缩成点、涟漪从点荡开换肤）
-适用: 深色模式/主题功能的叙事段落；同一 UI "在你眼前变色"而非切到新场景
-时长: A 140f（4.7s）/ B 156f（5.2s）
-能量: A 中 / B 中高（组合款有完整因果链）
----
-
-## 意图
-深浅模式切换的两种拍法。A（Notion/Figma/Linear 惯用）：15° 斜向
-边界带亮线扫过全画面（demo 从开关所在的右侧扫向左侧），边界经过处浅色**就地**变深色，同布局
-双主题共存一瞬——观众看到的是"同一个 UI 换肤"，不是转场。
-B（组合变异）：⌘K 面板输入 "dark" 回车，面板收缩成一个亮点，
-深色涟漪**从该点**荡开扫过全 UI——"命令引发换肤"的因果链完整可读。
-组合命门：涟漪圆心必须是面板收缩点、起始帧必须是收缩完成帧。
-
-## 两式选型
-| 式 | 做法 | 适用 |
-|----|------|------|
-| A theme-sweep-toggle | 特写顶栏日夜开关（zoom 2.0）：指针按下、旋钮弹簧拨到月亮（太阳收光芒长出月牙）→ 深色世界 clip-path polygon 15° 斜边从开关一侧扫过（64f，bezier(.3,0,.35,1)），同时相机 30f 拉开到全景；边界 = 晨昏线：白热核心线 + 亮侧随速度变宽的落日橙暮光带 + 夜侧冷蓝辉；扫完"开灯"（今日胶囊 / 此刻线 / 窗口轮廓光依次亮起）坐实 | 主题功能直接展示 |
-| B palette-theme-ripple | 面板弹簧落下→人手节奏逐字输入→回车面板 CRT 关机式收缩（先纵向压成亮线、再横向收成亮点）+ 亮点与横向余辉钉住 5f→圆形 clip 半径 6→1260px 强 ease-out 荡开，3px 白热环 + 珊瑚外辉 / 白色内辉 + 晚 4f 回声环，深色版 1.035→1 坐实、相机顺势呼气退回 | 命令面板+主题联动的高光段 |
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 深色版制作 | 对色板逐键手工映射（bg/card/border 各自定深色值） | 滤镜反转出来的深色是错的（图像/头像全反） |
-| A 斜边超扫 | 斜线在世界坐标外扩 400px 计算多边形，终点越过左下角 | 不超扫角落残留浅色三角 |
-| A 因果 | 扫场起点紧贴开关、按下后 ~6f 边界就扫过开关；相机从开关特写拉开 | 边界从远处出现或晚 10f 以上，读不出"是这个开关引起的" |
-| A 海报帧 | 相机全景到位（40f）早于晨昏线过中线（~44–50f） | 拉开太晚 → 全景里看不到昼夜同屏，手法只剩特写 |
-| A 坐实 | 扫完后夜里才有的光依次亮起（今日胶囊 / 此刻线 / 窗口轮廓光） | 比 scale 0.99 更有语义；不要再叠全屏闪白 |
-| B 因果钉扎 | 亮点在收缩点挂 5f（+ 横向余辉），涟漪圆心=该点坐标、起始帧=亮点结束帧 | 圆心错位/错帧就断了"命令→换肤"因果（组合命门） |
-| B 涟漪半径 | 终值 ≈ 圆心到最远角距离 × 1.1（demo 1260px） | 终值给太大（如 2000+）曲线前段一闪而过，圆形读不出来 |
-| B 浅色层 | 扫场完成后条件卸载 | 真静止前提 |
-
-## 已知坑
-- demo 在为镜头设计的 video-shotcraft UI（A 发布周制作排期 / B 样片画廊）上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 两版布局必须逐像素一致——布局有出入就读作"切换到另一个页面"，
-  手法即失效
-- 真实页面实战：深浅两版分别真实截图（Q1），不做滤镜假深色
-- 一支片主题切换 ≤1 次：它是功能叙事不是转场，反复切读作演示事故
-- 声音：A 扫场一声长 whoosh；B 回车一声确认 + 涟漪荡开接 whoosh
-  （S4 拟音优先）
-
-## 参考实现
-demos/interaction/theme-switch-moves/
-（PaletteThemeRipple.tsx / ThemeSweepToggle.tsx）
+---
+name: theme-switch-moves
+一句话: 主题切换两式——theme-sweep 斜向扫场（边界扫过处就地换肤）与 palette-ripple 组合款（⌘K 面板收缩成点、涟漪从点荡开换肤）
+适用: 深色模式/主题功能的叙事段落；同一 UI "在你眼前变色"而非切到新场景
+时长: A 140f（4.7s）/ B 156f（5.2s）
+能量: A 中 / B 中高（组合款有完整因果链）
+---
+
+## 意图
+深浅模式切换的两种拍法。A（Notion/Figma/Linear 惯用）：15° 斜向
+边界带亮线扫过全画面（demo 从开关所在的右侧扫向左侧），边界经过处浅色**就地**变深色，同布局
+双主题共存一瞬——观众看到的是"同一个 UI 换肤"，不是转场。
+B（组合变异）：⌘K 面板输入 "dark" 回车，面板收缩成一个亮点，
+深色涟漪**从该点**荡开扫过全 UI——"命令引发换肤"的因果链完整可读。
+组合命门：涟漪圆心必须是面板收缩点、起始帧必须是收缩完成帧。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A theme-sweep-toggle | 特写顶栏日夜开关（zoom 2.0）：指针按下、旋钮弹簧拨到月亮（太阳收光芒长出月牙）→ 深色世界 clip-path polygon 15° 斜边从开关一侧扫过（64f，bezier(.3,0,.35,1)），同时相机 30f 拉开到全景；边界 = 晨昏线：白热核心线 + 亮侧随速度变宽的落日橙暮光带 + 夜侧冷蓝辉；扫完"开灯"（今日胶囊 / 此刻线 / 窗口轮廓光依次亮起）坐实 | 主题功能直接展示 |
+| B palette-theme-ripple | 面板弹簧落下→人手节奏逐字输入→回车面板 CRT 关机式收缩（先纵向压成亮线、再横向收成亮点）+ 亮点与横向余辉钉住 5f→圆形 clip 半径 6→1260px 强 ease-out 荡开，3px 白热环 + 珊瑚外辉 / 白色内辉 + 晚 4f 回声环，深色版 1.035→1 坐实、相机顺势呼气退回 | 命令面板+主题联动的高光段 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 深色版制作 | 对色板逐键手工映射（bg/card/border 各自定深色值） | 滤镜反转出来的深色是错的（图像/头像全反） |
+| A 斜边超扫 | 斜线在世界坐标外扩 400px 计算多边形，终点越过左下角 | 不超扫角落残留浅色三角 |
+| A 因果 | 扫场起点紧贴开关、按下后 ~6f 边界就扫过开关；相机从开关特写拉开 | 边界从远处出现或晚 10f 以上，读不出"是这个开关引起的" |
+| A 海报帧 | 相机全景到位（40f）早于晨昏线过中线（~44–50f） | 拉开太晚 → 全景里看不到昼夜同屏，手法只剩特写 |
+| A 坐实 | 扫完后夜里才有的光依次亮起（今日胶囊 / 此刻线 / 窗口轮廓光） | 比 scale 0.99 更有语义；不要再叠全屏闪白 |
+| B 因果钉扎 | 亮点在收缩点挂 5f（+ 横向余辉），涟漪圆心=该点坐标、起始帧=亮点结束帧 | 圆心错位/错帧就断了"命令→换肤"因果（组合命门） |
+| B 涟漪半径 | 终值 ≈ 圆心到最远角距离 × 1.1（demo 1260px） | 终值给太大（如 2000+）曲线前段一闪而过，圆形读不出来 |
+| B 浅色层 | 扫场完成后条件卸载 | 真静止前提 |
+
+## 已知坑
+- demo 在为镜头设计的 video-shotcraft UI（A 发布周制作排期 / B 样片画廊）上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 两版布局必须逐像素一致——布局有出入就读作"切换到另一个页面"，
+  手法即失效
+- 真实页面实战：深浅两版分别真实截图（Q1），不做滤镜假深色
+- 一支片主题切换 ≤1 次：它是功能叙事不是转场，反复切读作演示事故
+- 声音：A 扫场一声长 whoosh；B 回车一声确认 + 涟漪荡开接 whoosh
+  （S4 拟音优先）
+
+## 参考实现
+demos/interaction/theme-switch-moves/
+（PaletteThemeRipple.tsx / ThemeSweepToggle.tsx）

package/lib/motion/shotcraft/upstream/references/shots/interaction/type-and-filter.md

@@ -1,37 +1,37 @@
----
-name: type-and-filter
-一句话: 真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页
-适用: 功能演示的"操作叙事"段；搜索/筛选/进入详情的任何交互链路
-时长: 约 2.5s（118–190f）
-能量: 中（发牌高能段之后的从容一拍）
----
-
-## 意图
-让观众"跟着做一遍"：看清输入了什么、页面怎么响应、点了哪里。这是全片唯一模拟真人操作的镜头，节奏必须像人手，不能像脚本。
-
-## 动效核心
-- 相机贴近搜索框（zoom 2.0，输入字有效字高 ≈30px）逐字符打字，光标常亮→闪烁；打完的呼吸位拉开到满幅全景（zoom 1.0）看网格收敛
-- 打完留一口气，然后非目标卡按阅读序错峰淡出下沉，网格收敛
-- 目标卡滑到首行槽位，途中浮起 + 阴影变宽
-- 指针在全景里滑到目标卡（屏幕尺寸恒定），双圈强调色（模板片为琥珀）ripple 点击确认，相机推进穿透进详情页交棒转场
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 打字速度 | 3f/字符（TYPE_START=128，"nano-lab" 8 字符 ≈149 收尾） | 初版嫌快返工后的定稿值（"unhurried"）；交互演示按真人操作速度走（R3） |
-| 呼吸位 | 打完到过滤 FILTER_START=160，留 ~11f（0.37s） | 打完立刻过滤读作机器自动，观众跟不上因果 |
-| 光标 | 打字时常亮，之后 8f 周期闪烁；点击 176f，光标 185f 消失 | 打字中闪烁会读作卡顿；常亮→闪烁的切换本身就是"打完了"的信号 |
-| 过滤退场 | 25 张非目标卡按阅读序 0.4f 间隔错峰，各 5f 淡出+下沉 8px | 同时消失读作页面崩溃；错峰哪怕只差 0.4f 也够 |
-| 目标卡滑位 | 10f 滑到首行槽位，bezier(0.35,0,0.2,1)，途中 sin 浮起 z 18px、scale +0.02、阴影随浮起变宽 | 终点必须是布局真实槽位（Q9），滑到画面中央悬停就假了 |
-| 点击确认 | 两圈同心强调色 ripple（起点差 3f、各 10f、半径 14→54/78）+ 3px 描边 + 40px 辉光，随后相机 16f 推进 zoom 2.2 | 单圈 ripple 太轻看不见；推进交棒给 flash-cut 盖住换页硬切（组件见 assets/lib/FlashCut.tsx，用法：from = 切点 − 5，跨骑硬切两侧各 5f） |
-| 搜索框 | 页面底色补丁盖掉纹理里的 placeholder（保留放大镜图标），文字层叠上去打 | 直接在截图纹理上叠字会和烤入的 placeholder 重影 |
-
-## 声音
-打字段钉 keyboard.mp3 并按 Sequence 截 24f 与动作严格等长（S4）；点击钉 click-camera（全片最响 vol 0.6，S2 响度分层）；网格飞走钉 whoosh-fast。
-
-## 已知坑
-- 初版打字+过滤"太快了"被返工（R3）——交互镜头的第一版几乎总是偏快，起稿就按 3f/字符
-- 过滤后目标卡若不归位到真实槽位、悬浮在网格上方，读作假（Q9，曾因此近乎整文件重写）
-
-## 参考实现
-demos/interaction/type-and-filter/TypeAndFilter.tsx（原 template/src/aifl/live/SceneFlyIn.tsx 118–190 段）
+---
+name: type-and-filter
+一句话: 真实 UI 上打字搜索、网格自己收敛成一张卡、点击穿透进详情页
+适用: 功能演示的"操作叙事"段；搜索/筛选/进入详情的任何交互链路
+时长: 约 2.5s（118–190f）
+能量: 中（发牌高能段之后的从容一拍）
+---
+
+## 意图
+让观众"跟着做一遍"：看清输入了什么、页面怎么响应、点了哪里。这是全片唯一模拟真人操作的镜头，节奏必须像人手，不能像脚本。
+
+## 动效核心
+- 相机贴近搜索框（zoom 2.0，输入字有效字高 ≈30px）逐字符打字，光标常亮→闪烁；打完的呼吸位拉开到满幅全景（zoom 1.0）看网格收敛
+- 打完留一口气，然后非目标卡按阅读序错峰淡出下沉，网格收敛
+- 目标卡滑到首行槽位，途中浮起 + 阴影变宽
+- 指针在全景里滑到目标卡（屏幕尺寸恒定），双圈强调色（模板片为琥珀）ripple 点击确认，相机推进穿透进详情页交棒转场
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 打字速度 | 3f/字符（TYPE_START=128，"nano-lab" 8 字符 ≈149 收尾） | 初版嫌快返工后的定稿值（"unhurried"）；交互演示按真人操作速度走（R3） |
+| 呼吸位 | 打完到过滤 FILTER_START=160，留 ~11f（0.37s） | 打完立刻过滤读作机器自动，观众跟不上因果 |
+| 光标 | 打字时常亮，之后 8f 周期闪烁；点击 176f，光标 185f 消失 | 打字中闪烁会读作卡顿；常亮→闪烁的切换本身就是"打完了"的信号 |
+| 过滤退场 | 25 张非目标卡按阅读序 0.4f 间隔错峰，各 5f 淡出+下沉 8px | 同时消失读作页面崩溃；错峰哪怕只差 0.4f 也够 |
+| 目标卡滑位 | 10f 滑到首行槽位，bezier(0.35,0,0.2,1)，途中 sin 浮起 z 18px、scale +0.02、阴影随浮起变宽 | 终点必须是布局真实槽位（Q9），滑到画面中央悬停就假了 |
+| 点击确认 | 两圈同心强调色 ripple（起点差 3f、各 10f、半径 14→54/78）+ 3px 描边 + 40px 辉光，随后相机 16f 推进 zoom 2.2 | 单圈 ripple 太轻看不见；推进交棒给 flash-cut 盖住换页硬切（组件见 assets/lib/FlashCut.tsx，用法：from = 切点 − 5，跨骑硬切两侧各 5f） |
+| 搜索框 | 页面底色补丁盖掉纹理里的 placeholder（保留放大镜图标），文字层叠上去打 | 直接在截图纹理上叠字会和烤入的 placeholder 重影 |
+
+## 声音
+打字段钉 keyboard.mp3 并按 Sequence 截 24f 与动作严格等长（S4）；点击钉 click-camera（全片最响 vol 0.6，S2 响度分层）；网格飞走钉 whoosh-fast。
+
+## 已知坑
+- 初版打字+过滤"太快了"被返工（R3）——交互镜头的第一版几乎总是偏快，起稿就按 3f/字符
+- 过滤后目标卡若不归位到真实槽位、悬浮在网格上方，读作假（Q9，曾因此近乎整文件重写）
+
+## 参考实现
+demos/interaction/type-and-filter/TypeAndFilter.tsx（原 template/src/aifl/live/SceneFlyIn.tsx 118–190 段）