OpenMontage 纵向弹簧跑马灯Vertical Spring Ticker用可累加 Spring 物理实现老虎机式分步滚动的完整实战指南【免费下载链接】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 动画技能集的原子运动规则 vertical-spring-ticker.md 展开讲解如何在被遮罩容器内用多个相加additive的 spring 弹簧产生逐级 Y 轴位移从而模拟老虎机 click-click-click节奏的纵向跑马灯Ticker。读完本文你将掌握容器与内层堆叠的像素级等高布局约束、translateY -ITEM_HEIGHT × Σ spring.progress的累加变换模型、GSAP 暂停时间线上的back.out弹簧逐级触发写法以及 STEPS / STEP_DUR / BOUNCE_FACTOR 等参数取值方法论可直接用于价格计数器、能力词滚动、品牌口号切换等节奏型动效场景。规则定位一条原子配方级别的动画规则在本仓库中该文档位于 hyperframes-animation 技能的rules/目录下属于一套原子运动规则之一。根据技能入口说明动画创作推荐的默认路径是从rules-index.md挑选 2~4 条规则用一条暂停的 GSAP 时间线single paused timeline把它们组合起来。本规则即该目录下与文本滚动 / 弹簧 / 序列标签对应的配方其 front-matter 元数据标记为text, ticker, spring, scroll, vertical, slot-machine, sequence。HyperFrames 的核心理念是从 HTML 渲染视频每个合成composition是一个 HTML 文件通过data-*属性声明时间与结构动画运行时可被逐帧 seek所有时间线默认paused: true由渲染框架统一驱动。本规则的完整基础契约见 hyperframes-core 的>div classscene idticker-scene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {bgColor}; font-family: {font}; } .stack { display: flex; flex-direction: column; align-items: center; gap: STACK_GAP; } .eyebrow { font-size: EYEBROW_FONT_SIZE; font-weight: 800; letter-spacing: 14px; text-transform: uppercase; color: {accentColor}; } /* MANDATORY: container height matches the per-item height exactly */ .ticker { width: TICKER_WIDTH; height: ITEM_HEIGHT; /* MUST match .item height */ overflow: hidden; border-top: 2px solid {dividerColor}; border-bottom: 2px solid {dividerColor}; position: relative; } .stack-inner { display: flex; flex-direction: column; /* MANDATORY for vertical ticker */ will-change: transform; } .item { height: ITEM_HEIGHT; /* MUST equal .ticker height */ display: flex; align-items: center; justify-content: center; font-size: ITEM_FONT_SIZE; font-weight: 900; letter-spacing: 8px; text-transform: uppercase; color: {textColor}; /* font-variant-numeric: tabular-nums; — for numeric tickers */ } .brand { font-size: BRAND_FONT_SIZE; font-weight: 800; letter-spacing: 10px; color: {accentColor}; text-transform: uppercase; }CSS 层有四处不容妥协的硬约束.ticker高度必须等于.item高度height: ITEM_HEIGHT两处一致。这是遮罩窗口语义的根基——窗口正好显示一条条目逐格进入窗口。若容器 200px 而条目 220px每一步都会在窗口上/下露出半截条目边沿。overflow: hidden只加在容器.ticker上绝不加在内层.stack-inner上——遮罩就是窗口本身内层堆叠需要自由向下延伸。.stack-inner必须flex-direction: column——这是纵向堆叠的前提若写成 row条目将变成水平排列整条规则失效。.stack-inner必须will-change: transform——每条规则在 Key Principles / Critical Constraints 中反复强调因为累加模型下每秒钟会产生大量小幅 transform 更新需要向浏览器提示该元素将被频繁合成。GSAP Timeline弹簧累加模型脚本以下为规则核心脚本来自 vertical-spring-ticker.md 的 GSAP Timeline 章节STEPS / STEP_DUR / STEP_START / STEP_SPACING / BOUNCE_FACTOR / BRAND_*为可配置常量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 }); const innerEl document.getElementById(stack-inner); // Each spring object holds a 0→1 progress; they accumulate to a step-counter. // Sum * -ITEM_HEIGHT becomes translateY. const springs Array.from({ length: STEPS }, () ({ p: 0 })); function applyTransform() { const sumP springs.reduce((acc, s) acc s.p, 0); innerEl.style.transform translateY(${-sumP * ITEM_HEIGHT}px); } applyTransform(); // initial state // Fire each spring sequentially with overlap — each one snaps in one step springs.forEach((spring, i) { tl.to( spring, { p: 1, duration: STEP_DUR, ease: back.out(${BOUNCE_FACTOR}), onUpdate: applyTransform, }, STEP_START i * STEP_SPACING, ); }); // Footer reveals after the ticker settles on the final item. tl.from( .brand, { opacity: 0, y: BRAND_Y, duration: BRAND_FADE_DUR, ease: power3.out }, STEP_START STEPS * STEP_SPACING BRAND_DELAY, ); window.__timelines[ticker-scene] tl; /script逐段拆解这段脚本的设计逻辑gsap.timeline({ paused: true })这是 HyperFrames 的全套非协商性约束之一见 SKILL.md 的 Critical Constraints时间线必须暂停交由框架 seek 驱动保证确定性渲染无Math.random、无Date.now、无repeat: -1。springs数组每个弹簧对象持有p: 0 → 1的进度充当步进计数器。初始调用一次applyTransform()让位移处于 0 态。applyTransform()在onUpdate中反复执行Σp × -ITEM_HEIGHT并直接写style.transform。这正是规则强调的additive 技巧——弹簧们在同一变换上叠加各自贡献。位置参数STEP_START i * STEP_SPACING让每个弹簧依序错峰启动当STEP_SPACING ≤ STEP_DUR时前一个弹簧尚未完全沉降下一个就已触发前后弹簧进度在时间上重叠叠加位移才成立。ease: back.out(BOUNCE_FACTOR)back缓动天然带有越过终点再回弹的过冲。onUpdate只负责把弹簧当前值映射到位移回弹曲线由 GSAP 缓动本身提供无需手写弹簧积分。尾部 reveal在最后一个弹簧启动时刻STEP_START STEPS * STEP_SPACING之后再加上BRAND_DELAY让底部队列文字footer在跑马灯完全落定后才淡入避免两条动效争抢注意力。关于布局常量的风格hyperframes-animation SKILL.md 还有一条补充纪律布局常量必须预计算绝不能在 tween 时刻用getBoundingClientRect()推导位置——因为渲染器是并行采样tween 时的 DOM 测量会失步。示例文件把ITEM_HEIGHT204、TIMING.tickerTrigger2.35等全部收敛进顶部常量区正是这一纪律的实践。参数选型指南How to Choose Values规则文档给出了完整且带取值范围与约束的参数目录这里完整继承并按表格整理便于落地时快速对照尺寸与布局参数含义建议与约束ITEM_HEIGHT每个跑马灯槽位的高度同时就是遮罩窗口的高度约为ITEM_FONT_SIZE × 1.25须能容纳大写字母降部不被裁切。.ticker与.item高度必须像素级相等否则会出现半截条目探出遮罩。参考proof-logo-chain.html 取204px对应163px × 1.25TICKER_WIDTH遮罩窗口的宽度宽到能容纳最长条目且不出现省略号通常为视口宽度的 30%~60%EYEBROW_FONT_SIZE / ITEM_FONT_SIZE / BRAND_FONT_SIZE / STACK_GAP排版与布局缩放条目是视觉焦点字号应比 eyebrow/footer 大 4~8 倍节拍与时长决定click手感参数含义建议与约束STEPS相加弹簧的数量 状态切换次数不是条目数通常 1~4每个 step 就是一次click。STEPS ≤ itemCount − 1可见条目之下有多少条目你最多只能滚多远。参考示例用1两态之间单次滚轮STEP_DUR每个弹簧 tween 的时长0.3~0.7s低于 0.3s 过冲几乎不可见高于 0.7s 就退化成滑动而非点击。参考示例0.45sSTEP_SPACING相邻弹簧启动时间的间隔秒0.3~0.5s太近步与步糊在一起像线性滚动太远则显得懒散。STEP_SPACING ≤ STEP_DUR——前一步仍在沉降时下一步就已触发这正是可相加成立的前提STEP_START第一个弹簧的启动时刻0 及以上需排在前置节拍之后BOUNCE_FACTORback.out(BOUNCE_FACTOR)每一步的过冲强度1.4轻柔点击→ 2.0干脆点击→ 2.5用于高潮步的卡通式转圈后落定。低端读作精致的 UI高端读作赌场/综艺尾部 Revealfooter 落定后的呈现参数含义建议与约束BRAND_DELAY最后一步结束到 footer 出现之间的间隔秒0.2~0.5s留给最后的过冲完成沉降避免下一条动效提前抢镜BRAND_FADE_DURfooter 淡入时长0.4~0.7sBRAND_Yfooter 淡入前的初始纵向偏移px8~24 px越大越有砸进来的感觉越小越轻柔色彩与字体令牌{bgColor} / {accentColor} / {textColor} / {dividerColor}语义化颜色令牌accent 只留给 eyebrow 与 footer让跑马灯条目保持中性形成主次信息层级。{font}基础字体栈。若做数字跑马灯额外加font-variant-numeric: tabular-nums保证每一位数字宽度恒定。四种变体Variations规则除了基准实现还给出四种可在不同文案形态下直接套用的变体1. 数字跑马灯价格 / 计数器滚动把文本条目替换为数字序列并按十进制数位个位、十位、百位……分别使用同一套弹簧步进模式。必须加font-variant-numeric: tabular-nums以保证数字宽度稳定普通字体中1与0宽度不一致会破坏逐位对齐。2. 反向倒计时反转位移符号transform: translateY(${sumP * ITEM_HEIGHT}px)去掉负号并把条目按逆序排列即呈现倒计时语义。3. 连续无限滚动无沉降如新闻字幕如果想永远循环如新闻跑马灯使用线性 ease的单条长 tween把条目列表复制一份当位移超过总高度时复位。注意规则明确声明这属于另一个模式不是本规则——连续运动应参考 sine-wave-loop.md连续 vs 本规则的离散步进语义二者有清晰边界。4. 分组间停顿转完再落戏剧感把若干个快速弹簧步组合在一起STEP_SPACING取小值接一段类似BRAND_DELAY的较长停顿最后以一个更大BOUNCE_FACTOR的戏剧化收尾步落定。停顿处正是观众视线锁定的地方。Key Principles关键原则速查规则提炼出的七条原则可作为实现或 review 时的检查清单容器高度必须等于条目高度——否则条目无法干净地卡进可见窗口容器 200px / 条目 220px每一步都会在窗口上/下露出半截条目。overflow: hidden放在容器而不是内层堆叠上——遮罩即窗口内部堆叠可自由向下延伸。内层堆叠必须flex-direction: column——row 会让条目横排纵向滚动不成立。步间距要小于步时长——重叠是弹簧可相加的成因也是 click click 节拍的来源不重叠的步读起来就是线性滚动。每一步都用back.out——过冲才是点击感的来源linear 或只出不回的 ease 会丢失老虎机手感。在onUpdate中对弹簧求和而不要直接 tween 最终位置——加性技巧的核心每个弹簧贡献自己的一次 snap。⚠️ 不要在步与步之间用innerHTML替换条目——跑马灯是通过位移移动同一批条目一旦替换内容上一条目会以新条目的身份可见幻象即刻破碎。⚠️ 收尾高潮的驻留dwell应 ≥ 1s——参见 hyperframes-animation 技能级通用约束在 SKILL.md 的 Critical Constraints 体系内。Critical Constraints本规则的硬性边界时间线必须暂停gsap.timeline({ paused: true })注册键 data-composition-idwindow.__timelines[id]必须与根元素一致.stack-inner上不能有 CSStransition——会与加性 transform 互相竞争造成位移错乱.stack-inner上必须will-change: transform——因为每秒钟有大量小幅 transform 更新所有条目必须像素级等高——高度不一致会导致累计漂移数字跑马灯必须font-variant-numeric: tabular-nums——可变数字宽度会破坏逐位对齐。组合用法把跑马灯嵌入更大节奏规则不是孤立存在的它明确给出可与之组装的邻近配方均位于 .agents/skills/hyperframes-animation/rules/reactive-displacement.md让跑马灯被进入的元素推走——退出动画从进入弹簧数学派生制造因果联系A 是因为被 B 撞到才动的scale-swap-transition.md跑马灯在最终状态落定后整体 scale 缩小退场同时一个缩放的副标题入场取而代之形成伪变形转场press-release-spring.md用按下-释放弹簧链作为触发源——按钮被按下时驱动跑马灯开转。在技能路由层面本规则与以下 HyperFrames 技能配套使用详见 hyperframes-animation SKILL.md/hyperframes-animation——提供加性弹簧 tween 的 onUpdate 手法本规则默认归属/hyperframes-core——合成接线data-*契约、clip、轨道/hyperframes-cli——hyperframes lint / validate / inspect / preview / render开发循环。结语与进一步调试纵向弹簧跑马灯是本仓库 rules-index.md 中文本滚动 / 序列类目下的一条高复用原子配方。它的精髓可浓缩为一句话用 N 个相加的弹簧代替一次线性位移让滚动变成节拍。写作完成后建议用 animation-map.mjs 生成动画地图做编排审计检查死区、stagger 一致性与生命周期告警并回到规则的七条原则逐条过审——尤其确认.ticker与.item高度一致、overflow只在外层、onUpdate求和而非整体 tween 这三点它们共同决定了老虎机手感是否成立。【免费下载链接】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），仅供参考 OpenMontage 纵向弹簧跑马灯（Vertical Spring Ticker）：用可累加 Spring 物理实现老虎机式分步滚动的完整实战指南
OpenMontage 纵向弹簧跑马灯Vertical Spring Ticker用可累加 Spring 物理实现老虎机式分步滚动的完整实战指南【免费下载链接】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 动画技能集的原子运动规则 vertical-spring-ticker.md 展开讲解如何在被遮罩容器内用多个相加additive的 spring 弹簧产生逐级 Y 轴位移从而模拟老虎机 click-click-click节奏的纵向跑马灯Ticker。读完本文你将掌握容器与内层堆叠的像素级等高布局约束、translateY -ITEM_HEIGHT × Σ spring.progress的累加变换模型、GSAP 暂停时间线上的back.out弹簧逐级触发写法以及 STEPS / STEP_DUR / BOUNCE_FACTOR 等参数取值方法论可直接用于价格计数器、能力词滚动、品牌口号切换等节奏型动效场景。规则定位一条原子配方级别的动画规则在本仓库中该文档位于 hyperframes-animation 技能的rules/目录下属于一套原子运动规则之一。根据技能入口说明动画创作推荐的默认路径是从rules-index.md挑选 2~4 条规则用一条暂停的 GSAP 时间线single paused timeline把它们组合起来。本规则即该目录下与文本滚动 / 弹簧 / 序列标签对应的配方其 front-matter 元数据标记为text, ticker, spring, scroll, vertical, slot-machine, sequence。HyperFrames 的核心理念是从 HTML 渲染视频每个合成composition是一个 HTML 文件通过data-*属性声明时间与结构动画运行时可被逐帧 seek所有时间线默认paused: true由渲染框架统一驱动。本规则的完整基础契约见 hyperframes-core 的>div classscene idticker-scene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {bgColor}; font-family: {font}; } .stack { display: flex; flex-direction: column; align-items: center; gap: STACK_GAP; } .eyebrow { font-size: EYEBROW_FONT_SIZE; font-weight: 800; letter-spacing: 14px; text-transform: uppercase; color: {accentColor}; } /* MANDATORY: container height matches the per-item height exactly */ .ticker { width: TICKER_WIDTH; height: ITEM_HEIGHT; /* MUST match .item height */ overflow: hidden; border-top: 2px solid {dividerColor}; border-bottom: 2px solid {dividerColor}; position: relative; } .stack-inner { display: flex; flex-direction: column; /* MANDATORY for vertical ticker */ will-change: transform; } .item { height: ITEM_HEIGHT; /* MUST equal .ticker height */ display: flex; align-items: center; justify-content: center; font-size: ITEM_FONT_SIZE; font-weight: 900; letter-spacing: 8px; text-transform: uppercase; color: {textColor}; /* font-variant-numeric: tabular-nums; — for numeric tickers */ } .brand { font-size: BRAND_FONT_SIZE; font-weight: 800; letter-spacing: 10px; color: {accentColor}; text-transform: uppercase; }CSS 层有四处不容妥协的硬约束.ticker高度必须等于.item高度height: ITEM_HEIGHT两处一致。这是遮罩窗口语义的根基——窗口正好显示一条条目逐格进入窗口。若容器 200px 而条目 220px每一步都会在窗口上/下露出半截条目边沿。overflow: hidden只加在容器.ticker上绝不加在内层.stack-inner上——遮罩就是窗口本身内层堆叠需要自由向下延伸。.stack-inner必须flex-direction: column——这是纵向堆叠的前提若写成 row条目将变成水平排列整条规则失效。.stack-inner必须will-change: transform——每条规则在 Key Principles / Critical Constraints 中反复强调因为累加模型下每秒钟会产生大量小幅 transform 更新需要向浏览器提示该元素将被频繁合成。GSAP Timeline弹簧累加模型脚本以下为规则核心脚本来自 vertical-spring-ticker.md 的 GSAP Timeline 章节STEPS / STEP_DUR / STEP_START / STEP_SPACING / BOUNCE_FACTOR / BRAND_*为可配置常量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 }); const innerEl document.getElementById(stack-inner); // Each spring object holds a 0→1 progress; they accumulate to a step-counter. // Sum * -ITEM_HEIGHT becomes translateY. const springs Array.from({ length: STEPS }, () ({ p: 0 })); function applyTransform() { const sumP springs.reduce((acc, s) acc s.p, 0); innerEl.style.transform translateY(${-sumP * ITEM_HEIGHT}px); } applyTransform(); // initial state // Fire each spring sequentially with overlap — each one snaps in one step springs.forEach((spring, i) { tl.to( spring, { p: 1, duration: STEP_DUR, ease: back.out(${BOUNCE_FACTOR}), onUpdate: applyTransform, }, STEP_START i * STEP_SPACING, ); }); // Footer reveals after the ticker settles on the final item. tl.from( .brand, { opacity: 0, y: BRAND_Y, duration: BRAND_FADE_DUR, ease: power3.out }, STEP_START STEPS * STEP_SPACING BRAND_DELAY, ); window.__timelines[ticker-scene] tl; /script逐段拆解这段脚本的设计逻辑gsap.timeline({ paused: true })这是 HyperFrames 的全套非协商性约束之一见 SKILL.md 的 Critical Constraints时间线必须暂停交由框架 seek 驱动保证确定性渲染无Math.random、无Date.now、无repeat: -1。springs数组每个弹簧对象持有p: 0 → 1的进度充当步进计数器。初始调用一次applyTransform()让位移处于 0 态。applyTransform()在onUpdate中反复执行Σp × -ITEM_HEIGHT并直接写style.transform。这正是规则强调的additive 技巧——弹簧们在同一变换上叠加各自贡献。位置参数STEP_START i * STEP_SPACING让每个弹簧依序错峰启动当STEP_SPACING ≤ STEP_DUR时前一个弹簧尚未完全沉降下一个就已触发前后弹簧进度在时间上重叠叠加位移才成立。ease: back.out(BOUNCE_FACTOR)back缓动天然带有越过终点再回弹的过冲。onUpdate只负责把弹簧当前值映射到位移回弹曲线由 GSAP 缓动本身提供无需手写弹簧积分。尾部 reveal在最后一个弹簧启动时刻STEP_START STEPS * STEP_SPACING之后再加上BRAND_DELAY让底部队列文字footer在跑马灯完全落定后才淡入避免两条动效争抢注意力。关于布局常量的风格hyperframes-animation SKILL.md 还有一条补充纪律布局常量必须预计算绝不能在 tween 时刻用getBoundingClientRect()推导位置——因为渲染器是并行采样tween 时的 DOM 测量会失步。示例文件把ITEM_HEIGHT204、TIMING.tickerTrigger2.35等全部收敛进顶部常量区正是这一纪律的实践。参数选型指南How to Choose Values规则文档给出了完整且带取值范围与约束的参数目录这里完整继承并按表格整理便于落地时快速对照尺寸与布局参数含义建议与约束ITEM_HEIGHT每个跑马灯槽位的高度同时就是遮罩窗口的高度约为ITEM_FONT_SIZE × 1.25须能容纳大写字母降部不被裁切。.ticker与.item高度必须像素级相等否则会出现半截条目探出遮罩。参考proof-logo-chain.html 取204px对应163px × 1.25TICKER_WIDTH遮罩窗口的宽度宽到能容纳最长条目且不出现省略号通常为视口宽度的 30%~60%EYEBROW_FONT_SIZE / ITEM_FONT_SIZE / BRAND_FONT_SIZE / STACK_GAP排版与布局缩放条目是视觉焦点字号应比 eyebrow/footer 大 4~8 倍节拍与时长决定click手感参数含义建议与约束STEPS相加弹簧的数量 状态切换次数不是条目数通常 1~4每个 step 就是一次click。STEPS ≤ itemCount − 1可见条目之下有多少条目你最多只能滚多远。参考示例用1两态之间单次滚轮STEP_DUR每个弹簧 tween 的时长0.3~0.7s低于 0.3s 过冲几乎不可见高于 0.7s 就退化成滑动而非点击。参考示例0.45sSTEP_SPACING相邻弹簧启动时间的间隔秒0.3~0.5s太近步与步糊在一起像线性滚动太远则显得懒散。STEP_SPACING ≤ STEP_DUR——前一步仍在沉降时下一步就已触发这正是可相加成立的前提STEP_START第一个弹簧的启动时刻0 及以上需排在前置节拍之后BOUNCE_FACTORback.out(BOUNCE_FACTOR)每一步的过冲强度1.4轻柔点击→ 2.0干脆点击→ 2.5用于高潮步的卡通式转圈后落定。低端读作精致的 UI高端读作赌场/综艺尾部 Revealfooter 落定后的呈现参数含义建议与约束BRAND_DELAY最后一步结束到 footer 出现之间的间隔秒0.2~0.5s留给最后的过冲完成沉降避免下一条动效提前抢镜BRAND_FADE_DURfooter 淡入时长0.4~0.7sBRAND_Yfooter 淡入前的初始纵向偏移px8~24 px越大越有砸进来的感觉越小越轻柔色彩与字体令牌{bgColor} / {accentColor} / {textColor} / {dividerColor}语义化颜色令牌accent 只留给 eyebrow 与 footer让跑马灯条目保持中性形成主次信息层级。{font}基础字体栈。若做数字跑马灯额外加font-variant-numeric: tabular-nums保证每一位数字宽度恒定。四种变体Variations规则除了基准实现还给出四种可在不同文案形态下直接套用的变体1. 数字跑马灯价格 / 计数器滚动把文本条目替换为数字序列并按十进制数位个位、十位、百位……分别使用同一套弹簧步进模式。必须加font-variant-numeric: tabular-nums以保证数字宽度稳定普通字体中1与0宽度不一致会破坏逐位对齐。2. 反向倒计时反转位移符号transform: translateY(${sumP * ITEM_HEIGHT}px)去掉负号并把条目按逆序排列即呈现倒计时语义。3. 连续无限滚动无沉降如新闻字幕如果想永远循环如新闻跑马灯使用线性 ease的单条长 tween把条目列表复制一份当位移超过总高度时复位。注意规则明确声明这属于另一个模式不是本规则——连续运动应参考 sine-wave-loop.md连续 vs 本规则的离散步进语义二者有清晰边界。4. 分组间停顿转完再落戏剧感把若干个快速弹簧步组合在一起STEP_SPACING取小值接一段类似BRAND_DELAY的较长停顿最后以一个更大BOUNCE_FACTOR的戏剧化收尾步落定。停顿处正是观众视线锁定的地方。Key Principles关键原则速查规则提炼出的七条原则可作为实现或 review 时的检查清单容器高度必须等于条目高度——否则条目无法干净地卡进可见窗口容器 200px / 条目 220px每一步都会在窗口上/下露出半截条目。overflow: hidden放在容器而不是内层堆叠上——遮罩即窗口内部堆叠可自由向下延伸。内层堆叠必须flex-direction: column——row 会让条目横排纵向滚动不成立。步间距要小于步时长——重叠是弹簧可相加的成因也是 click click 节拍的来源不重叠的步读起来就是线性滚动。每一步都用back.out——过冲才是点击感的来源linear 或只出不回的 ease 会丢失老虎机手感。在onUpdate中对弹簧求和而不要直接 tween 最终位置——加性技巧的核心每个弹簧贡献自己的一次 snap。⚠️ 不要在步与步之间用innerHTML替换条目——跑马灯是通过位移移动同一批条目一旦替换内容上一条目会以新条目的身份可见幻象即刻破碎。⚠️ 收尾高潮的驻留dwell应 ≥ 1s——参见 hyperframes-animation 技能级通用约束在 SKILL.md 的 Critical Constraints 体系内。Critical Constraints本规则的硬性边界时间线必须暂停gsap.timeline({ paused: true })注册键 data-composition-idwindow.__timelines[id]必须与根元素一致.stack-inner上不能有 CSStransition——会与加性 transform 互相竞争造成位移错乱.stack-inner上必须will-change: transform——因为每秒钟有大量小幅 transform 更新所有条目必须像素级等高——高度不一致会导致累计漂移数字跑马灯必须font-variant-numeric: tabular-nums——可变数字宽度会破坏逐位对齐。组合用法把跑马灯嵌入更大节奏规则不是孤立存在的它明确给出可与之组装的邻近配方均位于 .agents/skills/hyperframes-animation/rules/reactive-displacement.md让跑马灯被进入的元素推走——退出动画从进入弹簧数学派生制造因果联系A 是因为被 B 撞到才动的scale-swap-transition.md跑马灯在最终状态落定后整体 scale 缩小退场同时一个缩放的副标题入场取而代之形成伪变形转场press-release-spring.md用按下-释放弹簧链作为触发源——按钮被按下时驱动跑马灯开转。在技能路由层面本规则与以下 HyperFrames 技能配套使用详见 hyperframes-animation SKILL.md/hyperframes-animation——提供加性弹簧 tween 的 onUpdate 手法本规则默认归属/hyperframes-core——合成接线data-*契约、clip、轨道/hyperframes-cli——hyperframes lint / validate / inspect / preview / render开发循环。结语与进一步调试纵向弹簧跑马灯是本仓库 rules-index.md 中文本滚动 / 序列类目下的一条高复用原子配方。它的精髓可浓缩为一句话用 N 个相加的弹簧代替一次线性位移让滚动变成节拍。写作完成后建议用 animation-map.mjs 生成动画地图做编排审计检查死区、stagger 一致性与生命周期告警并回到规则的七条原则逐条过审——尤其确认.ticker与.item高度一致、overflow只在外层、onUpdate求和而非整体 tween 这三点它们共同决定了老虎机手感是否成立。【免费下载链接】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），仅供参考