dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/shotcraft/upstream/references/shots/data/scroll-brake-moves.md

@@ -1,46 +1,46 @@
----
-name: scroll-brake-moves
-一句话: 长卷急刹两式——changelog-scroll-brake 基本款（高速长卷指数减速精准停位+目标抬升）与 brake-reticle-lock 组合款（急刹帧同帧准星咬合）
-适用: changelog/发布史/长列表段落："一直在发货，今天这条最大"；要给停点更强打击感用 B
-时长: A 4–5s / B 5s
-能量: 高开中收（速度对比型）
-标签: rhythm
----
-
-## 意图
-Linear changelog 视频语法：一整年的更新日志作为长卷高速掠过
-（糊成色带），指数减速精准急刹停在本次发布那条上，该条抬升离面
-高亮、其余退暗——密度感讲"一直在发货"，急停讲"今天这条最大"。
-B 是组合变异：急刹帧**同帧**四个 L 角标从画外飞入咬合锁定停点
-条目——急刹的"哐"与咬合的"咔"叠在同一帧共振（组合命门：
-角标起跳帧=列表首停帧，错开退化成两招并置）。
-
-## 两式选型
-| 式 | 做法 | 适用 |
-|----|------|------|
-| A changelog-scroll-brake | translateY 扫 ~2400px（cubic-bezier(.45,0,.06,1)：~5f 拉满速再长尾指数式减速，共 50f），纵向方向性 blur 由帧间位移差分驱动（×0.32 封顶 30px，停稳自动清零）；停点行 scale 1.03 抬升+阴影+2px 强调色描边，其余 opacity 退 0.38 | changelog 段落基本款 |
-| B brake-reticle-lock | 滚动三段：sin-in 加速→cubic-out 猛减速冲过头 +30px→回弹落定；纵向方向性 blur=v×0.15 封顶 32px；角标从 ±620/±320 画外 Easing.back(2.4) 飞入咬合，高亮 6f 内完成、标签 back(2.6) 弹出 | 停点需要更强打击感的高光段 |
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 减速曲线 | A 快起步 + 长尾减速（bezier .45,0,.06,1）；B 加"冲过头 30px 回弹" | 匀速滚读作跑马灯；B 的过头回弹是"哐"的来源 |
-| blur 驱动 | 帧间位移差分 `|p(f)-p(f-1)|`×系数 | 手排模糊关键帧必然对不上速度；差分法帧确定（模式已沉为 assets/lib/helpers/motion.ts velocityAt） |
-| 行高节奏 | 72/94/116 三档错落 | 等高行高速掠过时色带无节奏 |
-| 停位 | 目标行停画面纵向正中 | 停偏读作事故 |
-| B 共振帧 | 角标挂载起跳帧 = 列表首次停住帧（严格同帧） | 组合命门，错 2f 以上就散 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 与 timeline-travel 分工：本卡纵向列表急刹停"最新"，
-  那卡横向时间轴旅行看"历史"——同片双用时先后错开且各 ≤1 次
-- 高速段条目内容不用真实可读文本——反正糊成色带，占位灰块即可；
-  停点条目必须出版级真内容（Q10）
-- 停点后其余行退暗 0.38 是构图动作：别退到 0（上下文消失）
-- 声音：高速段低频 riser 铺垫，急刹一声 impact；B 咬合帧
-  再叠一声"咔"（与 impact 同帧不同声部）
-
-## 参考实现
-demos/data/scroll-brake-moves/
-（BrakeReticleLock.tsx / ChangelogScrollBrake.tsx）
+---
+name: scroll-brake-moves
+一句话: 长卷急刹两式——changelog-scroll-brake 基本款（高速长卷指数减速精准停位+目标抬升）与 brake-reticle-lock 组合款（急刹帧同帧准星咬合）
+适用: changelog/发布史/长列表段落："一直在发货，今天这条最大"；要给停点更强打击感用 B
+时长: A 4–5s / B 5s
+能量: 高开中收（速度对比型）
+标签: rhythm
+---
+
+## 意图
+Linear changelog 视频语法：一整年的更新日志作为长卷高速掠过
+（糊成色带），指数减速精准急刹停在本次发布那条上，该条抬升离面
+高亮、其余退暗——密度感讲"一直在发货"，急停讲"今天这条最大"。
+B 是组合变异：急刹帧**同帧**四个 L 角标从画外飞入咬合锁定停点
+条目——急刹的"哐"与咬合的"咔"叠在同一帧共振（组合命门：
+角标起跳帧=列表首停帧，错开退化成两招并置）。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A changelog-scroll-brake | translateY 扫 ~2400px（cubic-bezier(.45,0,.06,1)：~5f 拉满速再长尾指数式减速，共 50f），纵向方向性 blur 由帧间位移差分驱动（×0.32 封顶 30px，停稳自动清零）；停点行 scale 1.03 抬升+阴影+2px 强调色描边，其余 opacity 退 0.38 | changelog 段落基本款 |
+| B brake-reticle-lock | 滚动三段：sin-in 加速→cubic-out 猛减速冲过头 +30px→回弹落定；纵向方向性 blur=v×0.15 封顶 32px；角标从 ±620/±320 画外 Easing.back(2.4) 飞入咬合，高亮 6f 内完成、标签 back(2.6) 弹出 | 停点需要更强打击感的高光段 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 减速曲线 | A 快起步 + 长尾减速（bezier .45,0,.06,1）；B 加"冲过头 30px 回弹" | 匀速滚读作跑马灯；B 的过头回弹是"哐"的来源 |
+| blur 驱动 | 帧间位移差分 `|p(f)-p(f-1)|`×系数 | 手排模糊关键帧必然对不上速度；差分法帧确定（模式已沉为 assets/lib/helpers/motion.ts velocityAt） |
+| 行高节奏 | 72/94/116 三档错落 | 等高行高速掠过时色带无节奏 |
+| 停位 | 目标行停画面纵向正中 | 停偏读作事故 |
+| B 共振帧 | 角标挂载起跳帧 = 列表首次停住帧（严格同帧） | 组合命门，错 2f 以上就散 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 timeline-travel 分工：本卡纵向列表急刹停"最新"，
+  那卡横向时间轴旅行看"历史"——同片双用时先后错开且各 ≤1 次
+- 高速段条目内容不用真实可读文本——反正糊成色带，占位灰块即可；
+  停点条目必须出版级真内容（Q10）
+- 停点后其余行退暗 0.38 是构图动作：别退到 0（上下文消失）
+- 声音：高速段低频 riser 铺垫，急刹一声 impact；B 咬合帧
+  再叠一声"咔"（与 impact 同帧不同声部）
+
+## 参考实现
+demos/data/scroll-brake-moves/
+（BrakeReticleLock.tsx / ChangelogScrollBrake.tsx）

package/lib/motion/shotcraft/upstream/references/shots/data/timeline-travel.md

@@ -1,44 +1,44 @@
----
-name: timeline-travel
-一句话: 时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近
-适用: changelog/里程碑/发展史段落（"我们一直在发货"的另一种拍法）；与 scroll-brake-moves 分工：那卡是纵向列表急刹，本卡是横向时间旅行
-时长: 4–5s
-能量: 中高（加速→急刹的节奏型镜头）
-标签: camera
----
-
-## 意图
-把产品的版本史拍成一次沿时间轴的旅行（《反恐王国》片头判例）：
-镜头缓起→冲刺→急刹三段变速横移，v1.0/v2.0/v3.0 刻度依次掠过，
-每过一格对应卡片从刻度线上 spring 弹立——历史在窗外闪过，
-急停在"今天"并推近。速度本身讲"发展快"，急停讲"现在最重要"。
-
-## 动作阶段
-| 阶段 | 帧段参考 | 内容 |
-|------|------|------|
-| 1 静置 | f0–12 | 空轴 + 首刻度定住 |
-| 2 加速掠过 | ~f12–100 | 世界层 translateX 分段缓动：缓起→冲刺→末 12% 急刹 |
-| 3 弹卡 | 掠过中 | 相机扫过刻度前 6f 卡片起弹（spring damping ~11 明显过冲），底边为轴 scaleY 立起 |
-| 4 急停推近 | 急停帧起 10f | scale 1→1.28 推近末刻度（out cubic），接静止 ≥30f |
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 变速曲线 | 输入断点 [0,0.15,0.88,1]→输出 [0,0.055,0.9,1] | 中段不够快就没有"旅行感"；全程匀速即廉价 PPT |
-| 弹立时机 | 相机到达刻度前 6f 起弹，由 camXAt 反查 | 到了才弹观众已经错过；早太多读作预告 |
-| 刻度密度 | 主刻度 3–5 个 + 次刻度小点若干 | 次刻度点是速度感的参照物，删掉就感觉不到快 |
-| 急停推近 | 1→1.28 / 10f | 不推近急停就只是"停了"，推近才是"到了" |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 中段冲刺快到卡片糊时可叠 CameraMotionBlur（只包快速段，轮 #8 判例）
-- 急停后静止预算前置：demo 首版静止只有 25f 不达标，急停帧前移才够
-  ——排时间线时先给末段留 ≥30f 再倒推行程
-- 每张弹立卡片是信息位：实战放真实版本亮点截图/一句话，
-  掠过速度要保证至少末两张能读（Q6 同源）
-- 声音：每次弹立一声轻打点，急停一声 impact（S2 同源）
-
-## 参考实现
-demos/data/timeline-travel/
-（TimelineTravel.tsx）
+---
+name: timeline-travel
+一句话: 时间轴横移——镜头沿水平刻度轴加速掠过版本刻度，每过一格卡片弹立短停，末刻度急停推近
+适用: changelog/里程碑/发展史段落（"我们一直在发货"的另一种拍法）；与 scroll-brake-moves 分工：那卡是纵向列表急刹，本卡是横向时间旅行
+时长: 4–5s
+能量: 中高（加速→急刹的节奏型镜头）
+标签: camera
+---
+
+## 意图
+把产品的版本史拍成一次沿时间轴的旅行（《反恐王国》片头判例）：
+镜头缓起→冲刺→急刹三段变速横移，v1.0/v2.0/v3.0 刻度依次掠过，
+每过一格对应卡片从刻度线上 spring 弹立——历史在窗外闪过，
+急停在"今天"并推近。速度本身讲"发展快"，急停讲"现在最重要"。
+
+## 动作阶段
+| 阶段 | 帧段参考 | 内容 |
+|------|------|------|
+| 1 静置 | f0–12 | 空轴 + 首刻度定住 |
+| 2 加速掠过 | ~f12–100 | 世界层 translateX 分段缓动：缓起→冲刺→末 12% 急刹 |
+| 3 弹卡 | 掠过中 | 相机扫过刻度前 6f 卡片起弹（spring damping ~11 明显过冲），底边为轴 scaleY 立起 |
+| 4 急停推近 | 急停帧起 10f | scale 1→1.28 推近末刻度（out cubic），接静止 ≥30f |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 变速曲线 | 输入断点 [0,0.15,0.88,1]→输出 [0,0.055,0.9,1] | 中段不够快就没有"旅行感"；全程匀速即廉价 PPT |
+| 弹立时机 | 相机到达刻度前 6f 起弹，由 camXAt 反查 | 到了才弹观众已经错过；早太多读作预告 |
+| 刻度密度 | 主刻度 3–5 个 + 次刻度小点若干 | 次刻度点是速度感的参照物，删掉就感觉不到快 |
+| 急停推近 | 1→1.28 / 10f | 不推近急停就只是"停了"，推近才是"到了" |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 中段冲刺快到卡片糊时可叠 CameraMotionBlur（只包快速段，轮 #8 判例）
+- 急停后静止预算前置：demo 首版静止只有 25f 不达标，急停帧前移才够
+  ——排时间线时先给末段留 ≥30f 再倒推行程
+- 每张弹立卡片是信息位：实战放真实版本亮点截图/一句话，
+  掠过速度要保证至少末两张能读（Q6 同源）
+- 声音：每次弹立一声轻打点，急停一声 impact（S2 同源）
+
+## 参考实现
+demos/data/timeline-travel/
+（TimelineTravel.tsx）

package/lib/motion/shotcraft/upstream/references/shots/effects/assemble-then-type-flyin.md

@@ -1,63 +1,63 @@
----
-name: assemble-then-type-flyin
-一句话: 空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形
-适用: 页面/海报"自己长出来"的开场；排版类产品的能力展示；从骨架到成稿的两段式叙事
-时长: 约5.6s（168f@30fps）
-能量: 中高（骨架段稀疏、文字段密集，能量单调上升到收尾）
----
-
-## 意图
-把"页面生成"拆成两个语义清楚的阶段：先立骨架（框、卡片、分隔线、
-色块，全部无字），再填文字。文字用逐字 3D 旋转落位，是因为骨架段
-只有平面位移——两段的运动维度必须不同，否则观众读不出"这是第二步"。
-
-## 动效核心
-- demo 成形后是 video-shotcraft 的暗场发布页（graphite look，胶片金 accent2 是唯一强调色；导航条是镜刻标志 +
-  video-shotcraft 字标，大标题是品牌短句「Frame motion. / Craft the shot.」），
-  1920×1080 原生坐标；开场第 1 帧先有 12 栏版式参考线，骨架齐后退淡
-- 10 个骨架件（导航条、调色台卡 + 胶片画面色块、镜刻标志、三只色轮圈、分隔线、CTA、次按钮、三枚指标块）
-  按起飞帧 6/10/15/19/23/27/31/35/39/44 依次飞入，每件 16f `EASE.overshoot` 过冲贴合，
-  `from` 位移 120–420px + ±7° 旋转（旋转晚 4f 收敛）
-- 骨架运动中按真实速度（px/帧）给方向性运动模糊（`SpeedBlur` ×0.32，上限 18px），静止即为 0
-- 19 个文字块按起始帧 58→114 依次开始：112px 衬线大标题最先（58/66），
-  然后导航、eyebrow、说明句、按钮字（76–95），指标数字（96–102），最后各处 mono 小标注（104–114）
-- 逐字 3D：每个字符持有确定性种子随机的
-  `dx ±260px / dy ±200px / dz −200→−760 / rotateX ±170° / rotateY ±190° /
-  rotateZ ±120°`，走 `perspective(900px) translate3d + rotateX/Y/Z`，
-  每字 16f `EASE.snappy` 落位，飞行中按离焦距离给景深模糊，`a>=1` 时 transform 直接设 `none`
-- 块内字符间隔自适应：`step = clamp((128 − start − 16)/字符数, 0.35, 1.6)` 帧
-  ——保证不论块多长都在 f128 前落完，尾段留 40f 整页静止呼吸（1.5% 极缓推近）
-- 落定后的"定稿"一笔：CTA 由描边通电成金色实底（118–132），胶片画面被一道金色竖线从 log 灰片
-  擦除成暖调成片（124–146），三只色轮控制点同步从中性位推到偏色位
-- 随机全部来自 `rand(i) = frac(sin(i*127.1 + 311.7) * 43758.5453)`，
-  确定性、可 seek
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 骨架时序 | 10 件，起飞帧 6→44（间隔 4–5f） | 骨架段占前 30%；压缩到 20f 内就和文字段糊在一起 |
-| 骨架飞入 | overshoot、16f、位移 120–420px + ±7° | 与 `scanline-assemble-flyin` 同一手法，去掉扫描线后靠时序读顺序 |
-| 骨架残影 | 方向性运动模糊，按速度 ×0.32、封顶 18px | 只在快速段出现；常驻模糊读作失焦 |
-| 两段断点 | 骨架齐（f50）→ 文字起（f58）留 8f，参考线同期退淡 | 没有这半拍观众读不出"这是第二步" |
-| 文字起点 | 大标题 58/66，小标注 104→114 | 大字先落是可读性要求：小字先落观众会去读小字 |
-| 逐字位移 | dx ±260 / dy ±200 / dz −200→−760 | dz 是"从远处来"的主力；只给 dx/dy 就成了平面散入 |
-| 逐字旋转 | rotateX/Y/Z 各 ±120°–190° | 大角度才有"翻着飞"的手感；±30° 只像抖动 |
-| perspective | 900px（写在每个字符自己的 transform 里） | 112px 大字配 600px 会过度畸变；1400px 以上 3D 感基本消失 |
-| 字间隔 | clamp((128−start−16)/n, 0.35, 1.6) 帧 | 上限 1.6f 是"逐字可辨"的下限速度 |
-| 落位清零 | a>=1 → transform:'none' | 不清零会留下 19 个块的合成层，长片会掉帧 |
-
-## 已知坑
-- 字符 span 走正常排版流（`display:inline-block`），动画只动 transform——
-  不要用绝对定位逐字摆位，换文案就全乱
-- 空格字符必须显式塞成不换行空格（代码里用 `ch === ' ' ? '\u00a0' : ch`），
-  否则 inline-block 的空 span 宽度归零，词间距消失
-- `start` 是手写的 19 个数值，换文案（尤其字符数变化大时）要回看
-  最后一块是否仍在 f128 前落完；`step` 只保证块内，不保证块间
-- 内容是 video-shotcraft 的示例发布页（标题 / 指标 / 色轮标注），落地换成项目自己的；
-  GOLD（graphite 的 accent2 `#e4c58a`）为强调色槽位，CTA 字色随通电由金转深要一起换
-- 与 `scanline-assemble-flyin` 的区别是**没有扫描线**：那张靠扫描线
-  解释顺序，这张靠"先骨架后文字"的两段式解释顺序，两者不要混用
-
-## 参考实现
-demos/effects/assemble-then-type-flyin/
-（AssembleThenTypeFlyin.tsx）
+---
+name: assemble-then-type-flyin
+一句话: 空的暗底网格上，无文字的组件骨架先从四面八方飞入贴合；随后各处文字逐字从 3D 空间旋转着飞来落位，先大标题后小标注，全部落位后页面成形
+适用: 页面/海报"自己长出来"的开场；排版类产品的能力展示；从骨架到成稿的两段式叙事
+时长: 约5.6s（168f@30fps）
+能量: 中高（骨架段稀疏、文字段密集，能量单调上升到收尾）
+---
+
+## 意图
+把"页面生成"拆成两个语义清楚的阶段：先立骨架（框、卡片、分隔线、
+色块，全部无字），再填文字。文字用逐字 3D 旋转落位，是因为骨架段
+只有平面位移——两段的运动维度必须不同，否则观众读不出"这是第二步"。
+
+## 动效核心
+- demo 成形后是 video-shotcraft 的暗场发布页（graphite look，胶片金 accent2 是唯一强调色；导航条是镜刻标志 +
+  video-shotcraft 字标，大标题是品牌短句「Frame motion. / Craft the shot.」），
+  1920×1080 原生坐标；开场第 1 帧先有 12 栏版式参考线，骨架齐后退淡
+- 10 个骨架件（导航条、调色台卡 + 胶片画面色块、镜刻标志、三只色轮圈、分隔线、CTA、次按钮、三枚指标块）
+  按起飞帧 6/10/15/19/23/27/31/35/39/44 依次飞入，每件 16f `EASE.overshoot` 过冲贴合，
+  `from` 位移 120–420px + ±7° 旋转（旋转晚 4f 收敛）
+- 骨架运动中按真实速度（px/帧）给方向性运动模糊（`SpeedBlur` ×0.32，上限 18px），静止即为 0
+- 19 个文字块按起始帧 58→114 依次开始：112px 衬线大标题最先（58/66），
+  然后导航、eyebrow、说明句、按钮字（76–95），指标数字（96–102），最后各处 mono 小标注（104–114）
+- 逐字 3D：每个字符持有确定性种子随机的
+  `dx ±260px / dy ±200px / dz −200→−760 / rotateX ±170° / rotateY ±190° /
+  rotateZ ±120°`，走 `perspective(900px) translate3d + rotateX/Y/Z`，
+  每字 16f `EASE.snappy` 落位，飞行中按离焦距离给景深模糊，`a>=1` 时 transform 直接设 `none`
+- 块内字符间隔自适应：`step = clamp((128 − start − 16)/字符数, 0.35, 1.6)` 帧
+  ——保证不论块多长都在 f128 前落完，尾段留 40f 整页静止呼吸（1.5% 极缓推近）
+- 落定后的"定稿"一笔：CTA 由描边通电成金色实底（118–132），胶片画面被一道金色竖线从 log 灰片
+  擦除成暖调成片（124–146），三只色轮控制点同步从中性位推到偏色位
+- 随机全部来自 `rand(i) = frac(sin(i*127.1 + 311.7) * 43758.5453)`，
+  确定性、可 seek
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 骨架时序 | 10 件，起飞帧 6→44（间隔 4–5f） | 骨架段占前 30%；压缩到 20f 内就和文字段糊在一起 |
+| 骨架飞入 | overshoot、16f、位移 120–420px + ±7° | 与 `scanline-assemble-flyin` 同一手法，去掉扫描线后靠时序读顺序 |
+| 骨架残影 | 方向性运动模糊，按速度 ×0.32、封顶 18px | 只在快速段出现；常驻模糊读作失焦 |
+| 两段断点 | 骨架齐（f50）→ 文字起（f58）留 8f，参考线同期退淡 | 没有这半拍观众读不出"这是第二步" |
+| 文字起点 | 大标题 58/66，小标注 104→114 | 大字先落是可读性要求：小字先落观众会去读小字 |
+| 逐字位移 | dx ±260 / dy ±200 / dz −200→−760 | dz 是"从远处来"的主力；只给 dx/dy 就成了平面散入 |
+| 逐字旋转 | rotateX/Y/Z 各 ±120°–190° | 大角度才有"翻着飞"的手感；±30° 只像抖动 |
+| perspective | 900px（写在每个字符自己的 transform 里） | 112px 大字配 600px 会过度畸变；1400px 以上 3D 感基本消失 |
+| 字间隔 | clamp((128−start−16)/n, 0.35, 1.6) 帧 | 上限 1.6f 是"逐字可辨"的下限速度 |
+| 落位清零 | a>=1 → transform:'none' | 不清零会留下 19 个块的合成层，长片会掉帧 |
+
+## 已知坑
+- 字符 span 走正常排版流（`display:inline-block`），动画只动 transform——
+  不要用绝对定位逐字摆位，换文案就全乱
+- 空格字符必须显式塞成不换行空格（代码里用 `ch === ' ' ? '\u00a0' : ch`），
+  否则 inline-block 的空 span 宽度归零，词间距消失
+- `start` 是手写的 19 个数值，换文案（尤其字符数变化大时）要回看
+  最后一块是否仍在 f128 前落完；`step` 只保证块内，不保证块间
+- 内容是 video-shotcraft 的示例发布页（标题 / 指标 / 色轮标注），落地换成项目自己的；
+  GOLD（graphite 的 accent2 `#e4c58a`）为强调色槽位，CTA 字色随通电由金转深要一起换
+- 与 `scanline-assemble-flyin` 的区别是**没有扫描线**：那张靠扫描线
+  解释顺序，这张靠"先骨架后文字"的两段式解释顺序，两者不要混用
+
+## 参考实现
+demos/effects/assemble-then-type-flyin/
+（AssembleThenTypeFlyin.tsx）

package/lib/motion/shotcraft/upstream/references/shots/effects/aurora-bloom-bg-flip.md

@@ -1,54 +1,54 @@
----
-name: aurora-bloom-bg-flip
-一句话: 浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade
-适用: 叙事转折点（"多年以来…→一切都变了"）；品牌片从铺垫拉到重音的那一拍；深浅色系之间的段落切换
-时长: 约5.2s（156f@30fps）
-能量: 由低到高（前 2/3 是酝酿，压暗那一瞬是全片重音）
----
-
-## 意图
-把"底色反转"当成重音符号用：前 56% 让极光慢慢升起、观众适应浅底，
-然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像
-"翻页"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面
-变化再读新句。
-
-## 动效核心
-- 三层 `blur(60px)` blob 从画框底部升起：主紫 `rgba(107,79,224,.85)`
-  90%×85%、橙核 `rgba(217,122,74,.9)`、白色融边 `rgba(255,255,255,.8)`
-- 升起 `seg(0.04→0.56, outCubic)`：`translateY 32%→−6%` + `scale 1→1.25`
-- 反转 `flip = seg(0.57→0.64, inOutQuad)`（归一化 0.07 ≈ 0.36s）：
-  底色 `mix([236,236,236] → [10,10,18])`，blob opacity 1→0.4 压成余晖，
-  白色融边层 `1−flip` 直接收掉
-- 橙核独立 `translateX ±8%`（2.2 周期/全片）横向慢漂，让 blob 内部
-  有相对运动而不是整块升降
-- A 句逐词 `blur 0→8px` + 淡出（t 0.40 起、stagger 0.04、各 0.10、inQuad）；
-  B 句逐词 `outQuint` blur-in（t 0.70 起、stagger 0.05、各 0.11），落位后 0.09 内
-  由 DEEPP 紫收色到白，t≈0.90 定稿后静止 ≈0.5s
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| blob 模糊/尺寸 | blur(60px)，主层 90%×85%，容器 inset −10% | 模糊小于 40px 就看得出是圆，成了"色球"不是"光" |
-| 升起 | translateY 32%→−6% + scale 1→1.25，t 0.04→0.56 outCubic | 占掉一半以上时长是故意的：酝酿越长，反转越有分量 |
-| 反转时长 | t 0.57→0.64 inOutQuad ≈ 0.36s | **命门**：拉到 1s 就不是重音而是渐变过场 |
-| 底色 | #ececec → #0a0a12（不是纯黑） | 纯黑会让余晖 blob 边缘出现色阶断层 |
-| blob 压暗 | opacity 1→0.4，白色融边层同步归零 | 不压暗 blob，暗场里紫橙会过曝糊成一团 |
-| 橙核漂移 | translateX ±8%，2.2 周期/全片 | 幅度到 15% 就看得出是"一个球在动" |
-| A 句 blur-out | 逐词 stagger 0.04、各 0.10、inQuad、blur→8px | inQuad 让消失是加速的，读作"被光吞掉" |
-| B 句 blur-in | 逐词 stagger 0.05、各 0.11 outQuint + 0.09 内紫→白 | 收色比入场晚一点，落定瞬间才转白，是"定稿"的信号 |
-| 换句空档 | A 收完 t≈0.58 → B 起 0.70（≈0.6s 无字） | cross-fade 会把两句糊在一起，空档才读出"翻篇" |
-
-## 已知坑
-- 白色融边层（blobC）只在浅底成立，反转时必须 `1−flip` 收掉，
-  否则暗场里留一团灰雾
-- DEEPP/PURPLE 是这个效果的**本体光色**，不是品牌色槽位；要换成项目色
-  必须 blob 三层 + B 句文字色整组一起换，只换文字色会和背景脱节
-- demo 文案是 video-shotcraft 的叙事转折（"Promos took weeks" / "Meet video-shotcraft"，
-  词数与字长贴近原片的 "For many years" / "everything changed"），逐词
-  stagger 的节奏依赖词数与字长，换句要回调 0.04/0.06 两个间隔
-- 底色用 JS 逐帧写 `background`（`mix()` 出实色），不要用 CSS transition，
-  否则 seek 到任意帧时颜色不确定
-
-## 参考实现
-demos/effects/aurora-bloom-bg-flip/
-（AuroraBloomBgFlip.tsx）
+---
+name: aurora-bloom-bg-flip
+一句话: 浅灰底从底部升起紫橙柔焦 blob，随后整个底色在约 0.36s 内压暗到近黑、blob 压成余晖；文案同步 blur-out 换句 blur-in，换句间留空档不 cross-fade
+适用: 叙事转折点（"多年以来…→一切都变了"）；品牌片从铺垫拉到重音的那一拍；深浅色系之间的段落切换
+时长: 约5.2s（156f@30fps）
+能量: 由低到高（前 2/3 是酝酿，压暗那一瞬是全片重音）
+---
+
+## 意图
+把"底色反转"当成重音符号用：前 56% 让极光慢慢升起、观众适应浅底，
+然后用不到 0.4s 把整个画面压到近黑——这一下比任何缩放/闪白都更像
+"翻页"。文案的换句必须卡在反转之后，且中间留空档，让观众先接住画面
+变化再读新句。
+
+## 动效核心
+- 三层 `blur(60px)` blob 从画框底部升起：主紫 `rgba(107,79,224,.85)`
+  90%×85%、橙核 `rgba(217,122,74,.9)`、白色融边 `rgba(255,255,255,.8)`
+- 升起 `seg(0.04→0.56, outCubic)`：`translateY 32%→−6%` + `scale 1→1.25`
+- 反转 `flip = seg(0.57→0.64, inOutQuad)`（归一化 0.07 ≈ 0.36s）：
+  底色 `mix([236,236,236] → [10,10,18])`，blob opacity 1→0.4 压成余晖，
+  白色融边层 `1−flip` 直接收掉
+- 橙核独立 `translateX ±8%`（2.2 周期/全片）横向慢漂，让 blob 内部
+  有相对运动而不是整块升降
+- A 句逐词 `blur 0→8px` + 淡出（t 0.40 起、stagger 0.04、各 0.10、inQuad）；
+  B 句逐词 `outQuint` blur-in（t 0.70 起、stagger 0.05、各 0.11），落位后 0.09 内
+  由 DEEPP 紫收色到白，t≈0.90 定稿后静止 ≈0.5s
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| blob 模糊/尺寸 | blur(60px)，主层 90%×85%，容器 inset −10% | 模糊小于 40px 就看得出是圆，成了"色球"不是"光" |
+| 升起 | translateY 32%→−6% + scale 1→1.25，t 0.04→0.56 outCubic | 占掉一半以上时长是故意的：酝酿越长，反转越有分量 |
+| 反转时长 | t 0.57→0.64 inOutQuad ≈ 0.36s | **命门**：拉到 1s 就不是重音而是渐变过场 |
+| 底色 | #ececec → #0a0a12（不是纯黑） | 纯黑会让余晖 blob 边缘出现色阶断层 |
+| blob 压暗 | opacity 1→0.4，白色融边层同步归零 | 不压暗 blob，暗场里紫橙会过曝糊成一团 |
+| 橙核漂移 | translateX ±8%，2.2 周期/全片 | 幅度到 15% 就看得出是"一个球在动" |
+| A 句 blur-out | 逐词 stagger 0.04、各 0.10、inQuad、blur→8px | inQuad 让消失是加速的，读作"被光吞掉" |
+| B 句 blur-in | 逐词 stagger 0.05、各 0.11 outQuint + 0.09 内紫→白 | 收色比入场晚一点，落定瞬间才转白，是"定稿"的信号 |
+| 换句空档 | A 收完 t≈0.58 → B 起 0.70（≈0.6s 无字） | cross-fade 会把两句糊在一起，空档才读出"翻篇" |
+
+## 已知坑
+- 白色融边层（blobC）只在浅底成立，反转时必须 `1−flip` 收掉，
+  否则暗场里留一团灰雾
+- DEEPP/PURPLE 是这个效果的**本体光色**，不是品牌色槽位；要换成项目色
+  必须 blob 三层 + B 句文字色整组一起换，只换文字色会和背景脱节
+- demo 文案是 video-shotcraft 的叙事转折（"Promos took weeks" / "Meet video-shotcraft"，
+  词数与字长贴近原片的 "For many years" / "everything changed"），逐词
+  stagger 的节奏依赖词数与字长，换句要回调 0.04/0.06 两个间隔
+- 底色用 JS 逐帧写 `background`（`mix()` 出实色），不要用 CSS transition，
+  否则 seek 到任意帧时颜色不确定
+
+## 参考实现
+demos/effects/aurora-bloom-bg-flip/
+（AuroraBloomBgFlip.tsx）

package/lib/motion/shotcraft/upstream/references/shots/effects/brand-frame-snap.md

@@ -1,58 +1,58 @@
----
-name: brand-frame-snap
-一句话: 品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事
-适用: 双模式/双章节产品片的全片包装层（蓝=模式A、绿=模式B 颜色编码）；真实录屏素材的品牌化包裹
-时长: 单次翻色 ~4.7s（140f）；画框本身可全片驻场
-能量: 中（翻色瞬间高，其余时间是安静的包装层）
-标签: transition
----
-
-## 意图
-真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈
-粗品牌色画框把录屏"装裱"起来：画框**先于内容出现**（先立画框再放
-画，仪式感），之后画框颜色成为全片的语义编码——demo 里钴蓝=Design、
-橘红=Dev Mode（原片是蓝/绿；关键是色相对冲 + 明度差）。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是"换挡"
-声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧
-共振把"模式切换"砸实。与 theme-switch-moves 分工：那换的是 UI 本体
-肤色（有扫过边界），本卡换的是"画框"这个包装层（同帧无边界），
-语义是模式/章节切换不是主题切换。
-
-## 动效核心
-- 画框用 4 条实体色带（非 border 属性），厚度 0→60px snappy 19f
-  长出（第 2 帧就有可见框）；洞口是 22px 圆角（四角补色块），色带叠一层
-  顶亮底暗的薄釉；翻色 = 同一帧换 background，帧确定
-- 产品窗口（1560×864，原生像素布局）spring(damping 15, stiffness 115)
-  从下方 660px + 前倾 18°→0 + scale 0.88→1 落进框内（帧 10 起，画框长出
-  中段），下落按速度纵向运动模糊，阴影随高度 70→22 收紧
-- 动机：光标 56–80f 弧线滑向标题栏 Design | Dev 开关，80 按下、84 松开 = 翻色帧
-- 翻色帧四件事同帧：画框换色 + 窗内布局 A→B 硬切（右栏浅色检查器→深色
-  CSS 面板、左栏图层→tokens、蓝选框→橘标注）+ 框带角标换字
-  （DESIGN→DEV MODE，右上 video-shotcraft 字标常驻，色带上用单色白版标志）+ 开关态
-- 翻色瞬间叠 3 帧径向白闪（0.6 起阶梯衰减，框带最亮）+ 画框厚度阻尼
-  弹跳（exp(-0.24t)·cos(0.95t)·12px）+ 内容 ~1% 顿挫，给"换挡"打击感；
-  余波：标注线 3f 错峰画出、数值胶囊过冲弹出
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 画框厚度 | 60px（1080p），角标 30px 粗体全大写 | 太薄读作描边、角标也放不下可读字号；>64px 开始吃内容区 |
-| 画框生长 | 19f snappy，先于窗口 10f | 画框必须先立——内容先到画框后包读作补救 |
-| 窗口落位 | spring(damping 15, stiffness 115)，y 660→0 + rotateX 18°→0 + scale 0.88→1 | 落进"框内"是语义关键，落点必须完全在框带内侧 |
-| 翻色时刻 | demo 84f（光标松开帧）；停一拍（窗口落定后 ≥30f）再翻 | 落定没坐稳就翻，观众还没建立"蓝=当前模式"的编码 |
-| 白闪脉冲 | 3f，0.6→0.2 阶梯，径向（框带处最亮） | 帮眼睛登记"这一帧变了"；>4f 读作底色频闪，抢了翻色的戏 |
-| 厚度弹跳 | exp 衰减 cos，初幅 12px | 纯硬切略干；弹跳是"挡位卡进去"的机械回馈 |
-
-## 已知坑
-- demo 用手搓的设计工具窗口调校通过（框带角标是 video-shotcraft 标志 + 字标，画布上是一张 video-shotcraft 推广卡）——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 翻色必须真同帧：画框、窗内布局、角标文字三者错开哪怕 2f，"换挡"就散成三个小动画
-- 颜色编码要全片守约：蓝框段落里不许出现绿色主 UI 元素，编码被稀释后翻色就只是换色
-- 画框是包装层不是主角：全片翻色 ≤2 次，翻多了读作霓虹灯（P4 克制原则）
-- 两个模式的品牌色对比度要够（demo 钴蓝 #2F55FF / 橘红 #FF5B1F，色相对冲 + 明度差）；同明度邻近色翻了等于没翻
-- 窗内 UI 保持中性墨色，强调色只跟模式走（蓝段的选中态是蓝、橘段的标注是橘），否则编码被 UI 自身颜色稀释
-- 声音：翻色帧钉一声干脆的机械 click/换挡声，白闪与声同帧；画框生长段可静
-
-## 参考实现
-demos/effects/brand-frame-snap/
-（BrandFrameSnap.tsx）
-原片出处：figma-devmode 0:28–0:32 + 0:43–0:47
+---
+name: brand-frame-snap
+一句话: 品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事
+适用: 双模式/双章节产品片的全片包装层（蓝=模式A、绿=模式B 颜色编码）；真实录屏素材的品牌化包裹
+时长: 单次翻色 ~4.7s（140f）；画框本身可全片驻场
+能量: 中（翻色瞬间高，其余时间是安静的包装层）
+标签: transition
+---
+
+## 意图
+真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈
+粗品牌色画框把录屏"装裱"起来：画框**先于内容出现**（先立画框再放
+画，仪式感），之后画框颜色成为全片的语义编码——demo 里钴蓝=Design、
+橘红=Dev Mode（原片是蓝/绿；关键是色相对冲 + 明度差）。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是"换挡"
+声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧
+共振把"模式切换"砸实。与 theme-switch-moves 分工：那换的是 UI 本体
+肤色（有扫过边界），本卡换的是"画框"这个包装层（同帧无边界），
+语义是模式/章节切换不是主题切换。
+
+## 动效核心
+- 画框用 4 条实体色带（非 border 属性），厚度 0→60px snappy 19f
+  长出（第 2 帧就有可见框）；洞口是 22px 圆角（四角补色块），色带叠一层
+  顶亮底暗的薄釉；翻色 = 同一帧换 background，帧确定
+- 产品窗口（1560×864，原生像素布局）spring(damping 15, stiffness 115)
+  从下方 660px + 前倾 18°→0 + scale 0.88→1 落进框内（帧 10 起，画框长出
+  中段），下落按速度纵向运动模糊，阴影随高度 70→22 收紧
+- 动机：光标 56–80f 弧线滑向标题栏 Design | Dev 开关，80 按下、84 松开 = 翻色帧
+- 翻色帧四件事同帧：画框换色 + 窗内布局 A→B 硬切（右栏浅色检查器→深色
+  CSS 面板、左栏图层→tokens、蓝选框→橘标注）+ 框带角标换字
+  （DESIGN→DEV MODE，右上 video-shotcraft 字标常驻，色带上用单色白版标志）+ 开关态
+- 翻色瞬间叠 3 帧径向白闪（0.6 起阶梯衰减，框带最亮）+ 画框厚度阻尼
+  弹跳（exp(-0.24t)·cos(0.95t)·12px）+ 内容 ~1% 顿挫，给"换挡"打击感；
+  余波：标注线 3f 错峰画出、数值胶囊过冲弹出
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 画框厚度 | 60px（1080p），角标 30px 粗体全大写 | 太薄读作描边、角标也放不下可读字号；>64px 开始吃内容区 |
+| 画框生长 | 19f snappy，先于窗口 10f | 画框必须先立——内容先到画框后包读作补救 |
+| 窗口落位 | spring(damping 15, stiffness 115)，y 660→0 + rotateX 18°→0 + scale 0.88→1 | 落进"框内"是语义关键，落点必须完全在框带内侧 |
+| 翻色时刻 | demo 84f（光标松开帧）；停一拍（窗口落定后 ≥30f）再翻 | 落定没坐稳就翻，观众还没建立"蓝=当前模式"的编码 |
+| 白闪脉冲 | 3f，0.6→0.2 阶梯，径向（框带处最亮） | 帮眼睛登记"这一帧变了"；>4f 读作底色频闪，抢了翻色的戏 |
+| 厚度弹跳 | exp 衰减 cos，初幅 12px | 纯硬切略干；弹跳是"挡位卡进去"的机械回馈 |
+
+## 已知坑
+- demo 用手搓的设计工具窗口调校通过（框带角标是 video-shotcraft 标志 + 字标，画布上是一张 video-shotcraft 推广卡）——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 翻色必须真同帧：画框、窗内布局、角标文字三者错开哪怕 2f，"换挡"就散成三个小动画
+- 颜色编码要全片守约：蓝框段落里不许出现绿色主 UI 元素，编码被稀释后翻色就只是换色
+- 画框是包装层不是主角：全片翻色 ≤2 次，翻多了读作霓虹灯（P4 克制原则）
+- 两个模式的品牌色对比度要够（demo 钴蓝 #2F55FF / 橘红 #FF5B1F，色相对冲 + 明度差）；同明度邻近色翻了等于没翻
+- 窗内 UI 保持中性墨色，强调色只跟模式走（蓝段的选中态是蓝、橘段的标注是橘），否则编码被 UI 自身颜色稀释
+- 声音：翻色帧钉一声干脆的机械 click/换挡声，白闪与声同帧；画框生长段可静
+
+## 参考实现
+demos/effects/brand-frame-snap/
+（BrandFrameSnap.tsx）
+原片出处：figma-devmode 0:28–0:32 + 0:43–0:47

package/lib/motion/shotcraft/upstream/references/shots/effects/fui-hud-moves.md

@@ -1,35 +1,35 @@
----
-name: fui-hud-moves
-一句话: FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标
-适用: 任何"看这里"的目标点名（替代箭头圈红，画面不冻结）
-时长: 2–3s（demo 90f）
-能量: 中高（咬合帧是打击点）
-标签: ui-entrance
----
-
-## 意图
-科幻虚构界面（Jarvis/Territory）里可中性化的母题：运动中的捕获。
-四个 L 形角标从画外冲入、超调回弹、"咔"地咬合到目标元素四角+弹标签
-——与 freeze-annotate 分工：那卡冻结画面标注，本卡在流动中点名。
-
-## 式
-| 式 | 做法 | 适用 |
-|----|------|------|
-| A reticle-lock-on | 四 L 角=同一对矩形四份镜像，飞入（10f out cubic）与收缩（2.2×→0.94×→1 超调回弹）解耦；咬合帧目标微亮+标签 back 弹出 | 目标点名；踩音效重拍 |
-
-## 参数表
-| 参数 | 典型值 | 调节手感 |
-|------|--------|----------|
-| 飞入行程 | 画外 ≥1000px 冲入 | 行程短读作"角标出现"不是"扑过来" |
-| 超调 | 收缩过头到 0.94× 再回弹 1 | 无超调没有"咔"的咬合感 |
-| 咬合帧 | 目标白 overlay 快闪 0.55→停 0.28 + 标签同帧弹出 | 微亮与标签错帧就散了 |
-
-## 已知坑
-- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
-  首次实战须以真实素材回验
-- 一支片 ≤2 次：连用读作军事模板；两次锁定目标必须不同
-- 声音：咬合帧一声"咔"（机械 click 而非游戏 UI 音，S1 边界内）
-
-## 参考实现
-demos/effects/fui-hud-moves/
-（ReticleLockOn.tsx）
+---
+name: fui-hud-moves
+一句话: FUI/HUD 准星咬合——reticle-lock-on 四个 L 形角标组成的取景框从画外飞入、超调回弹后咬合锁定目标
+适用: 任何"看这里"的目标点名（替代箭头圈红，画面不冻结）
+时长: 2–3s（demo 90f）
+能量: 中高（咬合帧是打击点）
+标签: ui-entrance
+---
+
+## 意图
+科幻虚构界面（Jarvis/Territory）里可中性化的母题：运动中的捕获。
+四个 L 形角标从画外冲入、超调回弹、"咔"地咬合到目标元素四角+弹标签
+——与 freeze-annotate 分工：那卡冻结画面标注，本卡在流动中点名。
+
+## 式
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A reticle-lock-on | 四 L 角=同一对矩形四份镜像，飞入（10f out cubic）与收缩（2.2×→0.94×→1 超调回弹）解耦；咬合帧目标微亮+标签 back 弹出 | 目标点名；踩音效重拍 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 飞入行程 | 画外 ≥1000px 冲入 | 行程短读作"角标出现"不是"扑过来" |
+| 超调 | 收缩过头到 0.94× 再回弹 1 | 无超调没有"咔"的咬合感 |
+| 咬合帧 | 目标白 overlay 快闪 0.55→停 0.28 + 标签同帧弹出 | 微亮与标签错帧就散了 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 一支片 ≤2 次：连用读作军事模板；两次锁定目标必须不同
+- 声音：咬合帧一声"咔"（机械 click 而非游戏 UI 音，S1 边界内）
+
+## 参考实现
+demos/effects/fui-hud-moves/
+（ReticleLockOn.tsx）