HyperFrames 帧内接缝切镜目录用 Zoom-Through、Inverse Zoom、Cut the Curve 与 Waterfall Cut 打造帧内连续运动【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文是 HyperFramesproduct-launch-video技能中帧构建Frame Worker的接缝切镜seam cut权威指南。它解决一个具体问题当单个帧内部的镜头序列出现接缝——场景内文字/元素切换、Scene-to-Scene切镜Scene是帧内的一个时间窗口不是帧与帧的边界、或一行文字换为另一行文字时——如何让观众看到的是一次连续运镜而不是生硬的幻灯片式硬切。读完本文你将掌握四种由 Frame Worker 在自己的合成内部构建的速度匹配切镜技法Zoom-Through、Inverse Zoom-Through、Cut the Curve、Waterfall Cut理解它们与帧间transition_in转场的严格分工并能依据模糊逻辑、相位参数、缓动曲线与反模式清单在 cut-catalog.md 的指导下写出可复现、可验证的帧内接缝。定位澄清帧内接缝 ≠ 帧间转场首先要建立清晰的边界。这份目录是worker 构建配方构建步骤 Step 5它是skills/hyperframes-animation/rules/的兄弟文档而不是第二份运动文档。它所描述的切镜是帧 worker 在自己的合成composition内部构建的Z 轴缩放 模糊 不透明度补间或者逐词的 x 轴错峰全部发生在该帧自己那条暂停的 GSAP 时间线上。它们不是帧与帧之间的转场——帧间转场由 story 通过transition_in声明由装配器harness的注入器injector从一套独立的注册表词汇盖章生成crossfade/blur-crossfade/push-slide/zoom-through/squeeze。因此本目录中的命名cut-the-curve / inverse-zoom / waterfall不是合法的transition_in取值——在 storyboard 中把它们写进transition_in会导致转场注入器找不到注册表记录而回退到默认值见下文源码分析。何时使用本目录当帧的镜头序列存在内部接缝——场景内的文字/元素切换、Scene-to-Scene 切镜Scene是单个帧内部的时间窗口不是帧间边界、或文字换行的文本切换——并且你希望它读起来像一次连续移动而不是生硬的幻灯片硬切时。注意zoom-through同时存在于两个世界在注册表中它是整帧包裹层转场在这里它是元素级 Z 轴切镜——同样的思想不同的作用域。四种技法同一个底层原理本目录给出四种制造纵深与连续性的技法Zoom-Through— 场景内文字切换Z 轴朝观众方向移动Inverse Zoom-Through— Z 轴切换朝远离观众方向移动Cut the Curve— x/y 轴上的场景间转场Waterfall Cut— 逐词的 cut-the-curve错峰退场与入场四种技法共享同一个底层原理在峰值速度处切割cut at peak velocity并匹配切割两侧的方向与速度。差异只在于轴axis、作用域scope与粒度granularity。如何在一个接缝处做选择未完成的短语正在跨多个视觉上不同的场景构建同一个更大的观点——多行文字、连续的一系列卡片用cut-the-curve/waterfall。状态变化转向视频的新部分——最常见的是 hook → context或两个独立章节之间用zoom-throughinverse zoom-through用于到达/回报节拍arrival / payoff beat。将这些技法串联起来让帧内部的接缝感觉像一台摄像机在整个内容中连续移动。模糊逻辑适用于所有 Z 轴变体模糊用来卖切割瞬间的速度但它必须随主体尺寸缩放主体峰值模糊原因文字级标题、行、词组10px20px 时文字糊成一团无法辨认——眼睛会丢失正在追踪的词切割读起来像故障glitch而不是速度。2026-06-10 的经验教训此前的 inverse zoom 以 20px 交付显得糊软10px 能在切割中途保持字母形状可读。整帧表面终端窗口、卡片、截图18–20px大表面有边缘和纹理可以承受重度模糊整帧移动上的较轻模糊读起来像渲染小故障而不是运动。两个硬性规则切割两侧使用相同的峰值模糊——值必须在交换帧处匹配。模糊应用在 Wrapper 上绝不应用到单个子元素上。1. Zoom-Through正向问题文字进入、停留、退出。然后下一段文字进入、停留、退出。每段文字块相互独立——没有纵深没有连续性。视频感觉像幻灯片。原理Z 轴上的速度匹配切割。你永远不会同时看到两段文字。退出的文字向观众方向缩放加速模糊和不透明度在切割点达到峰值并隐藏一次硬交换进入的文字从背后继续放大减速进入焦点平面。一次连续的前向运动两段不同的文字。三个阶段阶段 1退场Exit—— 文字向前加速朝向观众Scale1.0 - 1.2Blur0px - 10px文字级见模糊逻辑Opacity1.0 - 0.15缩放/模糊缓动power3.in陡峭加速不透明度缓动none线性——均匀变暗与缩放分离时长0.2s阶段 2硬切割—— 在峰值速度 峰值模糊处退场方opacity: 0通过tl.set瞬时设置入场方opacity: 0.15, scale: 0.75, blur: 10px通过tl.set瞬时设置所有属性在切割处匹配模糊、不透明度、以及缩放的方向双方都在放大阶段 3入场Entry—— 文字继续向前生长进入焦点平面Scale0.75 - 1.0Blur10px - 0pxOpacity0.15 - 1.0缓动expo.out与退场速度匹配的陡峭初始爆发长尾沉降时长0.5s为什么退场时的不透明度必须分离缩放使用power3.in但这会让不透明度在补间的大部分时间里保持在接近 1.0。把不透明度拆成自己的补间并使用线性缓动可以让变暗均匀。入场时所有属性可以共享expo.out。2. Inverse Zoom-Through反向镜像版本摄像机是向后拉而不是向前推。退场的元素远离观众退去入场的元素以超大尺寸抵达仿佛它刚刚就在摄像机后面然后收缩进入焦点平面。两者都向缩小方向移动——同向规则保留只是反转了。何时用它替代正向变体到达节拍。入场元素因为从超画幅而来而带有存在感——正适合一句 payoff 台词That changes today.、一个巨大的回复、或一个保持的终态。正向 zoom-through 读起来像在内容中前进反向读起来像抵达内容。三个阶段阶段 1退场—— 元素退去远离观众Scale1.0 - 0.8Blur0px - 10px文字级缩放/模糊缓动power3.in不透明度1.0 - 0.15使用none独立补间时长0.2s阶段 2硬切割退场方opacity: 0通过tl.set入场方opacity: 0.15, scale: 1.25, blur: 10px通过tl.set阶段 3入场—— 入场元素收缩归位Scale1.25 - 1.0Blur10px - 0pxOpacity0.15 - 1.0缓动expo.out时长0.5s已交付示例boring → until-now与B3 → That changes today.sfx-music-launcheditorial-paper 的第 3/4 处接缝follow-up → thinking、thinking → compose UI。3. Cut the Curve场景转场原理在 x 和 y 轴上为所有场景间转场使用 cut-the-curve。退场场景的主角元素朝一个方向加速切割落在运动途中入场场景的主角元素继续朝同一方向移动并减速。没有元素完全移出画面也没有元素从完全画外进入——速度加不透明度渐隐骗过眼睛局部移动已经足够。同路径、同方向如果场景 A 的主角向左滑出场景 B 的主角从右侧进入并继续向左滑动。两者都向左移动。一次连续的运动。方向场景 A 退场场景 B 入场起点场景 B 入场终点向左x: 0 - -230x: 230x: 0向右x: 0 - 230x: -230x: 0向上y: 0 - -230y: 230y: 0向下y: 0 - 230y: -230y: 0通过镜像缓动实现速度匹配最干净的匹配退场用power4.in、入场用power4.out且距离与时长相同——数学上它们是一个power4.inOut复合曲线的两半因此入场元素恰好在一个虚拟路径的 50% 处、以完全相同的速度接续例如 230px / 0.3s ≈ 切割两侧各 3,070 px/s。渐隐技巧退场方的不透明度在约 25–30% 的行程处完成渐隐时长 ≈ 0.18–0.3s运动时长 0.3–0.34s——元素在仍然明显加速时消失没有任何东西需要抵达画面边缘。入场方在减速过程中从约 0.35 开始快速淡入。让最后一个渐隐元素恰好在硬切割处消失——中间没有东西在移动的间隙读起来像尴尬的死寂dead air。规则所有场景转场都使用 cut-the-curve——它是默认值不是点缀两侧同方向镜像的.in/.out缓动同样的距离 时长退场时长要短0.2–0.4s入场时长 退场时长局部移动 渐隐绝不全程移出画面4. Waterfall Cut逐词版 cut-the-curve在词粒度上的 cut-the-curve——向左切割对文字到文字接缝的最强版本。退场行的每个词沿着自己明显的曲线 ramp 出去入场行的每个词在飞行途中级联进入。错峰把切割变成一道让眼睛跨过接缝的波浪。退场逐词运动x: 0 - -230时长 0.34spower4.in—— 比通常的 power2 明显更陡的 ramp词几乎不动然后猛然加速RIPS渐隐opacity - 0时长 0.18s独立补间power1.in——在词只走了约 25–30% 行程时完成错峰按阅读顺序每词约 0.022s计时使得最后一个词恰好在硬切割时完成渐隐入场逐词fromTo x: 230 - 0, opacity: 0.35 - 1时长 0.3spower4.out—— 复合曲线的镜像后半段每个词点燃时已经在以匹配速度移动Waterfall 错峰使用递减的间隔起点 0.05s每词乘以约 0.84——级联应该跨行加速而不是使用扁平逐词延迟在构建时把所有词预置为x: 230, opacity: 0—— 仅靠immediateRender: false会让尚未开始的词在错峰窗口期以静止状态可见地停留在原地整行变体一个单行节拍例如一行大标题作为一组以同样的明显 ramp 退出但把渐隐拉长到约 0.3s、并在切割前约 0.02s 结束——一个提前渐隐的孤立元素会留下词级联原本可以覆盖的死寂。已交付示例until-now.html的 B1→B2→B3sfx-music-launch。变体选择矩阵Zoom-ThroughInverse ZoomCut the CurveWaterfall Cut作用域场景内文字切换到达/回报节拍场景之间文字到文字接缝轴Z朝向观众Z远离观众X / YX逐词峰值模糊文字 10px / 整帧 20px文字 10px / 整帧 20px无需无渐隐完成工作切割处不透明度0.150.15切割时已渐隐最后一词在切割处消失观感穿越内容抵达内容被横向带走一道跨过接缝的波浪反模式清单不要为什么应该zoom-through 期间两段文字同时可见重叠文字破坏 Z 轴错觉在模糊峰值处硬切一次只有一段文字文字级主体用 20px 模糊字母形状糊掉读起来像故障文字用 10px只有整帧用 18–20px跨切割的元素走不同路径眼睛追踪一个方向切割走另一个同一属性同一方向交换处模糊/不透明度不匹配可见闪烁或亮度跳跃切割帧处使用完全相同数值入场用温和缓动power2.out入场速度感觉比退场慢镜像退场power4.out/expo.out完全移出/移入画面浪费时间并破坏速度错觉局部移动 提前渐隐孤立元素在切割前很久就渐隐接缝处死寂渐隐在切割前约 0.02s 结束或使用词级联正文文字上做 zoom-through0.75 缩放的小文字无法阅读只用于标题和短短语场景切割不用 cut-the-curve静态切割感觉像幻灯片cut-the-curve 是默认值源码佐证两套体系在仓库中的落点帧间转场注册表transitions.json帧间转场由 transitions.json 中的注册表驱动其中zoom-through的 GSAP 模板是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__);注意它与本文目录中元素级 zoom-through 的关系同样的思想退场加速放大 模糊 渐隐入场从背后继续放大、不同的作用域——注册表作用于两个帧 clip wrapper#el-id而本目录作用于帧内部 paused GSAP 时间线上的元素。注册表还定义了crossfade、blur-crossfade、push-slide、squeeze以及两个默认值高能量默认zoom-through、平静默认blur-crossfade并限制最大转场时长 2.0s。注入器transitions.mjstransitions.mjs 是注入与验证脚本。关键行为parseTransitionIn只接受注册表内的类型名crossfade/blur-crossfade/push-slide/zoom-through/squeeze可选DIR方向与Ns时长遇到不在注册表中的类型时resolveRecord会回退到default_calm并打印警告——这正是为什么cut-the-curve这类目录命名不能写进transition_in。cut/none/ 空值则直接表示硬切无重叠、不盖章。注入采用 EXTEND-OUTGOING-ONLY 机制只延长退场方 wrapper 的data-duration保持其末帧跨过重叠窗口不移动任何data-start入场方从更高的轨道上叠入随后对所有 clip 做 0/1 ping-pong 轨道分配并盖章 token 替换后的 GSAP 模板。verify子命令作为确定性门禁检查每个转场边界均有重叠、跨轨道、且注入块引用了两侧 id。运动原则motion-language.md的运动法则第 4 条motion-language.md 的运动法则Motion Doctrine第 4 条明确要求当帧存在内部接缝时做成速度匹配切镜而不是幻灯片式硬切——在峰值速度处切割匹配两侧方向与速度并指向cut-catalog.md。同文档 Part 3 的 seek-safe 硬规则同时约束了实现方式所有运动必须驱动在暂停的 GSAP 时间线内禁止 CSStransition/keyframes入场必须使用fromTo显式声明 from 状态禁止无限运动与随机性且帧内接缝不是帧的退场——帧的退场由 harness 注入的transition_in承担。Worker 角色frame-worker.mdsub-agents/frame-worker.md 定义了 product-launch 工作流的帧 worker 增量角色。worker 每次只处理一个帧读到的角色由核心契约frame-worker-core.md加上本文件拼接而成。跨帧边界有硬性交接契约若 packet 含handoff_in:/handoff_out:必须按给定数值开始/结束命名元素x/y 位置、缩放、不透明度、运动方向/速度字段即使声明为不变也具有约束力——相邻帧由另一个 worker 并行构建会用匹配值。这保证了接缝处不会出现两个 worker 各自发明不同版本的同一条接缝。在 6 步工作流中的位置在 SKILL.md 的完整工作流中Step 0 setup → Step 1 capture → Step 2 design system → Step 3 storyboard/script → Step 4 visual design → Step 5 frames → Step 6 render本目录服务于Step 4 与 Step 5Step 4 在写时间码镜头序列时按motion-language.md的词汇命名接缝zoom-through / inverse zoom-through / cut-the-curve / waterfall cut均指向cut-catalog.mdStep 5 由帧 worker 依据该目录在每帧的暂停时间线上实际构建。Step 6 的transitions.mjs inject/verify、npx hyperframes lint、check与snapshot则负责在最终渲染前验证包括接缝在内的所有运动对每个切割点前后 ±0.1s / 0.2s 截图比对确认延续元素的位置、缩放、不透明度与方向无跳变。结语让帧内的接缝成为同一次运镜四技法、模糊逻辑、相位参数与反模式清单共同构成一套自洽的帧内接缝语言无论接缝是场景内文字切换、场景间换场还是逐词换行原则始终是——在峰值速度处切割匹配两侧方向与速度用模糊卖速度、用不透明度藏交换、用错峰把切割变成波浪。把这套语言与帧间transition_in注册表词汇严格区分开按 cut-catalog.md 的相位参数逐项实现再用transitions.mjs verify与snapshot做确定性校验你就能让视频的每一次内部接缝都读作一台摄像机穿行于内容之中而不是幻灯片翻页。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 帧内接缝切镜目录：用 Zoom-Through、Inverse Zoom、Cut the Curve 与 Waterfall Cut 打造帧内连续运动
HyperFrames 帧内接缝切镜目录用 Zoom-Through、Inverse Zoom、Cut the Curve 与 Waterfall Cut 打造帧内连续运动【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文是 HyperFramesproduct-launch-video技能中帧构建Frame Worker的接缝切镜seam cut权威指南。它解决一个具体问题当单个帧内部的镜头序列出现接缝——场景内文字/元素切换、Scene-to-Scene切镜Scene是帧内的一个时间窗口不是帧与帧的边界、或一行文字换为另一行文字时——如何让观众看到的是一次连续运镜而不是生硬的幻灯片式硬切。读完本文你将掌握四种由 Frame Worker 在自己的合成内部构建的速度匹配切镜技法Zoom-Through、Inverse Zoom-Through、Cut the Curve、Waterfall Cut理解它们与帧间transition_in转场的严格分工并能依据模糊逻辑、相位参数、缓动曲线与反模式清单在 cut-catalog.md 的指导下写出可复现、可验证的帧内接缝。定位澄清帧内接缝 ≠ 帧间转场首先要建立清晰的边界。这份目录是worker 构建配方构建步骤 Step 5它是skills/hyperframes-animation/rules/的兄弟文档而不是第二份运动文档。它所描述的切镜是帧 worker 在自己的合成composition内部构建的Z 轴缩放 模糊 不透明度补间或者逐词的 x 轴错峰全部发生在该帧自己那条暂停的 GSAP 时间线上。它们不是帧与帧之间的转场——帧间转场由 story 通过transition_in声明由装配器harness的注入器injector从一套独立的注册表词汇盖章生成crossfade/blur-crossfade/push-slide/zoom-through/squeeze。因此本目录中的命名cut-the-curve / inverse-zoom / waterfall不是合法的transition_in取值——在 storyboard 中把它们写进transition_in会导致转场注入器找不到注册表记录而回退到默认值见下文源码分析。何时使用本目录当帧的镜头序列存在内部接缝——场景内的文字/元素切换、Scene-to-Scene 切镜Scene是单个帧内部的时间窗口不是帧间边界、或文字换行的文本切换——并且你希望它读起来像一次连续移动而不是生硬的幻灯片硬切时。注意zoom-through同时存在于两个世界在注册表中它是整帧包裹层转场在这里它是元素级 Z 轴切镜——同样的思想不同的作用域。四种技法同一个底层原理本目录给出四种制造纵深与连续性的技法Zoom-Through— 场景内文字切换Z 轴朝观众方向移动Inverse Zoom-Through— Z 轴切换朝远离观众方向移动Cut the Curve— x/y 轴上的场景间转场Waterfall Cut— 逐词的 cut-the-curve错峰退场与入场四种技法共享同一个底层原理在峰值速度处切割cut at peak velocity并匹配切割两侧的方向与速度。差异只在于轴axis、作用域scope与粒度granularity。如何在一个接缝处做选择未完成的短语正在跨多个视觉上不同的场景构建同一个更大的观点——多行文字、连续的一系列卡片用cut-the-curve/waterfall。状态变化转向视频的新部分——最常见的是 hook → context或两个独立章节之间用zoom-throughinverse zoom-through用于到达/回报节拍arrival / payoff beat。将这些技法串联起来让帧内部的接缝感觉像一台摄像机在整个内容中连续移动。模糊逻辑适用于所有 Z 轴变体模糊用来卖切割瞬间的速度但它必须随主体尺寸缩放主体峰值模糊原因文字级标题、行、词组10px20px 时文字糊成一团无法辨认——眼睛会丢失正在追踪的词切割读起来像故障glitch而不是速度。2026-06-10 的经验教训此前的 inverse zoom 以 20px 交付显得糊软10px 能在切割中途保持字母形状可读。整帧表面终端窗口、卡片、截图18–20px大表面有边缘和纹理可以承受重度模糊整帧移动上的较轻模糊读起来像渲染小故障而不是运动。两个硬性规则切割两侧使用相同的峰值模糊——值必须在交换帧处匹配。模糊应用在 Wrapper 上绝不应用到单个子元素上。1. Zoom-Through正向问题文字进入、停留、退出。然后下一段文字进入、停留、退出。每段文字块相互独立——没有纵深没有连续性。视频感觉像幻灯片。原理Z 轴上的速度匹配切割。你永远不会同时看到两段文字。退出的文字向观众方向缩放加速模糊和不透明度在切割点达到峰值并隐藏一次硬交换进入的文字从背后继续放大减速进入焦点平面。一次连续的前向运动两段不同的文字。三个阶段阶段 1退场Exit—— 文字向前加速朝向观众Scale1.0 - 1.2Blur0px - 10px文字级见模糊逻辑Opacity1.0 - 0.15缩放/模糊缓动power3.in陡峭加速不透明度缓动none线性——均匀变暗与缩放分离时长0.2s阶段 2硬切割—— 在峰值速度 峰值模糊处退场方opacity: 0通过tl.set瞬时设置入场方opacity: 0.15, scale: 0.75, blur: 10px通过tl.set瞬时设置所有属性在切割处匹配模糊、不透明度、以及缩放的方向双方都在放大阶段 3入场Entry—— 文字继续向前生长进入焦点平面Scale0.75 - 1.0Blur10px - 0pxOpacity0.15 - 1.0缓动expo.out与退场速度匹配的陡峭初始爆发长尾沉降时长0.5s为什么退场时的不透明度必须分离缩放使用power3.in但这会让不透明度在补间的大部分时间里保持在接近 1.0。把不透明度拆成自己的补间并使用线性缓动可以让变暗均匀。入场时所有属性可以共享expo.out。2. Inverse Zoom-Through反向镜像版本摄像机是向后拉而不是向前推。退场的元素远离观众退去入场的元素以超大尺寸抵达仿佛它刚刚就在摄像机后面然后收缩进入焦点平面。两者都向缩小方向移动——同向规则保留只是反转了。何时用它替代正向变体到达节拍。入场元素因为从超画幅而来而带有存在感——正适合一句 payoff 台词That changes today.、一个巨大的回复、或一个保持的终态。正向 zoom-through 读起来像在内容中前进反向读起来像抵达内容。三个阶段阶段 1退场—— 元素退去远离观众Scale1.0 - 0.8Blur0px - 10px文字级缩放/模糊缓动power3.in不透明度1.0 - 0.15使用none独立补间时长0.2s阶段 2硬切割退场方opacity: 0通过tl.set入场方opacity: 0.15, scale: 1.25, blur: 10px通过tl.set阶段 3入场—— 入场元素收缩归位Scale1.25 - 1.0Blur10px - 0pxOpacity0.15 - 1.0缓动expo.out时长0.5s已交付示例boring → until-now与B3 → That changes today.sfx-music-launcheditorial-paper 的第 3/4 处接缝follow-up → thinking、thinking → compose UI。3. Cut the Curve场景转场原理在 x 和 y 轴上为所有场景间转场使用 cut-the-curve。退场场景的主角元素朝一个方向加速切割落在运动途中入场场景的主角元素继续朝同一方向移动并减速。没有元素完全移出画面也没有元素从完全画外进入——速度加不透明度渐隐骗过眼睛局部移动已经足够。同路径、同方向如果场景 A 的主角向左滑出场景 B 的主角从右侧进入并继续向左滑动。两者都向左移动。一次连续的运动。方向场景 A 退场场景 B 入场起点场景 B 入场终点向左x: 0 - -230x: 230x: 0向右x: 0 - 230x: -230x: 0向上y: 0 - -230y: 230y: 0向下y: 0 - 230y: -230y: 0通过镜像缓动实现速度匹配最干净的匹配退场用power4.in、入场用power4.out且距离与时长相同——数学上它们是一个power4.inOut复合曲线的两半因此入场元素恰好在一个虚拟路径的 50% 处、以完全相同的速度接续例如 230px / 0.3s ≈ 切割两侧各 3,070 px/s。渐隐技巧退场方的不透明度在约 25–30% 的行程处完成渐隐时长 ≈ 0.18–0.3s运动时长 0.3–0.34s——元素在仍然明显加速时消失没有任何东西需要抵达画面边缘。入场方在减速过程中从约 0.35 开始快速淡入。让最后一个渐隐元素恰好在硬切割处消失——中间没有东西在移动的间隙读起来像尴尬的死寂dead air。规则所有场景转场都使用 cut-the-curve——它是默认值不是点缀两侧同方向镜像的.in/.out缓动同样的距离 时长退场时长要短0.2–0.4s入场时长 退场时长局部移动 渐隐绝不全程移出画面4. Waterfall Cut逐词版 cut-the-curve在词粒度上的 cut-the-curve——向左切割对文字到文字接缝的最强版本。退场行的每个词沿着自己明显的曲线 ramp 出去入场行的每个词在飞行途中级联进入。错峰把切割变成一道让眼睛跨过接缝的波浪。退场逐词运动x: 0 - -230时长 0.34spower4.in—— 比通常的 power2 明显更陡的 ramp词几乎不动然后猛然加速RIPS渐隐opacity - 0时长 0.18s独立补间power1.in——在词只走了约 25–30% 行程时完成错峰按阅读顺序每词约 0.022s计时使得最后一个词恰好在硬切割时完成渐隐入场逐词fromTo x: 230 - 0, opacity: 0.35 - 1时长 0.3spower4.out—— 复合曲线的镜像后半段每个词点燃时已经在以匹配速度移动Waterfall 错峰使用递减的间隔起点 0.05s每词乘以约 0.84——级联应该跨行加速而不是使用扁平逐词延迟在构建时把所有词预置为x: 230, opacity: 0—— 仅靠immediateRender: false会让尚未开始的词在错峰窗口期以静止状态可见地停留在原地整行变体一个单行节拍例如一行大标题作为一组以同样的明显 ramp 退出但把渐隐拉长到约 0.3s、并在切割前约 0.02s 结束——一个提前渐隐的孤立元素会留下词级联原本可以覆盖的死寂。已交付示例until-now.html的 B1→B2→B3sfx-music-launch。变体选择矩阵Zoom-ThroughInverse ZoomCut the CurveWaterfall Cut作用域场景内文字切换到达/回报节拍场景之间文字到文字接缝轴Z朝向观众Z远离观众X / YX逐词峰值模糊文字 10px / 整帧 20px文字 10px / 整帧 20px无需无渐隐完成工作切割处不透明度0.150.15切割时已渐隐最后一词在切割处消失观感穿越内容抵达内容被横向带走一道跨过接缝的波浪反模式清单不要为什么应该zoom-through 期间两段文字同时可见重叠文字破坏 Z 轴错觉在模糊峰值处硬切一次只有一段文字文字级主体用 20px 模糊字母形状糊掉读起来像故障文字用 10px只有整帧用 18–20px跨切割的元素走不同路径眼睛追踪一个方向切割走另一个同一属性同一方向交换处模糊/不透明度不匹配可见闪烁或亮度跳跃切割帧处使用完全相同数值入场用温和缓动power2.out入场速度感觉比退场慢镜像退场power4.out/expo.out完全移出/移入画面浪费时间并破坏速度错觉局部移动 提前渐隐孤立元素在切割前很久就渐隐接缝处死寂渐隐在切割前约 0.02s 结束或使用词级联正文文字上做 zoom-through0.75 缩放的小文字无法阅读只用于标题和短短语场景切割不用 cut-the-curve静态切割感觉像幻灯片cut-the-curve 是默认值源码佐证两套体系在仓库中的落点帧间转场注册表transitions.json帧间转场由 transitions.json 中的注册表驱动其中zoom-through的 GSAP 模板是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__);注意它与本文目录中元素级 zoom-through 的关系同样的思想退场加速放大 模糊 渐隐入场从背后继续放大、不同的作用域——注册表作用于两个帧 clip wrapper#el-id而本目录作用于帧内部 paused GSAP 时间线上的元素。注册表还定义了crossfade、blur-crossfade、push-slide、squeeze以及两个默认值高能量默认zoom-through、平静默认blur-crossfade并限制最大转场时长 2.0s。注入器transitions.mjstransitions.mjs 是注入与验证脚本。关键行为parseTransitionIn只接受注册表内的类型名crossfade/blur-crossfade/push-slide/zoom-through/squeeze可选DIR方向与Ns时长遇到不在注册表中的类型时resolveRecord会回退到default_calm并打印警告——这正是为什么cut-the-curve这类目录命名不能写进transition_in。cut/none/ 空值则直接表示硬切无重叠、不盖章。注入采用 EXTEND-OUTGOING-ONLY 机制只延长退场方 wrapper 的data-duration保持其末帧跨过重叠窗口不移动任何data-start入场方从更高的轨道上叠入随后对所有 clip 做 0/1 ping-pong 轨道分配并盖章 token 替换后的 GSAP 模板。verify子命令作为确定性门禁检查每个转场边界均有重叠、跨轨道、且注入块引用了两侧 id。运动原则motion-language.md的运动法则第 4 条motion-language.md 的运动法则Motion Doctrine第 4 条明确要求当帧存在内部接缝时做成速度匹配切镜而不是幻灯片式硬切——在峰值速度处切割匹配两侧方向与速度并指向cut-catalog.md。同文档 Part 3 的 seek-safe 硬规则同时约束了实现方式所有运动必须驱动在暂停的 GSAP 时间线内禁止 CSStransition/keyframes入场必须使用fromTo显式声明 from 状态禁止无限运动与随机性且帧内接缝不是帧的退场——帧的退场由 harness 注入的transition_in承担。Worker 角色frame-worker.mdsub-agents/frame-worker.md 定义了 product-launch 工作流的帧 worker 增量角色。worker 每次只处理一个帧读到的角色由核心契约frame-worker-core.md加上本文件拼接而成。跨帧边界有硬性交接契约若 packet 含handoff_in:/handoff_out:必须按给定数值开始/结束命名元素x/y 位置、缩放、不透明度、运动方向/速度字段即使声明为不变也具有约束力——相邻帧由另一个 worker 并行构建会用匹配值。这保证了接缝处不会出现两个 worker 各自发明不同版本的同一条接缝。在 6 步工作流中的位置在 SKILL.md 的完整工作流中Step 0 setup → Step 1 capture → Step 2 design system → Step 3 storyboard/script → Step 4 visual design → Step 5 frames → Step 6 render本目录服务于Step 4 与 Step 5Step 4 在写时间码镜头序列时按motion-language.md的词汇命名接缝zoom-through / inverse zoom-through / cut-the-curve / waterfall cut均指向cut-catalog.mdStep 5 由帧 worker 依据该目录在每帧的暂停时间线上实际构建。Step 6 的transitions.mjs inject/verify、npx hyperframes lint、check与snapshot则负责在最终渲染前验证包括接缝在内的所有运动对每个切割点前后 ±0.1s / 0.2s 截图比对确认延续元素的位置、缩放、不透明度与方向无跳变。结语让帧内的接缝成为同一次运镜四技法、模糊逻辑、相位参数与反模式清单共同构成一套自洽的帧内接缝语言无论接缝是场景内文字切换、场景间换场还是逐词换行原则始终是——在峰值速度处切割匹配两侧方向与速度用模糊卖速度、用不透明度藏交换、用错峰把切割变成波浪。把这套语言与帧间transition_in注册表词汇严格区分开按 cut-catalog.md 的相位参数逐项实现再用transitions.mjs verify与snapshot做确定性校验你就能让视频的每一次内部接缝都读作一台摄像机穿行于内容之中而不是幻灯片翻页。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考