尧图网站建设 
HyperFrames Cut the Curve 转场技巧完整 GSAP 代码模板、Registry Token 机制与调参指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文基于仓库中的 GSAP 实现模板文档系统讲解 HyperFrames 视频合成体系里 Cut the Curve 技巧目录的 7 种转场/进场代码模板前向/反向 Zoom-Through、场景级 Cut the Curve、逐词 Waterfall Cut、Rack-Focus Blur-Cut以及场景内的 Waterfall Entry 与 Nudge Curve。读完本文你可以直接复用这些模板编写场景切换动画理解 registrygsap_template的 token 注入机制并按文档给出的调参范围精确控制速度匹配velocity matching。模板文档的定位worker 版与 registry 版两套体系GSAP 实现模板文档 是 cut-the-curve 技能目录 中参数与规则在 SKILL.md代码从这里复制的配套文件。它维护着两种不同用途的 GSAP 实现Worker 版由 worker作者 agent手写的、对场景内元素in-scene elements做 tween 的完整代码使用真实的选择器如.text-a-wrapper和具体的时间点变量适合在单个合成comp内手工编排。Registrygsap_template版带 token 占位符的模板代码由注入器injector在装配主时间轴时替换 token 并盖章stamp到两个 clip wrapper 上。registry 模板中的 token 含义见 seam-craft 技能文档 的 Template placeholders 一节Token含义__OLD__出场 clip wrapper 选择器形如#el-from带引号__NEW__入场 clip wrapper 选择器形如#el-to带引号__T__重叠窗口起点时间秒主时钟__DUR__该边界的duration_s__DX__水平行程-1920LEFT/1920RIGHT__DY__垂直行程-1080UP/1080DOWN__ORIGIN_OUT__/__ORIGIN_IN__squeeze类型用的 transformOrigin 对从注入器机制看seam-craft 文档描述在场景i与场景i1的边界处注入器会把#el-from的data-duration延长duration_s保持其最后一帧、把#el-to的data-start前移duration_s形成重叠窗口并将所有 clip 的data-track-index重新排为 0/1 乒乓同 track 重叠非法高 track 的合成在上层最后把gsap_template写入window.__timelines[main]时间点取T overlap-start。这解释了模板中为什么__OLD__与__NEW__的 tween 都从同一个__T__起始——两者在主时间轴上是并行重叠的。1. Zoom-Through前向穿越前向 Zoom-Through 用于向同一思想更深处推进的 Z 轴转场出场文字向镜头加速放大在峰值模糊处硬切入场文字从小尺寸继续生长到焦平面。总时长约 0.4s。Worker 版场景内 wrapper 交换var EXIT_START /* when readable text starts leaving */; var CUT EXIT_START 0.2; // Phase 1: Exit — scale/blur accelerate, opacity fades linearly (separate tween) tl.to(.text-a-wrapper, { scale: 1.2, filter: blur(10px), // text-scale: 10px duration: 0.2, ease: power3.in, overwrite: auto }, EXIT_START); tl.to(.text-a-wrapper, { opacity: 0.15, duration: 0.2, ease: none }, EXIT_START); // Phase 2: Hard cut — matched properties tl.set(.text-a-wrapper, { opacity: 0 }, CUT); tl.set(.text-b-wrapper, { opacity: 0.15, scale: 0.75, filter: blur(10px) }, CUT); // Phase 3: Entry — fast initial velocity, long settle tl.to(.text-b-wrapper, { scale: 1, filter: blur(0px), opacity: 1, duration: 0.5, ease: expo.out }, CUT);关键细节退场的 opacity 必须是独立的线性 tweenease: none——若挂在power3.in上opacity 会在接近 1 的区间停留过久硬切帧上就会看到还在的旧文字。切帧CUT时刻的tl.set上两侧属性必须严格对称匹配出场侧opacity: 0入场侧opacity: 0.15, scale: 0.75, filter: blur(10px)保证交换帧两侧的模糊/透明度一致。overwrite: auto防止与其他针对同一 wrapper 的 tween 打架。Registrygsap_template版tl.to( __OLD__, { scale: 2.5, opacity: 0, filter: blur(8px), duration: __DUR__, ease: power3.in }, __T__, ); tl.fromTo( __NEW__, { scale: 0.5, opacity: 0, filter: blur(8px) }, { scale: 1, opacity: 1, filter: blur(0px), duration: __DUR__, ease: power3.out }, __T__, );注意 registry 版与 worker 版的数值差异registry 版作用于整帧 clip wrapper行程更大0.5 → 1/1 → 2.5、模糊更轻8px、且是fromTo并行结构worker 版作用于场景内的文字 wrapper模糊取 10px文字级峰值模糊。这段模板在仓库中有真实的 registry 落地product-launch-video 技能的 transitions.json 中zoom-through条目逐字一致且标注default_duration_s: 0.4、energy: high并被登记为该 workflow 的default_high_energy转场skills/pr-to-video与skills/faceless-explainer下各有一份同构的 vendored 副本。2. Inverse Zoom-Through反向穿越反向版本出场元素后退入场元素以超大尺寸仿佛刚从镜头后方探出收缩回焦平面。整体都在缩小用于更大的东西落地的到达/高潮 beatpayoff line、巨型回复、收尾定格不要用于普通边界。总时长约 0.7s按 30% 退场 / 70% 入场切分。Registrygsap_template版tl.set(__NEW__, { opacity: 0 }, __T__); tl.to( __OLD__, { scale: 0.8, filter: blur(10px), duration: __DUR__ * 0.3, ease: power3.in }, __T__, ); tl.to(__OLD__, { opacity: 0.15, duration: __DUR__ * 0.3, ease: none }, __T__); tl.set(__OLD__, { opacity: 0 }, __T__ __DUR__ * 0.3); tl.fromTo( __NEW__, { opacity: 0.15, scale: 1.25, filter: blur(10px) }, { opacity: 1, scale: 1, filter: blur(0px), duration: __DUR__ * 0.7, ease: expo.out, immediateRender: false, }, __T__ __DUR__ * 0.3, );结构要点时间预算用__DUR__ * 0.3/__DUR__ * 0.7表达 30/70 切分退场scale1 → 0.8在前 30%入场收缩1.25 → 1expo.out占后 70%。入场侧的immediateRender: false很关键fromTo的起始值opacity: 0.15, scale: 1.25不会在时间轴构建时就提前渲染而是等到__T__ __DUR__ * 0.3才生效。同样有独立ease: none的 opacity 线性 tween与硬切tl.set(__OLD__, { opacity: 0 }, __T__ __DUR__ * 0.3)衔接。Worker 版与 Zoom-Through 同构的三阶段退场 → 硬切 → 入场只是 scale 数值翻转——退场1 → 0.8、切帧切入在1.25、入场1.25 → 1。Z 方向符号纪律来自 SKILL.mdZ 轴上同轴还不够d(scale)/dt的符号必须在切帧两侧一致Z 向量退场 scale入场 scale变体Push前推增长1 → 1.2增长0.75 → 1zoom-throughPull后拉收缩1 → 0.8收缩1.25 → 1inverse zoom-through被禁止的镜像组合后退的退场配从小长出来的入场最常见的错误因为 grow-from-small 是元素入场的默认写法以及前推退场配超大收缩入场。这条符号纪律约束的是入场场景自己的内部入场动画切帧 约 0.5s 的 seam 窗口内而不只是 wrapper tween——入场画面要么以已构图状态到达要么其入场动画与 Z 符号匹配。3. Cut the Curve默认场景边界这是所有场景到场景边界的默认切法出场 hero 朝一个方向加速切帧落在运动中段入场 hero 沿同一方向继续并减速。总时长约 0.6s方向取 LEFT / RIGHT / UP / DOWN默认 LEFT。核心是部分行程约 12% 画幅1920 宽下约 230px绝不做整屏移出。Worker 版场景层var CUT_TIME /* scene transition point */; // Scene A: hero accelerates leftward (partial travel ~12% of frame) tl.to(.scene-a-layer, { opacity: 0, duration: 0.33, ease: power2.in }, CUT_TIME - 0.33); tl.to(.hero-a-wrapper, { x: -230, filter: blur(8px), duration: 0.33, ease: power4.in, // mirrored half of power4.inOut overwrite: auto }, CUT_TIME - 0.33); // Hard cut tl.set(.scene-b-layer, { opacity: 1 }, CUT_TIME); tl.set(.hero-b-wrapper, { x: 230, filter: blur(8px) }, CUT_TIME); // Scene B: hero decelerates leftward tl.to(.hero-b-wrapper, { x: 0, filter: blur(0px), duration: 0.33, ease: power4.out // matched velocity at the cut }, CUT_TIME);原理是镜像缓动退场power4.in 入场power4.out同样的距离与时长——它们正是同一个power4.inOut的前后半段因此切帧处速度精确相等。四方向的行程表方向退场入场 起点 → 终点向左x: 0 → −230x: 230 → 0向右x: 0 → 230x: −230 → 0向上y: 0 → −230y: 230 → 0向下y: 0 → 230y: −230 → 0Registrygsap_template版__DX__-1920LEFT/1920RIGHT__DY__-1080UP/1080DOWN。* 0.12/* 0.21系数产出约 12% 的部分行程垂直方向 1080 × 0.21 ≈ 227px与水平 230px 对齐。// horizontal tl.set(__NEW__, { opacity: 0 }, __T__); tl.to(__OLD__, { x: __DX__ * 0.12, duration: __DUR__ * 0.5, ease: power4.in }, __T__); tl.to(__OLD__, { opacity: 0, duration: __DUR__ * 0.47, ease: power2.in }, __T__ __DUR__ * 0.03); tl.fromTo( __NEW__, { x: __DXIN__ * 0.12, opacity: 0.35 }, { x: 0, opacity: 1, duration: __DUR__ * 0.5, ease: power4.out, immediateRender: false }, __T__ __DUR__ * 0.5, ); // vertical tl.set(__NEW__, { opacity: 0 }, __T__); tl.to(__OLD__, { y: __DY__ * 0.21, duration: __DUR__ * 0.5, ease: power4.in }, __T__); tl.to(__OLD__, { opacity: 0, duration: __DUR__ * 0.47, ease: power2.in }, __T__ __DUR__ * 0.03); tl.fromTo( __NEW__, { y: __DYIN__ * 0.21, opacity: 0.35 }, { y: 0, opacity: 1, duration: __DUR__ * 0.5, ease: power4.out, immediateRender: false }, __T__ __DUR__ * 0.5, );registry 版与 worker 版的结构差异在于淡出技巧的时间化退场透明度从__T__ __DUR__ * 0.03开始、历时__DUR__ * 0.47即约在行程的 25–30% 处完成对应 SKILL.md 规则fade ≈ 0.18–0.3s vs motion 0.3–0.34s入场侧从opacity: 0.35在中途点燃mid-path ignition而不是二进制的 0→1 跳变——二进制的 0→1 会闪。两个工程性细节均出自 SKILL.md 与 seam-craft舞台地必须不透明#root需要background: var(--canvas-deep, var(--canvas, #000))。cut-the-curve 的中段窗口会打开一个两侧透明度之和 1 的窗口若#root无底色渲染器会把透明凹陷合成到默认白色页面之上——深色影片上每个切点都会白闪。同 track 的 wrapper 重叠是非法的core/src/lint/rules/composition.ts校验所以注入器要做 0/1 track 乒乓重排filter属性在主时间轴上是 lint-clean 的core/src/lint/rules/gsap.ts的属性白名单只约束场景 worker不约束 index.html。组合版cut-the-curve zoom横向切割上叠加一个温和的 Z 分量。scale 分量同样服从 Z 符号规则两侧都收缩退场1 → 0.92入场1.08 → 1——一致的温和拉叠在横向切割上不要在这里把收缩退场配从小生长入场。// Scene A: hero slides left mild pull blur tl.to( .hero-a-wrapper, { x: -230, scale: 0.92, filter: blur(8px), duration: 0.33, ease: power4.in, }, CUT_TIME - 0.33, ); // Cut Scene B: continues leftward, arrives slightly oversized and retracts tl.set(.hero-b-wrapper, { x: 230, scale: 1.08, filter: blur(8px) }, CUT_TIME); tl.to( .hero-b-wrapper, { x: 0, scale: 1, filter: blur(0px), duration: 0.42, ease: power4.out, }, CUT_TIME, );4. Waterfall Cut逐词瀑布切割Cut the Curve 的词级word-level版本是文本到文本 seam 最强的左向切法出场词在各自的曲线上逐词退出入场词在飞行中途级联点燃——一道眼睛可以沿 seam 骑过去的波。作用域worker 在单个多 beat 合成内手写叠放的全帧.beat层不是registry/injector 类型——它 tween 的是词 span 而非 clip wrapper。进出文本 beat 块的边界仍然使用普通 registry 转场且不计入 2–3 个转场的预算。DOM CSSdiv classbeat idb1div classlineAnd until now/div/div div classbeat idb2 div classline span classwthat/span span classwchanges/span span classwtoday./span /div /div.beat { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; } .w { display: inline-block; will-change: transform, opacity; }时间轴// Pre-set at build time — immediateRender:false alone leaves un-started words visible. gsap.set([...w1, ...w2], { x: 230, opacity: 0 }); function wordExit(words, C) { // C cut time on the comp timeline let s C - 0.32; // exits START before the cut words.forEach((el) { tl.to(el, { x: -230, duration: 0.34, ease: power4.in }, s); tl.to(el, { opacity: 0, duration: 0.18, ease: power1.in }, s); // fade ends ~25-30% into travel s 0.022; // reading-order stagger }); } function wordEnter(words, C) { let off 0, gap 0.05; words.forEach((el) { tl.fromTo( el, { x: 230, opacity: 0.35 }, // ignites MID-PATH, already moving { x: 0, opacity: 1, duration: 0.3, ease: power4.out, immediateRender: false }, C off, ); off gap; gap * 0.84; // shrinking gaps — the cascade accelerates }); } const C 2.3; wordExit(w1, C); tl.set(b1, { opacity: 0 }, C); // hard layer swap AT the cut tl.set(b2, { opacity: 1 }, C); wordEnter(w2, C);关键机制构建期预置所有词在构建时gsap.set到x: 230, opacity: 0。只靠immediateRender: false会让未启动的词静止可见。退场先于切帧开始C - 0.32逐词 stagger0.022s按阅读顺序——行是剥落而不是整块滑动每个词的 fade 在行程 25–30% 处结束词在到达切帧前已消失不留拖影。入场中途点燃从opacity: 0.35起、x: 230处已经在运动中间隔以×0.84逐词衰减级联自我加速最终收敛到构图态。切帧处硬层交换tl.set(b1, {opacity:0}, C)与tl.set(b2, {opacity:1}, C)精确落在切帧。短的首 beat 可以整行退出作为单一元素x: -230, 0.34s, power4.inopacity fade 几乎贯穿整个行程在切帧前约 0.02s 结束——下一波词点燃时它还在飞没有死档。只动 transform/opacityseek-safe不透明舞台地规则同样适用。参数速查SKILL.md 表格行程 ±230px约 12% 画幅退场 0.34spower4.in退场 fade 0.18s 与 x 同时开始退场 stagger 按阅读顺序 0.022s入场 0.3spower4.out入场起始 opacity 0.35中途点燃二进 0→1 会闪入场间隔 0.05s × 0.84 衰减加速级联。5. Rack-Focus Blur-Cut可见的切唯一让切被看见的变体失焦模糊尖峰隐藏单帧硬交换模拟手持 DSLR 跟焦。用于同一视觉主题内同一表面same surface的状态切换作为偶发的花招每约 8s 至多一次永远不是默认边界。与其他变体的区别出场侧保持完全不透明直到切帧靠模糊隐藏交换不做提前 fade缓动用power2.in/power2.out柔和光学感而非动量感。var T /* transition start */; // Phase 1: outgoing pans blurs, held fully opaque tl.to(#scene-out, { x: -80, scale: 1.06, filter: blur(12px), duration: 0.3, ease: power2.in }, T); // Phase 2: hard cut at peak blur tl.set(#scene-out, { opacity: 0 }, T 0.3); tl.fromTo(#scene-in, { opacity: 1, x: 80, scale: 1.06, filter: blur(12px) }, { x: 0, scale: 1, filter: blur(0px), duration: 0.35, ease: power2.out }, T 0.3);规则要点切帧必须落在峰值模糊≥6px峰值 8–12px最大 ≤16–18px——在模糊上升途中交换会露出切。约 1.06 的微妙 scale镜头呼吸感让它读作光学现象。两侧同方向——矢量定律仍然成立入场时长 ≥ 退场时长。模糊打在wrapper上同一元素不要在一个 tween 里同时 blur opacityheadless 合成 bug不要直接 blurvideo要包一层。若做 Z dolly 变体去掉 x 偏移改用 scale0.92 →/→ 1.08。调参范围Tuning rangesZoom-Through / Inverse Zoom参数默认值取值范围退场 scale1.2前向/ 0.8反向±0.1入场 scale0.75前向/ 1.25反向±0.1切帧处模糊文字 10px / 整帧 18–20px—切帧处透明度0.150.1–0.2退场时长0.2s0.15–0.3s入场时长0.5s0.4–0.6sCut the Curve参数默认值取值范围行程230px约 12% 画幅150–300px切帧处模糊8px6–10px退场时长0.33s0.2–0.4s入场时长0.33–0.42s≥ 退场模糊量的依据SKILL.md 的 Blur logic 表文字级主体标题、词组峰值10px——20px 会让字形糊成一片切帧读起来像 glitch 而不是速度整帧表面窗口、卡片、截图峰值18–20px——大表面上过轻的模糊会读成渲染卡顿。交换帧上两侧取相同峰值模糊。6. Waterfall Entry场景内到达非 seam逐元素闪现 冲刺归位的级联每个元素先tl.set瞬时显现 偏移再tl.to鞭打到静止。排布公式nextStart prevStart prevDuration − (overlapFrames × F)正 overlap 级联负 overlap 刻意留空。CSS 上元素从opacity: 0; display: inline-block开始。用于标题卡、段落开场、列表/特性介绍方向默认 Y从下方来。var F 1 / 60; var t0 0.1; // anchor (heaviest): biggest travel, longest settle tl.set(#el-1, { opacity: 1, y: 80 }, t0); tl.to(#el-1, { y: 0, duration: 0.18, ease: power4.out }, t0); // normal word: 2 frames after the anchor finishes var t1 t0 0.18 2 * F; tl.set(#el-2, { opacity: 1, y: 45 }, t1); tl.to(#el-2, { y: 0, duration: 0.15, ease: power4.out }, t1); // light word: 1 frame BEFORE the previous finishes (overlap) var t3_placeholder 0; // (illustrative) var t2 t1 0.15 - F; tl.set(#el-3, { opacity: 1, y: 40 }, t2); tl.to(#el-3, { y: 0, duration: 0.14, ease: power4.out }, t2); // split final-word fragments: tightest overlap, extra travel (lighter) var t3 t2 0.14 - F; tl.set(#frag-a, { opacity: 1, y: 70 }, t3); tl.to(#frag-a, { y: 0, duration: 0.16, ease: power4.out }, t3); var t4 t3 0.14 - F; tl.set(#frag-b, { opacity: 1, y: 70 }, t4); tl.to(#frag-b, { y: 0, duration: 0.15, ease: power4.out }, t4); // punctuation: lightest, fastest var t5 t4 0.13 - 2 * F; tl.set(#dot, { opacity: 1, y: 48 }, t5); tl.to(#dot, { y: 0, duration: 0.12, ease: power4.out }, t5);注上面var t3_placeholder一行是排版占位实际模板中不存在该行原模板直接从t2推到t3。编排规则SKILL.md 表格参数锚点/重元素普通词轻元素/标点Y 偏移60–80px40–50px30–48px时长0.16–0.20s0.13–0.16s0.10–0.13sOverlap0–2 帧留空1 帧重叠1–2 帧重叠重叠而非排队下一元素在前一个落定的 ±2 帧内启动间隔沿级联收缩最后元素啪地落定。速度按重量分级重/锚点元素行程更远、时长更长轻词与标点快速闪现。缓动统一power4.out要更强 snap 用expo.out入场永远不要.inOut。每条级联一个方向把最后一个词拆成碎片以延长高潮碎片行程更远。与 §4 Waterfall Cut 的边界§6 Entry 的 opacity 是tl.set二进 0→1绝不 fade——seam 切才 fadearrival 不 fade§4 则在 0.35 处中途点燃。落定后整组通常会再滑开给下一个 beat 让位——那就是 §7 Nudge Curve。7. Nudge Curve场景内群组滑动非 seam已构图群组词行、卡片堆、列表的慢-快-慢重定位用于揭示内容或腾出空间。没有单一内置缓动能产出它——power4.inOut会啪地刹停。在同一个属性上串联三个 tween阶段缓动距离占比时间占比感受1 ramp-inpower3.in~10%~20%几乎不动——运动被感知但没有冲击2 burstnone线性~65%~18%约 2 倍平均 px/帧——目的明确3 tailpower4.out~25%~62%衰减蠕变到静止——消掉啪的刹车感参考值270px 左向滑动总时长 0.57s。其他行程按比例缩放距离保持时间比tail 时间 ≥ 3× ramp-in。var t /* start after content settles */; tl.to(.text-row, { x: -30, duration: 0.12, ease: power3.in }, t); // ramp-in: 11% dist / 21% time tl.to(.text-row, { x: -210, duration: 0.10, ease: none }, t 0.12); // burst: 67% dist / 18% time tl.to(.text-row, { x: -270, duration: 0.35, ease: power4.out }, t 0.22); // tail: 22% dist / 61% time // vertical: same ratios on y. 150px variant: -15 / -115 / -150 at the same times.规则若仍然啪地刹车延长 tail 的时间不是距离或改用power5.out。Phase 2 保持线性——给它加缓动会失去 burst 的对比。在 phase 2 期间揭示新内容——burst 会掩盖其出现。垂直方向同理距离按比例缩放时间比不变150px 变体同一时间点-15 / -115 / -150。变体选择速查与工程验证四/五种 seam 变体的选择矩阵SKILL.mdZoom-ThroughInverse ZoomCut the CurveWaterfall Cut作用域场景内文本交换到达/高潮 beat场景之间文本到文本 seamZ 符号/轴增长push收缩pullX / YX逐词行程/scale1→1.2然后 0.75→11→0.8然后 1.25→1±230px±230px峰值模糊文字 10px / 整帧 18–20px同左8–10px 可选无缓动power3.in / expo.outpower3.in / expo.outpower4.in / power4.outpower4.in / power4.out感受向前推进抵达被侧向带走一道骑过 seam 的波工程侧验证链这些模板不是凭感觉对仓库配套了机器验证。motion-doctrine 技能 提供seam-stamp.mjsseam-gate.mjs生成-校验对项目根目录的ledger.json按行记录每个 seam 的 cut 时间、technique、exit/entry 的 axis 与 dirz 1 pushz −1 pullseam-gate.mjs verify会用无头 Chrome 逐帧测量基于getBoundingClientRect自动包含祖先 wrapper 变换检查切帧两侧是否一帧只见一侧zero-overlap、实测速度是否匹配speed-match、入场场景内部入场是否对抗 Z 符号z-sign-scan对应 SKILL.md 的 Seam Gate rule 7。probe子命令可以在某切帧时刻附近发现 mover 元素辅助填写 ledger。此外各生产型技能如 product-launch-video、pr-to-video、faceless-explainer各自 vendored 了一份 registry JSON其中模板 token__OLD__/__NEW__/__T__/__DUR__/__DX__/__DXIN__/__DY__/__DYIN__与本文模板文档完全一致——registry 版的代码就是从这些模板注入的而 worker 版的代码则由 worker 在单个 comp 内按参数表手写。更完整的转场总目录可参考 TRANSITION-REGISTRY。适用前提与限制本文所有模板面向 1920×1080 / 30fps 级别的 HyperFrames 合成__DX__/__DY__的 1920/1080 常数、12%行程与 230px 默认值均以此为基准Tier-B 转场的前提是纯 transform/opacity/filter 作用于两个 clip wrapper不注入 overlay DOMfilter在主时间轴可用但在单元素上与 opacity 同 tween 存在 headless 合成 bugrack-focus 规则不同分辨率下应按比例换算行程常数而非照抄 230px。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames Cut the Curve 转场技巧：完整 GSAP 代码模板、Registry Token 机制与调参指南
HyperFrames Cut the Curve 转场技巧完整 GSAP 代码模板、Registry Token 机制与调参指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文基于仓库中的 GSAP 实现模板文档系统讲解 HyperFrames 视频合成体系里 Cut the Curve 技巧目录的 7 种转场/进场代码模板前向/反向 Zoom-Through、场景级 Cut the Curve、逐词 Waterfall Cut、Rack-Focus Blur-Cut以及场景内的 Waterfall Entry 与 Nudge Curve。读完本文你可以直接复用这些模板编写场景切换动画理解 registrygsap_template的 token 注入机制并按文档给出的调参范围精确控制速度匹配velocity matching。模板文档的定位worker 版与 registry 版两套体系GSAP 实现模板文档 是 cut-the-curve 技能目录 中参数与规则在 SKILL.md代码从这里复制的配套文件。它维护着两种不同用途的 GSAP 实现Worker 版由 worker作者 agent手写的、对场景内元素in-scene elements做 tween 的完整代码使用真实的选择器如.text-a-wrapper和具体的时间点变量适合在单个合成comp内手工编排。Registrygsap_template版带 token 占位符的模板代码由注入器injector在装配主时间轴时替换 token 并盖章stamp到两个 clip wrapper 上。registry 模板中的 token 含义见 seam-craft 技能文档 的 Template placeholders 一节Token含义__OLD__出场 clip wrapper 选择器形如#el-from带引号__NEW__入场 clip wrapper 选择器形如#el-to带引号__T__重叠窗口起点时间秒主时钟__DUR__该边界的duration_s__DX__水平行程-1920LEFT/1920RIGHT__DY__垂直行程-1080UP/1080DOWN__ORIGIN_OUT__/__ORIGIN_IN__squeeze类型用的 transformOrigin 对从注入器机制看seam-craft 文档描述在场景i与场景i1的边界处注入器会把#el-from的data-duration延长duration_s保持其最后一帧、把#el-to的data-start前移duration_s形成重叠窗口并将所有 clip 的data-track-index重新排为 0/1 乒乓同 track 重叠非法高 track 的合成在上层最后把gsap_template写入window.__timelines[main]时间点取T overlap-start。这解释了模板中为什么__OLD__与__NEW__的 tween 都从同一个__T__起始——两者在主时间轴上是并行重叠的。1. Zoom-Through前向穿越前向 Zoom-Through 用于向同一思想更深处推进的 Z 轴转场出场文字向镜头加速放大在峰值模糊处硬切入场文字从小尺寸继续生长到焦平面。总时长约 0.4s。Worker 版场景内 wrapper 交换var EXIT_START /* when readable text starts leaving */; var CUT EXIT_START 0.2; // Phase 1: Exit — scale/blur accelerate, opacity fades linearly (separate tween) tl.to(.text-a-wrapper, { scale: 1.2, filter: blur(10px), // text-scale: 10px duration: 0.2, ease: power3.in, overwrite: auto }, EXIT_START); tl.to(.text-a-wrapper, { opacity: 0.15, duration: 0.2, ease: none }, EXIT_START); // Phase 2: Hard cut — matched properties tl.set(.text-a-wrapper, { opacity: 0 }, CUT); tl.set(.text-b-wrapper, { opacity: 0.15, scale: 0.75, filter: blur(10px) }, CUT); // Phase 3: Entry — fast initial velocity, long settle tl.to(.text-b-wrapper, { scale: 1, filter: blur(0px), opacity: 1, duration: 0.5, ease: expo.out }, CUT);关键细节退场的 opacity 必须是独立的线性 tweenease: none——若挂在power3.in上opacity 会在接近 1 的区间停留过久硬切帧上就会看到还在的旧文字。切帧CUT时刻的tl.set上两侧属性必须严格对称匹配出场侧opacity: 0入场侧opacity: 0.15, scale: 0.75, filter: blur(10px)保证交换帧两侧的模糊/透明度一致。overwrite: auto防止与其他针对同一 wrapper 的 tween 打架。Registrygsap_template版tl.to( __OLD__, { scale: 2.5, opacity: 0, filter: blur(8px), duration: __DUR__, ease: power3.in }, __T__, ); tl.fromTo( __NEW__, { scale: 0.5, opacity: 0, filter: blur(8px) }, { scale: 1, opacity: 1, filter: blur(0px), duration: __DUR__, ease: power3.out }, __T__, );注意 registry 版与 worker 版的数值差异registry 版作用于整帧 clip wrapper行程更大0.5 → 1/1 → 2.5、模糊更轻8px、且是fromTo并行结构worker 版作用于场景内的文字 wrapper模糊取 10px文字级峰值模糊。这段模板在仓库中有真实的 registry 落地product-launch-video 技能的 transitions.json 中zoom-through条目逐字一致且标注default_duration_s: 0.4、energy: high并被登记为该 workflow 的default_high_energy转场skills/pr-to-video与skills/faceless-explainer下各有一份同构的 vendored 副本。2. Inverse Zoom-Through反向穿越反向版本出场元素后退入场元素以超大尺寸仿佛刚从镜头后方探出收缩回焦平面。整体都在缩小用于更大的东西落地的到达/高潮 beatpayoff line、巨型回复、收尾定格不要用于普通边界。总时长约 0.7s按 30% 退场 / 70% 入场切分。Registrygsap_template版tl.set(__NEW__, { opacity: 0 }, __T__); tl.to( __OLD__, { scale: 0.8, filter: blur(10px), duration: __DUR__ * 0.3, ease: power3.in }, __T__, ); tl.to(__OLD__, { opacity: 0.15, duration: __DUR__ * 0.3, ease: none }, __T__); tl.set(__OLD__, { opacity: 0 }, __T__ __DUR__ * 0.3); tl.fromTo( __NEW__, { opacity: 0.15, scale: 1.25, filter: blur(10px) }, { opacity: 1, scale: 1, filter: blur(0px), duration: __DUR__ * 0.7, ease: expo.out, immediateRender: false, }, __T__ __DUR__ * 0.3, );结构要点时间预算用__DUR__ * 0.3/__DUR__ * 0.7表达 30/70 切分退场scale1 → 0.8在前 30%入场收缩1.25 → 1expo.out占后 70%。入场侧的immediateRender: false很关键fromTo的起始值opacity: 0.15, scale: 1.25不会在时间轴构建时就提前渲染而是等到__T__ __DUR__ * 0.3才生效。同样有独立ease: none的 opacity 线性 tween与硬切tl.set(__OLD__, { opacity: 0 }, __T__ __DUR__ * 0.3)衔接。Worker 版与 Zoom-Through 同构的三阶段退场 → 硬切 → 入场只是 scale 数值翻转——退场1 → 0.8、切帧切入在1.25、入场1.25 → 1。Z 方向符号纪律来自 SKILL.mdZ 轴上同轴还不够d(scale)/dt的符号必须在切帧两侧一致Z 向量退场 scale入场 scale变体Push前推增长1 → 1.2增长0.75 → 1zoom-throughPull后拉收缩1 → 0.8收缩1.25 → 1inverse zoom-through被禁止的镜像组合后退的退场配从小长出来的入场最常见的错误因为 grow-from-small 是元素入场的默认写法以及前推退场配超大收缩入场。这条符号纪律约束的是入场场景自己的内部入场动画切帧 约 0.5s 的 seam 窗口内而不只是 wrapper tween——入场画面要么以已构图状态到达要么其入场动画与 Z 符号匹配。3. Cut the Curve默认场景边界这是所有场景到场景边界的默认切法出场 hero 朝一个方向加速切帧落在运动中段入场 hero 沿同一方向继续并减速。总时长约 0.6s方向取 LEFT / RIGHT / UP / DOWN默认 LEFT。核心是部分行程约 12% 画幅1920 宽下约 230px绝不做整屏移出。Worker 版场景层var CUT_TIME /* scene transition point */; // Scene A: hero accelerates leftward (partial travel ~12% of frame) tl.to(.scene-a-layer, { opacity: 0, duration: 0.33, ease: power2.in }, CUT_TIME - 0.33); tl.to(.hero-a-wrapper, { x: -230, filter: blur(8px), duration: 0.33, ease: power4.in, // mirrored half of power4.inOut overwrite: auto }, CUT_TIME - 0.33); // Hard cut tl.set(.scene-b-layer, { opacity: 1 }, CUT_TIME); tl.set(.hero-b-wrapper, { x: 230, filter: blur(8px) }, CUT_TIME); // Scene B: hero decelerates leftward tl.to(.hero-b-wrapper, { x: 0, filter: blur(0px), duration: 0.33, ease: power4.out // matched velocity at the cut }, CUT_TIME);原理是镜像缓动退场power4.in 入场power4.out同样的距离与时长——它们正是同一个power4.inOut的前后半段因此切帧处速度精确相等。四方向的行程表方向退场入场 起点 → 终点向左x: 0 → −230x: 230 → 0向右x: 0 → 230x: −230 → 0向上y: 0 → −230y: 230 → 0向下y: 0 → 230y: −230 → 0Registrygsap_template版__DX__-1920LEFT/1920RIGHT__DY__-1080UP/1080DOWN。* 0.12/* 0.21系数产出约 12% 的部分行程垂直方向 1080 × 0.21 ≈ 227px与水平 230px 对齐。// horizontal tl.set(__NEW__, { opacity: 0 }, __T__); tl.to(__OLD__, { x: __DX__ * 0.12, duration: __DUR__ * 0.5, ease: power4.in }, __T__); tl.to(__OLD__, { opacity: 0, duration: __DUR__ * 0.47, ease: power2.in }, __T__ __DUR__ * 0.03); tl.fromTo( __NEW__, { x: __DXIN__ * 0.12, opacity: 0.35 }, { x: 0, opacity: 1, duration: __DUR__ * 0.5, ease: power4.out, immediateRender: false }, __T__ __DUR__ * 0.5, ); // vertical tl.set(__NEW__, { opacity: 0 }, __T__); tl.to(__OLD__, { y: __DY__ * 0.21, duration: __DUR__ * 0.5, ease: power4.in }, __T__); tl.to(__OLD__, { opacity: 0, duration: __DUR__ * 0.47, ease: power2.in }, __T__ __DUR__ * 0.03); tl.fromTo( __NEW__, { y: __DYIN__ * 0.21, opacity: 0.35 }, { y: 0, opacity: 1, duration: __DUR__ * 0.5, ease: power4.out, immediateRender: false }, __T__ __DUR__ * 0.5, );registry 版与 worker 版的结构差异在于淡出技巧的时间化退场透明度从__T__ __DUR__ * 0.03开始、历时__DUR__ * 0.47即约在行程的 25–30% 处完成对应 SKILL.md 规则fade ≈ 0.18–0.3s vs motion 0.3–0.34s入场侧从opacity: 0.35在中途点燃mid-path ignition而不是二进制的 0→1 跳变——二进制的 0→1 会闪。两个工程性细节均出自 SKILL.md 与 seam-craft舞台地必须不透明#root需要background: var(--canvas-deep, var(--canvas, #000))。cut-the-curve 的中段窗口会打开一个两侧透明度之和 1 的窗口若#root无底色渲染器会把透明凹陷合成到默认白色页面之上——深色影片上每个切点都会白闪。同 track 的 wrapper 重叠是非法的core/src/lint/rules/composition.ts校验所以注入器要做 0/1 track 乒乓重排filter属性在主时间轴上是 lint-clean 的core/src/lint/rules/gsap.ts的属性白名单只约束场景 worker不约束 index.html。组合版cut-the-curve zoom横向切割上叠加一个温和的 Z 分量。scale 分量同样服从 Z 符号规则两侧都收缩退场1 → 0.92入场1.08 → 1——一致的温和拉叠在横向切割上不要在这里把收缩退场配从小生长入场。// Scene A: hero slides left mild pull blur tl.to( .hero-a-wrapper, { x: -230, scale: 0.92, filter: blur(8px), duration: 0.33, ease: power4.in, }, CUT_TIME - 0.33, ); // Cut Scene B: continues leftward, arrives slightly oversized and retracts tl.set(.hero-b-wrapper, { x: 230, scale: 1.08, filter: blur(8px) }, CUT_TIME); tl.to( .hero-b-wrapper, { x: 0, scale: 1, filter: blur(0px), duration: 0.42, ease: power4.out, }, CUT_TIME, );4. Waterfall Cut逐词瀑布切割Cut the Curve 的词级word-level版本是文本到文本 seam 最强的左向切法出场词在各自的曲线上逐词退出入场词在飞行中途级联点燃——一道眼睛可以沿 seam 骑过去的波。作用域worker 在单个多 beat 合成内手写叠放的全帧.beat层不是registry/injector 类型——它 tween 的是词 span 而非 clip wrapper。进出文本 beat 块的边界仍然使用普通 registry 转场且不计入 2–3 个转场的预算。DOM CSSdiv classbeat idb1div classlineAnd until now/div/div div classbeat idb2 div classline span classwthat/span span classwchanges/span span classwtoday./span /div /div.beat { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; } .w { display: inline-block; will-change: transform, opacity; }时间轴// Pre-set at build time — immediateRender:false alone leaves un-started words visible. gsap.set([...w1, ...w2], { x: 230, opacity: 0 }); function wordExit(words, C) { // C cut time on the comp timeline let s C - 0.32; // exits START before the cut words.forEach((el) { tl.to(el, { x: -230, duration: 0.34, ease: power4.in }, s); tl.to(el, { opacity: 0, duration: 0.18, ease: power1.in }, s); // fade ends ~25-30% into travel s 0.022; // reading-order stagger }); } function wordEnter(words, C) { let off 0, gap 0.05; words.forEach((el) { tl.fromTo( el, { x: 230, opacity: 0.35 }, // ignites MID-PATH, already moving { x: 0, opacity: 1, duration: 0.3, ease: power4.out, immediateRender: false }, C off, ); off gap; gap * 0.84; // shrinking gaps — the cascade accelerates }); } const C 2.3; wordExit(w1, C); tl.set(b1, { opacity: 0 }, C); // hard layer swap AT the cut tl.set(b2, { opacity: 1 }, C); wordEnter(w2, C);关键机制构建期预置所有词在构建时gsap.set到x: 230, opacity: 0。只靠immediateRender: false会让未启动的词静止可见。退场先于切帧开始C - 0.32逐词 stagger0.022s按阅读顺序——行是剥落而不是整块滑动每个词的 fade 在行程 25–30% 处结束词在到达切帧前已消失不留拖影。入场中途点燃从opacity: 0.35起、x: 230处已经在运动中间隔以×0.84逐词衰减级联自我加速最终收敛到构图态。切帧处硬层交换tl.set(b1, {opacity:0}, C)与tl.set(b2, {opacity:1}, C)精确落在切帧。短的首 beat 可以整行退出作为单一元素x: -230, 0.34s, power4.inopacity fade 几乎贯穿整个行程在切帧前约 0.02s 结束——下一波词点燃时它还在飞没有死档。只动 transform/opacityseek-safe不透明舞台地规则同样适用。参数速查SKILL.md 表格行程 ±230px约 12% 画幅退场 0.34spower4.in退场 fade 0.18s 与 x 同时开始退场 stagger 按阅读顺序 0.022s入场 0.3spower4.out入场起始 opacity 0.35中途点燃二进 0→1 会闪入场间隔 0.05s × 0.84 衰减加速级联。5. Rack-Focus Blur-Cut可见的切唯一让切被看见的变体失焦模糊尖峰隐藏单帧硬交换模拟手持 DSLR 跟焦。用于同一视觉主题内同一表面same surface的状态切换作为偶发的花招每约 8s 至多一次永远不是默认边界。与其他变体的区别出场侧保持完全不透明直到切帧靠模糊隐藏交换不做提前 fade缓动用power2.in/power2.out柔和光学感而非动量感。var T /* transition start */; // Phase 1: outgoing pans blurs, held fully opaque tl.to(#scene-out, { x: -80, scale: 1.06, filter: blur(12px), duration: 0.3, ease: power2.in }, T); // Phase 2: hard cut at peak blur tl.set(#scene-out, { opacity: 0 }, T 0.3); tl.fromTo(#scene-in, { opacity: 1, x: 80, scale: 1.06, filter: blur(12px) }, { x: 0, scale: 1, filter: blur(0px), duration: 0.35, ease: power2.out }, T 0.3);规则要点切帧必须落在峰值模糊≥6px峰值 8–12px最大 ≤16–18px——在模糊上升途中交换会露出切。约 1.06 的微妙 scale镜头呼吸感让它读作光学现象。两侧同方向——矢量定律仍然成立入场时长 ≥ 退场时长。模糊打在wrapper上同一元素不要在一个 tween 里同时 blur opacityheadless 合成 bug不要直接 blurvideo要包一层。若做 Z dolly 变体去掉 x 偏移改用 scale0.92 →/→ 1.08。调参范围Tuning rangesZoom-Through / Inverse Zoom参数默认值取值范围退场 scale1.2前向/ 0.8反向±0.1入场 scale0.75前向/ 1.25反向±0.1切帧处模糊文字 10px / 整帧 18–20px—切帧处透明度0.150.1–0.2退场时长0.2s0.15–0.3s入场时长0.5s0.4–0.6sCut the Curve参数默认值取值范围行程230px约 12% 画幅150–300px切帧处模糊8px6–10px退场时长0.33s0.2–0.4s入场时长0.33–0.42s≥ 退场模糊量的依据SKILL.md 的 Blur logic 表文字级主体标题、词组峰值10px——20px 会让字形糊成一片切帧读起来像 glitch 而不是速度整帧表面窗口、卡片、截图峰值18–20px——大表面上过轻的模糊会读成渲染卡顿。交换帧上两侧取相同峰值模糊。6. Waterfall Entry场景内到达非 seam逐元素闪现 冲刺归位的级联每个元素先tl.set瞬时显现 偏移再tl.to鞭打到静止。排布公式nextStart prevStart prevDuration − (overlapFrames × F)正 overlap 级联负 overlap 刻意留空。CSS 上元素从opacity: 0; display: inline-block开始。用于标题卡、段落开场、列表/特性介绍方向默认 Y从下方来。var F 1 / 60; var t0 0.1; // anchor (heaviest): biggest travel, longest settle tl.set(#el-1, { opacity: 1, y: 80 }, t0); tl.to(#el-1, { y: 0, duration: 0.18, ease: power4.out }, t0); // normal word: 2 frames after the anchor finishes var t1 t0 0.18 2 * F; tl.set(#el-2, { opacity: 1, y: 45 }, t1); tl.to(#el-2, { y: 0, duration: 0.15, ease: power4.out }, t1); // light word: 1 frame BEFORE the previous finishes (overlap) var t3_placeholder 0; // (illustrative) var t2 t1 0.15 - F; tl.set(#el-3, { opacity: 1, y: 40 }, t2); tl.to(#el-3, { y: 0, duration: 0.14, ease: power4.out }, t2); // split final-word fragments: tightest overlap, extra travel (lighter) var t3 t2 0.14 - F; tl.set(#frag-a, { opacity: 1, y: 70 }, t3); tl.to(#frag-a, { y: 0, duration: 0.16, ease: power4.out }, t3); var t4 t3 0.14 - F; tl.set(#frag-b, { opacity: 1, y: 70 }, t4); tl.to(#frag-b, { y: 0, duration: 0.15, ease: power4.out }, t4); // punctuation: lightest, fastest var t5 t4 0.13 - 2 * F; tl.set(#dot, { opacity: 1, y: 48 }, t5); tl.to(#dot, { y: 0, duration: 0.12, ease: power4.out }, t5);注上面var t3_placeholder一行是排版占位实际模板中不存在该行原模板直接从t2推到t3。编排规则SKILL.md 表格参数锚点/重元素普通词轻元素/标点Y 偏移60–80px40–50px30–48px时长0.16–0.20s0.13–0.16s0.10–0.13sOverlap0–2 帧留空1 帧重叠1–2 帧重叠重叠而非排队下一元素在前一个落定的 ±2 帧内启动间隔沿级联收缩最后元素啪地落定。速度按重量分级重/锚点元素行程更远、时长更长轻词与标点快速闪现。缓动统一power4.out要更强 snap 用expo.out入场永远不要.inOut。每条级联一个方向把最后一个词拆成碎片以延长高潮碎片行程更远。与 §4 Waterfall Cut 的边界§6 Entry 的 opacity 是tl.set二进 0→1绝不 fade——seam 切才 fadearrival 不 fade§4 则在 0.35 处中途点燃。落定后整组通常会再滑开给下一个 beat 让位——那就是 §7 Nudge Curve。7. Nudge Curve场景内群组滑动非 seam已构图群组词行、卡片堆、列表的慢-快-慢重定位用于揭示内容或腾出空间。没有单一内置缓动能产出它——power4.inOut会啪地刹停。在同一个属性上串联三个 tween阶段缓动距离占比时间占比感受1 ramp-inpower3.in~10%~20%几乎不动——运动被感知但没有冲击2 burstnone线性~65%~18%约 2 倍平均 px/帧——目的明确3 tailpower4.out~25%~62%衰减蠕变到静止——消掉啪的刹车感参考值270px 左向滑动总时长 0.57s。其他行程按比例缩放距离保持时间比tail 时间 ≥ 3× ramp-in。var t /* start after content settles */; tl.to(.text-row, { x: -30, duration: 0.12, ease: power3.in }, t); // ramp-in: 11% dist / 21% time tl.to(.text-row, { x: -210, duration: 0.10, ease: none }, t 0.12); // burst: 67% dist / 18% time tl.to(.text-row, { x: -270, duration: 0.35, ease: power4.out }, t 0.22); // tail: 22% dist / 61% time // vertical: same ratios on y. 150px variant: -15 / -115 / -150 at the same times.规则若仍然啪地刹车延长 tail 的时间不是距离或改用power5.out。Phase 2 保持线性——给它加缓动会失去 burst 的对比。在 phase 2 期间揭示新内容——burst 会掩盖其出现。垂直方向同理距离按比例缩放时间比不变150px 变体同一时间点-15 / -115 / -150。变体选择速查与工程验证四/五种 seam 变体的选择矩阵SKILL.mdZoom-ThroughInverse ZoomCut the CurveWaterfall Cut作用域场景内文本交换到达/高潮 beat场景之间文本到文本 seamZ 符号/轴增长push收缩pullX / YX逐词行程/scale1→1.2然后 0.75→11→0.8然后 1.25→1±230px±230px峰值模糊文字 10px / 整帧 18–20px同左8–10px 可选无缓动power3.in / expo.outpower3.in / expo.outpower4.in / power4.outpower4.in / power4.out感受向前推进抵达被侧向带走一道骑过 seam 的波工程侧验证链这些模板不是凭感觉对仓库配套了机器验证。motion-doctrine 技能 提供seam-stamp.mjsseam-gate.mjs生成-校验对项目根目录的ledger.json按行记录每个 seam 的 cut 时间、technique、exit/entry 的 axis 与 dirz 1 pushz −1 pullseam-gate.mjs verify会用无头 Chrome 逐帧测量基于getBoundingClientRect自动包含祖先 wrapper 变换检查切帧两侧是否一帧只见一侧zero-overlap、实测速度是否匹配speed-match、入场场景内部入场是否对抗 Z 符号z-sign-scan对应 SKILL.md 的 Seam Gate rule 7。probe子命令可以在某切帧时刻附近发现 mover 元素辅助填写 ledger。此外各生产型技能如 product-launch-video、pr-to-video、faceless-explainer各自 vendored 了一份 registry JSON其中模板 token__OLD__/__NEW__/__T__/__DUR__/__DX__/__DXIN__/__DY__/__DYIN__与本文模板文档完全一致——registry 版的代码就是从这些模板注入的而 worker 版的代码则由 worker 在单个 comp 内按参数表手写。更完整的转场总目录可参考 TRANSITION-REGISTRY。适用前提与限制本文所有模板面向 1920×1080 / 30fps 级别的 HyperFrames 合成__DX__/__DY__的 1920/1080 常数、12%行程与 230px 默认值均以此为基准Tier-B 转场的前提是纯 transform/opacity/filter 作用于两个 clip wrapper不注入 overlay DOMfilter在主时间轴可用但在单元素上与 opacity 同 tween 存在 headless 合成 bugrack-focus 规则不同分辨率下应按比例换算行程常数而非照抄 230px。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考