OpenMontage HyperFrames 场景转场实战：从能量与情绪选型到 CSS 与 Shader 实现的完整指南

在 OpenMontage 的多智能体视频生产体系中，HyperFrames 是 HTML + GSAP 原生的渲染运行时，而"场景转场"（Scene Transitions）正是多场景合成中最容易写坏、也最能拉开成片质量差距的一环。本文以仓库中的技能文档 transitions/overview.md 为核心骨架，完整继承其中的动画铁律、能量/情绪/叙事位置选型表、模糊强度与预设参数，并结合同目录的 catalog.md、分类实现文件 css-dissolve.md、css-push.md 以及 TRANSITION-REGISTRY.md 中的机器可读转场注册表，讲清楚"该用哪种转场、写多少时长、GSAP 代码怎么落、Shader 转场的兼容规则是什么"。读完本文，你可以直接按文档规范为一个 1920×1080 的多场景 HyperFrames 合成写出不违反确定性渲染契约的转场代码。

这份文档在技能体系中的位置

overview.md 属于 .agents/skills/hyperframes-animation/ 技能包下的 transitions/ 目录。hyperframes-animation 的 SKILL.md 在路由表中明确写道："Author a scene transition (CSS-driven, between two clips) → transitions/overview.md, transitions/catalog.md"——也就是说，任何"两个场景之间如何切换"的任务，入口就是这两个文件。

文档开头的定位一句话值得记住：

A transition tells the viewer how two scenes relate. A crossfade says "this continues." A push slide says "next point." A blur crossfade says "drift with me."

转场的选择要匹配内容在情绪上在做什么，而不是在技术上能做什么。整个 transitions/ 目录的分工是：

• overview.md（本文主体）：决定用哪个转场、什么时候用——选型表、参数表、Shader 兼容规则；
• catalog.md：给出每个转场的 GSAP 代码硬规则和场景 HTML 模板，以及按类别路由到 css-*.md；
• 13 个 css-*.md 分类文件（push、dissolve、scale、cover、light、distortion、mechanical、grid、radial、3d、blur、destruction、other）：每个类别的逐转场实现细节；
• TRANSITION-REGISTRY.md：供自动化注入器消费的机器可读注册表。

文档中有一句非常直接的警告：这个 overview 只告诉你 which 和 when，写任何转场代码之前必须打开 catalog.md 查看硬规则——"只读 overview 就动手写转场"正是会产出下文 ❌ 反模式代码的原因。

多场景合成的四条动画铁律

overview.md 把以下四条规则标记为"non-negotiable"（不可谈判），适用于每一个多场景合成：

1. 每个合成都必须使用转场，没有例外。没有转场的场景衔接看起来就是跳切（jump cut）。
2. 每个场景都必须有入场动画。元素要 animate IN——opacity、position、scale 等。不允许场景以完整形态"啪"地出现在画面上。并且必须使用 gsap.fromTo() 而不是 gsap.from()，让起始状态显式化：from() 是动画"到当前 CSS 状态"，如果元素同时带着 CSS opacity: 0，就是一个 0→0 的空操作，元素永远不会出现（这条坑见 hyperframes-core 的 sub-compositions 参考）。
3. 禁止出场动画（Exit animations are BANNED），最终场景除外。不要用 gsap.to() 在转场触发前把元素动画"出"屏幕——转场本身就是出场。转出场景的内容在转场开始时必须是完全可见的，视觉交接由转场负责。
4. 最终场景例外：最后一个场景允许把元素淡出（例如片尾 fade to black）。这是唯一允许出场动画的场景。

文档给出的对照代码示例（原样保留）：

// ❌ BANNED — fading the outgoing scene out, then the next scene just runs its entrance.
//    This is a jump cut with a dip, not a transition.
tl.to("#s1", { opacity: 0, duration: 0.4 }, 4.0);
tl.from("#s2 .headline", { y: 40, opacity: 0 }, 4.4);

// ✅ CORRECT — outgoing and incoming animate AT THE SAME TIME T; the motion IS the handoff.
const T = 4.0;
tl.to("#s1", { yPercent: -100, filter: "blur(8px)", duration: 0.5, ease: "power3.in" }, T);
tl.fromTo("#s2", { yPercent: 100 }, { yPercent: 0, duration: 0.5, ease: "power3.out" }, T);

注意 ✅ 版本的两个关键细节：转出（tl.to）和转入（tl.fromTo）使用同一个时间 T 同时启动；并且转入用的是显式起止状态的 fromTo。这个"同一时间、双向对动"的结构是后面所有转场代码的底层范式。

能量（Energy）→ 主转场选型

overview.md 给出的第一张选型表，按内容能量分级指定"CSS 主转场 / Shader 主转场 / 点缀转场 / 时长 / 缓动"：

Energy	CSS Primary	Shader Primary	Accent	Duration	Easing
Calm（wellness、brand story、luxury）	Blur crossfade、focus pull	Cross-warp morph、thermal distortion	Light leak、circle iris	0.5-0.8s	sine.inOut、power1
Medium（corporate、SaaS、explainer）	Push slide、staggered blocks	Whip pan、cinematic zoom	Squeeze、vertical push	0.3-0.5s	power2、power3
High（promos、sports、music、launch）	Zoom through、overexposure	Ridged burn、glitch、chromatic split	Staggered blocks、gravity drop	0.15-0.3s	power4、expo

选型纪律同样写在表后：只挑一个主转场（承担 60-70% 的场景切换）+ 1-2 个点缀转场。绝不要每个场景都用不同的转场。 这个"重复 2-3 种转场"的原则在 TRANSITION-REGISTRY.md 中也被再次确认为专业感来源（"repetition is what reads as professional"）。

情绪（Mood）→ 转场类型

第二张表回答"转场在传达什么"，而不是它长什么样：

Mood	Transitions	Why it works
Warm / inviting	Light leak、blur crossfade、focus pull、film burn · Shader: thermal distortion、light leak、cross-warp morph	柔和边缘、暖色晕染，没有任何尖锐机械感
Cold / clinical	Squeeze、zoom out、blinds、shutter、grid dissolve · Shader: gravitational lens	内容被机械地变换——压缩、缩小、切片、网格化
Editorial / magazine	Push slide、vertical push、diagonal split、shutter · Shader: whip pan	像翻页或切割版面，干净的方向性运动
Tech / futuristic	Grid dissolve、staggered blocks、blinds、chromatic aberration · Shader: glitch、chromatic split	Grid dissolve 是核心的"数据感"转场；Shader glitch 附加海报化 + 扫描线
Tense / edgy	Glitch、VHS、chromatic aberration、ripple · Shader: ridged burn、glitch、domain warp	不稳定、失真、数字崩坏；ridged burn 附加闪电裂纹般的锐利边缘
Playful / fun	Elastic push、3D flip、circle iris、morph circle、clock wipe · Shader: ripple waves、swirl vortex	过冲、回弹、旋转、扩张；swirl vortex 提供有机螺旋扭曲
Dramatic / cinematic	Zoom through、zoom out、gravity drop、overexposure、color dip to black · Shader: cinematic zoom、gravitational lens、domain warp	尺度、重量、光的极端；shader 转场提供逐像素深度
Premium / luxury	Focus pull、blur crossfade、color dip to black · Shader: cross-warp morph、thermal distortion	克制；cross-warp morph 让两个场景有机地流入彼此
Retro / analog	Film burn、light leak、VHS、clock wipe · Shader: light leak	有机的不完美，暖色渗透与扫描线位移

叙事位置（Narrative Position）

转场还要服从"它在片子叙事线里的位置"：

Position	Use	Why
Opening	你最有个性的转场，匹配情绪，0.4-0.6s	为整支片子定下视觉语言
Between related points	主转场，保持一致，0.3s	不要抢戏——内容还在延续
Topic change	与主转场不同的东西：staggered blocks、shutter、squeeze	提示"新章节"——观众的大脑会重置
Climax / hero reveal	最 bold 的点缀转场，最快或最有戏剧性	这是 payoff——把最好的转场花在这里
Wind-down	回到温和：blur crossfade、crossfade，0.5-0.7s	让高潮后的观众喘口气
Outro	最慢最简单：crossfade、color dip to black，0.6-1.0s	收尾，结尾不要引入新能量

模糊强度与时长预设

Blur 强度按能量分档（blur crossfade / focus pull 等模糊类转场的核心参数）：

Energy	Blur	Duration	Hold at peak
Calm	20-30px	0.8-1.2s	0.3-0.5s
Medium	8-15px	0.4-0.6s	0.1-0.2s
High	3-6px	0.2-0.3s	0s

常用时长/缓动预设：

Preset	Duration	Easing
snappy	0.2s	power4.inOut
smooth	0.4s	power2.inOut
gentle	0.6s	sine.inOut
dramatic	0.5s	power3.in → out
instant	0.15s	expo.inOut
luxe	0.7s	power1.inOut

实现层：catalog 硬规则与场景模板

overview.md 的 Implementation 一节指路：转场代码和硬规则在 catalog.md，分类细节在 css-*.md。catalog 定义了全部转场代码共用的五步结构：

position new scene → animate outgoing → swap → animate incoming → clean up overlays

（先把新场景摆到初始位置 → 动画化转出场景 → 交换可见性 → 动画化转入场景 → 清理覆盖层元素）

catalog 的"Hard Rules (CSS)"标注为"违反就会出真实 bug"的规则，全部保留：

• 场景可见性：Scene 1 默认可见（不设 opacity: 0）；Scene 2+ 的 opacity: 0 加在容器 div 上，由 GSAP 揭示。禁止用可见性补丁（timedEls）。
• 字体：直接写想要的 font-family 即可——HyperFrames 编译器会自动通过 @font-face 内联 data URI 嵌入受支持字体，不需要 <link> 或 @import，在 sandboxed iframe 中同样有效。
• 元素结构：独立合成中，场景 div 不带 class="clip"；只有根 div 持有 data-composition-id / data-start / data-duration。
• 覆盖层元素：Staggered blocks 必须是全屏 1920×1080 而不是细条；Glitch RGB 叠层用普通混合 35% 不透明度，而不是 mix-blend-mode: multiply（深底上会不可见）；Light leak 叠层要比画面大（2400px+），永远不能露出可见形状；Overexposure 用 filter: brightness() 作用在场景上，而不只是白色叠层。
• VHS tape：用 cloneNode(true) 克隆真实场景内容而不是彩色条；每条 strip 比画面宽（2020px，left:-50px）；红蓝色散副本 z-index 高于主 strip；随机偏移必须用带种子的 PRNG 保证确定性。
• Z-index：Gravity drop、zoom out、diagonal split 需要转出场景在上层（zIndex: 10），让它在新场景（zIndex: 1）之上退场、露出后面。
• Page burn：内容随页面一起烧掉，没有坠落碎片；burn 结束用 tl.set 隐藏 scene1，永远不要用 onComplete（不可逆）；onUpdate 必须在 wp <= 0 时恢复 clipPath: "none" 以支持倒放 seek；转入场景在 burn 的 90% 处从黑色淡入。
• Clock wipe：9 点多边形带中间边位置，四个象限用独立 tween 分步扫过。
• Grid dissolve：每格轮询 5 色调色板颜色，而不是单色。
• Blinds 数量按能量：Calm 4 横/6 竖；Medium 6-8 横/8 竖；High 12-16 横/16 竖。
• 不要使用：Star iris（多边形插值会坏）、tilt-shift（CSS 无法选择性模糊）、lens flare（是可见形状而非光学现象）、hinge/door（形变太快）。overview.md 的 "Transitions That Don't Work in CSS" 一节同样列出了这四者并指路 catalog 说明原因。

catalog 给出的标准场景模板（1920×1080 独立合成骨架）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      body {
        margin: 0;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: #000;
        font-family: "YOUR FONT", sans-serif; /* compiler embeds supported fonts automatically */
      }
      .scene {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
      }
      #scene1 {
        z-index: 1;
        background: #color;
      }
      #scene2 {
        z-index: 2;
        background: #color;
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <div
      id="root"
      data-composition-id="main"
      data-width="1920"
      data-height="1080"
      data-start="0"
      data-duration="TOTAL"
    >
      <div id="scene1" class="scene"><!-- visible --></div>
      <div id="scene2" class="scene"><!-- hidden --></div>
    </div>
    <script>
      window.__timelines = window.__timelines || {};
      var tl = gsap.timeline({ paused: true });
      // Transition code here
      window.__timelines["main"] = tl;
    </script>
  </body>
</html>

注意模板里 gsap.timeline({ paused: true }) 与 window.__timelines["main"] = tl 的写法——这正是 HyperFrames 确定性渲染契约的要求：合成是一个暂停的主时间轴，由渲染器逐帧 seek（对应 SKILL.md 中"single paused timeline, seek-safe, deterministic"的描述，以及 core 契约里"禁止 repeat: -1、禁止 Math.random/Date.now、禁止在 async/setTimeout/Promise 中构造时间轴"等规则）。

具体转场的 GSAP 实现：从分类文件看代码形态

catalog 的路由表把 ~40 种 CSS 转场分为 12 个类别，各类别到参考文件的一一对应关系（路径均相对于 transitions/ 目录）：

Type	Transitions	参考文件
Push	Push slide、vertical push、elastic push、squeeze	css-push.md
Radial / Shape	Circle iris、diamond iris、diagonal split	css-radial.md
3D	3D card flip	css-3d.md
Scale / Zoom	Zoom through、zoom out	css-scale.md
Dissolve	Crossfade、blur crossfade、focus pull、color dip	css-dissolve.md
Cover	Staggered blocks、horizontal blinds、vertical blinds	css-cover.md
Light	Light leak、overexposure burn、film burn	css-light.md
Distortion	Glitch、chromatic aberration、ripple、VHS tape	css-distortion.md
Mechanical	Shutter、clock wipe	css-mechanical.md
Grid	Grid dissolve	css-grid.md
Other	Gravity drop、morph circle	css-other.md
Blur	Blur through、directional blur	css-blur.md
Destruction	Page burn	css-destruction.md

所有示例约定用 old（转出场景内部选择器）、new（转入场景）、T（转场开始时间）三个变量。以 css-dissolve.md 为例，dissolve 家族的四种转场：

// Crossfade —— 基线
tl.to(old, { opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.inOut" }, T);

// Blur Crossfade（Medium 默认档；Calm 档用 25px 模糊并在峰值停留）
tl.to(old, { filter: "blur(10px)", scale: 1.03, opacity: 0, duration: 0.5, ease: "power2.inOut" }, T);
tl.fromTo(new,
  { filter: "blur(10px)", scale: 0.97, opacity: 0 },
  { filter: "blur(0px)", scale: 1, opacity: 1, duration: 0.5, ease: "power2.inOut" }, T + 0.1);

// Focus Pull（Medium：转出逐渐虚化，转入锐利淡入）
tl.to(old, { filter: "blur(15px)", duration: 0.5, ease: "power1.in" }, T);
tl.to(old, { opacity: 0, duration: 0.3, ease: "power2.in" }, T + 0.25);
tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" }, T + 0.25);

// Color Dip（淡出到纯色、停留、新场景淡入）
tl.to(old, { opacity: 0, duration: 0.2, ease: "power2.in" }, T);
// Background color shows through
tl.fromTo(new, { opacity: 0 }, { opacity: 1, duration: 0.2, ease: "power2.out" }, T + 0.25);

dissolve 文档同时提醒：blur 量必须按能量分档——Calm 用 20-30px 并在峰值模糊停留 0.3-0.5s（文件内给出了 25px 分四段 tween 的完整 calm 版本），High 用 3-6px 且无停留，与 overview.md 的"Blur Intensity by Energy"表完全对应。

再看 css-push.md 的方向类转场，能看到"同一 T 双向对动"结构的具体形态：

// Push Slide —— 两场景一起移动，新场景把旧场景推出
tl.to(old, { x: -1920, duration: 0.5, ease: "power3.inOut" }, T);
tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 0, duration: 0.5, ease: "power3.inOut" }, T);

// Elastic Push —— 转入场景带过冲回弹
tl.to(old, { x: -1920, duration: 0.5, ease: "power3.in" }, T);
tl.fromTo(new, { x: 1920, opacity: 1 }, { x: 30, duration: 0.4, ease: "power4.out" }, T + 0.1);
tl.to(new, { x: -15, duration: 0.15, ease: "sine.inOut" }, T + 0.5);
tl.to(new, { x: 0, duration: 0.1, ease: "sine.out" }, T + 0.65);

// Squeeze —— 旧场景压缩为一条线，新场景从对侧展开
tl.to(old, { scaleX: 0, transformOrigin: "left center", duration: 0.4, ease: "power3.inOut" }, T);
tl.fromTo(new, { scaleX: 0, transformOrigin: "right center", opacity: 1 },
  { scaleX: 1, duration: 0.4, ease: "power3.inOut" }, T + 0.1);
tl.set(old, { opacity: 0 }, T + 0.5);

这些位移量（1920 / 1080）直接来自画布尺寸——与 TRANSITION-REGISTRY.md 中占位符表一致：__DX__ 水平位移 -1920(LEFT)/1920(RIGHT)，__DY__ 垂直位移 -1080(UP)/1080(DOWN)。

Shader 转场：@hyperframes/shader-transitions 与混合策略

overview.md 对 CSS 与 Shader 两条路线的定性是：

• CSS 转场用 opacity、transforms、clip-path、filters 动画化场景容器；
• Shader 转场在 WebGL canvas 上把两个场景纹理逐像素合成——可以做出 CSS 做不到的 warp、dissolve、morph；
• 两者都是一等公民。Shader 由 @hyperframes/shader-transitions 包提供——从包里导入，不要手写原始 GLSL；CSS 转场更简单。按想要的效果选，而不是按哪个更容易选。
• 混合受支持：同一合成里一部分转场用 WebGL shader、另一部分用 CSS crossfade 完全可以。任何 TransitionConfig 条目省略 shader 字段就得到平滑 opacity crossfade：

var tl = HyperShader.init({
  bgColor: "#000",
  accentColor: "#6366f1",
  scenes: ["s1", "s2", "s3", "s4"],
  transitions: [
    { time: 4.0, shader: "sdf-iris", duration: 0.7 }, // WebGL shader
    { time: 8.5, duration: 0.8 }, // no shader → CSS crossfade
    { time: 13.0, shader: "domain-warp", duration: 0.6 }, // WebGL shader
  ],
});

并有一条配套纪律：HyperShader 负责管理所有场景可见性（无论转场类型）；让 init() 自己创建时间轴（不要传 timeline: 参数），把节拍动画加到返回的 tl 上。

Shader 转场可用的内置类型（来自 overview 的实现分类表，Shader 列）：Push/slide 类有 Whip pan；Scale/zoom 类有 Cinematic zoom、gravitational lens；Reveal/mask 类有 SDF iris；Dissolve 类有 Cross-warp morph、domain warp；Light 类有 light leak (shader)、thermal distortion；Distortion 类有 glitch (shader)、chromatic split、ridged burn、ripple waves、swirl vortex。catalog.md 补充了边界：内置不是天花板——没有现成效果时，可以从零写自定义 GLSL、改造公开 shader 代码，或组合 clip-path + transforms + filters 造一个不属于任何现有类别的 CSS 转场；"框架能渲染浏览器能跑的任何东西"。

Shader 兼容的 CSS 规则（必须遵守的 6 条）

因为 shader 转场通过 html2canvas 把 DOM 场景捕获为 WebGL 纹理，而 canvas 2D 渲染管线与 CSS 不完全一致，overview.md 给出 6 条规则以避免转场边界处的可见瑕疵（这些规则只适用于 shader 转场合成，纯 CSS 合成无限制）：

1. 渐变中禁止 transparent 关键字。Canvas 会把 transparent 插值为 rgba(0,0,0,0)（零 alpha 的黑色），产生暗边。永远用目标色的零 alpha 形式：写 rgba(200,117,51,0) 而不是 transparent。
2. 宽度小于 4px 的元素禁止渐变背景。Canvas 无法在 1-2px 元素上匹配 CSS 渐变渲染；细强调线用纯色 background-color。
3. 捕获时可见的元素上不要用 CSS 变量（var()）。html2canvas 不能可靠解析自定义属性；内联样式里用字面色值。
4. 无法被捕获的装饰元素标记 data-no-capture。捕获函数会跳过它们——它们存在于实时 DOM 但不在 shader 纹理里。这条也被其他规则文件引用（例如 rules/kinetic-beat-slam.md 要求"必须在 shader 转场中存活的装饰元素按 overview 规则标记"）。
5. 渐变元素不透明度不得低于 0.15。低于 10% 不透明度的渐变元素在 canvas 与 CSS 中渲染不同；提升到 0.15+ 或改用等效亮度的纯色。
6. 每个 .scene div 必须有显式 background-color，并且与 init() 配置里的 bgColor 传同一个色值。两边缺一，纹理就渲染成黑色。

避免的视觉模式：几何重复

overview.md 的最后一条警告是审美层面的：

避免产生可见重复几何图案的转场——瓦片网格、六边形单元、均匀点阵、等距分布的 blob 圆。这些无论数学上多精确都显得廉价和人工。有机的噪声（FBM、domain warping）是好的，因为它不规则；几何重复是坏的，因为眼睛会瞬间看到网格。

这条规则解释了为什么 Distortion 类推荐 glitch / ripple / swirl 这类不规则效果，也呼应了"有机噪声 good、几何重复 bad"的 shader 选型倾向。

仓库实现印证：从技能文档到 OpenMontage 生产管线

文档规范在 OpenMontage 仓库中并不是悬空的——它同时约束着 Agent 的写作行为和自动化工具的行为，可以从三层看到落点：

1. 机器可读注册表驱动自动注入。 TRANSITION-REGISTRY.md 是 PLV（product-launch-video）场景间转场的"机器事实源"：确定性注入器读取其中的 JSON 块，把匹配的 gsap_template 打样到主时间轴。注册表只收录 Tier-B 就绪的转场——即纯 transform/opacity/filter 作用在两个场景 clip 包装器（#el-<sid>）上、不注入覆盖层 DOM、不需要场景侧配合的转场，目前 5 个：crossfade（默认 0.5s）、blur-crossfade（calm 默认，0.6s）、push-slide（带方向，0.5s）、zoom-through（high 默认，0.4s）、squeeze（0.4s）。注册表还定义了占位符替换协议（__OLD__/__NEW__/__T__/__DUR__/__DX__/__DY__ 等）和注入器四步动作：延长转出包装器 data-duration、提前转入包装器 data-start 制造重叠窗口、用 0/1 ping-pong 重排 data-track-index 避免同轨重叠（同轨重叠是 lint 规则 core/src/lint/rules/composition.ts 判定的非法）、在 T = overlap-start 处打样 GSAP 模板。JSON 中的 blur-crossfade 模板与上文 css-dissolve.md 手写代码逐行一致，印证了"文档代码即注册表模板源"的关系。默认推导规则也呼应 overview 的主次原则：planner 省略 **Transition:** 标注时，HIGH 能量场景用 zoom-through，其余一律 blur-crossfade——"整个视频保持约 2 种转场类型"。

2. 技能路由与核心契约联动。 hyperframes-animation/SKILL.md 的路由表把 scene transition 任务指向 transitions/overview.md + transitions/catalog.md；hyperframes-core 技能 提供这些转场代码所依赖的 data-* 时序属性、子合成与确定性渲染契约（overview 第 2 条铁律中"见 /hyperframes-core → sub-compositions"即指 references/sub-compositions.md）。OpenMontage 层的 skills/core/hyperframes.md 则说明何时选择 HyperFrames 运行时、以及 artifact → HyperFrames 项目文件的映射。

3. 工具链与测试闭环。 当 edit_decisions.render_runtime == "hyperframes" 时，video_compose 路由到 HyperFramesCompose 工具。该工具（类定义见 hyperframes_compose.py）支持 render（materialize workspace → hyperframes lint → hyperframes validate → hyperframes render 出 MP4 的完整流水线，见其 _render 的 docstring"Full pipeline: scaffold → lint → validate → render"）、render_existing、lint、validate、check、scaffold_workspace 等操作。对转场作者而言最重要的两条前置条件也在文档中有据可查：skills/core/hyperframes.md 的 Preflight 一节要求 Node.js ≥ 22、ffmpeg 与 npx 在 PATH、npx hyperframes doctor 通过；验证协议要求 lint（静态契约：重复 id、轨道重叠、缺失 data-composition-id、未注册时间轴）与 validate（浏览器内 seek、截图、采样像素、对比度检查）全部通过后才允许 render。这条 lint/validate 链与 TRANSITION-REGISTRY 提到的同轨重叠 lint 规则是同一条防线——转场代码写坏了，会在 lint 阶段被拦截而不是烧掉一次 60 分钟渲染。测试侧，tests/tools/test_hyperframes_compose.py 提供了 46 个针对该工具的测试用例，覆盖 preflight、scaffold、lint/validate/render 各环节。

速查工作流

把一个多场景 HyperFrames 合成的转场做对，标准动作是：

1. 定能量（Calm/Medium/High）与情绪，查 overview 的两张选型表，定下 1 个主转场 + 1-2 个点缀；
2. 按叙事位置（Opening / Topic change / Climax / Outro）微调时长；
3. 打开 catalog.md 拿硬规则与场景模板，确认可见性、z-index、覆盖层等坑位；
4. 按类别读对应 css-*.md 拿可运行 GSAP 代码，遵守"position new scene → animate outgoing → swap → animate incoming → clean up overlays"与"禁止中间场景出场动画"两条铁律；
5. 若用 shader 转场，走 @hyperframes/shader-transitions，逐条过 6 条 shader 兼容 CSS 规则；
6. npx hyperframes lint / validate 全绿后再 render。

这套文档把"选哪个转场"（overview 的选型表）、"怎么写"（catalog + css-*.md 的代码与硬规则）、"自动化怎么落"（TRANSITION-REGISTRY 的注入协议）三层知识串成一条链，是 OpenMontage 中 Agent 与人类工程师在多场景 HyperFrames 合成时共同遵守的转场规范。