HyperFrames 固定锚点循环fixed-anchor-cycle蓝图深度解析让静止成为主张【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesfixed-anchor-cycle是 HyperFrames 动画技能库skills/hyperframes-animation中 22 个时间编码镜头蓝图之一一个元素品牌字标、输入框、锚定行入场一次后永久钉住、零位移而相邻区域或整个周边主题在其周围循环多个离散状态最终在强调节拍上收束为一个完整 lockup。本文基于 blueprints/fixed-anchor-cycle.md 原文结合其规则映射下的六个原子规则源码实现逐场拆解该蓝图的镜头结构、动词语汇与落地规则帮助你直接实例化出万物皆变唯此不动的品牌收尾、全主题换肤与点名式开场镜头。一、蓝图机制与 fixed-anchor-cycle 的定位在 HyperFrames 动画体系中blueprint蓝图是一种产品无关、带时间码的镜头模板Scene N (a–b s)的时间分场 [槽位] 一个命名的标志性动作signature move。它把整个镜头的全时长都编码进去——揭示节奏跟随台词展开而不是在 t0 一次性倾倒。完整的蓝图菜单与角色 → 蓝图软路由见 blueprints-index.md其中明确描述了本蓝图的特征One element stays PINNED — a wordmark, composer box, or anchor line that enters once andnever moves— while the adjacent region (or the entire surrounding theme) cycles through many discrete states…where the anchors stillness IS the claim.fixed-anchor-cycle 的**核心主张intent**一句话概括一个元素被钉住——字标、作曲家输入框、或一条入场后永不再动的锚定线——同时相邻区域或整个环绕主题围绕它循环穿过多个离散状态节奏常被操控稳定踏步、快速跑马灯、或慢→加速的连发在强调节拍上收束为完成的 lockup 或静默定格。锚点的静止本身就是主张一切都在变唯有它不变。它与两个邻近蓝图的边界在原文中有明确区分与kinetic-type-beats子形状 A 的区别后者是居中一行内的词槽原地互换句子本身是主体锚点是裸字场上的句子框架而 fixed-anchor-cycle 的锚点是产品身份周围循环的可以是完全非文本的内容整场主题皮肤、chrome/logo 互换、纹理标签片、跑马灯列表循环断言广度人人都说 / 随处可用 / 召唤所有 X收束完成 lockup。参见 blueprints/kinetic-type-beats.md。与ticker-takeover的区别后者循环以碰撞收尾——英雄元素冲入并把文本挤到一边而 fixed-anchor-cycle 中没有任何东西与锚点相撞循环停下一个最终元素安静地加入它。参见 blueprints/ticker-takeover.md。二、服务角色roles served与选用时机该蓝图覆盖三个叙事角色来自三个被反向工程出来的黄金形状原文标注了from shape-name的变体出处角色变体来源典型内容收束方式Brand_Outro品牌收尾static-anchor-rapid-text-swaps品牌名纹丝不动称赞引用/标语词在旁侧或下方循环——稳定逐词高亮踏步或硬切芯片连发并加速落在完成的 lockupbolt.new / prompt, run, edit, deploy / enjoy.Opus 4.6 by ANTHROP\CBenefits利益点—随处可用被字面化一个产品表面带逐字字符串的 prompt 输入框钉在正中央而它整个外壳原地 morph 穿过 N 个产品主题背景、排版、圆角、chrome、logo 同时交叉淡化冲刷式静默定格Hook开场—点名式开场静态锚定行保持不动下方强调色行以快速垂直跑马灯穿过观众/选项列表然后整块清空进入后续语句节拍落地品牌行锚定块清空 → 1–3 个居中逐词语句节拍三、时长设计6.6–11.1 秒原文给出的时长预算非常精确是实例化时排布场景的硬约束Benefits 最短 ~6.6s4 个主题节拍Brand_Outro ~9–9.4sHook 最长 ~11s锚定循环块还需交接给后续语句节拍循环引擎本身无论角色如何都占据 ~3–5s——锚点落地Scene 1与 lockup 定格Scene 4在此之外另行计算。四、镜头结构四场逐场拆解蓝图采用完全静态的平铺帧——每一个成员镜头中相机全程锁定画面由[bg]背景场纯色或轻微漂移与两个折叠子形状构成子形状 A相邻区域循环锚点不动邻近槽位互换穿过 N 个状态子形状 B整体上下文 morph锚点不动它周围的一切原地重换皮肤。Scene 10.0–~2.0s锚点落地并钉住[anchor: 字标 / 产品名 / 输入框 / 引导行]只入场一次——居中淡入/缩放进入、逐词搭建、或第一帧即在场——落在一个整段视频都不再移动的固定位置。从这里开始零位移无漂移、无呼吸、无重新布局。若锚点是 UI 表面子形状 B它携带一个[verbatim string]逐字字符串与一个闪烁光标——这正是规则context-sensitive-cursor的用武之地。Scene 2~2.0s–运行时约 70%循环引擎标志性动作世界在未动的锚点周围变化按子形状二选一。子形状 A相邻区域循环——锚点旁/下方区域踏步穿过 N 个离散状态选择一种互换机制 一种节奏互换机制三选一瞬时硬切标签替换[chip / tape label]拍打在旧标签上纹理/高亮轻微偏移chip 宽度随每个[phrase]重新适配——远离锚点生长绝不越过它逐词高亮踏步[tagline]的一个词瞬间点亮变粗其余保持暗灰高亮沿行行走——这是discrete-text-sequence的典型形态快速垂直跑马灯每个[list item]以约 0.5s/条的速度滑入/淡出强调槽——对应vertical-spring-ticker。节奏二选一稳定踏步约 0.5–1s/状态或慢→加速连发——约 1s 节拍压缩到每次互换 0.15–0.3s广度升级为状态模糊12–16 个状态读作每个人3–8 个读作点名。几何法则Geometry law循环区域绝不重叠、触碰或挤开锚点布局尺寸以最长状态仍能带清晰边距放入帧内为准。子形状 B整体上下文 morph——约每 1.3s 间隔整个主题——[bg color]背景色、排版、圆角、工具栏图标、页脚[brand logos]、上下文行——通过约 0.3s 的快速交叉淡化原地 morph穿过 N 个[product skins]每个属性同时混合。没有硬切、没有擦除锚点的内容字符串在每个皮肤中完全相同前缀等 chrome 细节可随皮肤适配。Scene 3约 70–85%强调节拍循环是收束的不是单纯停下的四种变体按角色选择Brand_Outro高亮踏步变体整条[tagline]同时瞬间点亮变粗——逐词行走之后的整行照亮Brand_Outro连发变体连发骤停HOLD 在 [最长/最重] 的短语上——加速之后的静止节拍Benefits主题 morph 变体最后一拍静默——淡[dot-grid]点阵在背景上淡入同时 UI 降到低透明度形成冲刷式蓝图定格washout——对应gsap-effects的纯透明度 tweenHook跑马灯变体锚定块清空交接给 1–3 个居中逐词语句节拍进入 kinetic-type-beats 的领地推向收尾。Scene 4末拍 → 结束lockup 完成与定格一个最终元素加入仍未移动的锚点完成构图并静止保持到结束[closing word]收尾词在下方 drop-in对齐最后循环的状态enjoy.chip 硬切消失[brand sign-off]在共享基线上出现在锚点旁by ANTHROP\C或最终[brand line]正中央逐词搭建并保持with Copilot.。长静态定格是回报lockup 是整段 payoff给它运行时长的 20–30%。五、动词语汇motion vocabulary原文完整罗列了本蓝图允许的动词语汇实例化时从中挑选即可覆盖全片锚点淡入/缩放入场永久钉住的锚点零位移、无闲置呼吸瞬时硬切标签/chip 替换拍打式覆盖 微妙纹理/高亮偏移chip 宽度按短语 resize-to-fit远离锚点生长逐词高亮沿行踏步行状态暗灰化整行瞬间照亮静态行下的快速垂直跑马灯滑入/淡出节奏加速约 1s 慢拍压缩至 0.15–0.3s 连发hold-on-longest-phrase 强调节拍原地主题 morph 交叉淡化约 0.3s 同时混合背景/字体/圆角/图标每拍 chrome/logo 互换闪烁文本光标跨拍出现/消失的上下文行dot-grid 背景淡入全局透明度 washout结尾定格逐词短语搭建场景间整块清空最终词 drop-in 入场硬切到最终 lockup长静态定格。六、规则映射从蓝图到原子规则源码原文档最后给出完整的rule mapping——每个动作落到rules/目录的真实规则上。这是从蓝图设计到可运行代码的桥梁以下结合规则源码逐一展开规则路径均相对仓库根目录1. 硬切互换 / 逐词高亮 / chip 宽度 →discrete-text-sequenceskills/hyperframes-animation/rules/discrete-text-sequence.md 是按时间阈值整段替换文本状态的规则。它把文本写作一个稀疏数组SEQUENCE [{ t, text }]每次onUpdate做反向搜索找到t已过的最新条目并渲染其文本——显示在状态间瞬时跳变、状态之间没有任何补间动画。规则的 Recipe 展示了核心 driverfunction textAt(time) { for (let i SEQUENCE.length - 1; i 0; i--) { if (time SEQUENCE[i].t) return SEQUENCE[i].text; } return ; } const driver { t: 0 }; tl.to(driver, { t: TOTAL_DURATION, duration: TOTAL_DURATION, ease: none, onUpdate: () { textEl.textContent textAt(driver.t); } }, 0);映射到本蓝图的语义瞬时硬切 chip/标签/短语互换在时间阈值处、逐词高亮踏步颜色/字重状态互换、暗行 → 整行瞬间照亮都归入此规则chip 宽度逐状态设置是逐状态布局属性离散设置、绝不补间——规则强调TEXT_WRAP_MIN_WIDTH文本容器最小宽度必须 ≥ 最宽状态否则右缘随状态长度变化而抖动同时要求white-space: nowrap与等宽字体比例字体即使在固定盒内也会抖动。2. 垂直跑马灯 →vertical-spring-tickerskills/hyperframes-animation/rules/vertical-spring-ticker.md 描述老虎机式垂直滚动多个弹簧补间相加产生总 Y 位移每个弹簧贡献一个离散步得到咔哒咔哒的落定节奏。其核心是back.out过冲的每步弹跳 步间重叠STEP_SPACING ≤ STEP_DUR使弹簧叠加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); } 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-reveal 步在本蓝图中不使用——Scene 4 的 lockup 取代了它。关键参数ITEM_HEIGHT ≈ fontSize × 1.25、STEP_DUR 0.3–0.7s、BOUNCE_FACTOR 1.4–2.51.4 轻柔咔哒 / 2.0 干脆 / 2.5 赌场式旋转落地用于高潮步。参考示例examples/proof-logo-chain.html。3. 逐状态时间窗 →dynamic-content-sequencing含加速节拍skills/hyperframes-animation/rules/dynamic-content-sequencing.md 是一个工具型模式N 个条目的时长由内容长度 逐条配置计算绝对起止时间在构建期一次性归约成扁平TIMELINE运行时反向搜索活动条目只在条目切换时写 DOMlastTitle守卫防止每帧textContent写入导致渲染闪烁。对蓝图最有价值的是其Accelerating cadence几何衰减 hold变体——正是连发/点名节奏的实现方式早期条目 hold 约 1s可读随后窗口按几何级数收缩至 0.15–0.3s 连发在收束前刹车在强调状态上。加速是预先计算进同一扁平 TIMELINE的——仍然内容驱动、仍然确定性任何地方都没有加速补间const HOLDS CONTENT.map((entry, i) Math.max(FLURRY_FLOOR, HOLD_START * Math.pow(DECAY, i))); HOLDS[CONTENT.length - 1] HOLD_FINAL; // 可读状态保留 per-char 时长项连发状态READ_THRESHOLD ≈ 0.5s作为运动纹理掠过不再逐字阅读原文档给出的连发工作示例约 16 条短引用在钉住的字标旁硬切穿过 chip——前 3 个状态HOLD_START 1.0各自完整可读DECAY 0.8使每个后续窗口收缩直至FLURRY_FLOOR 0.2兜底约 12 个状态在约 2.5s 内——一片掠过瞥见的喝彩最长的短语取HOLD_FINAL ≈ 1.6作为收尾 lockup 前的刹车。参数域HOLD_START 0.8–1.2s、DECAY 0.75–0.88、FLURRY_FLOOR 0.15–0.3s低于约 0.15s 会频闪、刹车 ≥ 4× 地板值否则停止读不出节拍。3–6 条的常规指引在此放宽——12–18 个状态合法正因为连发状态不被单独阅读硬切纪律lastTitle守卫、瞬时互换是让 0.2s 状态干净渲染的前提。参考示例examples/messaging-multi-phrase.html。4. 锚点入场与收尾词 drop-in →spring-pop-entranceskills/hyperframes-animation/rules/spring-pop-entrance.md 是标准入场原语元素scale: 0 → 1以平滑长尾落定默认power3.out无过冲入场。规则的开篇戒律与本蓝图的编辑语境完全同频Smooth beats bouncy——弹跳式back.out是 AI 生成视频中头号翻车点仅限明确俏皮的品牌例外。tl.fromTo(#hero, { scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: POP_DUR, ease: power3.out }, ENTRY_AT);映射到蓝图锚点入场淡入/缩放、最终收尾词的 drop-in 均用此规则且原文特别注明restrained overshoot——此处的基调是编辑式editorial不是弹跳式fromTo显式声明折叠态保证 seek 下 t0 正确。参数POP_DUR 0.4–0.7s英雄元素必须在 t ≤ 0.5s 内可见、ENTRY_AT 0–0.4s。5. 钉住输入框的闪烁光标 →context-sensitive-cursorskills/hyperframes-animation/rules/context-sensitive-cursor.md 让光标颜色可选高度/闪烁行为匹配当前活动文本段——品牌段用品牌强调色、占位符用暗色、完成标记用成功色。它叠加在discrete-text-sequence的 SEQUENCE 模式之上条目携带{ t, text, segment, color }onUpdate反向搜索并同时写文本与光标background闪烁由时间线上确定性正弦方波驱动sin(p) 0门控透明度纯函数于时间可逆 seek。映射到蓝图钉住的 composer 中的闪烁光标即此规则且颜色在每个主题皮肤的分段边界自适应——皮肤 k 的T_k处光标换色正对应theme-crossfade-morph的边界窗口。关键约束光标颜色写在background它是色块而非字形、white-space: pre保留尾随空格、等宽字体 inline-block光标、BLINK_CYCLES_PER_SCENE必须是整数否则正弦扫掠在末帧中途截断导致光标跳变。6. 整体主题 morph →theme-crossfade-morphskills/hyperframes-animation/rules/theme-crossfade-morph.md 是本蓝图子形状 B 的规则级实现其自述与本蓝图互相印证A composer box cycles through four IDE themes…through every flip one anchor elementnever moves. The anchors stillness is the rhetorical claim:everything changes, this doesnt.实现四步一个皮肤 一个完整层N 个全幅预样式层position: absolute; inset: 0从 t0 起全在 DOM 中叠放skin-0 可见、其余opacity: 0morph 即交叉淡化每个边界处两条相向透明度补间在同一时间轴位置跑约MORPH_DUR约 0.3s出1→0、入0→1——因为两层都完整所有属性同时混合包括不可补间的字体族、图标字形、logo它们在周围一切半混合中读作 morphing锚点只渲染一次、置于顶层不移动的元素独立一层、被排除在所有皮肤层之外——无变换、无重父、无逐皮肤重样式窗口预计算T_k CYCLE_START k × (SKIN_HOLD MORPH_DUR)。skins.forEach((skin, k) { if (k 0) return; const at CYCLE_START k * (SKIN_HOLD MORPH_DUR); tl.fromTo(skin, { opacity: 0 }, { opacity: 1, duration: MORPH_DUR, ease: power2.inOut }, at); tl.to(skins[k - 1], { opacity: 0, duration: MORPH_DUR, ease: power2.inOut }, at); // 同一位置同时混合 }); // 锚点没有任何补间——它缺席于时间轴正是要点参数域N_SKINS 3–5、SKIN_HOLD 0.8–1.5s、MORPH_DUR 0.25–0.4s约 0.3s 为规范值更快读作硬切、更慢读作糊状溶解的双重曝光、CYCLE_START ≥ 锚点落定 一拍。规则还提供了与本蓝图 Scene 3/4 对应的变体washout finale最后一层淡入 faint dot-grid、外壳降至约 0.25 透明度循环收束为自身的蓝图定格——注意规则中 dot-grid 用opacity实现对应蓝图映射中的gsap-effects、以及emphasis brakeN−1 个皮肤稳态节奏末个皮肤保持 2–3×SKIN_HOLD。边界card-morph-anchorrules/card-morph-anchor.md只 morph单个容器尺寸、圆角、表面连续补间本规则重换整场皮肤、穿过 N 个离散状态。7. 漂移背景场 →sine-wave-loop循环下方微微漂移的背景场对应sine-wave-loop有界漂移锚点本身不获得任何漂移——静止是承重的。该规则也负责与vertical-spring-ticker的边界声明本规则是连续线性运动后者是离散落定步。8. dot-grid 淡入 washout 长定格 →gsap-effectsdot-grid 淡入与全局透明度 washout 收尾、长静态定格对应 rules/gsap-effects.md纯 opacity 补间/ 静态保持无需任何规则。七、相机修饰严格静止none——该蓝图的每一个成员镜头完全相机静止循环是唯一的运动钉住锚点的静止是承重的load-bearing。原文档特别警告不要为了能量感加推近镜头——它会打破锚点契约anchor contract让整段镜头从万物皆变唯此不动退化成普通幻灯片。这一约束在theme-crossfade-morph的 Critical Constraints 中同样以Camera static — always复述。八、实例化检查清单Reproduce / Adapt / Compose依据 blueprints-index.md 的选取流程实例化本蓝图时按此清单核对选形状确认本拍属于 Hook / Benefits / Brand_Outro 之一且主张是围绕一个固定身份断言广度everyone says / works everywhere / calling all X若核心是词槽互换的句子本身改选kinetic-type-beats若收尾是碰撞式挤开改选ticker-takeover。定姿势Reproduce槽位干净映射Adapt结构适配、内容/表面不同保留标志性动作Compose无匹配则从动词语汇自由组合。无论哪种揭示节奏都必须跟随 VO 铺满整段镜头。对规则按第六节映射逐项勾选——硬切互换/逐词高亮discrete-text-sequence、垂直跑马灯vertical-spring-ticker、状态时间窗与加速连发dynamic-content-sequencing的几何衰减变体、入场与收尾 drop-inspring-pop-entrance编辑式克制过冲、光标context-sensitive-cursor、主题 morphtheme-crossfade-morph、背景漂移sine-wave-loop、washoutgsap-effects。守时长与静止总时长落在 6.6–11.1s按角色取段循环引擎 3–5sScene 4 的 lockup 定格占 20–30% 运行时全程相机零移动、锚点零位移。最后回到动画技能的总约束见 SKILL.md 与 hyperframes-core单条暂停时间线、data-duration决定时长、无Math.random/Date.now/performance.now、无repeat: -1、布局常量预计算绝不在补间时getBoundingClientRect()、空间运动只用 GSAP 变换别名x/y/scale/rotation——在这些确定性契约下fixed-anchor-cycle 的静止 vs 循环对比才能逐帧可复现地渲染成立。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考