在 HyperFrames 中实现 Motion-Blur Streak为 seek 式渲染器伪造定向速度模糊的完整规则【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage导读Motion-Blur Streak运动模糊拖尾是 OpenMontage 仓库所内嵌的hyperframes-animation技能中一条用于制作快速入场 / 镜头推近动效的原子规则位于.agents/skills/hyperframes-animation/rules/motion-blur-streak.md。由于 HyperFrames 的渲染器是可被 seek 的按帧采样、时间线可跳转它没有真实运动模糊所需的快门积分概念因此这条规则用假模糊模拟出元素拖着速度残影冲入画面、落位瞬间骤停变清晰的打击感。读完本文你将掌握两种实现路径定向 SVGfeGaussianBlur模糊 / 回声鬼影拖尾、配套的 HTML/CSS/GSAP 代码骨架、全部关键参数的取值区间以及它与 seek 安全、确定性渲染契约之间的耦合约束可直接在 HyperFrames 场景sceneHTML 中落地使用。一、为什么真正的运动模糊在 HyperFrames 里不可行HyperFrames 的渲染哲学是从 HTML 生成视频一个合成场景就是一个 HTML 文件DOM 用data-*属性声明时序data-start、data-duration、data-track-index、data-composition-id动画运行时是可 seek 的——渲染器会在任意时间点采样画面如同把一条暂停的时间线拨到某个位置。真实运动模糊是对快门时间内画面做积分而暂停的时间线没有快门的概念因此 per-frame逐帧真实运动模糊对 seek 渲染器不可用。这条规则的解决方案是伪造它用于快速元素飞入或硬切镜头推近场景。模糊度在最高速度时达到峰值、并在落位时归零——元素看起来是拖着一道速度残影冲进来到达瞬间骤停、锐利清晰。整个效果的关键在于耦合模糊包络与位移补间tween共享同一条缓动曲线和同一个时间窗口于是峰值模糊恰好落在峰值速度上元素一停下就瞬间清晰。值得强调的是HyperFrames 技能家族在 OpenMontage 中是作为一组完整技能目录引入的其版本来源与同步记录见.agents/skills/hyperframes/PROVENANCE.md而本规则属于其中hyperframes-animation的原子规则集——按.agents/skills/hyperframes-animation/SKILL.md的编排动画技能的工作方式是从 rules 索引里挑 2–4 条规则用一条暂停的 GSAP 时间线把它们粘合。在.agents/skills/hyperframes-animation/rules-index.md中本规则被收录在 Transition Motion转场与运动分类下与之同类的还有kinetic-beat-slam、spring-pop-entrance、depth-of-field-blur等因此它天然是这些运动感规则的互补选项。二、规则适用范围这条规则服务的是入场与镜头中段运动典型场景包括快速到达fast arrival短语、字形或品牌字标从画框外/景深后冲入一个节拍从镜头前高速掠过a beat that zooms past camera卡片砸进网格卡槽grid-card-assembleLogo 从虚焦中穿透进字标组合logo-assemble-lockup。它有明确的禁用边界绝不可用于非最后一帧的出场——一个模糊元素在合成中途冲出画框会被读成故障glitch而场景与场景之间的硬切出场是转场的职责参见.agents/skills/hyperframes-animation/transitions/overview.md不属于单元素模糊的范畴。两种实现路径一览路径机制适用场景代价/取舍A. 定向 SVG 模糊内联filterfeGaussianBlur stdDeviationX 0X 沿运动轴0 垂直运动轴GSAP 通过代理对象把X从峰值补间到 0onUpdate每帧写回setAttribute推荐默认值追求真正的定向涂抹观感需要 filter region 足够大避免裁切一个元素即完成B. 回声 / 鬼影拖尾2–4 个不透明度递减的重复副本沿运动向量向后错开随落位收拢进主角元素想要彩色 / 风格化的拖尾而非字面光学模糊无滤镜开销读出速度线式频闪拖尾两者都有限、确定、可安全 seek——这是它们能进 HyperFrames 合成的前提。三、工作原理让模糊包络骑在速度曲线上快速运动有它的速度剖面起步加速、峰值、减速直至落位。out族缓动expo.out、power4.out把速度前置——起步瞬间速度最高末端趋零。伪造模糊的关键就是把模糊或回声包络映射到同一条曲线上位移补间——元素从画框外/推后位置移动到静止变换飞入用x/y推近用scale采用快速out缓动持续MOVE_DUR模糊包络——与位移同一窗口、同一缓动涂抹值从PEAK_BLUR→0。因为缓动前置了速度、包络共享这条曲线最大模糊与最大速度恰好重合元素落位时模糊正好归零落位即清晰——到MOVE_START MOVE_DUR时刻元素位于静止变换且模糊为 0路径 A或所有回声收拢进主角路径 B随后以完全清晰的姿态停留在高潮驻留climax dwell阶段。路径 A 是通过代理对象补间滤镜的stdDeviation属性它是一个非 DOM-style 的数字属性GSAP 无法直接补间 SVG 属性所以要补间一个普通{ v: PEAK_BLUR }对象并在onUpdate中调用setAttribute写回。路径 B 则将鬼影放置在确定的向后偏移i * ECHO_STEP_PX上并在同一包络上淡出/收拢。从代码结构看这正对应 GSAP 适配器的通用约定动画注册到window.__timelines[composition-id]时间线必须paused: true供 HyperFrames 运行时统一 seek详细契约参见.agents/skills/hyperframes-animation/adapters/gsap.md与.agents/skills/hyperframes-animation/adapters/gsap-timeline-and-labels.md。四、HTML 骨架所有场景根节点都遵循统一的data-*声明data-composition-id即该场景在window.__timelines注册表中的键本规则默认叫streak-scene。路径 A —— 定向 SVG 模糊推荐默认div classscene idstreak-scene >div classscene idstreak-scene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {sceneBg}; font-family: {font}; overflow: hidden; /* 涂抹/回声在落位前会超出静止位置 */ } .streak-stage { position: relative; display: grid; place-items: center; } .streak-el { position: relative; z-index: 2; font-size: EL_FONT_SIZE; font-weight: 900; letter-spacing: EL_TRACKING; color: {textColor}; /* 路径 A 专用——引用定向滤镜路径 B 请省略此行 */ filter: url(#streak); will-change: transform, filter; } /* 路径 B 鬼影——与主角同形的字形透明度递减 */ .streak-ghost { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: EL_FONT_SIZE; font-weight: 900; letter-spacing: EL_TRACKING; color: {textColor}; opacity: 0; will-change: transform, opacity; pointer-events: none; }设计取向上拖尾效果要求元素要足够厚重大号加粗字形涂抹才有质量可拖、背景要足够干净纯色或低细节场忙碌背景会吞掉涂抹。六、GSAP 时间线路径 A —— 代理补间写回 SVG 属性!-- GSAP 3.x 全局 gsap 对象由运行时/脚手架按适配器约定引入见 hyperframes-animation/adapters/gsap.md -- script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // GSAP 不能直接补间 SVG 属性——补间代理对象每帧写回。 const blurNode document.getElementById(streak-blur); const blurProxy { v: PEAK_BLUR }; const writeBlur () blurNode.setAttribute(stdDeviation, ${blurProxy.v} 0); // 仅 X 轴 writeBlur(); // 首帧预置seek 到 t0 时应显示已涂抹的起始而不是一瞬间清晰的前置帧 // 位移以快速 out 缓动速度前置从画框外移动到静止位 tl.fromTo( #streak-el, { x: ENTER_FROM_X, opacity: 0 }, { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE }, MOVE_START, ); // 模糊包络SAME 窗口 SAME 缓动峰值模糊峰值速度落位归零 tl.to(blurProxy, { v: 0, duration: MOVE_DUR, ease: MOVE_EASE, onUpdate: writeBlur }, MOVE_START); window.__timelines[streak-scene] tl; /script这段代码示范了两个 HyperFrames 级技巧代理补间GSAP 只补间普通对象属性onUpdate写回setAttribute与首帧预置writeBlur()在 setup 时执行一次保证 seek 到第 0 帧渲染的是拖尾起点而非瞬间清晰的前置帧。路径 B —— 确定性鬼影收拢script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // 主角与路径 A 相同的快速 out 位移 tl.fromTo( #streak-el, { x: ENTER_FROM_X, opacity: 0 }, { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE }, MOVE_START, ); // 鬼影每个都从沿运动向量更靠后的位置按索引确定出发、更暗 // 并在同一缓动/窗口内收拢到主角上——落位时刚好全部消失。 const ghosts gsap.utils.toArray(.streak-ghost); ghosts.forEach((g) { const i Number(g.dataset.i); // 1..N-1在 HTML 中设定无 Math.random tl.fromTo( g, { x: ENTER_FROM_X - i * ECHO_STEP_PX, opacity: GHOST_BASE_OPACITY / i }, { x: 0, opacity: 0, duration: MOVE_DUR, ease: MOVE_EASE }, MOVE_START, ); }); window.__timelines[streak-scene] tl; /script鬼影的起始偏移与透明度都由索引i决定i * ECHO_STEP_PX与BASE / i保证每次 seek 的画面完全一致。七、变体Variations1. 垂直拖尾上升 / 下落入场把运动轴换掉位移补间用y替代x路径 A 用stdDeviation0 YY 轴模糊、X 为 0路径 B 用ENTER_FROM_Y与垂直错位偏移。一条向上冲入位的短语可与kinetic-type-beats的 rise-rotate 节拍搭配。2. 镜头推近scale 拖尾冲入字标组合不再平移而是元素冲向镜头scale: SCALE_FROM → 1配快速out缓动用对称的stdDeviationB B包络近似径向 / 变焦模糊因为涂抹是纵深向而非方向性两个轴都要模糊tl.fromTo( #streak-el, { scale: SCALE_FROM, opacity: 0 }, { scale: 1, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE }, MOVE_START, ); tl.to( blurProxy, { v: 0, duration: MOVE_DUR, ease: MOVE_EASE, onUpdate: () blurNode.setAttribute(stdDeviation, ${blurProxy.v} ${blurProxy.v}), }, MOVE_START, );这正是logo-assemble-lockup蓝图里的推近——字标从虚焦中顶出、在锁定瞬间锐利定住。3. 网格卡片错峰拖尾入场cards assemble针对grid-card-assemble每张卡从各自的后退偏移拖入卡槽、错峰排布。所有卡共享同一条缓动/窗口仅用索引派生延迟入场偏移与起始时间都由卡片索引决定不用Math.random每张卡落进卡槽的瞬间就是清晰的gsap.utils.toArray(.grid-card).forEach((card, i) { const at MOVE_START i * CARD_STAGGER; tl.fromTo( card, { x: ENTER_FROM_X, opacity: 0 }, { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE }, at, ); // 在相同 at 上的每卡模糊代理补间路径 A或每卡鬼影路径 B });4. 驻留拖尾whip 强调单一节拍对单条高速掠过的动能短语可让模糊比位置略慢一点消散位置用expo.out、模糊用power3.out元素先到、最后一丝涂抹再散去。默认仍是锁定包络此变体需克制使用。八、参数取值指南运动类参数参数取值效果约束MOVE_EASEexpo.out最硬 snap→power4.out硬砸默认→power3.out硬但稍柔out越硬 → 速度越前置 → 拖尾读起来越锐利、越晚才消解必须out族速度前置inOut/in会把峰值速度放到中/后期模糊-速度耦合断裂。位置与模糊必须同缓动除非刻意用 Hold-the-streakMOVE_DUR0.25–0.6 s越短越暴力甩入越长越像滑入拖尾失去冲击拖尾必须快——超过约 0.7 s 就不像速度模糊而像对焦拉动MOVE_START时间线中的入场点—在MOVE_START MOVE_DUR之后须留≥1 s 驻留再结束合成高潮 dwell若拖尾落在t DURATION − 0.2 s会读成一闪而过ENTER_FROM_X / Y元素在该轴上自身尺寸的 40–120%越大 → 行程越长 → 拖尾有更多跑道可读太小则没有速度感必须足够远以读成从画框外来路径 A —— SVG 模糊参数取值效果约束PEAK_BLUR8轻微→ 18默认→ 30极端甩动越高 → 峰值速度处涂抹越重≤约 30超过后元素开头几帧不可读变成消失后出现滤镜区域需 ≥-50% … 200%否则涂抹在盒边缘被裁SCALE_FROM推近变体1.3轻柔推→ 2.5猛烈穿透决定推近的侵略性—路径 B —— 回声拖尾参数取值效果约束N鬼影数2–4越多 → 越长越顺的涂抹4 读成频闪/卡顿而非拖尾由 HTML 里写多少个.streak-ghost决定ECHO_STEP_PX12–40 px越大 → 拖尾越铺开可见越小 → 更紧的似模糊簇N × ECHO_STEP_PX应 ≲ENTER_FROM_X让最远鬼影仍落在行程跑道内GHOST_BASE_OPACITY0.3淡→ 0.6重最近鬼影i 1的不透明度按BASE / i衰减≤约 0.6否则不透明鬼影会读成重复元素而非拖尾版式与排布参数取值说明/约束EL_FONT_SIZE / EL_TRACKING1080p 下建议 ≥120 px、字重 ≥800厚重展示字重才能让涂抹有质量可拖细字会被涂抹吞没到不可见CARD_STAGGER网格变体0.05–0.12 s足够紧才能读成一波组装而不是若干次独立到达模板令牌Tokens令牌含义{sceneBg}背景纯色/低细节场下拖尾最清晰繁忙背景会与涂抹互抢注意力{font}字体栈拖尾元素若是文字建议内嵌展示字面见.agents/skills/hyperframes-creative/references/typography.md{textColor}元素颜色路径 B 中鬼影继承此色若要更淡的拖尾可单独着色.streak-ghost{phrase}拖入的文字 / 字形 / 字标九、关键原则模糊峰值落在峰值速度、落位归零——这是规则全部精髓。位移补间与模糊/回声包络必须共享缓动与窗口二者锁定。若元素停止后模糊还滞留或模糊在元素已减速后才达到峰值读出来的是对焦拉动而非速度。始终用out族缓动——速度必须前置起步即快、减速进场。expo.out/power4.out/power3.out。in或inOut会把峰值速度放错位置耦合随即失效。模糊只沿运动轴定向路径 A——横向用stdDeviationX 0纵向用0 Y仅纵深/缩放推近才用B B。侧向移动配对称模糊看起来像失焦而不是速度。补间代理、写回属性路径 A——GSAP 补间普通{ v }对象onUpdate里setAttribute(stdDeviation, …)SVG 属性无法被直接补间且 setup 时必须预置一次让 seek 到t0就显示拖尾起点。鬼影按索引全确定路径 B——偏移i * ECHO_STEP_PX、透明度BASE / i绝不用Math.random生成拖尾每次 seek 画面一致。只做入场、绝不做合成中段出场——拖尾是一种到达。非末帧离开的模糊元素读起来是故障场景间出场交给转场.agents/skills/hyperframes-animation/transitions/overview.md。配得上这段锐利驻留——骤停后清晰元素必须驻留 ≥1 s。暴烈拖尾 ↔ 静止锐利落位的对比本身就是效果。重元素、干净底——细字与忙碌背景都会吞掉涂抹大号粗重的字块立在干净场地上才读得出来。十、关键约束HyperFrames 契约时间线必须暂停gsap.timeline({ paused: true })绝不能tl.play()。注册键 根节点data-composition-id写入window.__timelines。拖尾元素含鬼影不得加 CSStransition——它会独立于 HF seek 插值并造成闪烁运动与模糊只由 GSAP 驱动。无repeat/yoyo/ infinite——拖尾是单次有限到达只能用有限补间。无Math.random/Date.now——鬼影偏移/透明度与错峰均由索引派生保证每次 seek 确定。只用 GSAP 变换别名x、y、scale、rotation绝不补间width/height/left/top。补间filter经代理 →stdDeviation与opacity是可安全 seek 的。setup 时预置 SVGstdDeviation路径 A——播放前写一次让 seek 到首帧渲染的是拖尾起点而非一瞬间清晰的前置帧。滤镜区域必须慷慨路径 A——filter x-50% y-50% width200% height200%否则涂抹在元素盒边缘被裁切。场景容器overflow: hidden——涂抹/最远鬼影在运动途中会超出静止位置需将其约束在画框内。这些约束与.agents/skills/hyperframes-animation/SKILL.md顶部引用的hyperframes-core非协商规则单一暂停时间线、data-duration决定时长、禁repeat: -1、禁gsap.set后期场景片段等一脉相承布局常量须在 setup 时预算、运动只用变换别名等动画工艺约定也适用于本规则。十一、与其他规则、蓝图及技能的组合相邻规则Ruleskinetic-beat-slam.md——在节拍序列里用本条拖尾作为某一短语的入场scale-slam 拍本质上就是一次运动模糊飞入其起点从共享的BEATS[]数组读取center-outward-expansion.md——网格拖尾入场即中心外扩 每个元素行程上的速度模糊包络3d-text-depth-layers.md——给拖入的短语叠加挤出深度深度层跟随主角的变换scale-swap-transition.md——同一足迹状态互换的替代方案本条规则服务的是从画框外/纵深快速到达而非形态变换。在 OpenMontage 仓库的既有技能体系里也能找到实际引用skills/meta/bespoke-composition.md的组合清单中就把motion-blur-streak与kinetic-beat-slam、3d-text-depth-layers等规则并列作为回响幽灵拖尾类运动效果的候选——印证了这条规则在真实合成编排中的可组合地位。配套的 HyperFrames 技能/hyperframes-animation——out族缓动、代理驱动的onUpdate属性补间、锁定包络协调详见 .agents/skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md/hyperframes-creative——文字拖尾的展示字面选择.agents/skills/hyperframes-creative/references/typography.md与涂抹背后干净场地的构图.agents/skills/hyperframes-creative/references/video-composition.md/hyperframes-core——合成接线与确定性有限补间、无Math.random/hyperframes-cli——hyperframes lint/hyperframes validatevalidate 能捕获缺失的#streak-blur节点或未被引用的滤镜详见 .agents/skills/hyperframes-cli/references/lint-validate-inspect.md。十二、落地建议把本条规则投入实际场景时推荐的编排方式是先在 .agents/skills/hyperframes-animation/rules-index.md 确认选中的规则组合再按本文的 HTML/CSS/GSAP 骨架填写场景把上表中的占位常量MOVE_EASE、MOVE_DUR、PEAK_BLUR、ENTER_FROM_X等预计算为确定性常量最后用hyperframes validate校验滤镜节点与注册键。只要守住位移与模糊包络共享同一缓动窗口只做入场不做中段出场落位后驻留 ≥1 s所有随机量替换为索引派生这四条底线就能稳定产出那种冲入即定格的 HyperFrames 高速入场动效。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考