HyperFrames Kinetic Beat Slam 规则全解在 OpenMontage 中用一拍一字的“动能击打字排”做出打击乐般的节奏感【免费下载链接】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本文面向 OpenMontage 中 HyperFrames 动画技能簇.agents/skills/hyperframes-animation/的规则文档kinetic-beat-slam.md展开。它教你用一段共享的节拍时间轴让多个短句在不同“进入方式”下逐拍砸入画面、最终堆叠锁定成一个静止定格——这是 tagline、宣言片、hype 开场等“节奏感 / 打击感”文字向片段的实现配方。读完你将掌握如何用单一BEATS数组锁定整段的脉冲、如何为每句设计形态各异的入场、如何用“节奏镀铬元素”节拍器、节拍条让节拍可见以及如何在不破坏 HyperFrames 确定性渲染契约的前提下收束成终极定格。一、规则定位这个文档在技能库中扮演什么角色在 HyperFrames 的知识结构中动画知识被拆成“规则rules、蓝图blueprints、转场transitions、技法techniques与适配器adapters”五层蓝图是 4–5 个阶段的多相位场景模板而规则是原子化的“动画配方”。kinetic-beat-slam.md就属于最细粒度的规则层它专门回答一个问题——如何让文字“踩在节拍上”而不是“自己漂着”。规则文件的开头元数据给出了它的检索画像--- name: kinetic-beat-slam description: Percussive kinetic typography — short phrases slam in on a steady beat with distinct per-phrase entrances, optional rhythm chrome (metronome ticks, beat bar), then a locked finale. metadata: tags: text, kinetic, typography, beat, rhythm, slam, percussive, punchy ---从规则索引按text / kinetic / beat等标签即可路由到本条规则在编排层它对应的场景蓝图是 blueprints/kinetic-type-beats.md多相位动能字排场景逐拍换词、逐拍叠句、品牌收束。蓝图明确标注当“每拍一句短短语、使用共享节拍数组、每句有独立入场、步调恒定”时本规则是最佳匹配——例如蓝图中 Brand_Outro 以约 0.2s 步进的动词行军就直接点名由kinetic-beat-slam驱动。通用动画与“有节奏”的分水岭规则开篇就给出了本配方的核心判据普通动画和节奏动画的区别有三条——一个共享的 onset起始点数组驱动所有元素而不是散落的手调偏移每个短语的入场互不相同而不是整段复用一个入场函数可选“节奏镀铬”rhythm chrome元素把节拍“可视化”让观众能看见拍点。下面先按规则给出的三步“如何运作”再逐段拆解 HTML、CSS 与 GSAP 时间线。二、How It Works三段式骨架规则把动能击打字排的工作方式归纳为三个步骤只定义一次节拍。一个单一的BEATS [t0, t1, t2, …]数组单位秒构成整段的“节奏脊柱”。每个短语的入场、重音、节拍器 tick 都从这个数组读时间——整段作品锁定在同一个脉冲上而不是靠一堆手调偏移互相漂移。这是“有节奏感”最大的一根杠杆。让入场各不相同。短语 1 用 slam缩放 模糊短语 2 从侧面 snap 进来短语 3 升起并旋转。同样的“能量”不同的“形态”——如果三句都复用同一个punchIn()读起来就是“平的”。落地一个终场。所有短语锁进左对齐或居中的堆叠一条重音下划线横扫进来可选地用一个低幅度的连续脉冲在最后保持“呼吸”。这条三段式与蓝图 kinetic-type-beats 的“Scene 1 首拍落地 → Scene 2..N 原地换拍 → 末拍 resolve-and-hold”是同一套戏剧逻辑的微观版本规则负责“一拍怎么砸”蓝图负责“多拍怎么排”。三、节拍与缓动先选“攻击性格”再写时间轴规则的“Beat Easing”小节给出了入场缓动的离散选择表入场方式取决于你要的攻击性格GSAP ease攻击感受power4.out硬砸、快速落定 ⭐ 命中拍点的默认选择expo.out最硬的 snap侧面 snap、whip-inback.out(2)过冲弹出——用于重音不用在正文词circ.out带惯性的沉重升起两点硬性要求整段至少用 3 种不同的 easing——入场就是这段作品的“语气”全用power2.out会显得单调扁平这与 gsap-easing-and-stagger.md 中“easing 是语气、每个合成至少 3 种缓动”的适配器规则一脉相承保持短促——命中动画 0.35–0.6s退出动画 ≤0.25s节拍才能保持打击感。长淡入淡出会“杀死节拍”。补充适配器层的缓动词汇表便于把规则中的离散选择延展成整段设计的语气体系gsap-easing-and-stagger.md 把缓动家族按性格排序power1–power4是从轻柔到激进的减速曲线back(N)过冲后回落N 越大越夸张expo比 power4 更陡的极端加速sine平滑无硬边、适合呼吸与循环circ圆加速度、适合有惯性的升起。规则表里的circ.out正是“heavy rise with momentum”的那一档。四、HTML一个 clip 片段 可选节奏镀铬规则的 HTML 样板是一个 15 秒、位于第 1 轨的片段clipsection classclip>.kbs-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 120px 160px; /* title-safe margin */ box-sizing: border-box; } .kbs-line { font-family: Archivo Black, League Gothic, sans-serif; /* embedded display face */ font-size: 150px; line-height: 0.96; letter-spacing: -0.03em; color: #f5f5f5; will-change: transform, filter, opacity; } .kbs-line .verb { color: #ff5b2e; } /* one accent hue */ .kbs-metronome { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; } .kbs-metronome i { width: 6px; height: 28px; background: #ff5b2e; opacity: 0.25; }样式层的设计信号值得展开150px 展示级字号 letter-spacing: -0.03em收紧字距——这正是 video-composition.md 中“视频尺寸而非网页尺寸”的落地网页 32–48px 的头条字在视频上不可见展示字要 64–120px且视频编码会压缩字母细节字距要比网页更紧-0.03em ~ -0.05emwill-change: transform, filter, opacity显式声明要动画的三个属性是规则样板自带的性能标注单一重音色#ff5b2e只给动词其余保持米白/近黑——色彩纪律是“节奏不被杂色干扰”的一部分字体必须是内嵌的Archivo Black/League Gothic在 typography.md 的 18 个预打包家族内两者都只发行 weight 400不要再叠加 700/900离线确定性渲染、零网络请求。如果写成Anton/ 把Bebas Neue当作独立字体用就会踩坑——Bebas Neue是别名会静默解析成 League Gothic细节见“关键约束”。六、GSAP 时间线一条时间轴、一根节拍脊柱这是整条规则的“心脏”。完整样板如下script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // ONE tempo grid drives everything — phrases AND the metronome read it (no scattered offsets). const PULSE 0.4; // seconds per sub-beat (the grid) const BEATS [PULSE * 1, PULSE * 5, PULSE * 9]; // phrase onsets, on the grid // Distinct entrances per phrase (NOT one reused helper). tl.fromTo( #p1, { scale: 1.5, filter: blur(16px), opacity: 0 }, { scale: 1, filter: blur(0px), opacity: 1, duration: 0.5, ease: power4.out }, BEATS[0], ); tl.fromTo( #p2, { x: -320, opacity: 0 }, { x: 0, opacity: 1, duration: 0.45, ease: expo.out }, BEATS[1], ); tl.fromTo( #p3, { y: 90, rotation: 6, opacity: 0 }, { y: 0, rotation: 0, opacity: 1, duration: 0.55, ease: circ.out }, BEATS[2], ); // Rhythm chrome: each metronome tick flashes on the SAME grid (PULSE), not a magic offset. const ticks gsap.utils.toArray(.kbs-metronome i); ticks.forEach((tick, i) { tl.to( tick, { opacity: 1, duration: 0.08, yoyo: true, repeat: 1, ease: none }, PULSE * (i 1), ); }); // Finale hold: a low-amplitude breath on the locked stack. // floor (not ceil) so the repeat never overshoots>const ticks gsap.utils.toArray(.kbs-metronome i); ticks.forEach((tick, i) { tl.to(tick, { opacity: 1, duration: 0.08, yoyo: true, repeat: 1, ease: none }, PULSE * (i 1), ); });5 根 tick 条的闪动起点是PULSE × (i1)0.4s / 0.8s / 1.2s / 1.6s / 2.0s用的还是同一个 PULSE 网格。这正是“有节奏”的第三个判据落地节拍被“看见了”。镀铬元素是装饰性的若它必须在一段 shader 转场下存活需按 transitions/overview.md 的“Shader-Compatible CSS Rules”打标处理。6.4 终场呼吸Math.floor而不是Math.ceil收尾段是一个低幅度scale 1.01的 yoyo 呼吸脉冲从BEATS[2] 0.7 ≈ 4.3s持续到 15sconst holdStart BEATS[2] 0.7, cycle 1.6, holdDur 15 - holdStart; tl.to(.kbs-stage, { scale: 1.01, duration: cycle / 2, ease: sine.inOut, yoyo: true, repeat: Math.max(0, Math.floor(holdDur / cycle) - 1), }, holdStart);这里有两个“一眼看过去反直觉、实际是确定性渲染红线”的细节规则逐字强调也与 determinism-rules.md 的公式完全一致floor而不是ceilceil会让 repeat 越过data-duration15s触发gsap_repeat_ceil_overshootlint 规则HyperFrames 逐帧 seek超出片长意味着渲染超出预期长度Math.max(0, …)护栏当剩余保持时间不足两个周期时floor(holdDur / cycle) - 1会变成负数而GSAP 把负 repeat 解释为 -1 无限循环 非确定性——这是直接违反核心契约的写法。max(0, …)保证重复次数永远是有限、非负的。“低幅度终场呼吸”这个手法本身来自兄弟规则 sine-wave-loop.md默认幅度 0.008–0.015此处 scale 1.01 即 0.01处于“几乎不可察觉的呼吸”区间且只施加一次、由 GSAP 时间线驱动而非 CSSkeyframes避免与 HF 的 seek 时钟脱钩。6.5 注册与合成时间线创建于页面初始化时、保持paused并注册到全局注册表window.__timelines[main]。HyperFrames 引擎通过 seek 该注册表里每一条时间线来逐帧取像素因此注册键必须与根元素上的data-composition-id严格相等hyperframes-core的要求示例片段中键名写作main是因为该片段在完整项目中会被外层根元素包裹——规则在“关键约束”里明确写了这条Registry key contenteditable="false">【免费下载链接】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），仅供参考 HyperFrames Kinetic Beat Slam 规则全解：在 OpenMontage 中用一拍一字的“动能击打字排”做出打击乐般的节奏感
HyperFrames Kinetic Beat Slam 规则全解在 OpenMontage 中用一拍一字的“动能击打字排”做出打击乐般的节奏感【免费下载链接】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本文面向 OpenMontage 中 HyperFrames 动画技能簇.agents/skills/hyperframes-animation/的规则文档kinetic-beat-slam.md展开。它教你用一段共享的节拍时间轴让多个短句在不同“进入方式”下逐拍砸入画面、最终堆叠锁定成一个静止定格——这是 tagline、宣言片、hype 开场等“节奏感 / 打击感”文字向片段的实现配方。读完你将掌握如何用单一BEATS数组锁定整段的脉冲、如何为每句设计形态各异的入场、如何用“节奏镀铬元素”节拍器、节拍条让节拍可见以及如何在不破坏 HyperFrames 确定性渲染契约的前提下收束成终极定格。一、规则定位这个文档在技能库中扮演什么角色在 HyperFrames 的知识结构中动画知识被拆成“规则rules、蓝图blueprints、转场transitions、技法techniques与适配器adapters”五层蓝图是 4–5 个阶段的多相位场景模板而规则是原子化的“动画配方”。kinetic-beat-slam.md就属于最细粒度的规则层它专门回答一个问题——如何让文字“踩在节拍上”而不是“自己漂着”。规则文件的开头元数据给出了它的检索画像--- name: kinetic-beat-slam description: Percussive kinetic typography — short phrases slam in on a steady beat with distinct per-phrase entrances, optional rhythm chrome (metronome ticks, beat bar), then a locked finale. metadata: tags: text, kinetic, typography, beat, rhythm, slam, percussive, punchy ---从规则索引按text / kinetic / beat等标签即可路由到本条规则在编排层它对应的场景蓝图是 blueprints/kinetic-type-beats.md多相位动能字排场景逐拍换词、逐拍叠句、品牌收束。蓝图明确标注当“每拍一句短短语、使用共享节拍数组、每句有独立入场、步调恒定”时本规则是最佳匹配——例如蓝图中 Brand_Outro 以约 0.2s 步进的动词行军就直接点名由kinetic-beat-slam驱动。通用动画与“有节奏”的分水岭规则开篇就给出了本配方的核心判据普通动画和节奏动画的区别有三条——一个共享的 onset起始点数组驱动所有元素而不是散落的手调偏移每个短语的入场互不相同而不是整段复用一个入场函数可选“节奏镀铬”rhythm chrome元素把节拍“可视化”让观众能看见拍点。下面先按规则给出的三步“如何运作”再逐段拆解 HTML、CSS 与 GSAP 时间线。二、How It Works三段式骨架规则把动能击打字排的工作方式归纳为三个步骤只定义一次节拍。一个单一的BEATS [t0, t1, t2, …]数组单位秒构成整段的“节奏脊柱”。每个短语的入场、重音、节拍器 tick 都从这个数组读时间——整段作品锁定在同一个脉冲上而不是靠一堆手调偏移互相漂移。这是“有节奏感”最大的一根杠杆。让入场各不相同。短语 1 用 slam缩放 模糊短语 2 从侧面 snap 进来短语 3 升起并旋转。同样的“能量”不同的“形态”——如果三句都复用同一个punchIn()读起来就是“平的”。落地一个终场。所有短语锁进左对齐或居中的堆叠一条重音下划线横扫进来可选地用一个低幅度的连续脉冲在最后保持“呼吸”。这条三段式与蓝图 kinetic-type-beats 的“Scene 1 首拍落地 → Scene 2..N 原地换拍 → 末拍 resolve-and-hold”是同一套戏剧逻辑的微观版本规则负责“一拍怎么砸”蓝图负责“多拍怎么排”。三、节拍与缓动先选“攻击性格”再写时间轴规则的“Beat Easing”小节给出了入场缓动的离散选择表入场方式取决于你要的攻击性格GSAP ease攻击感受power4.out硬砸、快速落定 ⭐ 命中拍点的默认选择expo.out最硬的 snap侧面 snap、whip-inback.out(2)过冲弹出——用于重音不用在正文词circ.out带惯性的沉重升起两点硬性要求整段至少用 3 种不同的 easing——入场就是这段作品的“语气”全用power2.out会显得单调扁平这与 gsap-easing-and-stagger.md 中“easing 是语气、每个合成至少 3 种缓动”的适配器规则一脉相承保持短促——命中动画 0.35–0.6s退出动画 ≤0.25s节拍才能保持打击感。长淡入淡出会“杀死节拍”。补充适配器层的缓动词汇表便于把规则中的离散选择延展成整段设计的语气体系gsap-easing-and-stagger.md 把缓动家族按性格排序power1–power4是从轻柔到激进的减速曲线back(N)过冲后回落N 越大越夸张expo比 power4 更陡的极端加速sine平滑无硬边、适合呼吸与循环circ圆加速度、适合有惯性的升起。规则表里的circ.out正是“heavy rise with momentum”的那一档。四、HTML一个 clip 片段 可选节奏镀铬规则的 HTML 样板是一个 15 秒、位于第 1 轨的片段clipsection classclip>.kbs-stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 120px 160px; /* title-safe margin */ box-sizing: border-box; } .kbs-line { font-family: Archivo Black, League Gothic, sans-serif; /* embedded display face */ font-size: 150px; line-height: 0.96; letter-spacing: -0.03em; color: #f5f5f5; will-change: transform, filter, opacity; } .kbs-line .verb { color: #ff5b2e; } /* one accent hue */ .kbs-metronome { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; } .kbs-metronome i { width: 6px; height: 28px; background: #ff5b2e; opacity: 0.25; }样式层的设计信号值得展开150px 展示级字号 letter-spacing: -0.03em收紧字距——这正是 video-composition.md 中“视频尺寸而非网页尺寸”的落地网页 32–48px 的头条字在视频上不可见展示字要 64–120px且视频编码会压缩字母细节字距要比网页更紧-0.03em ~ -0.05emwill-change: transform, filter, opacity显式声明要动画的三个属性是规则样板自带的性能标注单一重音色#ff5b2e只给动词其余保持米白/近黑——色彩纪律是“节奏不被杂色干扰”的一部分字体必须是内嵌的Archivo Black/League Gothic在 typography.md 的 18 个预打包家族内两者都只发行 weight 400不要再叠加 700/900离线确定性渲染、零网络请求。如果写成Anton/ 把Bebas Neue当作独立字体用就会踩坑——Bebas Neue是别名会静默解析成 League Gothic细节见“关键约束”。六、GSAP 时间线一条时间轴、一根节拍脊柱这是整条规则的“心脏”。完整样板如下script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // ONE tempo grid drives everything — phrases AND the metronome read it (no scattered offsets). const PULSE 0.4; // seconds per sub-beat (the grid) const BEATS [PULSE * 1, PULSE * 5, PULSE * 9]; // phrase onsets, on the grid // Distinct entrances per phrase (NOT one reused helper). tl.fromTo( #p1, { scale: 1.5, filter: blur(16px), opacity: 0 }, { scale: 1, filter: blur(0px), opacity: 1, duration: 0.5, ease: power4.out }, BEATS[0], ); tl.fromTo( #p2, { x: -320, opacity: 0 }, { x: 0, opacity: 1, duration: 0.45, ease: expo.out }, BEATS[1], ); tl.fromTo( #p3, { y: 90, rotation: 6, opacity: 0 }, { y: 0, rotation: 0, opacity: 1, duration: 0.55, ease: circ.out }, BEATS[2], ); // Rhythm chrome: each metronome tick flashes on the SAME grid (PULSE), not a magic offset. const ticks gsap.utils.toArray(.kbs-metronome i); ticks.forEach((tick, i) { tl.to( tick, { opacity: 1, duration: 0.08, yoyo: true, repeat: 1, ease: none }, PULSE * (i 1), ); }); // Finale hold: a low-amplitude breath on the locked stack. // floor (not ceil) so the repeat never overshoots>const ticks gsap.utils.toArray(.kbs-metronome i); ticks.forEach((tick, i) { tl.to(tick, { opacity: 1, duration: 0.08, yoyo: true, repeat: 1, ease: none }, PULSE * (i 1), ); });5 根 tick 条的闪动起点是PULSE × (i1)0.4s / 0.8s / 1.2s / 1.6s / 2.0s用的还是同一个 PULSE 网格。这正是“有节奏”的第三个判据落地节拍被“看见了”。镀铬元素是装饰性的若它必须在一段 shader 转场下存活需按 transitions/overview.md 的“Shader-Compatible CSS Rules”打标处理。6.4 终场呼吸Math.floor而不是Math.ceil收尾段是一个低幅度scale 1.01的 yoyo 呼吸脉冲从BEATS[2] 0.7 ≈ 4.3s持续到 15sconst holdStart BEATS[2] 0.7, cycle 1.6, holdDur 15 - holdStart; tl.to(.kbs-stage, { scale: 1.01, duration: cycle / 2, ease: sine.inOut, yoyo: true, repeat: Math.max(0, Math.floor(holdDur / cycle) - 1), }, holdStart);这里有两个“一眼看过去反直觉、实际是确定性渲染红线”的细节规则逐字强调也与 determinism-rules.md 的公式完全一致floor而不是ceilceil会让 repeat 越过data-duration15s触发gsap_repeat_ceil_overshootlint 规则HyperFrames 逐帧 seek超出片长意味着渲染超出预期长度Math.max(0, …)护栏当剩余保持时间不足两个周期时floor(holdDur / cycle) - 1会变成负数而GSAP 把负 repeat 解释为 -1 无限循环 非确定性——这是直接违反核心契约的写法。max(0, …)保证重复次数永远是有限、非负的。“低幅度终场呼吸”这个手法本身来自兄弟规则 sine-wave-loop.md默认幅度 0.008–0.015此处 scale 1.01 即 0.01处于“几乎不可察觉的呼吸”区间且只施加一次、由 GSAP 时间线驱动而非 CSSkeyframes避免与 HF 的 seek 时钟脱钩。6.5 注册与合成时间线创建于页面初始化时、保持paused并注册到全局注册表window.__timelines[main]。HyperFrames 引擎通过 seek 该注册表里每一条时间线来逐帧取像素因此注册键必须与根元素上的data-composition-id严格相等hyperframes-core的要求示例片段中键名写作main是因为该片段在完整项目中会被外层根元素包裹——规则在“关键约束”里明确写了这条Registry key contenteditable="false">【免费下载链接】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），仅供参考