HyperFrames 中 Cut the Curve 技巧目录速度匹配的缝隙Seam技术与七大动画机制详解【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 仓库中的cut-the-curve项目本地技能.claude/skills/cut-the-curve/SKILL.md是制作多场景动画视频时的“技术参数目录”它定义了五种在切割点seam处做速度匹配的缝隙转场技术——Zoom-Through、Inverse Zoom-Through、Cut the Curve、Waterfall Cut、Rack-Focus Blur-Cut以及两个场景内技术——Waterfall Entry错拍入场级联与 Nudge Curve慢-快-慢三段式群组位移。读完本篇你将掌握每种技术的完整参数表缩放、模糊、透明度、缓动、时长、GSAP 时间线代码模板、向量账本ledger.json与 Seam Gate 校验机制以及如何为任意转场、文字接力、动态字幕入场和群组重排选择并实现正确的技术。技能在仓库中的位置与核心原理.claude/skills/cut-the-curve/是 HyperFrames 仓库自带的 Claude Code 项目本地技能。按.claude/skills/README.md的说明.claude/skills/下的技能仅对打开本仓库的 Agent 生效用于每周 changelog 视频、doctrine 驱动的创作流程与skills/下通过npx hyperframes skills分发的市场技能是两个独立命名空间。cut-the-curve是其中changelog-video技能的五个依赖之一与motion-doctrine、captions-overlay、seam-craft、oversized-cursor共同构成完整的路由图。该技能的全部技术只有一条总原则在峰值速度处切割切割点两侧的方向和速度必须匹配——外加两个场景内技术§6 入场、§7 位移。而缝隙的“法条”部分——向量定律vector law、影片主向量the current、向量账本ledger、Seam Gate 校验门——放在motion-doctrine技能中创作任何转场前应先读它。本技能cut-the-curve承载的是参数与机械结构所有 GSAP 代码模板worker 版 注册表版则集中在examples/gsap-implementation.md。七个技术的总目录如下直接继承自 SKILL.md#技术作用域轴适用场景1Zoom-Through前向场景内文字互换Z朝向观众推进进入同一个思想的更深处2Inverse Zoom-Through到达/ payoff 拍Z远离观众更大的东西落地3Cut the Curve场景之间X / Y默认边界即影片的主向量4Waterfall Cut文字对文字缝隙X逐词大字 beat 之间的词级接力5Rack-Focus Blur-Cut同表面状态切换X / Y / Z你希望被“看见”的那一次切割——DSLR 跟焦式的炫技6Waterfall Entry场景内到达无缝隙Y自下方标题卡、分段开场、列表引言7Nudge Curve场景内群组位移无缝隙X / Y为一个已组合的群组重新定位以腾出空间Z 轴方向是一个符号scale-sign 规则“同轴”在 Z 轴上是不够的——d(scale)/dt的符号必须在切割点两侧一致Z 向量出场缩放入场缩放变体Push前推增长1 → 1.2增长0.75 → 1zoom-throughPull后拉缩小1 → 0.8缩小1.25 → 1inverse zoom-through被禁止的镜像组合一个后退receding的出场配一个从小长大的入场pull 被翻转成 push——这是最常见的违规因为 grow-from-small 恰恰是元素入场动画的默认写法同样被禁的是 push 出场配超大尺寸的收缩入场。这条规则约束的不仅是包裹层wrappertween而是进场场景自己在缝隙窗口切割点 约 0.5s内的入场动作要么保持进场帧已是组合完成的composed状态要么把它自身的入场写成与符号匹配。这一点在 Seam Gate 的规则 7 中被逐帧校验见 Seam Gate 参考。模糊逻辑所有 Z 变体通用对象峰值模糊原因文字尺度标题、词组10px20px 会把字形抹开——切割读起来像故障glitch而不是速度全帧表面窗口、卡片、截图18–20px大表面上的轻模糊读起来像渲染卡顿两条硬规则交换帧两侧峰值模糊必须相同模糊打在 WRAPPER 上绝不打在子元素上。五种缝隙技术1. Zoom-Through前向Z 轴速度匹配切割任何时刻绝不允许两段文字同时可见出场文字向镜头加速一次硬交换藏在峰值模糊中进场文字继续增长进入焦平面。只用于标题和短句。总时长约 0.4s。阶段ScaleBlurOpacityEaseDurationExit1 → 1.20 → 10px1 → 0.15power3.in透明度用独立的nonetween0.2sCuttl.setin: 0.7510pxout: 0 / in: 0.15——Entry0.75 → 110 → 0px0.15 → 1expo.out0.5s出场透明度必须是独立的线性 tween——因为power3.in会让透明度在 1 附近停留过久。入场阶段所有属性共享expo.out。worker 版实现逐帧自 gsap-implementation.mdvar EXIT_START /* 可读文字开始离场的时间 */; var CUT EXIT_START 0.2; // Phase 1: Exit — scale/blur 加速透明度线性淡出独立 tween tl.to(.text-a-wrapper, { scale: 1.2, filter: blur(10px), // 文字尺度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: 硬切 — 属性值在两 wrapper 间精确匹配 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);2. Inverse Zoom-Through后向拉远的镜像出场元素后退进场元素以超大状态到达仿佛刚刚位于镜头之后然后收缩进焦平面。一切都缩小。它只花在到达/payoff 拍上——payoff 句、巨型回复、停留的结尾状态——绝不用于普通边界。总时长约 0.7s30% 出场 / 70% 入场。阶段ScaleBlurOpacityEaseDurationExit1 → 0.80 → 10px1 → 0.15power3.in透明度独立nonetween~0.2sCuttl.setin: 1.2510pxout: 0 / in: 0.15——Entry1.25 → 110 → 0px0.15 → 1expo.out~0.5s模糊为 10px文字尺度仅当两侧都是全出血表面时用 18–20px。符号纪律进场场景必须作为组合完成的帧、在收缩中的 wrapper 内部到达——缝隙窗口内禁止 grow-from-small 的开场。分步入场要么发生在收缩收敛之后要么自身以 ≥1 开始并收缩。3. Cut the Curve默认场景边界X/Y 速度匹配切割——所有场景到场景边界的默认选择是影片的主向量不是点缀。出场主角向一个方向加速切割落在运动中途中进场主角沿相同方向继续并减速。总时长约 0.6s方向可选 LEFT / RIGHT / UP / DOWN默认 LEFT。部分行程partial travel约画面高度的 12%1920 宽下约 230px——绝不做整幅移出屏幕的位移。方向出场入场起点 → 终点向左x: 0 → −230x: 230 → 0向右x: 0 → 230x: −230 → 0向上y: 0 → −230y: 230 → 0向下y: 0 → 230y: −230 → 0机械要点镜像缓动出场power4.in 入场power4.out相同距离与时长——两者合起来正是同一条power4.inOut的前后半因此在切割点速度精确匹配。淡出技巧the fade trick出场透明度在其行程的约 25–30% 处完成淡出约 0.18–0.3s而位移约 0.3–0.34s入场在约 0.35 透明度、路径中段时点燃。把最后淡出的元素安排在恰好于切割点消亡——出现“什么都不动”的空档会被读成死场dead air。出场 0.2–0.4s入场 ≥ 出场。可选模糊 8–10px。舞台地面stage ground#root必须是不透明的background: var(--canvas-deep, var(--canvas, #000))——否则切割中窗期两个 wrapper 的叠加透明度 1会透出渲染器默认的白页造成闪白seam-craft技能中的白闪防护见下文“渲染侧前提”。注册表组件库中另有一个push-slide但它违反 partial-travel 与 mid-motion 相位两条规则优先使用 cut-the-curve。场景层 worker 版实现var CUT_TIME /* 场景切换点 */; // 场景 A主角向左加速部分行程 ~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, // power4.inOut 的镜像前半 overwrite: auto }, CUT_TIME - 0.33); // 硬切 tl.set(.scene-b-layer, { opacity: 1 }, CUT_TIME); tl.set(.hero-b-wrapper, { x: 230, filter: blur(8px) }, CUT_TIME); // 场景 B主角向左减速 tl.to(.hero-b-wrapper, { x: 0, filter: blur(0px), duration: 0.33, ease: power4.out // 切割点处速度匹配 }, CUT_TIME);组合变体cut-the-curve zoomscale 分量同样受 Z 符号规则约束——两侧都缩小出场1 → 0.92入场1.08 → 1在横向切割上叠加一层温和的 pull绝不能把收缩的出场配从小长大的入场。4. Waterfall Cut逐词的 cut-the-curve词粒度的 cut-the-curve——文字对文字缝隙上最强的向左切割。出场的词在各自的曲线上依次冲出去进场的词在半空中级联涌入——一条眼睛能跨缝“骑”过去的波浪。作用域由 worker 在一个多 beat 组合叠加的全帧.beat层内部编写不是注册表/注入器类型——它 tween 的是词 span 而非 clip wrapper。进出文字 beat 区块的边界仍然用普通注册表转场它也不计入 2–3 次的转场预算。参数取值原因行程±230px~12% 画面部分行程 速度 整帧推屏出场0.34spower4.in加速度本身就是切割出场淡出0.18s与 x 同时启动词在行程 25–30% 处即消失——不拖影出场 stagger阅读顺序 0.022s整行“剥落”而非整块平移入场0.3spower4.out复合曲线的后半——速度匹配入场起始透明度0.35路径中段点燃0→1 的二跳会生硬入场间隔0.05s × 0.84 衰减加速级联收敛为组合完成的布局规则一条链一个方向顺主向量而行。Inverse zoom 只用作这条链的到达拍。构建时把所有词预设为x: 230, opacity: 0——仅靠immediateRender: false会让未启动的词在静止时可见。较短的首个 beat 可以整行出场它的淡出在切割前约 0.02s 结束这样下一批词点燃时它仍在滑行——没有死隙。只用 transform/opacityseek 安全不透明舞台地面规则同样适用。时间线骨架来自 gsap-implementation.md// 构建时预设 — 仅 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);5. Rack-Focus Blur-Cut可见的切割唯一一种切割被看见的变体一次失焦模糊尖峰defocus spike藏住单帧硬交换——一次手持 DSLR 的跟焦动作。作为同一视觉主题内同一表面状态切换的偶尔点缀使用绝不作为默认边界。与其余技术的差别出场方在切割前保持完全不透明由模糊来藏交换——没有提前淡出缓动用power2.in/power2.out柔和的光学感而非动量感。规则只在叙事拍上触发约 8s 内至多一次绝不在字幕中间或停留期触发。在峰值模糊处切割≥6px峰值 8–12px上限 16–18px——在模糊上行阶段交换会露出切割。轻微的 scale约 1.06 的“镜头呼吸”让它读起来像真实光学。两侧同方向——向量定律依然成立。入场 ≥ 出场时长。模糊打在 wrapper 上绝不在同一元素上用一个 tween 同时做 blur opacity无头合成 bug绝不直接模糊video要包一层。var T /* 转场起点 */; // 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);两个场景内技术6. Waterfall Entry场景内到达——不是缝隙错拍的到达级联词/元素从下方一个统一方向抽入每个元素的启动都早于前一个的收敛——一条加速的波最终收敛为组合完成的布局。用于标题卡、分段开场、列表/特性引言。它的缝隙近亲是 §4 Waterfall Cut两者规则不要混用§6 Entry到达§4 Waterfall Cut缝隙透明度入场时经tl.set做二值 0→1——绝不淡入在路径 0.35 处点燃——淡出本身就是速度技巧默认轴Y自下方X顺主向量出场侧无词按镜像 power4.in 依次冲出去编排规则重叠而非排队——下一个元素在前一个收敛的 ±2 帧内启动间隔沿级联收缩最后一个元素是“啪”地 snap 到位。速度随权重变化——重/锚点元素行程更远、时间更长轻的词/标点快速 snap参数锚点/重型普通词轻型/标点Y 偏移60–80px40–50px30–48px时长0.16–0.20s0.13–0.16s0.10–0.13s重叠0–2f 间隙1f 重叠1–2f 重叠缓动power4.out要更脆则用 expo.out入场绝不用.inOut。一个级联一个方向。把最后一个词拆成片段以延长高潮片段行程更远。收敛之后群组通常会位移以给下一个 beat 腾出空间——那就是 §7。实现模式每个元素先tl.set瞬间出现 偏移再tl.to抽回静止位nextStart prevStart prevDuration − (overlapFrames × F)正 overlap 是级联负值是刻意间隙。CSS 侧元素以opacity: 0; display: inline-block起始。完整六元素示例锚点 → 普通词 → 轻词 → 末词双片段 → 标点见 gsap-implementation.md 第 6 节。7. Nudge Curve场景内群组位移——不是缝隙对已组合群组词行、卡片堆、列表做慢-快-慢的重定位以揭示内容或腾出空间。没有任何单一内建缓动能产生它——power4.inOut会“咣”地刹停。正确做法是在同一属性上串三个 tween阶段Ease距离占比时间占比感受1 ramp-inpower3.in~10%~20%几乎不动——运动被感知到但没有冲击2 burstnone线性~65%~18%约 2× 平均 px/frame——目的明确3 tailpower4.out~25%~62%衰减式蠕行至静止——消灭“咣”规则tail 的时间必须是 ramp-in 的 ≥3×。如果仍然“咣”延长 tail 的时间不是距离或改用power5.out。第 2 段保持线性——给它加缓动会丢掉爆发对比。新内容在第 2 段期间揭示——爆发会掩盖它的出现。垂直方向同理距离按比例缩放时间比例保持不变。参考值270px 左移、总计 0.57s其他行程按比例缩距离、保留时间比例var t /* 内容收敛后启动 */; tl.to(.text-row, { x: -30, duration: 0.12, ease: power3.in }, t); // ramp-in: 11% 距离 / 21% 时间 tl.to(.text-row, { x: -210, duration: 0.10, ease: none }, t 0.12); // burst: 67% 距离 / 18% 时间 tl.to(.text-row, { x: -270, duration: 0.35, ease: power4.out }, t 0.22); // tail: 22% 距离 / 61% 时间 // 垂直y 上同样比例。150px 变体-15 / -115 / -150时间不变。变体选择速查Zoom-ThroughInverse ZoomCut the CurveWaterfall Cut作用域场景内文字互换到达/payoff 拍场景之间文字对文字缝隙Z 符号 / 轴增长push缩小pullX / YX逐词行程/缩放1→1.2然后 0.75→11→0.8然后 1.25→1±230px±230px峰值模糊文字 10px / 全帧 18–20文字 10px / 全帧 18–208–10px 可选无缓动power3.in / expo.outpower3.in / expo.outpower4.in / power4.outpower4.in / power4.out感受穿透前进到达被侧向携走一道跨过缝隙的波反模式清单不要做应该做zoom-through 期间两段文字同屏峰值模糊处硬切一次一个文字文字尺度对象用 20px 模糊文字 10px仅全帧用 18–20pxinverse-zoom 出场 → grow-from-small 入场或 push → 超大收缩匹配缩放缓动符号在 cut±0.1s 处校验进场组合自带的 scale-up 开场叠在 Z-seam wrapper tween 下以组合完成态到达缝隙收敛后再分步入场或匹配符号交换帧处模糊/透明度不匹配切割帧两侧数值完全相同温和的入场缓动power2.out镜像出场power4.out/expo.out整幅移出屏幕的出场/入场部分行程~12% 提前淡出切割两侧任一侧用.inOut缓动镜像power4.in/power4.out孤立元素在切割前很久就淡完淡出在切割前 ~0.02s 结束或改用词级级联水等级联间隔相等每词 ×0.84 收缩间隔对正文用 zoom-through仅标题和短句场景切割不用 cut-the-curve它就是默认边界连续两个边界反向保持一个主向量保留向量花在有意义处中窗期切割背后#root未上底色不透明舞台地面排队式入场每个等前一个收敛重叠 ±1–2 帧——级联是波不是队级联所有元素同偏移/同时长按权重变化锚点远行标点 snap§6 到达用渐变淡入经tl.set做二值 0→1——淡入与 snap 相抗缝隙切割才淡入到达不淡入群组位移用单一缓动power4.inOut、slow()§7 三段链Nudge tail 短于 ramp-in 的 3×延长 tail 的时间而非距离渲染侧前提与校验闭环源码佐证上面这些参数只有在渲染与校验链路正确时才成立。仓库中有三处实现为它们兜底1. 白闪防护seam-craft。多个模板会打开一个“两 wrapper 叠加透明度 1”的窗口cut-the-curve 的中窗期切割、zoom-through 的 0.15 透明度底、普通交叉淡入的功率曲线凹陷。若组装后的index.html的#root没有不透明背景渲染器会把凹陷合成在默认白色页面上——每个缝隙都闪白。seam-craft因此规定组装器必须给舞台上色#root { background: var(--canvas-deep, var(--canvas, #000)) }。该技能还记录了注入器如何应用转场把出场 wrapper 的data-duration延长duration_s保持其最后一帧、把进场 wrapper 的data-start提前duration_s制造重叠窗口、把所有 clip 的data-track-index重排为 0/1 乒乓以避免同轨重叠并把gsap_template打到window.__timelines[main]的T overlap-start处。模板占位符令牌表__OLD__/__NEW__/__T__/__DUR__/__DX__-1920 LEFT / 1920 RIGHT/__DY__-1080 UP / 1080 DOWN等定义在 seam-craft/SKILL.md注册表版 GSAP 模板正是基于这些令牌书写的。2. 向量账本与 Seam Gatemotion-doctrine。创作顺序是先写项目根部的ledger.json每个缝隙一行切割时间、出场/入场向量轴 符号方向Z 行带 scale 符号、选择器、技术再用seam-stamp.mjs从账本生成主缝隙块最后用seam-gate.mjs数值化验证# 从账本生成主缝隙块替换 // seams:auto … // /seams:auto node SKILL_DIR/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # 验证账本中每个缝隙exit 0 通过 node SKILL_DIR/scripts/seam-gate.mjs verify --ledger ledger.json --project dir # 探测某切割时刻附近的运动元素用于撰写/修正账本行 node SKILL_DIR/scripts/seam-gate.mjs probe --t 44.8 --project dir账本 schema 见 references/seam-gate.md示例行如{ fps: 30, seams: [ { id: hook→claim, cut: 4.2, technique: cut-the-curve LEFT, exit: { selector: #el-hook, axis: x, dir: -1 }, entry: { selector: #el-claim, axis: x, dir: -1 } }, { id: claim→payoff, cut: 10.2, technique: inverse zoom-through, exit: { selector: #el-claim, axis: z, dir: -1 }, entry: { selector: #el-payoff, axis: z, dir: -1, scanRoot: #el-payoff } } ] }每行校验项与规则的对应ledger出场/入场向量在计划上必须匹配、exit-moving/entry-moving不许收敛出场、不许从静止入场、exit-direction/entry-direction实测符号与账本一致、speed-match入场初速 ≈ 出场末速WARN、zero-overlap每帧只有一侧可见——切割不是溶解、z-sign-scan进场场景自身入场不与 Z 符号相抗、carrier-*载体矩形连续性含祖先 scale。速度基于getBoundingClientRect实测因此祖先 wrapper 的变换自动被计入。脚本管不到的规则仍归人任何对场景首尾约 1s 的修改都重新打开该缝隙的审计音频是时钟clip 门控陷阱data-start早于入场 tween 会导致 clip 以初始透明度被揭开——应设初始autoAlpha: 0且data-start等于切割时间。3. 注册表组件cut-the-curve。在可分发的组件注册表中cut-the-curve 同时也是一个可安装的视频基元transitions家族见 registry-item.json 与组件源码 cut-the-curve.htmlnpx hyperframes add cut-the-curve # 写出一个文件compositions/components/cut-the-curve.html该基元把 SKILL.md 中的默认边界规则参数化为四个变量默认值即可用变量默认取值作用subjectcursorcursor、card、scene切割两侧共用的视觉负载directionleftleft、right、up、down出场/入场共用的屏幕方向同时决定轴与符号cutFraction0.330–1步进 0.01归一化的硬切点入场距离由它推导以保证缝隙速度匹配0.33 即约 1:2 的出场:入场时间比blurPx120–40px切割缝处两侧共用的模糊exitnonenone、fade、up入场主体落定后的可选离场启用后预留min(0.35s, 25% D)的尾部窗口从组件源码结构看它的不变量与 SKILL.md 完全一致出场/入场共享同一向量、身份交换只发生在CUT_AT、缝处模糊与透明度两侧匹配、恰好一条 paused 时间线注册在字面 idcut-the-curve下重定时只改 D0.3s–3s禁止 timeScale、禁止把两半拆成独立调速。挂载写法div contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考