hyper-animator-codex 0.7.1 → 0.8.1

package/skills/hyper-animator-codex/references/shotcraft/cards/wall-reveal-moves/README.md

@@ -0,0 +1,53 @@
+---
+name: wall-reveal-moves
+一句话: 整墙批量入场三式——bento 逐格点亮、网格波浪翻面、蓝图描线成形，全部原位显形不位移，与 deck-deal-flyin 的飞入位移型互补成品类矩阵
+适用: 功能墙/卡片墙/整页界面的整体亮相；内容已在原位、要"显形"而非"涌入"的段落
+时长: 单式约 4.3–5s（A 150f / B 130f / C 150f @30fps，含建立 hold 与静止收尾）
+能量: 中
+---
+
+## 意图
+"一墙内容怎么出场"库内此前只有 deck-deal-flyin 一个答案——高能量、位移型、
+"东西涌进来"。但不是每面墙都该涌：品牌段要庄重、功能墙要轻快、
+"从设计到实物"要讲工序。这三式共同点是**非位移批量入场**——元素原地显形，
+版式从第一帧就成立，观众看的是"状态变化的波前扫过一面墙"而不是"物体飞行"。
+选型先问一句：这面墙该"涌进来"还是"亮起来"？前者去 deck-deal-flyin，后者进本卡。
+
+## 三式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A bento-light-up 逐格点亮 | 暗场 3×2 bento 墙压暗待命，强调色流光逐格描边一圈、内容随即提亮上浮，全亮后镜头缓推收住 | 内容庄重/暗场品牌段；节奏沉稳的功能总览 |
+| B grid-wave-flip 波浪翻面 | 3×3 灰背卡墙沿对角线波前依次 rotateX 原位翻转 180°，翻出正面内容，尾张过冲回弹 | 轻快功能墙；一秒扫完全屏的快节奏段 |
+| C wireframe-draw-on 蓝图描线成形 | 界面先以 SVG 细线蓝图分组描画，再一条强调色发光竖线左→右扫过，扫过处线框实体化成真实界面 | "从设计到实物/从想法到产品"叙事；产品首次整体亮相 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 节拍 | hold 20f → 每格间隔 12f 依次激活（六格 ~96f 全亮）→ scale 1→1.04 缓推 25f（bezier 0.33,0,0.2,1）→ 静止收尾 | 12f 级联是"逐格可辨"与"整墙拖沓"的平衡点；格数增多可压到 8–10f，但间隔均匀本身就是这一式的庄重感来源，别学发牌加速 |
+| A 单格 | 暗态 opacity 0.18 + translateY 20px；SVG rect pathLength=100 + dashoffset 描边 8f（强调色 #e8b45e 4px + drop-shadow 辉光）；描边过半（+6f）内容 back-out(0.3,1.4,0.5,1) 弹出 8f 提亮归位；描完 +12f 流光退火到 0.4 常亮细边 | 描边与内容弹出要**接力不同步**——同帧起读作整格闪现；点亮中段辉光脉冲用 lit·(1−lit)·4 抛物线，峰值幅度按格 seed 微差（正弦哈希，禁真随机） |
+| B 波前 | hold 20f → delay=(row+col)*6f 对角线步进，每张 rotateX 0→180° 翻 14f bezier(0.35,0,0.25,1)；尾张冲到 190° 再 8f 弹回 180° | (row+col) 是对角波的灵魂，换 row 或 col 单向扫立刻平庸；只给尾张过冲——张张过冲读作整墙果冻 |
+| B 翻面结构 | 共享 perspective 1200px 容器（整墙一个消失点），每张双面卡 preserve-3d：灰背朝外 + 正面预转 rotateX(180°)，两面都 backfaceVisibility hidden | perspective 加在墙容器不是单卡上，否则九个消失点各翻各的；翻到 90° 最薄处叠一道 4px 白色高光线（不随卡旋转、贴格位随角度 45°→135° 从上缘扫到下缘，opacity=1−|angle−90|/45），阴影随 sin(angle) 抬起再收回 |
+| C 描线 | hold 20f → 分组错峰各 30f 描完：侧栏 20f 起/顶栏 30f 起/6 卡 40+i*3f 起/折线图 52f 起；SVG pathLength=1 + dashoffset 1→0，描边 #8f8f8d 2.5px round | 分组错峰是"手在画"的感觉来源，全部同帧起笔读作打印机；卡内占位线再按 +3f 细错峰，长短用 seed 哈希微差 |
+| C 实体化 | 88–118f 实体层 clip-path inset(0 right% 0 0) 从左向右展开 30f，bezier(0.55,0,0.25,1)；前沿跟 4px 强调色竖线（#ffc46b + 双层辉光 boxShadow），86–92f 淡入、112–120f 淡出 | 竖线位置与 clip 前沿必须同一个 scan 值驱动，异步读作穿帮；描线段与扫描段之间留 ~6f 喘息（82→88f），线框画完立刻扫读作赶工 |
+| 静止收尾 | 三式动作全部落定后真静止 ≥15f（A 在缓推结束后、B 在尾张回弹后、C 在扫描线淡出后起算） | R1 呼吸判例：静止期一切属性锁死，包括辉光/阴影/高光残留 |
+
+## 已知坑
+- **demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验**
+- A/C 的强调色描边/扫描线属"单点高质量光效"范畴（Q4 三约束内合规），但一支片
+  整墙点亮 ≤1 次（P4 手法去重）——A 和 C 同片共用即算两次整墙光效，选一
+- B 式翻面后的正面实战要接真实截图：backface 侧预留高清纹理（Q2），翻转中
+  正面会以斜角被看，低倍截图先过 hires-rasterize-3d-text 技法卡再上
+- C 式线框几何必须与实体层布局逐像素对位（demo 里按 FakeDashboard A 手排），
+  换素材要重排线框——对不齐则扫描线扫过瞬间元素跳位，一眼穿帮
+- 三式都是"原位显形"，别混入位移入场（如 B 翻面时再加 translateY 飞入）——
+  位移需求去 deck-deal-flyin，杂交会两头不像
+- A 式暗态 opacity 0.18 依赖暗底（#2a2a28）成立，亮底下压暗读作褪色故障
+
+## 参考实现
+demos/wall-reveal-moves/
+（BentoLightUp.tsx）
+
+实现状态：`bento-light-up` 可按上述源码适配；`grid-wave-flip` 与
+`wireframe-draw-on` 仅供参考，需要自定义实现。二者不默认推荐，只有用户明确
+点名后才可基于本卡参数和 Gallery 样片制作，并在设计 spec 与终检中记录风险。

package/skills/hyper-animator-codex/references/shotcraft/cards/wipe-transitions/README.md

@@ -0,0 +1,47 @@
+---
+name: wipe-transitions
+一句话: 几何擦除转场两式——clock-wipe 时钟扫描（雷达指针扫一圈换页）与 blinds-slice 百叶窗切条（12 竖条错峰翻换成波）
+适用: 新旧页都不动、一条几何边界扫过完成交接的通用转场；不依赖构图里有合适元素，哪儿都能用
+时长: 单式 前态 ≥20f + 擦除 32–60f + 收尾 ≥40f，约 5s（150f）
+能量: 中
+---
+
+## 意图
+转场库已有三族：穿越系（钻进去）、藏切系（遮住切）、体块系（页面是
+实体）。本卡是第四族**几何擦除系**——新旧页都不动，一条几何边界扫过
+完成交接，擦除的形状即语义：A 圆扫是"仪表盘刷新了一屏数据"，B 条扫
+是"百叶窗逐叶翻面换页"。与 shot-transitions F 元素遮罩擦除的区别：
+F 用页面内真实元素当遮罩（依赖构图），本卡是纯几何形——通用性即定位。
+按语义选：数据刷新用 A，横向推进翻页用 B。
+
+## 两式选型
+| 式 | 做法 | 适用 |
+|----|------|------|
+| A clock-wipe | B 页上层套扇形 clip-path polygon，指针从屏心 12 点顺时针匀速扫 360°，扫过处露 B；扫描沿带多层亮线 | 数据/状态刷新语义；仪表盘类页面 |
+| B blinds-slice | 12 根 160px 竖条 overflow hidden + 内层整页负 margin 对位；条内 A scaleX(1-p) 左缘收缩、B scaleX(p) 右缘展开，错峰 delay 成波，缝上亮线随波扫 | 翻页/推进语义；横向阅读动线页面 |
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| A 扇形 | 中心屏心(960,540)、半径 1400 盖满四角，固定 73 顶点(SEGS=72) | 顶点数恒定且够密（40+）防锯齿跳变——命门 |
+| A 扫速 | 30–90f 指针 0→360° 纯 linear，双向 clamp | 雷达要匀速；加缓动就不是雷达是钟摆 |
+| A 亮线 | 四层 SVG line：26px 白 0.35 柔光 + 13px 白 0.60 + 9px 黑 0.55 暗描边 + 4px 白核 | 白底判例：纯提亮不可见，必须加暗描边；首渲 3px 白线太弱，加码 1.5x 才过 |
+| B 波 | 20–52f：delay=列号×2f，每条 10f Easing.in(cubic) | 交接点恒为 x+160(1-p)，数学上无露底 |
+| B 缝亮线 | 三层 SVG：16px 白 0.45 柔光 + 6px 黑 0.55 暗描边 + 3px 白核，进出各 2f 淡入淡出 | 同 A 白底判例 |
+| 摘罩 | A 96f / B 52f 起条件卸载全部擦除结构，B 页直出 | opacity 0 不算摘，残留 clip-path 毁真静止 |
+| 收尾 | A 54f / B 98f 真静止（≥40f） | R1 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 擦除边界必须带亮线/高光——无亮线的 wipe 读作 PPT 转场，命门；
+  亮线在浅色区靠黑描边、深色区靠白核，两侧都要可读
+- A 与 circle-match-iris 的区别：iris 是从锚点炸开的圆（半径在长），
+  clock 是角度在扫（半径恒定）——别因为都是圆混用
+- 几何擦除全片 ≤2 次，且 A/B 别同片连用（两次"边界扫过"读作模板感）
+- 亮线淡出与摘罩必须同帧衔接（A 90–96f 淡出、96f 卸载），
+  差一帧就是残线穿帮
+
+## 参考实现
+demos/wipe-transitions/
+（BlindsSlice.tsx / ClockWipe.tsx）

package/skills/hyper-animator-codex/references/shotcraft/cards/word-relay-filmstrip/README.md

@@ -0,0 +1,50 @@
+---
+name: word-relay-filmstrip
+一句话: 左列黑白相间等高页面卡步进滚动、右侧衬线大词原位接力（名词恒定+动词轮换）——切词瞬间才滚动一格，词块垂直中心与当前页面卡中点精确对齐
+适用: "一个主体 × 多种能力"的枚举段（Computer researches/builds/codes…）；作品集/案例流展示；产品多场景巡礼
+时长: 每词期 ~1.5–2s × 3–4 词；全段 5–7s
+能量: 中低（编辑部气质，节奏靠切词的"咔哒"感）
+---
+
+## 意图
+左边是证据（页面截图胶片），右边是论点（大词）：动词换一次，
+胶片就步进一格给出新证据——文字与画面互为注脚。命门是**步进制**：
+左列平时完全静止，只在切词瞬间滚动一格（滚动=换证据的机械动作），
+持续滚动会让左列沦为背景装饰、切词失去"咔哒"感。第二命门是
+**对齐**：大词块垂直中心必须与当前页面卡中点精确对齐（像素级），
+歪了整个版式的"编辑部严谨感"就塌了。
+
+## 动效核心
+- 左列：等高页面卡纵向排列，黑白（深浅）强制相间以显滚动步进；
+  切词窗口内 ease-in-out 滚动恰好一卡高，其余时间零位移
+- 右侧：衬线体（Didot 类）两行——主体名词恒定，动词原位接力：
+  旧词灰化淡出（先出），新词落位（后进），先出后进不许叠影
+  （判例：v2 叠影"resebuilds"被抓）
+- 对齐：词块总高的垂直中心 = 当前卡顶 + 卡高/2（实测 y=540@1080p，
+  精确到个位像素）
+- 滚动与切词同步：滚动起点=旧词开始灰化，滚动终点=新词落稳
+
+## 参数表
+| 参数 | 典型值 | 调节手感 |
+|------|--------|----------|
+| 页面卡 | 等高（530px@1080p）、黑白相间、约半屏宽 | 不等高/同色系读不出步进；卡太窄失去"证据"分量 |
+| 词期 | ~45–60f/词 | <40f 读不完词+胶片看不清；词期不必均匀 |
+| 滚动窗口 | ~12f ease-in-out，恰一卡高 | 持续滚动=命门违例；滚过头/不足读作机械故障 |
+| 词接力 | 旧词 4–6f 灰化淡出 → 新词 6–8f 落位 | 同帧交叉必叠影；间隙 >10f 读作断片 |
+| 垂直对齐 | 词块中心=当前卡中点（像素级） | 用户单点意见"文字高度和中间的页面中点要对齐"；差 >8px 可感 |
+| 字体 | 衬线 Didot 类、动词字重比名词轻或同 | 无衬线会丢"编辑部"气质 |
+
+## 已知坑
+- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
+  首次实战须以真实素材回验
+- 与 text-column-converge 分工：那张是左右对峙合拢的揭晓戏；
+  本卡是纵向证据流+原位接力，无合拢无揭晓
+- 与 pill-slot-cycle 分工：那张是胶囊槽位轮换 UI 元素；
+  本卡是版式级的图文对位系统
+- 实战素材：页面卡应使用真实截图（demo 为灰条示意，残余差距
+  已知）；截图亮度要人工分档保证相间可读
+
+## 参考实现
+demos/word-relay-filmstrip/
+（WordRelayFilmstrip.tsx）
+原片出处：perplexity-promo.mp4 ≈76–90s