hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/cards/bottom-push-stack-wipe/README.md

@@ -0,0 +1,58 @@
+---
+name: bottom-push-stack-wipe
+一句话: 底边上推换章——新场景连底色整屏从底边向上推入，把旧场景物理顶出画外，连推数章各配一种饱和底色，内容钉死在各自色底坐标系里随底色走
+适用: 多章节产品片的换章骨架（每章一个卖点一种底色）；需要"翻页节奏感"贯穿全片的段落切换
+时长: 单次推入 30f + 章内 hold ~1s；demo 三连推 140f（~4.7s）
+能量: 中
+---
+
+## 意图
+wipe-transitions 是一条边界扫过、新旧页都不动；page-turn 是立方体
+翻转。本卡是第三种物性：**新章把旧章顶出去**——两屏刚性接触、同速
+同向位移，像自动售货机压栈。命门是"连底色整屏走"：底色+窗口卡+装饰
+条焊成一块整料从底边推入，观众读到"换了个世界"而不是"换了张卡"。
+重 ease-out（快进慢停）给推入一个"哐"的落位感；上缘 40px 接缝阴影
+是两屏物理接触的证据。连推三章且底色饱和度拉满，换章本身就成了全片
+的节拍器——slack 原片全片就靠这一招做骨架。
+
+## 动效核心
+- 每章一个整屏层：`translateY` 从 +1080 推到 0，旧章同步被顶到
+  −1080——两层位移严格同步同缓动，任何速差都读作"滑动穿模"
+- 推入缓动 = 重 ease-out `cubic-bezier(0.12, 0.9, 0.2, 1)`（快进
+  慢停），30f 完成；第 i 章的 y = (1−自己推入进度)×H − 下一章推入
+  进度×H，一条式子管进也管出
+- 新章上缘带 40px 渐变接缝阴影（黑 0.30→透明，压在旧章上），落定
+  后归零——"顶出"的物理接触感全靠它
+- 三章底色绿 #2bac76 / 蓝 #36c5f0 / 粉 #e01e5a（demo 取 slack 系
+  饱和色）；每章中央钉一张灰阶窗口卡 + 白色半透明装饰条
+- 推入间隔 hold ~1s（demo 18/55/92f 起推）；出画的层及时卸载
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 推入时长 | 30f，重 ease-out | <20f 读作闪切；线性匀速读作卷帘门，"哐"感全无 |
+| 章间 hold | ~37f（1.2s 左右） | 章内是内容表演区，<25f 观众没看清就被顶走 |
+| 接缝阴影 | 上缘 40px，黑 0.30 渐变 | 去掉后两屏像叠影滑动；>80px 读作新章自带黑边 |
+| 底色 | 每章一种饱和色，相邻章色相拉开 | 相邻章同色系则"换章"读作"微调"；灰阶章只能当第 0 章 |
+| 内容钉死 | 窗口卡/装饰条用章内绝对坐标 | 内容若相对视口定位就会"漂"在推入动画上，穿帮 |
+| 连推次数 | 2–4 章 | 1 次不成节奏；>4 次观众开始数底色，疲劳 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 wipe-transitions 分工：那卡新旧页都不动、一条几何边界扫过交接
+  （中性、哪儿都能用）；本卡两页都在动、刚性顶出（有物性、自带章节
+  节奏）——单次接缝用那卡，全片骨架用本卡
+- 与 shot-transitions 六式同层选型：本卡能量中档、方向固定向上，
+  需要能量落差大的接缝（如进 outro）让位给流白/黑场
+- 方向统一是骨架感的来源：全片所有章都从底边推，中途换成左推/顶推
+  节拍器就散了——要变方向就别当骨架用
+- 推入进行中两章同屏，都是满屏层——章内动画（卡片入场等）避开推入
+  的 30f 窗口，不然两章都在动，视线没有锚点
+- 实战底色用品牌色板的饱和档；底色饱和度不足时窗口卡"钉在色底上"
+  的从属关系读不出来，会退化成"卡片各自换背景"
+
+## 参考实现
+demos/bottom-push-stack-wipe/
+（BottomPushStackWipe.tsx）
+原片出处：slack-promo 22–27s

package/skills/hyper-animator-codex/references/shotcraft/cards/brand-frame-snap/README.md

@@ -0,0 +1,51 @@
+---
+name: brand-frame-snap
+一句话: 品牌色画框语法——一圈粗纯色画框先于内容长出包住全屏，录屏窗口落进框内；模式切换时整圈画框同帧硬翻色+窗内布局同帧换，一个 borderColor 干完章节导航/状态提示/品牌露出三件事
+适用: 双模式/双章节产品片的全片包装层（蓝=模式A、绿=模式B 颜色编码）；真实录屏素材的品牌化包裹
+时长: 单次翻色 ~4.3s（130f）；画框本身可全片驻场
+能量: 中（翻色瞬间高，其余时间是安静的包装层）
+---
+
+## 意图
+真实录屏直接铺满屏没有品牌存在感，加 logo 水印又廉价。本卡用一圈
+粗品牌色画框把录屏"装裱"起来：画框**先于内容出现**（先立画框再放
+画，仪式感），之后画框颜色成为全片的语义编码——蓝=Design、绿=Dev
+Mode。章节切换时整圈画框一帧内硬翻色，无渐变，颜色硬切就是"换挡"
+声效的视觉等价物；窗内布局同帧 A→B、角标与徽标同步换字，三处同帧
+共振把"模式切换"砸实。与 theme-switch-moves 分工：那换的是 UI 本体
+肤色（有扫过边界），本卡换的是"画框"这个包装层（同帧无边界），
+语义是模式/章节切换不是主题切换。
+
+## 动效核心
+- 画框用 4 条实体色带（非 border 属性），厚度 0→44px ease-out 18f
+  长出；翻色 = 同一帧换 background，帧确定
+- 录屏窗口 spring(damping 16) 从下方 560px + scale 0.82→1 落进框内
+  （帧 14 起，画框长出中段——框未成形窗先到会读作框追窗）
+- 翻色帧三件事同帧：画框换色 + 窗内布局 A→B 硬切 + 框带角标/窗口
+  徽标换字（DESIGN→DEV MODE）
+- 翻色瞬间叠 2 帧白闪脉冲（opacity 0.55 起阶梯衰减）+ 画框厚度阻尼
+  弹跳（exp(-0.22t)·cos(0.9t)·10px），给"换挡"打击感
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 画框厚度 | 44px（1080p） | 太薄读作描边不读作"装裱"；>60px 开始吃内容区 |
+| 画框生长 | 18f ease-out，先于窗口 14f | 画框必须先立——内容先到画框后包读作补救 |
+| 窗口落位 | spring(damping 16, stiffness 110)，y 560→0 + scale 0.82→1 | 落进"框内"是语义关键，落点必须完全在框带内侧 |
+| 翻色时刻 | demo 78f；停一拍（窗口落定后 ≥30f）再翻 | 落定没坐稳就翻，观众还没建立"蓝=当前模式"的编码 |
+| 白闪脉冲 | 2–3f，0.55→0.19 阶梯 | 帮眼睛登记"这一帧变了"；>4f 抢了 cel-flash 的活 |
+| 厚度弹跳 | exp 衰减 cos，初幅 10px | 纯硬切略干；弹跳是"挡位卡进去"的机械回馈 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 翻色必须真同帧：画框、窗内布局、角标文字三者错开哪怕 2f，"换挡"就散成三个小动画
+- 颜色编码要全片守约：蓝框段落里不许出现绿色主 UI 元素，编码被稀释后翻色就只是换色
+- 画框是包装层不是主角：全片翻色 ≤2 次，翻多了读作霓虹灯（P4 克制原则）
+- 两个模式的品牌色对比度要够（demo 蓝 #3E7BFA / 绿 #1BC47D）；同明度邻近色翻了等于没翻
+- 声音：翻色帧钉一声干脆的机械 click/换挡声，白闪与声同帧；画框生长段可静
+
+## 参考实现
+demos/brand-frame-snap/
+（BrandFrameSnap.tsx）
+原片出处：figma-devmode 0:28–0:32 + 0:43–0:47

package/skills/hyper-animator-codex/references/shotcraft/cards/brand-ink-open/README.md

@@ -0,0 +1,35 @@
+---
+name: brand-ink-open
+一句话: 墨线十字准星描画→字标逐字压印→打字机副标→满一秒静止再上浮消散
+适用: 品牌开场；任何"先立名号再进产品"的片头
+时长: 约 2.8s（83f）
+能量: 低（起步位，为后续镜头留爬升空间）
+---
+
+## 意图
+第一拍先给品牌记忆点：观众在任何产品画面出现之前，先看清并记住名字。安静、纸墨质感、有一个完整的静止时刻。
+
+## 动效核心
+- SVG 十字准星笔画描画（pathLength dashoffset），先竖后横，画完淡出
+- 字标逐字 letterpress：scale 从大压到 1 + blur→0，字底强调色（模板片为琥珀）glint 短划闪过
+- kicker 副标打字机逐字符出现，强调色块光标周期闪烁
+- lockup 完整静止满 1 秒，然后整体上浮 + 缩小 + 淡出，交棒 dashboard
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 准星描画 | 竖线 0→9f、横线 8→18f，24→34f 淡出 | 描画完必须淡出，残留准星会和字标抢焦点 |
+| 字标逐字 | 第 i 字 delay=10+i·3、12f；scale 1.6→1（origin center bottom）+ blur 6px→0 | "opacity+位移/scale+blur→0"是全片入场三件套定式，缺 blur 会显得硬 |
+| kicker 打字机 | 0.7f/字符（28 起 ~43.4 完），光标 2f 周期闪、74f 停闪 | 0.7f/字符只适用于装饰性小字；正文交互打字要 3f/字符（对照 type-and-filter，用户嫌快返工过） |
+| 品牌 hold | 46→76 帧整整 1 秒 | 硬底线：用户两轮点名"出现后延长停留1秒"（R1）；短于 1s 必返工 |
+| 退场 | 7f 上浮 40px + 缩 12% + 淡出 | 退场快于入场——观众已读完，拖长反而泄气 |
+
+## 声音
+品牌落定钉 transition-soft（模板片钉在 f12），brand→dashboard 运镜钉 whoosh-fast（f78）。SFX 逐拍钉帧、声明式表管理（S2）；音色走电影系词汇，不用游戏 UI tap（S1）。
+
+## 已知坑
+- hold 要给的是 wordmark 落定时刻，不是普通字卡/内容卡（R1）——曾把 hold 错加给普通内容卡后很快回滚；指代含糊的"停留"反馈先确认对象再动手（P3）
+- 开场能量必须低起步：全片能量曲线低开→中段推进→outro 峰值，开场炫技会压死后面的爬升（对照 Q8 的能量曲线要求）
+
+## 参考实现
+template/src/aifl/live/SceneOpen.tsx（帧 0–83 段）

package/skills/hyper-animator-codex/references/shotcraft/cards/bubble-swarm-takeover/README.md

@@ -0,0 +1,62 @@
+---
+name: bubble-swarm-takeover
+一句话: 珠光气泡群幕布转场——大小不一的气泡从画外飘入越涨越大遮满整屏，页面同步"洗白"，遮蔽峰值处藏切换，气泡向外散开后已是新场景；可混入 i18n 文字胶囊变体
+适用: 章节级换景且品牌世界里有"实体装饰物"可当幕布（气泡/花瓣/图标皆可换皮）；转场即品牌露出的段落
+时长: ~4.3s（130f：飘入 ~67f + 峰值藏切 + 散开 ~43f）
+能量: 中高（持续群体涌动，无瞬时冲击）
+---
+
+## 意图
+transition-hidden-cut 的前景遮挡式是"一件东西扫过去的 1–3 帧"，
+wipe-transitions 是一条几何边界扫过——都是"边界"思维。本卡是"幕布"
+思维：让一**群**品牌实体花 2 秒飘入前景涨大遮屏，遮蔽峰值藏硬切，
+再散开露出新场景。比几何擦除高级的地方在于幕布本身就是品牌资产，
+转场时间越长品牌露出越足，反而不嫌慢。命门有二：**峰值必须真遮满**
+（6 颗巨型气泡按网格钉落点兜底，随机群只管氛围）；**洗白层压在页面
+与气泡之间**——页面先被洗掉细节，气泡才接得住全部视线，切换在白纱
+后面完成，观众无从对比前后帧。
+
+## 动效核心
+- 气泡 = CSS 径向渐变圆（高光偏 34%/28%，四组粉/紫/蓝/青色相微差）
+  + inset 白晕 + 外辉光；三层景深：远 blur7 / 中层实 / 近景 blur9 焦外
+- 34 颗常规气泡 seed 随机（mulberry32）：入场时刻 8–50f、四边画外
+  起点、落点撒满全屏；正弦 wobble（振幅 10–32px）让群体"活着"
+- 6 颗巨型气泡（r 430–570）按 2×3 网格落点、22–36f 入场——峰值全
+  覆盖靠它们，不靠运气
+- 峰值帧 75 硬切场景（frame < PEAK ? A : B）；洗白层 opacity
+  0→0.92（42–68f）→0（82–104f），白色 overlay 夹在页面与气泡之间
+- 散开 = 以画面中心为极心沿径向外推 1700px，ease-in 加速离场 +
+  缩小 35% + 尾段淡出；入场 ease-out、离场 ease-in，呼吸方向相反
+- i18n 胶囊变体：文字胶囊挂在指定气泡上随宿主漂（+微转），演"多语言"
+  等抽象能力时启用；胶囊 ≤3 枚，多了变词云（那是另一个手法）
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 峰值帧 | 75/130 | 藏切点；峰值前飘入 ≥60f 才有"涨潮"感，<40f 读作扑脸 |
+| 气泡数 | 34 随机 + 6 网格巨型 | 巨型是遮屏保底，删了必漏缝；随机 <20 颗群感散 |
+| 洗白 | 0→0.92→0，峰值区间持续 0.92 | <0.8 新旧场景对比穿帮；1.0 变纯白闪，气泡被吞 |
+| 景深 | blur 7 / 0.5 / 9 三层 | 全实心读作贴纸雨；近景不虚就没有"穿过泡群"的纵深 |
+| 散开 | 径向 1700px ease-in + scale ×0.65 + 尾段淡出 | 原路退回读作倒放；只淡出不外推读作气泡"爆了" |
+| wobble | sin(f×0.09) × 10–32px | 去掉后群体像贴图平移；>50px 读作乱流 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 transition-hidden-cut 分工：那卡是 1–3 帧的"看不见剪刀"（遮挡物
+  是构图里既有元素，快进快出），本卡是 2 秒级"幕布仪式"（遮挡物是外来
+  群体，慢涨慢散）——接缝预算紧用那卡，章节换幕用本卡
+- 与 wipe-transitions/shot-transitions 同层选型：几何擦除/流白是中性
+  转场，本卡自带品牌气质——品牌无"实体装饰物"资产时别硬造，中性段落
+  用回几何式
+- 珠光渐变的高光偏移（34%/28%）是"3D 球"错觉来源，改成居中径向渐变
+  立即变平面圆点
+- 峰值帧前后各 ±2f 内不得有任何气泡 opacity <1 的空隙露底——检查
+  方式：单帧导出峰值帧看有无旧场景像素
+- 实战换皮（花瓣/logo/表情）时保持三层景深 + 网格保底两条铁律，
+  形状可换、结构不可换
+
+## 参考实现
+demos/bubble-swarm-takeover/
+（BubbleSwarmTakeover.tsx）
+原片出处：loom-ai 9–12s（i18n 胶囊变体并入 30–34.5s）

package/skills/hyper-animator-codex/references/shotcraft/cards/canvas-materialize-moves/README.md

@@ -0,0 +1,55 @@
+---
+name: canvas-materialize-moves
+一句话: 内容"物化上画布"两式——panel-to-canvas 行倒卡（面板表格行沿弧线飞出、跨容器变形成画布卡片）与 diagram-cascade 级联生成树（prompt 打字后节点逐层弹出、连线先于节点生长）
+适用: AI/协作工具"生成结果落到画布上"的叙事段落；A 式讲"已有内容换了个存在形态"，B 式讲"从一句话长出一棵结构"
+时长: A ~4.3s（130f）/ B ~5.3s（160f）
+能量: 中
+---
+
+## 意图
+库内生成叙事只有"面板内流式写入"（ai-stream-response 证据行汇入面板）
+和"图表自己活起来"（chart-live-moves），没有词管**内容离开容器、在
+开放画布上物化成新实体**。本卡补这一块：画布是舞台，生成物是登台的
+演员。A 式的命门是跨容器形态迁移——同一条内容从"行"变成"卡"，位置
+/宽高/圆角/内容布局在一条 spring 上同步插值，观众读到"是它飞过去
+变的"而不是"删一个加一个"；B 式的命门是级联时序——线牵出节点、层
+喂出层，结构感来自先后而非同时。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A panel-to-canvas 行倒卡 | 复选框逐个自动打勾→按钮按下→三行沿上抛弧线错峰飞出，途中行形态与卡形态交叉淡化，落位带随机倾角；面板行槽塌陷成虚线留白 | 批量导入/一键上板：内容从列表态迁移为空间态 |
+| B diagram-cascade 级联生成树 | prompt 逐字敲出（敲完描边变深确认）→根（深色）→2 子→4 孙逐层弹出，折角连线描线先行 8f，成树后整棵呼吸一拍 | AI 生成结构图/脑图/ER 图：一句话长出一棵树 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 打勾 | 12/22/32f 逐个，spring(damping 10, stiffness 260) pop | 打勾是"预告"，全删观众不知道要飞谁；同帧齐勾读作静态已选 |
+| A 起飞错峰 | 按钮 46f 按下，三行 54/60/66f 起飞（错峰 6f） | 同帧齐飞读作复制粘贴；错峰 >12f 尾行像掉队 |
+| A 飞行插值 | spring(damping 16, stiffness 60, 34f)；位置走二次贝塞尔，中点上抬 170px | 直线飞读作平移不读作"倒出来"；中点抬 <100px 弧线感消失 |
+| A 形态迁移 | 行 560×80 → 卡 480×240，圆角 10→18，rowOp 在 u≈0.45 前灭、cardOp 后亮 | 两套内容交叉淡化必须错开——中段两态同显即穿帮 |
+| A 落位倾角 | ±2° 随机（-2/1.5/2） | 全正读作网格排版；>4° 读作散落故障 |
+| B 打字 | 1.1 字符/帧，敲完 prompt 条描边 G.border→G.ink 确认 | 无确认态则"敲完"与"开始生成"之间没有因果扣 |
+| B 级联时序 | 根 52f 起，层间隔 20f、同层兄弟错峰 6f；节点 spring(damping 11, stiffness 170) | 层间隔 <12f 读作一次性全出；兄弟同帧读作复制 |
+| B 连线先行 | SVG 折角 path（父底边→中线→子顶边）描线 16f ease-out，比子节点早 8f | "线牵出节点"是因果感来源；线晚于节点就成了补笔 |
+| B 收尾呼吸 | 末节点 +22f 起，以树心为原点 scale 1→1.035→1（sin inOut，28f） | 呼吸是"成树"的句号；>1.06 读作缩放故障 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 ai-stream-response 分工：那卡内容在**面板内**流式落位（结论先到、
+  证据随后），本卡内容**离开面板上画布**；同片可串（先流式生成→再倒上画布），
+  串用时 A 式的打勾段可省——流式完成态即"已选"
+- 与 chart-live-moves 分工：那卡是数据图表自身的活性（流线/点阵/爆轴），
+  B 式是结构图的**诞生过程**——图活着≠图正在被生成，别拿 B 式去演已有图表
+- A 式行槽必须塌陷成虚线留白——行飞走后原位完好如初，"迁移"就退化成
+  "复制"，语义全失
+- A 式交叉淡化窗口（rowOp 灭于 u≈0.45 前、cardOp 亮于其后）是防穿帮的
+  命门；spring 有过冲，u 可能短暂 >1，内容 opacity 都要 clamp
+- B 式呼吸原点必须是树的视觉重心（demo 960,620）而非画面中心，
+  不然读作整屏 zoom
+
+## 参考实现
+demos/canvas-materialize-moves/
+（DiagramCascadeBuild.tsx / PanelToCanvasMaterialize.tsx）
+原片出处：miro-promo 84–92s（A 式）/ 104–116s（B 式）

package/skills/hyper-animator-codex/references/shotcraft/cards/card-flip-reveal/README.md

@@ -0,0 +1,50 @@
+---
+name: card-flip-reveal
+一句话: 功能卡 3D 翻面揭示——卡片沿 Y 轴翻 180°，正面 UI 翻到侧棱最薄处闪过一道随角度移动的高光带，背面揭出大号结论数字，逐张错峰扫过整排
+适用: "功能→成果"的成对叙事：一排功能卡逐张翻出各自的指标/结论；元素级转场卡
+时长: 单卡翻转 26f，三卡错峰 10f，全程 ~4.9s（含 hold）
+能量: 中高
+---
+
+## 意图
+库内"翻"字辈已有 wall-reveal-moves B（整墙波浪翻面，讲入场）和
+split-flap（字符翻牌，讲文字）。本卡是**语义翻面**：一张卡的正反两面
+是一对因果——正面是功能界面，背面是它带来的数字结论。翻面动作本身
+就是"所以呢？"的回答，Apple bento 段落的标准语法。逐张错峰 10f 扫过
+一排，三张卡三个数字节奏读作"成果连报"。
+
+## 动效核心
+- perspective 1200px + transformStyle preserve-3d；双面各自
+  backfaceVisibility hidden，背面预转 rotateY(180°)
+- 翻转 18f Easing.bezier(0.55,0,0.3,1) 冲到 192°（12° 过冲，原案 8°
+  不可感已加码），再 8f Easing.out(poly(5)) 回落 180°
+- **侧棱高光**：linear-gradient 位置随角度 35°→145° 从卡左外扫到右外，
+  强度 sin 包络在 90°（最薄瞬间）达峰 0.32 加深灰——白底用加深不用
+  提亮（判例）；高光与角度联动才读作"光扫过转动的面"
+- 错峰 delay 10f/卡；全部翻完真静止 ≥40f
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 翻转时长 | 18f + 8f 回弹 | <14f 看不到侧棱瞬间；>28f 读作慢慢转 |
+| 过冲 | 192°→180°（12°） | 无过冲落定读作生硬停表 |
+| 高光峰值 | 0.32 加深灰 @90° | 峰值错开 90° 读作贴图错误 |
+| 错峰 | 10f/卡，≤4 卡 | 同时翻读作整墙翻面（那是 wall-reveal B 的活）|
+| 背面内容 | 大号数字（90px 级）+ 一行小标签 | 背面塞完整 UI 读不完——翻面后只有一拍注意力 |
+| 收尾 | 末卡落定真静止 ≥40f | R1 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 wall-reveal-moves B 式（网格波浪翻面）同技术根不同语义：那是
+  入场（背面灰卡→正面 UI），这是揭示（正面 UI→背面结论）——同片
+  两者都用时翻转方向要区分（入场 rotateX、揭示 rotateY）
+- 正反两面必须语义成对（界面→它的成果）；翻出无关内容，翻面就
+  只是花哨的换图
+- 真实素材正面用截图时注意 backface 渲染开销，三卡以上分 Sequence
+- 声音候选位：每卡翻停帧一声轻"啪"（sound-design §4.5），三连啪
+  节奏感翻倍
+
+## 参考实现
+demos/card-flip-reveal/
+（CardFlipReveal.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/card-flock-tumble/README.md

@@ -0,0 +1,54 @@
+---
+name: card-flock-tumble
+一句话: 三张 UI 页卡从侧棱薄边 3D 翻飞成阶梯站定（全程清晰、样条连续丝滑），站定后保持慢转不停，快速收束吸入中心，炸出单个湍流烟雾环扩散，巨字横贯收场
+适用: 能量高潮段（功能页群→品牌口号的爆点转场）；霓虹暗场调性；"多页面能力"收束成一句话的段落
+时长: 翻飞 ~1.5s + 慢转展示 ~0.3s + 收束 0.3s + 烟环+巨字 ~2s；全段 4.5s
+能量: 极高（全片能量顶点用）
+---
+
+## 意图
+三张页卡像被甩出的扑克在 3D 空间翻飞列队，站定亮相后被瞬间
+吸入中心，炸出一圈烟雾环，品牌巨字穿环而出——"能力展示→能量
+坍缩→口号爆发"一气呵成。命门有三：**丝滑**（侧棱→翻飞→站定
+一条 Catmull-Rom 样条导数连续，分段插值的顿挫会被读出来）、
+**不许停**（站定后保持低角速度慢转到收束，静止段被裁"不要停住，
+保持旋转"——高潮段没有静帧）、**全程清晰**（motion blur/景深糊
+全删，被裁"不要加模糊效果"）。
+
+## 动效核心
+- 翻飞：三卡各自 k0（近 90° 侧棱薄边）→k1（翻飞中段）→k2（阶梯
+  站定）Catmull-Rom 样条，Easing.out(cubic) 驱动，~44f
+- 站定慢转：idle 漂移 ry +0.34°/f、rx -0.1°/f、rz +0.05°/f（14f
+  平方缓入避免与样条衔接顿挫），到收束时刻不停
+- 收束：10f Easing.in(quad) 从慢转姿态直接加速吸入中心缩小，
+  透明度前 60% 满格（"吸入"运动要清晰可读）
+- 烟雾环：**单个**（多圈被裁），feTurbulence 三组位移（絮边/亮斑/
+  暗斑）+上桃下紫渐变——破碎絮边、明暗斑块、减速外扩缓慢长大、
+  衰减极慢驻留，中心无水面光；粒子效果零残留（被裁）
+- 巨字：横贯全屏渐显+微放大，霓虹渐变描边
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 三卡间距/大小 | 大幅重叠成一叠阶梯、scale 1.6–1.74 | 两轮加码判例："再靠近一些，再大些"——阶梯要读作一组不是三张 |
+| 站定慢转 | ry ~0.34°/f 连续 | **不许静止**（判例）；>1°/f 读作还没站定 |
+| 收束时长 | 10f ease-in | 22f 版被裁"要快"；透明度早退=吸入不可读（返工判例） |
+| 烟雾环 | 单圈、湍流絮边、衰减极慢 | 多圈被裁；平滑霓虹圈/粒子版被裁——对照原片密帧做湍流质感 |
+| 模糊 | 全程零 blur | 翻飞/收束加 blur 均被裁 |
+| 样条 | 一条 Catmull-Rom 贯穿 | 分段 lerp 有速度台阶，"丝滑流畅"是裁决原话 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 烟雾环质感判例：干净图形环（描边圆/同心波）三轮被裁，最终版
+  feTurbulence 湍流絮边对照原片密帧逐格校——"要一样"；残余差距
+  是噪声场静态（整体旋转+长大），无逐帧湍流滚动，极近看流动感弱
+- 与 particle-celebrate-hits 分工：那张是粒子礼花打击点；本卡
+  烟雾环是能量坍缩的余波，禁加粒子
+- 与 bubble-swarm-takeover 分工：那张是群体涌入接管；本卡是
+  三卡精确列队+坍缩，数量意义相反
+
+## 参考实现
+demos/card-flock-tumble/
+（CardFlockTumble.tsx）
+原片出处：clickup-30.mp4

package/skills/hyper-animator-codex/references/shotcraft/cards/cel-flash-stomp/README.md

@@ -0,0 +1,54 @@
+---
+name: cel-flash-stomp
+一句话: 底色闪砸字——大词逐拍像图章歪着砸满屏，每词落定瞬间背景层在两个纯色间频闪数帧而文字纹丝不动；动漫必杀技字卡的 UI 翻译
+适用: 口号/三连词的高能段落（"SHIP / FASTER / TODAY"式）；文字节奏卡，与 type-rhythm-sync 互补（那是字属性动，这是字砸+底闪）
+时长: 每词 ~30f × 词数 + 收尾 ≥45f；三词约 4.8s
+能量: 高
+---
+
+## 意图
+逐词砸字（stomp typography）单用只有重量；背景纯色闪（动漫背景
+フラッシュ——必杀技名出现时底色交替闪）单用只是闪。焊在一起互补
+成立：词砸下的落定帧正是底闪的起爆帧，**主体稳、背景闪**——观众
+盯着字，眼角余光里整个世界在震颤，打击感来自周边视野而不来自主体
+抖动。这是与震屏完全相反的路线：震屏晃主体，本卡晃世界。三词逐拍
+递进，末词闪加倍+标签条收束，一句口号剪成三记盖章。
+
+## 动效核心
+- 每词 ~30f 硬切无过渡；入场 6f scale 1.18→0.98→1
+  （Easing.out(poly(5))，2% 过冲）+ rotate 交替 +2.5°/−2.5°/0°
+  ——歪角是"图章"的一半，全正读作幻灯片
+- **底闪与文字分层是命门**：落定帧起背景色在 G.bg(#ececea) 与
+  加深灰 #cfcfca 间每 2f 交替共 6f，文字独立上层纹丝不动
+  ——白底上闪加深灰不闪白（判例）
+- 末词加倍：闪 8f + 暗色拉大到 #c4c4c0 + 同帧底部标签条 14f 淡入
+  ——最后一击必须比前两击响
+- 词间零 crossfade；全程帧确定
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 词时长 | ~30f/词，3–4 词 | <22f 读不完词；5+ 词读作 rap 字幕（那去用 karaoke） |
+| 砸落 | 6f scale 1.18→1 + 2% 过冲 | 幅度 >1.3 起步会先读到"缩小动画"再读到"砸" |
+| 歪角 | ±2.5° 交替，末词归 0° | 同方向连歪读作版式错误 |
+| 底闪 | 2f 交替 × 6f；末词 8f + 对比拉大 | 闪 >10f 读作背景故障；1f 交替在 30fps 下读不出色差 |
+| 标签条 | 末词闪结束同帧起 14f 淡入 | 早于末闪出现会被闪没 |
+| 收尾 | 末词落定真静止 ≥45f | R1；重拳双倍 hold |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- **声音强依赖**：每词砸落一声 kick、底闪对齐鼓点（sound-design
+  §4.5）——无声版读作 PPT 快翻；这卡就是给音乐段写的
+- 底闪层里不许有任何内容元素（logo/纹理都不行）——闪的必须是
+  "空气"，有物在闪就变成内容故障（同 drop-blackout"黑场无物"判例）
+- 与 background-cel-flash 单用（关键词驻场只闪底）的区别：本卡词
+  在换、拍在推进；驻场强调版是它的静态子集，不另立卡
+- 与 beat-cut-moves A（递进硬切串）能量档相同且都是"切+拍"，
+  同片二选一；全片本卡 ≤1 段（P4）
+- 实战品牌色版：底闪两色用品牌色对（如强调色×深墨），对比度须 ≥
+  demo 的 #ececea/#cfcfca 灰差，不然白闪一场
+
+## 参考实现
+demos/cel-flash-stomp/
+（CelFlashStomp.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/chart-live-moves/README.md

@@ -0,0 +1,51 @@
+---
+name: chart-live-moves
+一句话: 活体图表三式——oscilloscope-stream 示波流线（曲线右端实时写入+突发尖峰）、unit-dot-swarm-regroup 点阵重组（点群三幕迁徙聚成数字）、axis-rescale-shock 轴爆表重标（新值冲出画框逼 y 轴重标）
+适用: 数据叙事段落；分别讲"实时性"、"每个数字是一个人"、"增长装不下"
+时长: 各 4–6s
+能量: 中高（数据即剧情）
+---
+
+## 意图
+图表不是插图是剧情。三式共同前提（实测判例）：**必须真图表语境**
+——真轴标/真数据/真文案，灰阶占位条测不出数据叙事的表达力。
+A 示波流线：曲线写入点钉在右端上下起伏，旧数据左流出画，中途一次
+突发尖峰（振幅 2.2×、读数跳大变强调色）——"实时"不用说出口，还有事件；
+B 点阵重组：320 个点（每点≈40 customers）散布→聚三簇（浮 Free/Pro/
+Enterprise 真标签）→列队成柱（真轴标）→聚成点阵大数字 "12,847"——
+同一批点，观众能跟着某一颗看它归队；
+C 轴爆表：折线正常爬升，新值顶破图表上沿冲出卡片 220px（强调色粗线
+插进标题区），停半拍，y 轴"哗"地重标（旧刻度飞出/新刻度滑入/网格
+加密/旧线压扁成地平线），新值落回+弹真值标签——用"坐标轴装不下"演增长。
+
+## 三式选型
+| 式 | 核心动作 | 适用 |
+|----|----------|------|
+| A oscilloscope-stream | 采样窗平移 8px/f + 余弦包络尖峰 + 刹停真静止 | 监控/实时类产品："活着"的系统 |
+| B unit-dot-swarm-regroup | 三幕 spring 错峰迁徙（stiffness 150、错峰 8f），终幕点阵拼数字 | 用户量/构成叙事："每个点是一个人" |
+| C axis-rescale-shock | 冲出框 220px + 重标三联动（刻度换/网格密/旧线压扁）+ 震 8px | 增长曲线高光："off the charts" 字面化 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 真语境 | 真标题/真轴标/真单位/真读数 | **入库前提**：灰阶版三条全数被裁，换真语境后全过 |
+| 主角色 | 强调色（模板片为琥珀）标事件/主角（尖峰读数、Pro 簇、爆表段） | 全灰读不出"哪里是重点" |
+| A 流速 | 8px/f | 5.5 已可感，8 更明确；波形纯函数禁随机 |
+| B 点数/点径 | 320 / 9px | 点太少拼不出数字，太小看不见个体 |
+| C 冲出幅度 | 卡顶外 220px | 80px 版不够"爆"；真的插进标题区才是事故感 |
+| 收尾 | 三式都要 ≥36f 真静止 | 数据图表尾漂读作还没播完 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 三式是三种独立手法不是套餐——同片用两式以上时各 ≤1 次且错开段落
+- A 的尖峰事件、C 的重标只能发生一次；重复即廉价
+- B 终幕数字位图字形要预先手算（点数=位点数用满才整齐）
+- 与 dataviz-landscape-open（抽象数据地景开场）分工：那是开场氛围，
+  这三式是段落内的具体数据论证
+- 声音：A 尖峰一声警示 tick；B 每幕迁徙一声 whoosh；C 冲出框
+  一声 riser、重标一声"哗啦"
+
+## 参考实现
+demos/chart-live-moves/
+（AxisRescaleShockV2.tsx / OscilloscopeStreamV2.tsx / UnitDotSwarmRegroupV2.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/circle-match-iris/README.md

@@ -0,0 +1,53 @@
+---
+name: circle-match-iris
+一句话: 圆心匹配光圈切——光圈从页面上圆形元素的圆心炸开，圈内新页的圆形图表接在同一个圆上；匹配剪辑给光圈一个语义锚点
+适用: 前景有圆形元素（头像/图标/圆钮）、后景有圆形主体（donut 图/圆环进度）的接缝；转场技法卡
+时长: 4.7s（锚点脉冲 30f + 光圈扩张 45f + 图表生长 55f + 静止 40f）
+能量: 中高
+---
+
+## 意图
+普通 iris 光圈（词汇表原条目）从任意点开圈，观众只读到"换页了"。
+本卡把它和 match-cut 焊死：光圈必须从前景一个**真实圆形元素**的圆心
+炸开，圈内长出的新页里有个圆形图表恰好接在同一个圆上——观众看到的
+是"头像的圆变成了图表的圆"，圆形本身完成叙事（这个人→这个人的数据）。
+这是 match-cut 在 UI 语境里的落地形态：不靠构图巧合，靠语义圆对圆。
+与穿越三式同属"后景在前景里预先在场"，但锚点是抽象形状而非容器。
+
+## 动效核心
+- **两景的圆严格同心是命门**：锚点圆心写死为一组常量（demo：CX=308,
+  CY=384.8，手算自布局），clip-path circle、新景圆环、脉冲光环全部
+  引用同一组常量——坐标各算各的必然错心
+- 定睛引导：光圈开圈前锚点元素两次放大脉冲 + 两道扩散光环（30f），
+  把视线钉在圆上再动
+- 光圈 `clip-path: circle(r at x y)`，r 22→2100px（45f inOut cubic）；
+  新景圆环同窗从 22→170px 生长——**接圆发生在扩张中途**（观众在
+  光圈还没吃满屏时就看到圆被接住了），不是开完圈再画图
+- 圆环 sweep：strokeDasharray = sweep×周长，rotate(-90) 从顶部起笔，
+  中央数字随 sweep 同步计数
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 锚点脉冲 | 2 次 scale 1→1.15 + 光环扩两道 / 30f | 没有定睛引导，开圈瞬间观众找不到圆心 |
+| 光圈扩张 | 22→2100px / 45f Easing.inOut(cubic) | 快于 30f 接圆读不到；圆心偏移 >10px 一眼穿帮 |
+| 接圆时机 | 圆环在光圈扩张中途（~40% 进度）即可见并同心生长 | 开完圈再长图表 = 普通转场+普通图表动画，匹配感归零 |
+| sweep | 45–100f 到目标值，数字同步计数 | 数字与 sweep 异步读作两个动画 |
+| 收尾 | sweep 完成后真静止 ≥40f | R1 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 真实素材上锚点坐标从截图量测（devtools/标尺），量到的是元素盒不是
+  视觉圆心——带内边距的头像取内容圆心；量完渲一帧对不齐就调常量，
+  别信第一次量的数（同 transition-travel C 腔心判例）
+- 前景锚点必须是**真圆**：圆角方块（border-radius < 50%）当锚点，
+  开圈瞬间方圆错型一眼假；demo 里就是用白补丁把方块盖成真圆的
+- 语义要成对：头像→个人数据、产品图标→产品指标——圆对圆只是形，
+  "这个圆的内容变成它的展开"才是匹配剪辑成立的因
+- 一缝一式规矩同 shot-transitions；本卡自带图表生长段，圈内新景
+  别再叠入场动效
+
+## 参考实现
+demos/circle-match-iris/
+（CircleMatchIris.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/cloner-depth-echo/README.md

@@ -0,0 +1,38 @@
+---
+name: cloner-depth-echo
+一句话: 克隆纵队——主卡瞬间"复印"出 7 个半透明分身沿斜向纵深排开成队，停一拍后全体加速吸回本体合一+弹跳
+适用: "多副本/多租户/规模感/批量处理"卖点；一镜讲完"一个=很多"
+时长: 4–5s
+能量: 中（陈列-收束型）
+---
+
+## 意图
+Spline/C4D Cloner 语汇的 UI 翻译：一张主卡"啪"地复印出 7 个克隆体
+沿 Z 轴向后等距排开（间隔 120px、透明度 100%→20% 递减），错峰弹出
+成纵队；停 ~25f 让观众数得清"有很多个"；然后全体 ease-in 加速吸回
+本体合一，合体瞬间本体弹 1.08x 收束。与 depth-layer-moves 视差
+（不同内容分层）分工：这是**同一内容**的等距重影阵列，语义是规模
+不是空间。
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 斜向错位 | dx=64·idx / dy=−34·idx | **命门**：纯 translateZ 排开在正视角下克隆体全被本体挡住（不可感）；斜向错位让纵队肉眼可见 |
+| 侧视角 | 整队 rotateY 16° | 8° 仍近正视，16° 纵队清晰 |
+| 克隆数/间隔 | 7 个 / 120px | 少于 5 读不出"队"，多于 9 尾部糊成一团 |
+| 透明衰减 | 100%→20% 线性 | 越远越淡=纵深证据；等透明读作贴纸阵 |
+| 排开/吸回 | spring 错峰 1.6f/个；merge ease-in 10f 全体同步 | 排开要错峰（复印感），吸回要同步（收束感）——节奏不对称是设计 |
+| 合体弹跳 | sin(spring×π) 单脉冲 1.08x | 吸回无弹跳读作淡出；弹跳=质量证据 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 克隆体必须从后往前渲染保证遮挡正确；透明度 ≤0.005 条件卸载
+- 同批 3D 渠道另两条（厚板转台淘汰、走廊改改再看）——纯陈列型
+  3D 运镜相性存疑，本卡过墙靠的是"排开-吸回"的叙事动作，
+  实战别退化成静态纵队陈列
+- 声音：排开一串细"啪"错峰，吸回一声上扬 whoosh，合体一声实"咚"
+
+## 参考实现
+demos/cloner-depth-echo/
+（ClonerDepthEcho.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/collab-cursor-moves/README.md

@@ -0,0 +1,48 @@
+---
+name: collab-cursor-moves
+一句话: 协作光标当演员的两式——dialogue-duet 双光标暗场对话双人舞（靠近/绕位/灯光交接/放大成转场），与 cast-ensemble 五光标群演氛围层（错峰飞入+正弦漂移+打字 cameo+聚拢围观）
+适用: 协作/多人/交接主题的叙事段；A 撑起无 UI 的纯叙事拍，B 给画布场景铺"团队在场"体温
+时长: A ~4.7s（140f）/ B ~4.7s（140f）
+能量: A 中（叙事密度高）/ B 低中（氛围层，可垫任何时长）
+---
+
+## 意图
+库内光标一直是"操作工具"（input-trigger-moves 的 cursor-performance
+是单光标点击表演）。本卡把带身份名牌的协作光标升格成**演员**：
+A 式两枚具名光标在纯暗场用位移编排讲"设计-开发交接"——没有一个 UI
+元素，观众照样看懂了剧情，光标位置关系就是台词；B 式五枚光标错峰
+入场后持续漂移当氛围粒子，"团队在场"感全靠它，其中一枚还能停下来
+打字（cameo 戏份）。SVG 光标+名牌 chip 成本极低、叙事密度极高，
+是"协作"主题最便宜的视觉论证。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A dialogue-duet | 蓝/绿两枚具名光标：贝塞尔入场→相互靠近对话（脉冲呼吸）→上下弧线绕位交换→名牌一亮一暗灯光交接→绿光标 easeIn 放大数十倍成巨箭头当转场遮挡 | 双角色交接叙事（设计→开发、你→AI）；需要一段无 UI 的纯叙事呼吸拍 |
+| B cast-ensemble | 5 枚具名彩色光标错峰 spring 飞入灰阶画布→双频正弦漂移驻场→一枚在便签上打字机补全一行→结尾全员 easeInOut 聚拢围观 | 画布/白板类产品全片氛围层；主内容之外需要"别人也在"的背景活性 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 位移 | 全部三次贝塞尔：入场 easeOut 24f / 靠近 easeInOut 30f / 绕位 easeInOut 38f / 甩出 easeIn 24f，无 linear | 直线+linear 立即读作"程序在挪图标"；曲线+缓动才是"人在动" |
+| A 绕位 | 两枚各走半圆弧（上弧 180°→360° vs 下弧 0°→180°）同步交换左右位，R≈270px | 同弧同向会相撞感；上下分弧是"礼让"的身体语言 |
+| A 灯光交接 | 名牌 opacity 0.28+0.72·lit、saturate 0.35+0.65·lit、lit>0.6 加辉光；交接在绕位中段 70–84f easeInOut 完成 | 一亮一暗是"话语权移交"；两个都亮读不出主从 |
+| A 转场放大 | 100–134f easeIn，scale 2.8→68 冲向画外角落，名牌同步淡出 | easeIn 加速是甩出的关键；巨箭头即前景遮挡物，接 transition-hidden-cut 语法 |
+| B 入场 | 5 枚 delay 0/5/9/13/17f 错峰，spring(damping 15)；名牌晚 12f 淡入+上浮 10px | 名牌跟光标同帧出现读作贴纸；随减速淡入才是"人到了自报家门" |
+| B 漂移 | 双频正弦叠加（0.055/0.021 rad/f，每枚相位不同），幅度 ±46/30px | 单频正弦读作钟摆；双频不同相才是"人手的随机" |
+| B 打字 cameo | 落位后 60f 线性吐字 + 光标条 8f 周期闪 | 装饰性打字可 1f/字符级；正文交互打字回 typewriter-moves 节奏 |
+| B 聚拢 | 92f 起 26f easeInOut 到围观位，漂移幅度衰减到 25% 保留 | 聚拢后漂移不能归零——完全静止的光标群读作死机 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 名牌颜色=身份编码，全片必须一致（蓝=Designer 就一直蓝）；中途换色观众会以为换了人
+- A 式是全片一段的"戏"，≤1 次（P4）；B 式是可全片驻场的氛围层，两式同片可共存但 A 的两枚主角要从 B 的群演里出（同名同色），否则读作两拨人
+- B 式漂移光标永远不许盖住正在阅读的主内容——氛围层要让戏，漂移范围避开主体安全区
+- 与 input-trigger-moves 分工：那是光标"操作 UI"（点击有 payload），本卡光标"表演给你看"（位移即剧情）；光标要点东西时回那张卡
+- 声音：A 绕位配轻 whoosh、交接一声柔和 chime、放大甩出一声重 whoosh；B 入场每枚一声极轻 pop，漂移段静，打字段 keyboard 轻声
+
+## 参考实现
+demos/collab-cursor-moves/
+（CursorCastEnsemble.tsx / CursorDialogueDuet.tsx）
+原片出处：A figma-devmode 0:16–0:20 / B figma-devmode 0:05 + miro-promo 全片 + pitch-app 82–90s 打字 cameo