HyperFrames「Cut the Curve」GSAP 模板手册七种速度匹配切换技法的标准实现与注入器令牌机制【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇技术指南基于仓库中的 Cut the Curve 技能体系逐字继承其 7 种切换/动效技法的标准 GSAP 代码模板worker 版与 registrygsap_template版并深入讲解注入器令牌替换机制、速度匹配velocity-matching原理、调节参数范围与反模式约束。读完后你可以直接复制模板到 HyperFrames 合成项目中制作电影级的场景切换、逐词瀑布切、动态文字入场与群组缓动滑移。1. 两类模板的定位worker 版与 registry 版GSAP 实现文件 是「Cut the Curve — 技法目录」的规范实现集合其规则参数定义在 SKILL.md。文件开头明确了两种作者的分工Worker 版worker-authored由场景 worker 直接编写tween 的是场景内部元素如.text-a-wrapper、.scene-a-layer用于场景内文字换字、同屏多 beat 交接等场景Registrygsap_template版作为声明式模板存放在转换注册表中由注入器injector在场景边界处盖章式stamped写入两个 clip 包装层#el-from/#el-to。1.1 注入器如何应用 registry 模板seam-craft 技能 描述了注入器在场景ifrom与场景i1to之间的break边界上的四步流程将#el-from包装层的data-duration延长duration_s使其保持最后一帧将#el-to包装层的data-start提前duration_s制造重叠窗口将所有 clip 的data-track-index重排为 0/1 乒乓分配保证两个重叠包装层绝不共享同一轨道同轨重叠非法见core/src/lint/rules/composition.ts较高轨道的合成在上层将gsap_template以T 重叠起始时间为锚点写入window.__timelines[main]。1.2 令牌替换表注入器在每行gsap_template中替换以下令牌引自 seam-craft/SKILL.md令牌含义__OLD__#el-from— 离场 clip 包装层选择器含引号__NEW__#el-to— 入场 clip 包装层选择器含引号__T__重叠起始时间秒主时钟__DUR__该边界的duration_s__DX__方向型水平行程-1920LEFT/1920RIGHT__DY__垂直行程-1080UP/1080DOWN在 转换注册表文档 中可以看到 registry 侧的真实格式——模板以字符串数组形式存放例如 fade 类型gsap_template: [ tl.to(__OLD__, { opacity: 0, duration: __DUR__, ease: \power2.inOut\ }, __T__);, tl.fromTo(__NEW__, { opacity: 0 }, { opacity: 1, duration: __DUR__, ease: \power2.inOut\ }, __T__); ]这解释了为何实现文件中的 registry 模板全部是「无选择器、带令牌」的形式它们不直接运行而是被替换后注入主时间轴。2. Zoom-Through前向穿越Z 轴速度匹配切离场文字向镜头加速放大硬切hard swap隐藏在峰值模糊处入场文字继续放大进入焦平面。仅用于标题与短语总时长约 0.4s任何时刻只允许一块文字可见。2.1 Worker 版场景内包装层换字var EXIT_START /* when readable text starts leaving */; var CUT EXIT_START 0.2; // Phase 1: Exit — scale/blur 加速opacity 线性淡出独立 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 — 高初速度长尾收敛 tl.to(.text-b-wrapper, { scale: 1, filter: blur(0px), opacity: 1, duration: 0.5, ease: expo.out }, CUT);三个阶段的参数依据 SKILL.md阶段ScaleBlurOpacityEaseDurationExit1 → 1.20 → 10px1 → 0.15power3.inopacity 为独立nonetween0.2sCuttl.set入场初值 0.7510px出: 0 / 入: 0.15——Entry0.75 → 110 → 0px0.15 → 1expo.out0.5s关键规则离场 opacity 必须是独立的线性 tween——power3.in会让 opacity 在接近 1 的水平停留过久导致淡出与运动曲线耦合、切点前文字已半透明入场则所有属性共享expo.out。2.2 Registry gsap_templatetl.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 版的差异worker 版做的是「0.2s 退场 0.5s 入场」的分段编排而 registry 版是对两个 clip 包装层的整段交叉 tween退场放大到 2.5、入场从 0.5 起步且fromTo的入/出属性在同一帧对齐——这正是「cut 帧上 blur/opacity 必须完全相同」规则在声明式模板中的体现。3. Inverse Zoom-Through反向穿越Pull-back 镜像离场元素后退缩小入场元素以超大尺寸到达仿佛刚从镜头后方出来并收缩进入焦平面——一切都在缩小。它应只用于「到达/ payoff」beat如 payoff 金句、巨型回复、保持的结尾状态不用于普通场景边界。总时长约 0.7s比例为 30% 退场 / 70% 入场。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, );要点30% 段内power3.in驱动 scale/bluropacity 依旧是独立nonetween 至 0.15随后tl.set归零70% 入场段以immediateRender: false启动保证fromTo的初始态0.15 / 1.25 / 10px只在__T__ 0.3·__DUR__时刻生效不与tl.set(__NEW__, {opacity: 0}, __T__)冲突worker 版与 Zoom-Through 相位一致仅翻转缩放值退场1 → 0.8、切点入场 1.25、入场1.25 → 1。符号纪律sign discipline入场场景应作为已构图框架composed frame出现在收缩的包装层内——seam 窗口切点 约 0.5s内禁止 grow-from-small 式入场。分阶段入场要么等收缩结束后再做要么从 ≥1 开始收缩。4. Cut the Curve默认场景边界X/Y 轴速度匹配切是所有场景到场景边界的默认手法——它是「影片的电流the films current」而非点缀。出场主角向某一方向加速切点落在运动中途中途入场主角沿同一方向继续并减速。总时长约 0.6s方向 LEFT / RIGHT / UP / DOWN默认 LEFT。核心约束是部分行程partial travel约 12% 画幅1920px 宽下约 230px绝不整屏移出不入。方向ExitEntry start → endLeftwardx: 0 → −230x: 230 → 0Rightwardx: 0 → 230x: −230 → 0Upwardy: 0 → −230y: 230 → 0Downwardy: 0 → 230y: −230 → 04.1 Worker 版场景层var CUT_TIME /* scene transition point */; // Scene A: hero 向左加速部分行程约 12% 画幅 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 向左减速 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曲线的两半。inOut曲线在中点的速度是其峰值的一半因此两条镜像曲线在切帧处一阶导数完全相同切点两侧像素位移连续。4.2 Registry gsap_template__DX__ -1920 (LEFT) / 1920 (RIGHT)__DY__ -1080 (UP) / 1080 (DOWN)。* 0.12/* 0.21系数产生约 12% 的部分行程水平 1920×0.12≈230px垂直 1080×0.21≈227px同一比例的视觉行程。// 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, );「淡出技巧」the fade trick体现在三处时间细节上退场 opacity tween 在__T__ 0.03·__DUR__启动、时长0.47·__DUR__——即在约 50% 行程处淡完≈25–30% of travel 的等效观感避免「smear」拖影入场以opacity 0.35 中途点火fromTo起始透明度 0.35而非 0→1 的二进制 pop时间轴上最后消失的元素应刚好在切点死亡——「什么都不动」的间隙会被读作 dead air。另一条硬性要求来自 SKILL.md#root必须不透明background: var(--canvas-deep, var(--canvas, #000))——中窗切点处两包装层叠加透明度 1 的窗口否则背景会闪白。4.3 Cut the Curve Zoom 组合缩放分量遵循Z 符号规则两侧都在缩小退场1 → 0.92、入场1.08 → 1——横向切上叠加一层一致的轻微回拉。绝不允许「缩小的退场 从小放大的入场」组合。// Scene A: hero 左移 轻微回拉 模糊 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: 继续左移稍超尺寸到达并回收 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, );Z 方向本身就是一个符号d(scale)/dt的符号必须在切点两侧匹配。「Push前推」 一切放大1→1.2 / 0.75→1即 zoom-through「Pull后拉」 一切缩小1→0.8 / 1.25→1即 inverse zoom-through。SKILL.md 点名的「常见错误镜像」正是后拉退场被「从小放大」入场回应——因为 grow-from-small 是元素入场默认写法。5. Waterfall Cut逐词瀑布切Cut the Curve 在词粒度上的版本——文本对文本接缝处最强的左向切法出场词各自沿自己的曲线退场入场词以「已在飞行中」的姿态级联涌入形成一道眼睛可以顺着滑过切点的波。适用面worker 在一个多 beat 合成内手写堆叠的全帧.beat层不是registry/injector 类型——它 tween 的是词 span 而非 clip 包装层。进出文本 beat 块本身的边界仍走普通 registry 过渡且不计入 2–3 个过渡的预算。5.1 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; }5.2 时间轴// 构建时预置 — 仅 immediateRender:false 会让未启动的词保持可见 gsap.set([...w1, ...w2], { x: 230, opacity: 0 }); function wordExit(words, C) { // C 合成时间轴上的切点时间 let s C - 0.32; // 退场在切点之前开始 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); // 淡出在行程 ~25-30% 处结束 s 0.022; // 阅读顺序 stagger }); } function wordEnter(words, C) { let off 0, gap 0.05; words.forEach((el) { tl.fromTo( el, { x: 230, opacity: 0.35 }, // 中途点火已经在动 { x: 0, opacity: 1, duration: 0.3, ease: power4.out, immediateRender: false }, C off, ); off gap; gap * 0.84; // 间隙收缩 — 级联加速 }); } const C 2.3; wordExit(w1, C); tl.set(b1, { opacity: 0 }, C); // 层交换恰好发生在切点 tl.set(b2, { opacity: 1 }, C); wordEnter(w2, C);参数设计引自 SKILL.md §4参数值原因Travel±230px约 12% 画幅部分行程 速度 整屏 push退场0.34spower4.in加速本身就是切退场淡出0.18s与 x 同时启动词在行程 ~25–30% 处消失无拖影退场 stagger每词 0.022s阅读顺序整行「剥落」而非整块平移入场0.3spower4.out合成曲线的后半段速度匹配入场起始透明度0.35中途点火0→1 二进制会跳变入场间隙0.05s × 0.84 衰减加速级联最终收敛成构图短的第一 beat 可以整行退场x: -230, 0.34s, power4.inopacity 淡出几乎贯穿整个加速段比切点早约 0.02s 结束——当下一组词点火时它仍在划行中间不留死隙。注意预置的必要性只用immediateRender: false会让未启动的词静止可见必须在构建时gsap.set到x: 230, opacity: 0。且只动 transform/opacityseek-safe不透明舞台地面规则同样适用。6. Rack-Focus Blur-Cut可见的切七种技法中唯一「切被看见」的变体失焦模糊的尖峰SPIKE隐藏单帧硬切——模拟手持 DSLR 的跟焦动作。仅用于同一视觉主题内同一表面的状态切换偶发使用约每 8s 至多一次绝不作为默认边界。var T /* transition start */; // Phase 1: 出场画面平移 模糊但保持完全不透明 tl.to(#scene-out, { x: -80, scale: 1.06, filter: blur(12px), duration: 0.3, ease: power2.in }, T); // Phase 2: 在峰值模糊处硬切 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);与其他变体的区别出场侧直到切点保持完全不透明由模糊而非淡出隐藏交换easing 用power2.in/power2.out柔和光学感而非动量感。规则在峰值模糊≥6px峰值 8–12px上限 16–18px处切——在上升沿交换会暴露切点约 1.06 的细微 scalelens breathing让它读作光学现象两侧同方向入场时长 ≥ 退场。若用作Z 轴 dolly去掉 x 偏移改用 scale0.92 →/→ 1.08。7. Waterfall Entry场景内到达非接缝交错到达级联词/元素从下方单一方向甩入每个元素在上一個落定前就启动——一道加速的波最终收敛成构图布局。用于标题卡、段落开场、列表/功能介绍。每个元素都是tl.set瞬时显形 偏移→tl.to甩向归位两段式。核心排布公式nextStart prevStart prevDuration − (overlapFrames × F)正值 overlap 级联负值 刻意留隙。CSS 上元素初始为opacity: 0; display: inline-block。var F 1 / 60; var t0 0.1; // anchor最重行程最大、落定最久 tl.set(#el-1, { opacity: 1, y: 80 }, t0); tl.to(#el-1, { y: 0, duration: 0.18, ease: power4.out }, t0); // 普通词anchor 结束后 2 帧启动 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); // 轻量词前一个结束前 1 帧启动overlap 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); // 末词拆片最紧的 overlap、更大的行程更轻 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); // 标点最轻、最快 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);按「元素权重」分配参数引自 SKILL.md §6参数Anchor/重普通词轻/标点Y 偏移60–80px40–50px30–48pxDuration0.16–0.20s0.13–0.16s0.10–0.13sOverlap0–2f 间隙1f 重叠1–2f 重叠它与 §5 Waterfall Cut 的规则不可混用到达Entry的 opacity 是tl.set二进制 0→1绝不淡出轴默认 Y 从下方没有出场侧。Easing 一律power4.out更强 snap 用expo.out入场侧禁用.inOut。末词可拆成碎片延伸高潮碎片行程更远。落定后群组常需再滑开为下一个 beat 让位——那就交给 §8 的 Nudge Curve。8. Nudge Curve场景内群组滑移慢—快—慢的群组重定位词行、卡片栈、列表用于揭示内容或腾出空间。没有任何单一内置 easing 能产生它——power4.inOut会「咣」地刹停。正确做法是在同一属性上链式三条 tween阶段Ease距离占比时间占比观感1 ramp-inpower3.in~10%~20%几乎没动——运动被感知但没有冲击2 burstnone线性~65%~18%约 2× 平均 px/帧——有目的性3 tailpower4.out~25%~62%衰减蠕动向静止——消灭刹停感以 270px 左移总 0.57s为参考值其他行程按比例缩放距离保持时间比例不变tail 时间 ≥ ramp-in 的 3 倍。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 // 垂直方向y 上同比例。150px 变体-15 / -115 / -150时间不变。规则阶段 2 保持线性easing 掉 burst 的对比度新内容在阶段 2 期间揭示——burst 会掩盖其出现若仍显「咣」延长 tail 的时间而非距离或换power5.out。9. 调节参数范围Tuning Ranges实现文件 给出的可调区间作为上述模板的调参依据Zoom-Through / Inverse Zoom参数默认值范围Exit scale1.2fwd/ 0.8inv±0.1Entry scale0.75fwd/ 1.25inv±0.1切点模糊文字 10px / 整帧 18–20px—切点透明度0.150.1–0.2退场时长0.2s0.15–0.3s入场时长0.5s0.4–0.6sCut the Curve参数默认值范围Travel230px约 12% 画幅150–300px切点模糊8px6–10px退场时长0.33s0.2–0.4s入场时长0.33–0.42s≥ 退场模糊强度与主题体量挂钩SKILL.md「Blur logic」文字级标题、词组峰值 10px——20px 会把字形抹成乱码切点读作 glitch 而非速度整帧表面窗口、卡片、截图用 18–20px——大表面上的轻模糊会读作渲染卡顿。切点帧两侧峰值模糊必须相同且永远 blur 包装层不 blur 子元素。10. 变体选择速查与反模式10.1 选择矩阵Zoom-ThroughInverse ZoomCut the CurveWaterfall Cut适用面场景内文字换字到达/payoff beat场景之间文本对文本接缝Z 符号/轴放大push缩小pullX / YX逐词行程/scale1→1.2然后 0.75→11→0.8然后 1.25→1±230px±230px峰值模糊文字 10px / 整帧 18–20文字 10px / 整帧 18–208–10px 可选无Easingpower3.in / expo.outpower3.in / expo.outpower4.in / power4.outpower4.in / power4.out观感穿入更深处到达某处被横向带过去一道波划过切点10.2 反模式对照高频错误反模式正确做法Zoom-through 期间两段文字同时可见峰值模糊处硬切一次只有一块文字文字级主题用 20px 模糊文字 10px仅整帧才用 18–20px后拉退场 → 从小放大入场或前推 → 超尺寸回收匹配 scale 速度符号在 cut±0.1s 处验证入场 comp 自带 scale-up intro 垫在 Z-seam 包装层 tween 下以构图态到达seam 落定后再做分阶段入场或匹配符号交换帧上 blur/opacity 不对齐切点帧数值完全相同整屏移出不入部分行程约 12% 提前淡出切点两侧用.inOuteasing镜像power4.in/power4.out孤立元素在切点前很久就淡完淡出在切点前约 0.02s 结束或改用词级联级联间隙均等每词间隙 ×0.84 收缩到达§6使用渐变 opacity 淡出tl.set二进制 0→1——seam 切会淡出到达不会群组滑移用单一 easingpower4.inOut、slow()§8 的三阶段链适用前提与限制以上模板针对 HyperFrames 的确定性 HTML→视频渲染管线编写——所有 tween 只使用 transform/opacity/filterseek-safe时间轴可被帧级 seek 复渲染worker 版依赖场景内自定义 class 选择器registry 版依赖注入器对#el-*包装层的存在与轨道重排详见 seam-craft 与 转换注册表。复制模板到具体项目时请按项目实际帧率与画幅比例核对 travel 像素值230px ≈ 1920 宽的 12%。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考