HyperFrames Seam Craft场景衔接转场的渲染正确性守则与主时间线合成机制解析【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇技术指南围绕 HyperFrames 发布类product-launch video工作流中的seam craft接缝工艺展开讲解任意场景到场景转场要正确合成所依赖的渲染前提条件以及注入器在主时间线master timeline上搭接两个 clip wrapper 的具体机制。读完你将掌握为什么深色成片在剪辑点会出现白闪、#root舞台背景扮演什么角色、转场注入器如何通过延长时长/提前起点/0-1 轨道乒乓/盖章 GSAP 模板四个步骤把两个场景叠在一起以及gsap_template各占位符的含义与 lint 边界。Seam craft 是一份渲染正确性守则它描述的是无论选用哪种具体转场都必须满足的前提与主时间线机制。具体某一种转场crossfade、push-slide、zoom-through、cut-the-curve 等的逐条实现目录位于 transition registry见 skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md 与 skills/hyperframes-animation/transitions/catalog.md本守则是支撑它们之下共通的底层正确性要求。守则的适用范围Tier-B-ready 转场本守则治理的转场都属于Tier-B-ready仅在两个场景的 clip wrapper#el-sid上做纯transform/opacity/filter动画不注入覆盖层 DOM也不需要每个场景做额外配合。也就是说转场效果全部发生在出场景 wrapper与入场景 wrapper这两个元素上由主时间线的 GSAP 补间驱动。相对地覆盖层族转场错层块 staggered blocks、百叶 blinds、漏光 light leak、网格溶解 grid dissolve、页燃 page burn 等以及 shader 转场被推迟到后续阶段处理不在本守则覆盖范围内。舞台背景前提为什么白闪会出现在每个剪辑点问题的物理来源不透明度和小于 1 的窗口多种模板在转场过程中会打开一个两个 wrapper 透明度之和小于 1的时间窗cut-the-curve 的中途剪切窗口mid-window cutzoom-through 的 0.15 透明度地板floor普通 crossfade 的幂曲线下凹power-curve dip。在这个窗口内wrapper 背后是什么画面就会透出什么。如果组装好的index.html中#root没有不透明背景渲染器就会把这个下凹期直接合成到默认的白色页面上——结果是在每个接缝处出现一次白闪在深色影片上尤其刺眼。文档记载该问题在两条 Spotify 成片上被实际观察到修复前。修复assembler 必须为舞台涂底守则给出的硬性约定是组装方必须为舞台绘制不透明背景推荐的 CSS 为#root { background: var(--canvas-deep, var(--canvas, #000)); }其中--canvas-deep/--canvas是项目级的画布语义色变量最坏回退到纯黑#000。当前仓库中的组装脚本已落实这一职责例如 skills/product-launch-video/scripts/assemble-index.mjs 在写head时固定让html, body使用#000不透明背景并尝试从项目 skills/product-launch-video 约定的frame.md里解析出canvas语义色经lib/tokens.mjs的parseColors/semanticColors作为#root的背景解析不到时#root透明、由黑色 body 兜底。无论走哪条路径合成时兜底的舞台地面都是不透明的从而保证透明度窗口内没有白色可漏。其它任何消费这些模板的组装方也都承担同样的保证义务own the same guarantee。注入器如何施加一次转场主时间线搭接四步在场景i记为from与场景i1记为to之间的break边界处注入器即各工作流中的 transitions 注入逻辑PLV 工作流见 skills/product-launch-video/scripts/transitions.mjs其转场描述数据见 skills/product-launch-video/scripts/lib/transitions.json执行以下四个动作延长出场景的时长把#el-fromwrapper 的data-duration增加duration_s使其多保持一帧最终画面。这对应 core 运行时中对外部槽位external slot组合的绑定/寻址处理见 packages/core/src/runtime/init.ts只有外部组合就绪后运行时才把捕获到的主时间线与外部槽位的时长解析绑定在一起进而让被延长的 wrapper 得以被正确 seek 与停驻。提前入场景的起点把#el-towrapper 的data-start提前duration_s从而制造出重叠窗口overlap window。0/1 轨道乒乓重排重新为所有clip 分配data-track-index做 0/1 ping-pong使得两个重叠的 wrapper绝不落在同一条轨道上——同轨重叠在本守则与组装契约里是不合法的。这一约束对应 lint 规则 packages/lint/src/rules/composition.ts它对data-track-index的取值规范例如废弃的data-layer会被提示替换、元素归属与轨道密度timeline_track_too_dense的每轨元素数提示做结构审计在组装层面skills/product-launch-video/scripts/assemble-index.mjs 的 guard ③ 也会把单个组合文件内同轨且时间窗重叠的两个 clip 判为硬失败。渲染时轨道号更高的元素合成在上层higher track composites on top所以乒乓到高轨的入场景会盖在出场景之上。盖章 GSAP 模板把gsap_template作为一条时间线条目 stamp 到window.__timelines[main]时间点为T overlap-start。需要强调渲染侧不读轨道的独立性从组装脚本的实现注释看渲染器本身并不读取data-track-indexdata-track-index是时间线/工作流约定而非框架硬读取因此 0/1 乒乓与同轨约束本质是让两个重叠 wrapper 在不同 lane 上这一组装层约定的执行方式。渲染验证原型渲染证明了什么2026-05-31 的原型渲染对该机制做了端到端验证确认了三个关键事实不存在双重 seek主时间线上的 wrapper tween 被 seek 并渲染时不会与子合成sub-comp自己那条暂停的时间线发生双重 seek——运行时把两者当作独立驱动independent各走各的 seek延长后的 wrapper 确实停驻出场景的最终帧被data-duration延长后的出场景在重叠期保持末帧画面高轨入场景正确覆盖并混合乒乓到更高轨的入场景 wrapper 合成在出场景之上且按透明度/位移等属性完成混合。这三点是白闪不出现、且转场期任意一帧画面都完整的渲染侧根基。gsap_template 占位符一行模板驱动所有转场注入器在每一条gsap_template行上执行如下 token 替换Token含义__OLD__#el-from—— 出场景 clip wrapper 的选择器带引号__NEW__#el-to—— 入场景 clip wrapper 的选择器带引号__T__重叠起始时间单位秒主时钟 master clock__DUR__该边界对应的duration_s__DX__方向型转场的水平位移-1920LEFT/1920RIGHT__DY__垂直位移-1080UP/1080DOWN__ORIGIN_OUT__/__ORIGIN_IN__squeeze类型需要的transformOrigin取值对占位符的值与帧画布分辨率相关文档中的1920/1080对应 16:9 全高清画布实际数值由注入器按解析出的画布尺寸与转场方向代入。模板行由此变成真正可执行的 GSAP 代码进入window.__timelines[main]例如方向型位移、缩放、透明度曲线、filter补间等都由同一套 token 机制驱动。主时间线上的 lint 边界filter / scaleX 为什么可用在把模板 stamp 上主时间线之后另一个关键前提是主时间线上的属性必须 lint-clean。守则明确指出packages/lint/src/rules/gsap.ts没有 per-property 白名单filter、scaleX、transformOrigin这些属性并不在被禁清单里主时间线可以合法携带它们该规则的作用域约束是按data-composition-id范围进行一致性检查例如从 DOM 中读回data-composition-id以限定审计范围而不是对某一类属性一刀切常被误以为是全局约束的 x/y/scale/rotation/opacity 白名单 其实只是场景 worker 的提示prompt规则——它约束的是单场景制作阶段 worker 的产出不约束does not bindindex.html主时间线上的转场代码。从 packages/lint/src/rules/gsap.ts 的源码结构看它对scale/scaleX/scaleY的处理也以检测 GSAP 补间与 CSS transform 是否存在冲突为主CONFLICTING_SCALE_PROPS出现在冲突消解逻辑中而非禁止使用某属性。这一分工是重要的心智模型场景内scene-worker 约束宽进严出、主时间线lint 规则同样允许转场所需的视觉属性两者不要混淆。在仓库中的落地与排查入口守则本体即本文主题属于 PLV 场景接缝的渲染正确性约定配套技能入口见 skills/product-launch-video/SKILL.md同结构的组装器也存在于 skills/faceless-explainer/scripts/assemble-index.mjs 与 skills/music-to-video/scripts/assemble-index.mjs 等其它技能目录均有对应的.test.mjs用例钉住行为。运行时时间线绑定/寻址见 packages/core/src/runtime/init.ts外部组合槽位就绪判断与主时间线捕获集中在约 L1393-L1410 一带配套测试见 packages/core/src/runtime/init.test.ts。轨道结构审计与 lint见 packages/lint/src/rules/composition.ts、packages/lint/src/rules/gsap.ts各有composition.test.ts/gsap.test.ts覆盖。过渡目录与具体转场条目见 skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md。排障速查若在剪辑点或交叉淡化接缝看到白色闪光尤其是深色成片按序检查(1) 组装出的index.html中#root或兜底的body是否携带不透明背景而非默认白底(2) 注入器是否完成了延长出场景data-duration 提前入场景data-start(3) 重叠的两个 wrapper 是否被乒乓到不同data-track-index(4) 盖章的 GSAP 代码是否落在window.__timelines[main]且时间点为重叠起点。把这几条当成接缝合成的固定前提可以隔离出绝大多数转场穿帮类渲染问题。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考