dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/references/shots/outro/ui-strip-away-outro.md

@@ -0,0 +1,61 @@
+---
+name: ui-strip-away-outro
+一句话: 减法式收尾——点击 Publish 后整个编辑器 UI 从外围到中心层层错峰蒸发，黑场上只剩那颗按钮滑到屏心放大，按钮再淡出交棒字标定版
+适用: "发布/完成"语义的 outro；想讲"一键之后一切复杂性消失"的产品收尾
+时长: ~4.8s（144f：光标就位 34f → 蒸发 ~40f → 按钮独占 → 字标接棒 → 字标 hold ≥1s）
+能量: 中（前段安静操作，中段持续退场，无瞬时冲击）
+---
+
+## 意图
+库内收尾全是"加法"：outro-group-photo-launch 元素飞来合影，logo
+sting 是定住再彩蛋。本卡是唯一的"减法"路线——点击引爆全 UI 退场，
+黑场只留语义焦点（那颗被点的按钮），把"发布 = 复杂性归零"翻译成
+动效叙事。命门有二：**蒸发要有秩序**——从外围到中心每 4f 一层、
+每层带方向性位移（各自往画外散），乱序或同帧齐灭读作断电故障；
+**按钮是唯一幸存者且必须迁移**——蒸发期间从工具条角落滑到屏心
+放大 1.5 倍、白晕随黑场增强，完成从"UI 控件"到"仪式主角"的升格，
+最后淡出把黑场交给字标。
+
+## 动效核心
+- 6 个蒸发层：侧栏→属性面板→画布卡→工具条两端→画布底→工具条中段，
+  点击后 +4f 起每 4f 一层；每层 STRIP_DUR 14f，Easing.in(quad)
+  离场加速，fade + 方向性位移 + 0→7px 蒸发模糊（侧栏 −140,0 / 面板 −90,20 /
+  工具条两端 ∓80,−60 / 画布底 0,40 / 工具条中段 0,−50）
+- 画布内 4 张卡再各错峰 3f，位移左右交替（±70px）——大块整体消失
+  会读作图层被删，碎开走才是"蒸发"
+- 背景压黑：随画布底层蒸发（+20f 起 20f）灰底 → #111110
+- 按钮：点击 spring(damping 12, stiffness 220) 压缩脉冲；蒸发期
+  位置/尺寸插值滑向屏心（18f，inOut cubic），scale ×1.5，白晕
+  30→70px 随黑场增强；+52f 起 12f 淡出
+- 字标接棒：+62f spring(damping 14, stiffness 90) 淡入 +
+  86%→100% 缩放，黑场定版
+- 光标点击后 10f 内淡出——主角换人，光标必须退场
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 层间错峰 | 4f × 6 层 | 同帧齐灭读作断电；>8f 拖成慢拆迁，仪式感散 |
+| 单层时长 | 14f，ease-in 加速 | ease-out 离场读作"飘走"不读作"蒸发"；>20f 黏 |
+| 蒸发顺序 | 外围 → 中心，按钮所在层最后 | 中心先空读作故障；按钮层先走全卡崩塌 |
+| 位移幅度 | 50–140px，方向各自向画外 | 无位移纯 fade 读作调透明度；同方向读作整屏平移 |
+| 按钮迁移 | 18f 滑到屏心 + scale ×1.5 + 晕光增强 | 不迁移则黑场上一颗角落小钮，读作漏删；先迁后灭顺序不可反 |
+| 字标接棒 | 按钮淡出后 ~10f 进，spring 定版 | 与按钮同屏抢戏；黑场空窗 >20f 像放完了 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 outro-group-photo-launch 分工：全家福是"加法"峰值终镜（多功能
+  产品全员谢幕），本卡是"减法"收尾（单一动作语义、越走越静）——按
+  产品气质二选一，不可同片双收尾
+- 蒸发的每层必须是**语义完整的 UI 区块**（侧栏/面板/工具条），按
+  像素区域切层会在错峰时露出结构不合理的残缺态
+- 按钮迁移全程 zIndex 压最顶——任何蒸发层从按钮前面飘过都是穿帮
+- 触发动作必须是"终结性"语义（Publish/Ship/Done）；拿 Save 或普通
+  确认触发全 UI 蒸发，语义配不上排场
+- 实战按钮用品牌高亮色（原片是 Framer 蓝），demo 用强调色靛蓝占位
+  ——黑场上按钮与晕光的对比是主角光环，颜色弱则升格失败
+
+## 参考实现
+demos/outro/ui-strip-away-outro/
+（UiStripAwayOutro.tsx）
+原片出处：framer-ai 33–36.5s

package/lib/motion/shotcraft/upstream/references/shots/outro/ui-to-brand-morph.md

@@ -0,0 +1,52 @@
+---
+name: ui-to-brand-morph
+一句话: UI 变品牌两式——icon-flip-bloom 图标 Y 轴翻扁成竖线、从竖线撑开成品牌标志（琥珀斜切随后划入）+ wordmark 逐字落定，与 input-morph-assemble 输入框收缩成取景框竖笔、三块图元落进构造槽位拼成完整标志
+适用: 品牌收尾/outro 前最后一拍；"你每天用的那个 UI 就是这个品牌"的视觉论证
+时长: A ~4.3s（130f）/ B ~5.6s（168f）
+能量: 中高（收尾点睛，一次完整变形讲完）
+---
+
+## 意图
+品牌收尾库里已有两条路：brand-ink-open 是开场描画压印、
+outro-group-photo-launch 是元素围拢合影（聚而不变）。本卡补第三条：
+**产品 UI 元素自己变形成品牌符号**——A 式是图标翻一个身变成 logo
+（同位实体交换），B 式是全片反复出现的输入框在最后一次发送后集结成
+品牌标志（多元素落位拼装）。观众看到的不是"logo 出现了"，而是
+"刚才用的东西原来就是它"，因果链本身就是品牌论证。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A icon-flip-bloom | 图标 anticipation 晃两下→Y 轴 scaleX 压扁成竖线（双层拖影+blur）→最薄处实体交换、标志按过冲 spring 从竖线撑开、琥珀斜切随后沿 45° 划入→mark 左移让位、wordmark 逐字落定 | 单图标产品；图标与 logo 形态差异大、需要"翻过去变身"的魔术感 |
+| B input-morph-assemble | 光标点发送→文字飞走、标志墨色从发送键漫开灌满输入框→x/y/w/h/r 五量 spring 收成取景框竖笔→上横 / 下横 / 琥珀斜切错峰从画外落进虚线构造槽位拼成标志→让位出字标 | 输入框/卡片等矩形 UI 是全片主角的片子；logo 可拆解为几何图元组合 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A anticipation | 12–34f 倾斜 -12°/+14°/-18°→0°，inOut(sin)，transformOrigin 钉底部 78%；接地软影随倾斜偏移、翻扁时收窄 | 幅度递增才读作"蓄力"；只晃一下读不出预备动作 |
+| A 翻扁 | 34–46f Easing.in(cubic)，scaleX 1→0.04；两层残影 opacity 0.22/0.14 + blur 6px 滞后 0.12/0.24 | 加速入是"甩"的关键；匀速翻读作 flip 卡片。0.04 是最薄处，实体交换在这帧做 |
+| A 撑开 | 46f 起 spring(damping 11, stiffness 130) 驱动标志 scaleX 0.04→1（带过冲）；53f 起斜切 spring(damping 16, stiffness 170) 沿 45° 划入（cutProgress 0→1） | 标志从闭合竖线撑开才接得住"翻过最薄处"；直接 scale 整个标志会断因果。斜切晚 7f 是第二拍，与取景框同时出现读不出"刻" |
+| A wordmark | mark 64–82f 左移 -471px 让位（字标起点 mark+187，整组居中）；逐字 2.6f 错峰、每字 12f：scale 1.9→1 + blur 14→0（snappy），原点钉基线；字标 112px 品牌字体 700、+0.03em（标志高 ≈ 字号 2.1 倍） | 对照原片：各字母由大变小落位，大的时候模糊、落位时清晰（scale+blur 联动逐字落定），不是横向扫出；错峰 <2.4f 每字的"由大变小"读不清 |
+| B 发送反馈 | 光标 20f 移入按下 scale 0.84 + 按钮闪白 6f；文字 11f ease-in 加速右上飞出（+760,-420）+ rotate -9° + 拖影 | 飞走必须加速——匀速飞读作平移不读作"发出去了" |
+| B 灌色 | 28–40f 标志墨色从发送键位置圆形 clip-path 漫开灌满输入框（全程实色） | 用 opacity 渐变填色会经过一段发灰的半透明态；文字要先飞离再灌色，否则深字压在墨上 |
+| B morph | 30f 起 spring(damping 15, stiffness 95)，1040×132 r34 → 89×330 直角（取景框竖笔，横条直接挤成竖条）五量同步，按 spring 速度加 ≤3px 拖影；输入框投影随 morph 收掉 | 五量必须同一个 spring 驱动，分开插值会中途散架 |
+| B 三块落下 | 上横 / 下横 / 琥珀斜切 58/72/86f 错峰 14f，各自 spring(damping 13) 从画外 -760px 落到槽位；落前 10f 槽位先沿轮廓画出虚线构造框（外扩 10px），落定 14f 后淡出；按速度拉伸 / 回弹压扁（原点钉底部），空中带落影、落定即平 | 错峰是"集结"的节奏感；齐落读作下雨；没有槽位预示，落点读作随机 |
+| B 落定 | 108f 起 mark 20f 左移让位并收到 0.7（给 15 字符字标腾地方）、构造网格退场，字标 110px 逐字（1.5f 错峰）从基线升起、口号逐词；124f 起整组极缓推近 2% | 落定后整段不动即死帧；逐拍 scale 呼吸容易读作抖动 |
+
+## 已知坑
+- demo 终点 logo 是 video-shotcraft「镜刻」标志（A：柔光亮场 + 琥珀斜切；B：瑞士网格亮场 + 钴蓝构造线）——
+  参数是调校起点非实战定稿，首次实战须以真实素材回验
+- A 式实体交换必须发生在 scaleX ≤0.05 的最薄帧——提前换观众看见两个图形叠影，魔术穿帮
+- A 式 wordmark 已改为逐字 scale+blur 落定，错峰 2.2→2.6f；换更长的字标时按可感性判例正常速度看片再定间隔
+- B 式把标志拆成竖笔（= 输入框）+ 上横 + 下横 + 斜切四块——实战换成自家 logo 的图元分解，图元数 3–4 粒为宜，多了读作粒子不读作拼装
+- B 式同色图元叠合处抗锯齿会叠加（边缘那一行像素更深），拼缝出 1px 台阶；拼齐后（108f）把竖笔 + 上下横换成同几何的单一取景框路径
+- 变形中途别叠其他动画：morph 本身是全部信息
+- 与 outro-group-photo-launch 分工：那是全片元素飞来围住字标合影（聚），本卡是 UI 元素自己变成品牌符号（变）；同片收尾二选一
+- 声音：A 翻扁一声"唰"、撑开落定"嗒"；B 发送一声 send、每块落位一声 pop、字标段静
+
+## 参考实现
+demos/outro/ui-to-brand-morph/
+（IconFlipBloomLogo.tsx / InputMorphsIntoLogo.tsx）
+原片出处：A perplexity-promo 88–91.5s / B slack-promo 40–41s
+
+实现状态：两式均有参考实现与 Gallery 动态样片。

package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-cut-moves.md

@@ -0,0 +1,50 @@
+---
+name: beat-cut-moves
+一句话: 硬切当节拍乐器——连闪定格：三次白闪各硬切同一画面的一个裁切（全景→卡片→特写），快门余韵沉降后停在特写收束
+适用: 高光段落把"切"本身打成鼓点；颁奖连拍式的仪式感、关键信息的加冕
+时长: 全程 140f ≈4.7s（活素材 30f + 三闪 + hold 70f）
+能量: 高
+标签: transition
+---
+
+## 意图
+库内节奏词汇一直只管"一条运动内"的速率（speed-ramp-freeze 是同一条 take
+里定格再解冻）和"落定后停多久"（R 系呼吸判例），没有词管**多镜之间切点
+怎么排**。本卡补这一块：硬切不做任何过渡，切点间隔本身就是乐谱——
+三次白闪、间隔渐紧（22f→18f），读作快门连拍（A）。与 R 系不
+冲突：R 管落定后的停，本卡管切点排布，切串结束必须接足量 hold 把
+呼吸还回去。注意这是刻意的例外——节奏偏好判例是单向"放慢"，硬切
+串切得越狠，切完的 hold 要比平常更长。
+
+## 选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A paparazzi-flash 连闪定格 | 三次白闪各硬切同素材不同裁切（全景→卡片特写→「Take 1」特写），闪前对焦框锁定下一张裁切，快门余韵沉降，第三闪停在特写收束（demo：video-shotcraft 的「Shot of the Year」奖牌卡，背板是 video-shotcraft 标志 / 字标平铺） | 高光时刻仪式感：颁奖连拍、关键数字 / 关键句的加冕 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 三闪切点 | 30/52/70（间隔 22f→18f 渐紧），闪前 30f 慢推"活素材"（背板上别家相机的小闪光）衬托闪后定格 | 闪前必须是活的，全片死素材三闪读不出"定格" |
+| 白闪层 | 每闪 opacity 0.95→0 走 4f ease-out 衰减；闪帧 ±2px seed 哈希全屏抖动 | 0.95 起步才有闪光灯的爆点；衰减 >6f 变柔光转场，失去快门感 |
+| 快门余韵 | 切入视图 scale 1.03→1 走 6f ease-out 回落 + −16px 沉降归零 | 余韵是"被拍到晃了一下"；去掉后三闪读作幻灯片翻页 |
+| 三裁切 | 同一画面换 CSS zoom 焦点：1.0 全景 / 1.6 卡片 / 2.8 特写（「Take 1」） | 层层逼近有叙事方向；乱序（特写→全景→特写）读作剪错；裁切边缘别切到半行字 |
+| 对焦预备 | 下一闪前 8f 对焦框从 1.3 倍收到下一张裁切范围（屏幕坐标投影），闪前 3f 转香槟色锁定 | 这是"预备拍"：观众提前知道下一张拍哪里，闪光才像被按下的快门 |
+| 末段收束 | 第三闪后特写 hold 70f，只有 1→1.015 极缓推近 + HUD「SAVED」淡入 | 三闪是重击，hold 要给足平常两倍以上；定格是照片，不加画内运动 |
+
+## 已知坑
+- **demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验**
+- **声音强依赖**手法：切点必须钉在音轨拍点上，每闪一声快门咔嚓，
+  无声版只剩画面乱跳；钉帧走 sound-design.md §4.5 相对 shot 起点，不钉绝对帧
+- 三个裁切要是"同一画面的层层逼近"而非三个无关画面——观众要在连闪
+  中始终认得这是谁；跨产品/跨场景的素材别用这式
+- 切串全片 ≤1 次（P4 克制原则）：这是全片最响的一记，第二次出现
+  第一次就白打了
+- 节奏偏好判例是单向"放慢"，本卡是刻意例外——切完的 hold（70f）
+  是底线不是建议，宁多勿少
+- 真硬切 = frame 落区间渲染对应视图，无任何过渡帧；手滑加 2f 交叉
+  淡化就不是硬切了，节拍感立即糊掉
+
+## 参考实现
+demos/rhythm/beat-cut-moves/
+（PaparazziFlash.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/beat-step-list-theme-cycle.md

@@ -0,0 +1,66 @@
+---
+name: beat-step-list-theme-cycle
+一句话: 三通道节拍器——深色场形容词列表逐拍上移一行，视口中央固定胶囊"接住"下一个词并换色，整场底色同拍跟换；行、色、场三通道锁死同一拍点
+适用: "同一产品多种气质/多主题展示"段落（modern/playful/expressive 式形容词连打）；全片节奏最密的一段；音乐段对拍
+时长: 铺垫 30f + 每拍 18f × 拍数 + 收尾 hold；4 拍约 4.7s（demo 140f）
+能量: 高（0.6s 一拍三通道齐跳，密度型高能）
+标签: typography
+---
+
+## 意图
+换一次主题色是功能演示；0.6 秒换一次、连换三次、每次"选中行+胶囊色
++全场底色"三件事同帧齐跳——就成了节拍器。用最便宜的变量切换做出
+全片最高的节奏密度。命门有二：一是**三通道必须锁同一拍点**，任何
+一通道慢半拍，"齐跳"退化成三个各自为政的动画；二是**跳与滑的分界**
+——跳变只占拍头 6f，其余 12f 完全静置，拍点要"跳"不要"滑"，
+匀速滚动的列表就只是列表。
+
+## 动效核心
+- 胶囊固定在视口中央行**不动**，列表 translateY 逐拍步进——视觉上
+  读作"胶囊跳到下一行接住新词"，实际动的是世界不是胶囊
+- 拍长 18f（0.6s @30fps ≈ 100BPM），跳变窗仅拍头 6f：
+  `snap(t) = 1-(1-x)^3.2`（陡 ease-out），其余帧静置
+- 三通道同源驱动：同一个 tInBeat 同时喂列表位移、胶囊/底色
+  rgb 逐通道 cross-mix、胶囊 squash——一个时钟，不许各挂各的曲线
+- 主题表逐拍换对（demo「Make it modern → playful → expressive → BOLD → yours.」：
+  骨白/深浓缩→橘/深梅→鸢尾紫/深靛→薄荷/深青→向日葵黄/深海军蓝），胶囊色与
+  底色是配好的深浅对，不是独立随机色；每个主题还带一套选中词字体（无衬线 / 圆体 /
+  衬线斜体 / 全大写 Futura），同拍换——换肤读作"多种气质"而不只是换色
+- 胶囊 = 透镜：胶囊外是统一暗白列表，胶囊里是同一列表的裁切副本（深色字 + 主题字体），
+  词越过胶囊边缘那一刻才换色换体；胶囊宽度 = 选中词实测字宽 + 边距，跟同一个 tInBeat 插值
+- 胶囊落位 squash：竖向 1.14→0.96→1、横向反相 0.97→1.01→1，随拍头 6f 走完；接住瞬间
+  胶囊提亮 + 同色辉光涨一下（指数 ~3f 收回）
+- 非选中词按离视口中心的行距衰减（相邻行 42% 白、每远一行 −15%，字号微缩、远行虚化）；
+  上下底色渐变羽化收视口——羽化色必须跟 bgColor 实时同步，写死颜色换场时穿帮
+- 元素层回声（可选）：角落主题计数 03/05、色票行挂同一个整数拍换态，不加任何整画面冲击
+- 开拍前 30f 静置铺垫——先让观众看清"这是个列表"，再开始打拍
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 拍长 | 18f（BEAT_LEN，改它即改 BPM 对音轨） | <12f 观众来不及读词只见闪色；>26f 拍感散成逐个展示 |
+| 跳变窗 | 拍头 6f，ease-out 指数 3.2 | 窗 >10f 或缓曲线，"跳"变"滑"，节拍器塌成滚动列表 |
+| 拍数 | 3–4 拍 | 5+ 拍观众适应了节奏开始走神；1–2 拍立不起"节拍器"人设 |
+| squash | 竖 1.14→0.96→1 / 横反相 0.97→1.01→1 | 去掉它胶囊像贴图换色；>1.2 弹跳抢了换色的戏 |
+| 底色跨度 | 相邻主题底色须同明度不同色相（都深色） | 明度跳变（深→浅）会读作闪屏而非换肤 |
+| 铺垫/收尾 | 前 30f 静置；末拍后 hold ≥30f | 没铺垫第一拍读作 bug；末拍即切没有"停在最终色"的确认 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 theme-switch-moves 分工：那卡是单次换肤的仪式（扫场/涟漪，换一次
+  讲一次故事），本卡是连续多次换肤当节拍用——讲"深色模式功能"用那卡，
+  讲"多气质/多主题体量"用本卡
+- **声音强依赖**：拍点对齐鼓点（换 BEAT_LEN 对 BPM），无声版三通道
+  齐跳读作界面抽风
+- 词表长度 ≥ 拍数+2——列表底部要留未选中的词垫着，最后一拍就停在
+  列表末行会露出"下面没了"
+- 选中态别用"整数拍判定反白"：跳变 6f 里新词还在胶囊下方就先变黑，读作穿帮。
+  demo 用胶囊透镜（裁切副本）——字色 / 字体由几何边界决定，颜色仍跟 tInBeat 小数走
+- 胶囊宽度按选中词实测字宽写死（换字体 / 字号要重量），否则字贴边或胶囊半空
+- 主题字体用系统栈：Chrome 不认 `ui-rounded`，圆体走 Arial Rounded MT Bold，缺字体回落无衬线
+
+## 参考实现
+demos/rhythm/beat-step-list-theme-cycle/
+（BeatStepListThemeCycle.tsx）
+原片出处：bear-app 22.3–24.6s

package/lib/motion/shotcraft/upstream/references/shots/rhythm/panel-grid-moves.md

@@ -0,0 +1,43 @@
+---
+name: panel-grid-moves
+一句话: 分格节奏——comic-panel-split 漫画斜格劈出同一主体的三个机位，咔咔咔三格定格后末格斜边吃屏成海报
+适用: 把"格子"当节奏器：同主体多机位定格并列，逐格踩拍劈出；吃拍点
+时长: 156f ≈5.2s（全屏侧拍 20f + 三刀分格定格 + 吃屏 + 海报 hold）
+能量: 中高
+标签: ui-entrance
+---
+
+## 意图
+与 wall-reveal-moves 的区别是本卡的定位锚：那是"整墙怎么入场"
+（一次性揭示），这是"格子怎么当节奏器"——分格发生在节拍上，格变即鼓点。
+A 是并：画面被三刀斜缝咔咔劈开，同一产品三种机位同时定格，
+停一拍后末格斜边扫过吃掉全屏——Scott Pilgrim 的分屏语言。
+适合单品多视角（demo：一支刻着 video-shotcraft 的定焦镜头，三格旁白框按
+「Shot 01 / 02 / 03」编号，吃屏后落成「Craft the shot.」海报）。
+
+## 选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A comic-panel-split | 全屏 3/4 侧拍 20f → 三刀 12° 斜缝每 4f 一刀从上往下劈出，对应格硬切弹入（5f scale 1.07→1 + 白闪）；三格 = 同一主体的全身 / 局部特写 / 微距；定格 29f 靠主体自身动作保活；末格 2f 反向回拉 + 14f 扫屏吃掉全屏成海报 | 同一主体多视角并列；漫画感段落 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 斜缝 | SVG 双线：墨边 + 奶油纸芯（总宽 18px），12° 斜角，每刀 3f 从上往下画出 | 斜缝纸芯是漫画感命门；直缝读作分屏工具 |
+| A 保活 | 定格期主体自己在动：对焦环转 26°、光圈叶片收拢、全身格极缓推近 | 三格全静读作截图拼贴；"镜头在工作"比缓推更有内容 |
+| A 旁白框 | 奶油底 + 4px 墨描边 + 7px 硬投影，-2° 歪斜盖章弹入，活在格子里随格被盖掉 | 漫画语言的第二个锚点；浮在格子上方会穿帮 |
+| 收尾 | 最后一行字揭示完后 ~50f 海报 hold（只留 1.5% 极缓推近） | R1；摘罩帧与吞屏终值逐像素对齐防跳变 |
+
+## 已知坑
+- demo 在虚构内容（矢量镜头）上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 三格必须是**同一主体的不同机位**——三格塞不同内容读作 bento
+  排版不是漫画分格，语义就散了
+- 吃拍点、声音强依赖：逐格咔咔三声（sound-design §4.5）；不踩拍的分格只是布局动画
+- 主体用 SVG 矢量画（或高分辨率素材）：三格机位最高放大 2.45x，
+  位图截图放大会糊（Q2）
+- 同片分格系 ≤1 段——格子语言辨识度太强，两段就撞
+
+## 参考实现
+demos/rhythm/panel-grid-moves/
+（ComicPanelSplit.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/quad-split-parallel-scenes.md

@@ -0,0 +1,38 @@
+---
+name: quad-split-parallel-scenes
+一句话: 画面硬切 2×2 四宫格，四个象限并行跑各自的微场景（打字、急推、逐词、交互链），关键节拍错开 3–6 帧制造信息轰炸
+适用: 节奏段"功能很多、同时发生"的蒙太奇拍；预告片中段的密度峰值
+时长: 90f（3s@30fps：0–62f 并行轰炸 + 28f 终态 hold，全程无转场）
+能量: 高（四线并行 + 错拍冲击，标准的 BGM 副歌位）
+---
+
+## 意图
+用并行密度替代顺序展示：四件事同时在眼前发生，观众来不及逐一细读，但每 3–6 帧就有一个象限"动一下"——扫视节奏被牢牢钉住。这是手法卡：格内内容全部可替换，错拍编排才是配方。
+
+## 动效核心
+- 四象限独立场景（内容为示例：video-shotcraft 出一支宣传片时同时发生的四个现场）：TL 浏览器 tab 依次 overshoot 弹入 + 地址栏逐字打字 + 44f 页面载入大标题从下滑入 + 全程 inQuad 慢推 1→1.1；TR 终端命令打字 + 两行输出 + 末行出现同时 whip 急推 1→1.85（sin 包络 blur 5px，旧行退到 8%）；BL 三个 132px 大词逐个 overshoot 下落砸入；BR 审批卡滑入 → 光标贝塞尔飞向 Approve 点击 → 按钮变 Approved → 二段飞向 Publish 点击 → 上线通知弹出并计数
+- **错拍是灵魂**：TL tab 6/11/16/21、页面 44；TR 输出 27/33、急推 37；BL 词 14/30/49；BR 点击 25、变色 27、点击 52、通知 56——任意相邻重事件间隔 ≥3 帧，永远有东西在动但从不齐动
+- 两处打字光标闪烁周期错开（16 帧 vs 14 帧 +5 相位），避免同闪
+- 四格明度棋盘交错（ember：奶油 #f7eee4 / 暖黑 #160d09 / 橙实底 / 拿铁 #e9d7c4），8px 暖黑缝 + 20px 圆角分格；格内字按 1080p 重排（辅助 ≥32px、主词 132px）
+- 62f 后四格都停在终态（Launch film. / promo.mp4 ready / Prompt. Render. Ship. / Live · 3,214 views），拼成一张完整海报 hold 28f
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 错拍间隔 | 相邻重事件 3–6 帧 | <2 帧读作同拍（齐动=呆板）；>8 帧密度散掉，轰炸感消失 |
+| TL 慢推 | inQuad 1→1.1，origin 50% 90% | 全程缓慢加速的"底噪运动"，让静格也不静；过大窗口会顶到角标 |
+| TR 急推 | 37–47f，scale 1.85 + blur 峰值 5px，旧行淡到 8% | 这是全卡最重的一拍，压 BGM 重音；blur 包络必须 sin（进出对称）|
+| 打字速度 | TL 20 字符 / 0–40f，TR 19 字符 / 0–24f | 换文案保持字符数近似，否则打字节奏与其他象限错拍关系漂移 |
+| BR 交互链 | 滑入 4→巡游 14→点击 25→变色 27→二段巡游 38→点击 52→通知 56 | 环环相扣，改任何一步需顺延后续；通知 overshoot 弹出是链尾重音 |
+| 底色 | 浅 / 深 / 强调 / 浅 棋盘交错 | 换项目主题色时保持相邻格明度差 ≥15%，否则格线感消失 |
+| 收尾 | 62f 后终态 hold 28f | 并行轰炸后必须给一拍让四格同时被读到 |
+
+## 已知坑
+- 这是手法卡：四格内容整体可换（产品截图/录屏/其他动效卡），但**错拍表必须重排**——新内容的关键帧继承原时刻表，否则四格变四个独立视频拼贴
+- 轰炸段 ~2.1s 是密度上限，再拉长需给每象限加第二轮事件，否则后半段"没东西动"；收尾 hold 另算
+- 光标闪烁按帧号计算（周期 16f / 14f+5），改时间表后重新核对两个光标的错相位
+- 四格同时打字/同时弹入是最常见的退化写法——检查方式：逐帧过一遍，任何一帧不应有两个象限同时发生"重事件"
+
+## 参考实现
+demos/rhythm/quad-split-parallel-scenes/
+（QuadSplitParallelScenes.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/rhythm-interrupt-moves.md

@@ -0,0 +1,38 @@
+---
+name: rhythm-interrupt-moves
+一句话: 打断节奏——jump-cut-punch-in 三级跳切推近：同构图三次无补间硬跳放大，逐级逼近目标
+适用: 用"打断连续性"本身当节奏器：顿挫推近（A）；与 beat-cut-moves（切点排布）互补
+时长: A 135f ≈4.5s
+能量: A 中
+---
+
+## 意图
+库内节奏卡管的都是"怎么切、切多密"；本卡管**怎么断**——观众预期
+连续，你偏打断，打断方式即表达：A 是空间断——同构图三次无补间跳大
+（1x→1.6x→2.6x），戈达尔跳切的顿挫，比连续推近更有"看这里、再近点、
+就是它"的指令感。适合强制聚焦指标。
+
+## 选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A jump-cut-punch-in | transform-origin 钉目标中心，三档 scale 阶梯跳变（零补间），每跳 2f 加深脉冲当 tick | 逐级逼近核心指标；纪录片式盯住 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 跳挡 | 1.0→1.6→2.6，各 hold ≥35f | 挡差 <1.5× 读作画面抖了一下 |
+| A tick | 跳变帧起 2f brightness 0.92 全画面脉冲 | 无 tick 的跳切读作丢帧 |
+| 收尾 | 末挡 ≥45f 真静止 | 打断系事后 hold 从重给 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 speed-ramp-freeze 都动"时间轴"，同一镜头只能有一个时间
+  操纵者
+- 三挡构图必须同 origin（钉死目标中心）——每挡重新构图就是
+  三个镜头，不是跳切
+- 声音强依赖：每跳一声 tick（sound-design §4.5）
+
+## 参考实现
+demos/rhythm/rhythm-interrupt-moves/
+（JumpCutPunchIn.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/sakuga-timing-shift.md

@@ -0,0 +1,56 @@
+---
+name: sakuga-timing-shift
+一句话: 一拍三转一拍一——元素先以每 3 帧一步的手翻书顿挫移动，高潮瞬间切成逐帧丝滑冲刺，帧率量化的突变本身就是看点
+适用: 单元素的强调性位移（卡片入场、指标冲线）；需要"手工感→高潮爆发"反差的段落
+时长: 150f（5s）
+能量: 中高
+标签: ui-entrance
+---
+
+## 意图
+库内时间轴操纵已有 speed-ramp-freeze 的定格解冻与 hit-counter 的局部顿帧。
+本卡是另一种——**改的不是速度是帧率本身**：
+顿挫段驱动帧 q=floor(f/3)*3，元素每 3 帧才动一步（10fps 手翻书），
+切换帧起改用原始 f 逐帧驱动，丝滑冲刺。一拍三的钝与一拍一的滑
+同屏对切，日式作画的拍数演出（shooting on 3s / on 1s）。顿挫段
+不是低级感是手工感，切换点即高潮标记。
+
+## 动效核心
+- 顿挫段：q = Math.floor(f/3)*3 当驱动帧，位置线性 X 140→1180，
+  16 张原画、每步 ≈69px；姿势随 q 冻结：sin(q) rotate ±5° + 挤压/拉伸交替
+  （0.97/1.035）+ 一高一低小跳（−18/−2px），一步一个样
+- f48 切换：两帧「冲击帧」（画面反相成墨底 + 以卡片为焦点的集中线）当高潮标记，
+  之后改原始 f 连续驱动，Easing.out(poly(4)) 高初速冲刺折返中央 + 过冲 40px
+  + 6f 回弹，落地 scaleX 0.92 / scaleY 1.07 挤压
+- 冲刺段运动拉伸由位置差分速度驱动（scaleX 峰值 ≈1.3 / scaleY 0.9），
+  身后 9 条横向锥形墨色速度线、长度 ∝ 速度，**条件挂载**——速度低即摘除
+- 换拍标注三处同步：角标 "ON 3s / 3コマ打ち"→"ON 1s / 1コマ打ち"（pop 1.25×，
+  手绘下划线每 4 帧重描一次沸腾、f=108 后冻结）；底部「摄影表」一拍三只在每 3 格写原画号、
+  中间格画竖线（= 沿用上一张），一拍一格格有号——观众直接看见每秒画几张
+- 画面：paper look 作画纸（定位孔、淡蓝铅笔安全框/十字），主体是 5px 墨线 + 硬边
+  赛璐珞投影的 video-shotcraft 产品卡（30fps · every frame, crafted）；f74 后 hold 段 2% 极缓推进
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 拍数 | 顿挫段 floor(f/3)（一拍三） | /2 顿感不足、/4 以上读作播放器卡死 |
+| 每步位移 | ≈69px（总程 1040 ÷ 15 步倒推） | <30px 读作卡顿掉帧不是顿挫——命门 |
+| 步间姿势 | sin(q) rotate ±5° + 挤压/拉伸交替 + 一高一低小跳 | 无姿势变化的纯位移顿挫像 bug 不像手翻书 |
+| 切换帧 | f48（顿挫:冲刺 ≈ 3:2） | 切换必须一帧完成，任何补间都毁掉"换拍"感 |
+| 冲刺缓动 | Easing.out(poly(4)) + 过冲 40px + 6f 回弹 | 初速要猛，与顿挫段拉满反差 |
+| 收尾 | 落位后 hold 70f（只留 2% 极缓推进），角标沸腾 f108 冻结 | 沸腾残留毁真静止（feTurbulence 摘罩判例同族） |
+
+## 已知坑
+- demo 用手搓作画纸 + 赛璐珞卡调校——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 冲击帧是全画面级冲击（R4 计数），一个镜头只给切换点这一次，且只给 2f
+- 同一镜头单一时间操纵者判例：与 speed-ramp-freeze / hit-counter 顿帧
+  互斥，一个镜头只能有一个人动时间轴
+- 顿挫段每步位移 ≥30px 才读得出"顿"——微步顿挫读作渲染掉帧，
+  这是本卡命门；步幅不够就缩短总时长换大步幅
+- 切换点必须有标注（角标 "ON 3s"→"ON 1s"、摄影表格子或一声打点，
+  sound-design §4.5）——无标注观众只觉得"变快了"，读不出"换拍"
+
+## 参考实现
+demos/rhythm/sakuga-timing-shift/
+（SakugaTimingShift.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/speed-ramp-freeze.md

@@ -0,0 +1,44 @@
+---
+name: speed-ramp-freeze
+一句话: 帧号非线性 remap 的节奏手法——定格标注（流动→定格圈注→解冻）
+适用: 卡片流/长横移中把一个重点"停下给人看"；教学解说、评审语境
+时长: 定格标注全程 158f（≈5.3s，定格段 67f ≥45f）
+能量: 中高（速度反差本身即energy beat）
+---
+
+## 意图
+匀速流读作 PPT（R2），全程快流观众抓不住重点（R3）。定格标注在一条
+运动里干脆停下来——马克笔圈出重点再走。技术根是帧号 remap（斜率即速率），
+语义是"停课划重点"。
+
+## 动效核心
+- 源动画匀速，输出帧对源帧做非线性 remap（斜率即速率）：流动段斜率 1（26px/源帧）→
+  定格段斜率 0 → 解冻段 smootherstep；**blur 联动速率**——按 remap 后的实际速度给方向性
+  模糊（Polish SpeedBlur，|v|<8px/f 不挂滤镜），定格段裸渲；CameraMotionBlur 多重采样会给
+  页面纹理染色，本卡不用
+- 定格段斜率 =0（瞬时切换，无缓入——定格要干脆）；定格那一帧给"按下暂停"的
+  信号：快门白闪 3f、整帧取景框四角弹入、时间码从 LIVE 走字切到 PAUSED 并停住；
+  强调色马克笔超椭圆一笔圈 10f 描边（stroke-dashoffset，1.08 圈、收笔不闭合）圈住目标 +
+  箭杆 6f + 箭头 3f 点题，feTurbulence（scale≈6）给手绘抖动，再接一行 68px 粗体批注 +
+  手绘下划线 + 署名；解冻段 smootherstep（ease-in 起步）22f 走完一张卡、
+  平均斜率 >1 补偿时长，墨迹 8f 淡出，但在目标卡角留一枚评论图钉随卡离场
+- 目标卡对位屏中并被"拾起"（抬高 + 放大 3–5% + 阴影加深），其余卡退暗 / 去饱和；
+  卡宽 600px 时 2x 卡片纹理是向下采样，任选一张都锐利（凝视/圈注对象必须锐利、居中）
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 定格时长 | ≥45f | 短了凝视不成立（R3 宁慢勿快） |
+| 解冻补偿 | smootherstep 22f 走完一张卡（平均斜率 >1） | 解冻太慢全片拖沓；不补偿则定格吃掉的时间读作冷场 |
+| 圈注描边 | 10f 划完 + 抖动 scale 6 | 太慢像加载动画；无抖动像机械标注 |
+| 暂停信号 | 快门白闪 3f + 取景框四角 + 时间码 PAUSED | 无信号时观众分不清"定格"和"卡顿" |
+
+## 已知坑
+- SFX 钉帧跟**输出帧**不跟源帧（画面动作在输出时间轴上发生）；
+  拟音槽位：定格配马克笔沙沙声（S4），本卡转正时未配、实战补
+- 定格标注一支 30s 片 ≤2 次（克制原则）
+- 参数经占位素材调校转正，非实战定稿，首次实战后回验
+
+## 参考实现
+demos/rhythm/speed-ramp-freeze/
+（FreezeAnnotateReal.tsx）

package/lib/motion/shotcraft/upstream/references/shots/rhythm/trailer-grammar-moves.md

@@ -0,0 +1,38 @@
+---
+name: trailer-grammar-moves
+一句话: 预告片语法一式——trailer-bumper 前置速剪钩子：三镜 9f 速剪 + 黑场静默一拍，再开场标题
+适用: 预告片的开场钩子（cold open）：正片前先塞三个最抓眼的镜头，再静默一拍正式开场
+时长: A ~4.7s（140f）
+能量: A 高
+标签: opening、transition
+---
+
+## 意图
+库内节奏卡各管一段：beat-cut 管切点排布、rhythm-interrupt 管打断。
+本卡管**预告片的结构性时刻**——不是某个
+镜头怎么动，是整片的关节怎么接：A 是开场钩——正片前 0.9 秒塞
+三个最抓眼镜头速剪 + 黑场静默一拍再开场，预告片的"预告"。
+
+## 式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A trailer-bumper | 三镜头各 9f 等长硬切（0/9/18），每镜内部 scale 1→1.04 微推保活；27–33f 纯黑静默，33f 起标题 16f 淡入 + 44px out-cubic 微升（demo 标题是 video-shotcraft 字标 + 品牌 tagline） | 正片开场前的钩子；cold open |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 速剪 | 三镜等长 9f，零过渡；镜头 3 对焦中列 Top pages 卡放大 2.2x 怼脸特写（CSS zoom，字不糊） | 节拍感靠等长；三镜构图必须明显不同 |
+| A 微推 | 每镜内部 scale 1→1.04 线性 | 静帧三连读作幻灯片——命门 |
+| A 黑场 | 27–33f 纯黑 #000 空 div，6f | 黑场里放任何东西都毁掉"静默一拍" |
+| 收尾 | A 静止 77f（≥40f） | 字距收拢完（63f）后整帧冻结，真静止 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- A 黑场必须纯黑无物（drop-blackout 判例同族）——黑场是喘息，
+  不是又一张字卡
+- A 三连切每切一声打点、黑场全消音（sound-design §4.5）
+
+## 参考实现
+demos/rhythm/trailer-grammar-moves/
+（TrailerBumper.tsx）

package/lib/motion/shotcraft/upstream/references/shots/transition/bottom-push-stack-wipe.md

@@ -0,0 +1,63 @@
+---
+name: bottom-push-stack-wipe
+一句话: 底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走
+适用: 多章节产品片的换章骨架（每章一个卖点一种底色）；需要"翻页节奏感"贯穿全片的段落切换
+时长: demo 三连推 170f（~5.7s）；单次推入 26f + 章内 hold ~1.2s
+能量: 中
+---
+
+## 意图
+wipe-transitions 是一条边界扫过、新旧页都不动；page-turn 是旧页对开门
+裂开滑出。本卡是第三种物性：**新章把旧章顶出去**——两屏刚性接触、同速
+同向位移，像自动售货机压栈。命门是"连底色整屏走"：底色+窗口卡+装饰
+条焊成一块整料从底边推入，观众读到"换了个世界"而不是"换了张卡"。
+重 ease-out（快进慢停）给推入一个"哐"的落位感；上缘 40px 接缝阴影
+是两屏物理接触的证据。连推三章且底色饱和度拉满，换章本身就成了全片
+的节拍器——slack 原片全片就靠这一招做骨架。
+
+## 动效核心
+- 每章一个整屏层：`translateY` 从 +1080 推到 0，旧章同步被顶到
+  −1080——两层位移严格同步同缓动，任何速差都读作"滑动穿模"
+- 推入缓动 = 重 ease-out `cubic-bezier(0.12, 0.9, 0.2, 1)`（快进
+  慢停），26f 完成（~12f 已到 95%）；第 i 章的 y = (1−自己推入进度)×H
+  − 下一章推入进度×H，一条式子管进也管出；整摞按速度做纵向方向性模糊
+- 新章上缘带 56px 渐变接缝阴影（用新章的带色相深色 0.42→透明，压在
+  旧章上）+ 新章上缘 2px 受光边，落定后归零——"顶出"的物理接触感全靠它
+- demo 是「瑞士海报」式（产品 video-shotcraft，一章一个卖点）：第 0 章近黑开场，三章钴蓝 #2d4cff / 朱橙
+  #ff4d1f / 酸柠 #cdf23a（深色字），色相拉开 120° 级；每章左栏眉题 +
+  116px 超粗两行标题 + 40px 说明，右栏一张为镜头设计的大字 UI 卡
+  （和 agent 对话 / 踩点时间线 / 交付流水线），色板左上受光、右下压暗，与卡片阴影同一光向
+- 章内动画全部错开推入：标题在推入开始后 12f（已到 95%）才从线下升起，
+  UI 小动作（打字中→消息弹入 / 声波与当前镜头交接 / 交付步骤逐个打勾）放在 hold
+- 推入间隔 ~44f（demo 22/66/110f 起推）；出画的层及时卸载；尾段 28f
+  极缓推近 1.5%
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 推入时长 | 26f，重 ease-out | <20f 读作闪切；线性匀速读作卷帘门，"哐"感全无 |
+| 章间 hold | ~18f 静止 + 推入尾段，章内总停留 ~44f | 章内是内容表演区，<25f 观众没看清就被顶走 |
+| 接缝阴影 | 上缘 56px，章色深档 0.42 渐变 + 2px 受光边 | 去掉后两屏像叠影滑动；>80px 读作新章自带黑边 |
+| 底色 | 每章一种饱和色，相邻章色相拉开 | 相邻章同色系则"换章"读作"微调"；灰阶章只能当第 0 章 |
+| 内容钉死 | 窗口卡/装饰条用章内绝对坐标 | 内容若相对视口定位就会"漂"在推入动画上，穿帮 |
+| 连推次数 | 2–4 章 | 1 次不成节奏；>4 次观众开始数底色，疲劳 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 wipe-transitions 分工：那卡新旧页都不动、一条几何边界扫过交接
+  （中性、哪儿都能用）；本卡两页都在动、刚性顶出（有物性、自带章节
+  节奏）——单次接缝用那卡，全片骨架用本卡
+- 与 shot-transitions 三式同层选型：本卡能量中档、方向固定向上，
+  需要能量落差大的接缝（如进 outro）让位给流白
+- 方向统一是骨架感的来源：全片所有章都从底边推，中途换成左推/顶推
+  节拍器就散了——要变方向就别当骨架用
+- 推入进行中两章同屏，都是满屏层——章内动画（卡片入场等）避开推入
+  的 26f 窗口（至少等到 95% 落位），不然两章都在动，视线没有锚点
+- 实战底色用品牌色板的饱和档；底色饱和度不足时窗口卡"钉在色底上"
+  的从属关系读不出来，会退化成"卡片各自换背景"
+
+## 参考实现
+demos/transition/bottom-push-stack-wipe/
+（BottomPushStackWipe.tsx）
+原片出处：slack-promo 22–27s

package/lib/motion/shotcraft/upstream/references/shots/transition/card-flip-reveal.md

@@ -0,0 +1,57 @@
+---
+name: card-flip-reveal
+一句话: 功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处掠过一道随角度移动的受光，背面揭出大号结论数字，逐张错峰扫过整排
+适用: "功能→成果"的成对叙事：一排功能卡逐张翻出各自的指标/结论；元素级转场卡
+时长: 全程 150f（~5s，含 hold）；单卡 4f 预备 + 16f 翻 + ~10f 弹簧落定，三卡错峰 12f
+能量: 中高
+标签: data
+---
+
+## 意图
+库内"翻"字辈已有 wipe-transitions 百叶窗（叶片逐条翻面，讲换页）。
+本卡是**语义翻面**：一张卡的正反两面是一对因果——正面是功能界面，
+背面是它带来的数字结论。翻面动作本身
+就是"所以呢？"的回答，Apple bento 段落的标准语法。逐张错峰 10f 扫过
+一排，三张卡三个数字节奏读作"成果连报"。
+
+## 动效核心
+- perspective 1600px + transformStyle preserve-3d；双面各自
+  backfaceVisibility hidden，背面预转 rotateY(180°)
+- 翻转三段：4f 预备（反向后仰 −10°，ease-out）→ 16f
+  bezier(0.55,0,0.3,1) 加速翻到 194°（14° 过冲）→ 物理弹簧
+  （damping 15）回落 180°；翻转中 translateZ 抬起 60px（sin 包络）
+- **受光**：面按偏离正面的角度着色（`(1−|cos θ|)` 压暗，暗面 0.55 /
+  亮面 0.4）；侧棱 56°→124° 区间一道窄受光带随角度从卡左扫到右，
+  强度三角包络在 90°（最薄瞬间）达峰——高光与角度联动才读作"光扫过
+  转动的面"，它是物理光照，不是额外的 glint 特效
+- **正反反相**：demo 正面是暗色功能卡（graphite 暗场），背面是瓷白
+  结论卡——翻面 = 从暗到亮，三张翻完画面从一排暗卡变成一排白色数字
+  海报；背面 158px 数字落定时 1.08→1 收拢，结论标签晚 4f 升起，上方
+  「之前 / 用上之后」对照条在落定后收短
+- 空间：卡片立在暗色镜面地板上，每张卡有一份同步翻转的竖直镜像倒影
+  （遮罩渐隐 26%、opacity 0.22），接地影宽度跟投影宽度 |cos θ| 收放
+- 错峰 delay 12f/卡；全部翻完真静止 ≥40f（demo 72f 后 hold 78f），
+  相机全程 1→1.03 极缓推近
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 翻转时长 | 4f 预备 + 16f 翻 + ~10f 弹簧 | <14f 看不到侧棱瞬间；>28f 读作慢慢转；砍掉预备读作被弹开而不是"翻" |
+| 过冲 | 194°→180°（14°），spring damping 15 | 无过冲落定读作生硬停表；damping <12 回弹两次读作果冻 |
+| 受光 | 面压暗 ≤0.55 + 侧棱窄带峰值 @90° | 峰值错开 90° 读作贴图错误；只有扫光没有面压暗读作贴了一道白条 |
+| 错峰 | 12f/卡，≤4 卡 | 同时翻读作整墙翻面，"成果连报"的逐张节奏就没了 |
+| 背面内容 | 大号数字（150–170px 级）+ 一行标签 + 至多一组对照条 | 背面塞完整 UI 读不完——翻面后只有一拍注意力；数字超 160px 时 "−41%" 这类宽字会顶出卡边 |
+| 收尾 | 末卡落定真静止 ≥40f | R1 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 正反两面必须语义成对（界面→它的成果）；翻出无关内容，翻面就
+  只是花哨的换图
+- 真实素材正面用截图时注意 backface 渲染开销，三卡以上分 Sequence
+- 声音候选位：每卡翻停帧一声轻"啪"（sound-design §4.5），三连啪
+  节奏感翻倍
+
+## 参考实现
+demos/transition/card-flip-reveal/
+（CardFlipReveal.tsx）