OpenMontage HyperFrames 动画规则实战Orbit 3D Entry——从三维空间翻转入场到持续椭圆环绕【免费下载链接】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/OpenMontageorbit-3d-entry是 OpenMontage 仓库中 HyperFrames 动画技能库.agents/skills/hyperframes-animation/rules/orbit-3d-entry.md收录的一条原子级运动规则让一组元素先以rotateX rotateY translateZ的三维姿态从空间深处翻转进场再汇聚为围绕画面中心焦点不断旋转的椭圆轨道。它面向的典型场景是「中心主视觉/主标题 外围环绕图标」的视频构图——例如功能特性环绕 CTA、技术栈图标环绕品牌词、能力标签环绕 Logo 的产品开场与品牌展示镜头。读完本文你可以掌握规则背后的两阶段运行机制、可直接复制的完整 HTML/CSS/GSAP 实现、八大可调参数的取值区间与设计意图、两种常用变体向心塌缩与轨道平面倾斜、以及保证 HyperFrames 逐帧 seek 确定性的关键约束。仓库内的完整可运行示例位于 .agents/skills/hyperframes-animation/examples/cta-orbit-collapse.html建议对照阅读。规则定位先了解 orbit-3d-entry 在技能库中的角色在深入代码之前先看清这条规则所处的知识结构。OpenMontage 将全部动画知识收敛进一个技能目录中.agents/skills/hyperframes-animation/SKILL.md按用途拆分为五类rules原子运动规则每个.md描述一种可独立使用的动作配方orbit-3d-entry属于此类完整清单见 rules-index.mdblueprints多阶段场景模板如cta-orbit-collapse等整场编排见 blueprints-index.mdtransitions场景到场景的切换techniques与adaptersGSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU 等七种运行时适配。按该技能的默认工作流最省事的做法是从rules-index.md里挑选 24 条原子规则用一条暂停的 GSAP 时间线粘合到一起。orbit-3d-entry正是可以被自由组合的原子配方之一它与 center-outward-expansion.md爆发式散开互为两种相反的入场哲学一个「从外围环绕飞入」一个「从中心炸开」。核心机制一次入场 永不停止的轨道规则的动画由每个元素各自的两个阶段构成入场阶段按元素执行GSAP tween 将元素从隐藏的三维姿态负的rotateX/rotateY与负z深度翻转回正对屏幕的平面状态rotateX: 0, rotateY: 0, z: 0。翻转使用带回弹过冲的back.out缓动形成「卡片从空间深处弹出」的质感。轨道阶段入场后持续元素位置由三角函数连续驱动——x cos(t) · RADIUS_X、y sin(t) · RADIUS_Y以很慢的角速度绕中心旋转。与一次性 reveal 动画的根本区别在于——轨道不会停它构成画面持续存在的环境运动层直到被后续场景阶段主动收掉。最关键的工程决策是轨道跑在 GSAP 时间线内部而不是用requestAnimationFrame。HyperFrames 的渲染哲学是单条暂停时间线 可寻址帧见 hyperframes-core 契约所有运动必须能通过tl.time()精确回放任何游离于时间线之外、自行rAF驱动的循环都会破坏逐帧 seek 的确定性。orbiting 代码里通过驱动一个{ p: 0 → 1 }的假想状态对象实现天然满足这一约束。场景 HTML以>div classscene idorbit-scene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {sceneBackground}; perspective: 1800px; /* REQUIRED — without perspective, rotateX/Y flatten */ } .orbit-stage { position: relative; width: 1000px; height: 700px; display: grid; place-items: center; transform-style: preserve-3d; } .orbit-item { position: absolute; /* Items live at stage center; GSAP translates them along the orbit. */ top: 50%; left: 50%; width: 140px; height: 140px; display: grid; place-items: center; background: {accentColor}; border-radius: 50%; font-family: {font}; font-weight: 900; font-size: 64px; color: {itemTextColor}; transform-style: preserve-3d; will-change: transform; box-shadow: 0 12px 36px {accentShadowColor}; } .orbit-center { position: relative; z-index: 5; font-family: {font}; font-weight: 900; font-size: 96px; letter-spacing: 8px; color: {centerTextColor}; text-transform: uppercase; }注意 CSS 中使用了{sceneBackground}、{accentColor}、{centerTextColor}等占位符——这是 HyperFrames 规则文档的统一记号具体取色交给hyperframes-creative调色板/排版方向在创作阶段落实。GSAP 时间线一次 tween 同时管好翻转与轨道JS 骨架完整如下。加载 GSAP 后把时间线注册进window.__timelineskey 必须等于根节点data-composition-id并保持paused: true——这是 HyperFrames 渲染器按帧 seek 的前提。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 items document.querySelectorAll(.orbit-item); // RADIUS_X, RADIUS_Y, ORBIT_DURATION, ENTRY_DUR, STAGGER, FLIP_BACK, CENTER_BACK // — all named constants; values per How to Choose Values below. const RADIUS_Y RADIUS_X * Y_TO_X_RATIO; // perspective-flattened ellipse items.forEach((el, i) { const initialAngleDeg Number(el.dataset.angle); const initialAngleRad (initialAngleDeg / 360) * Math.PI * 2; const startX Math.cos(initialAngleRad) * RADIUS_X; const startY Math.sin(initialAngleRad) * RADIUS_Y; // 1) Place at orbital position with opacity 0 — BEFORE any tween fires gsap.set(el, { xPercent: -50, yPercent: -50, x: startX, y: startY, rotateX: ROTATE_X_FROM, rotateY: ROTATE_Y_FROM, z: Z_FROM, opacity: 0, scale: SCALE_FROM, }); // 2) Phase 1 — flip in IN PLACE at orbital position tl.to( el, { rotateX: 0, rotateY: 0, z: 0, opacity: 1, scale: 1, duration: ENTRY_DUR, ease: back.out(${FLIP_BACK}), }, i * STAGGER, ); // 3) Phase 2 — continuous orbit driven via a 0→1 progress tween const orbitState { p: 0 }; tl.to( orbitState, { p: 1, duration: ORBIT_DURATION, ease: none, onUpdate: () { const angle initialAngleRad orbitState.p * Math.PI * 2; const x Math.cos(angle) * RADIUS_X; const y Math.sin(angle) * RADIUS_Y; // z-index by orbit Y — see Center label clearance in Key Principles // for the capped-range form when a center label is present. el.style.zIndex String(Math.round(y RADIUS_Y)); el.style.transform translate(-50%, -50%) translate(${x}px, ${y}px); }, }, i * STAGGER ENTRY_DUR, ); }); // Center label fades in once a few orbit items have landed tl.from( .orbit-center, { opacity: 0, scale: 0.6, duration: ENTRY_DUR, ease: back.out(${CENTER_BACK}) }, CENTER_FADE_AT, ); window.__timelines[orbit-scene] tl; /script代码里暗含三个值得展开的工程细节入场前先gsap.set摆放到位元素先被放置到各自的轨道起点(cos(θ)·RADIUS_X, sin(θ)·RADIUS_Y)并置opacity: 0然后才添加 tween。这样第一阶段只翻转旋转/透明度/缩放不碰位移元素在轨道起点上原位淡入第二阶段才能无跳变地接上轨道。若反过来先做「从中心飞入再跳上轨道」的 fromTo元素会在第一阶段撞上中心标签并在阶段切换瞬间发生肉眼可见的瞬移——这是该规则在 [Critical Constraints](#关键约束保证 seek 确定性) 里标红强调的坑。逐元素独立的轨道 tween每个元素从自己的data-angle起算相位因此各自的相位推进互不相同绝不能用一个targets: .orbit-item的共享 tween否则所有元素会在同一角度上同步转圈轨道塌缩成单点。伪状态对象驱动轨道orbitState.p从 0 匀速推进到 1onUpdate里以initialAngleRad p·2π解出当前角度再写transform。ease: none保证角度与时间严格线性对应这正是逐帧确定性所依赖的。z-index依据元素当前 Y 坐标动态生成保证轨道下半圈的元素画在前面、上半圈的元素画在后面形成立体绕行感。参数速查八大常量的区间、观感与约束规则为所有可调参数给出了明确的取值区间、视觉影响、硬约束与仓库参考值。表格化速查如下参数含义建议区间视觉影响关键约束参考实现取值RADIUS_X轨道椭圆水平半径px300–900小→紧密簇大→圆环铺开、给中心留白需满足RADIUS_X · min(|cos(θ)|) ≥ L_w I_w breathing_room任何角度下不得水平挤占中心标签480Y_TO_X_RATIORADIUS_Y / RADIUS_X透视压扁系数0.4–0.7低→俯视的扁盘接近 1→正对镜头的平面必须 1保持倾斜圆环而非正面光环≈ 0.58280/480ORBIT_DURATION一整圈耗时s4–25短→狂躁长→漂移/宁静≥ 轨道可见时长否则 tween 结束元素停转≈ 250.25 rad/sENTRY_DUR单元素翻转时长s0.4–0.8短→干脆长→庄重≤ 首末元素入场间隔避免级联糊成一团0.55STAGGER相邻元素入场延迟s0.06–0.12低于 0.06→爆米花式齐响高于 0.12→拖沓总级联(n-1)·STAGGER需在下一场景阶段开始前完成0.10FLIP_BACKback.out(n)翻转过冲量1.2–2.0低→柔和到位高→明显回弹与中心标签的CENTER_BACK相邻触发时须搭配平和值双过冲互相抵消1.4CENTER_BACK中心标签back.out(n)过冲量1.2–1.8低→安静高→弹跳感—1.4ROTATE_X/Y_FROM、Z_FROM、SCALE_FROM入场前 3D 初始姿态rotateX ±60°~±120°rotateY ±45°~±120°z −200~−400scale 0.2–0.6旋转角越大 z 越深 →从纵深翻出越戏剧化方向须与场景透视一致元素间混用正负 rotateY 会显得杂乱rotateX 90、rotateY −45、z −100、scale 0还有两个文档未进表格但实际存在的节奏参数CENTER_FADE_AT中心标签淡入的时刻建议落在前 24 个轨道元素落地之后——过早会与入场级联抢注意力过晚会留下一个空洞的中心RADIUS_Y通常不作为独立输入而由RADIUS_X × Y_TO_X_RATIO推导如上面的const RADIUS_Y RADIUS_X * Y_TO_X_RATIO;保证压扁比例始终受控。参考列取自仓库内真实示例 cta-orbit-collapse.html它以RADIUS_X 480、RADIUS_Y 280、角速度0.25 rad/s≈ 25 s/圈、单图标入场0.55 s back.out(1.4)、入场级联步长 0.10 s 的参数组合运行是验证上述取值建议的直接落地样本。两种变体向心塌缩与倾斜轨道平面变体一塌缩到中心collapse to center规则的收尾哲学是让轨道有一个结局。反向操作——先公转、再向心聚拢——通过引入一个1 → 0的半径驱动因子实现它同时作用于RADIUS_X与RADIUS_Y使所有元素沿各自当前角度螺旋收向中心const collapse { r: 1 }; tl.to( collapse, { r: 0, duration: COLLAPSE_DUR, ease: power3.inOut, onUpdate: () items.forEach((el) { const a (Number(el.dataset.angle) / 360) * Math.PI * 2; const x Math.cos(a) * RADIUS_X * collapse.r; const y Math.sin(a) * RADIUS_Y * collapse.r; el.style.transform translate(-50%,-50%) translate(${x}px,${y}px) scale(${collapse.r}); }), }, COLLAPSE_AT, );power3.inOut让收拢先慢后快再缓停同步缩小scale让元素在触底时自然融化。这正是cta-orbit-collapse示例里「六枚技术图标在点击后向心聚拢、一张演示卡从汇聚点弹出」的后半程逻辑——它的塌缩驱动用back.out(1.6)缓动配合 0.85 s 时长、半径因子1 − collapseEased计算示例源码 的第 1024 行起即为这一段轨道 塌缩主引擎。塌缩变体与 center-outward-expansion.md 存在天然互补后者本身就是中心爆发两者共享半径驱动 一次性到位的数学结构文档将其描述为orbit-collapse 收尾的逆向驱动源。变体二倾斜轨道平面要让公转更具立体感可对整块.orbit-stage施加 X 轴旋转使轨道平面倾斜.orbit-stage { transform: rotateX(25deg); }平面倾斜后位于赤道上下的元素会在穿越视平面时呈现出明显的弧线纵深轨迹视觉上从平面绕圈升级为空间环绕。关键原理四个不能省的设计决策规则把经验法则提炼为四条核心原则perspective必须落在场景根节点——否则rotateX/rotateY退化成 2D 缩放翻转毫无深度与此同时.orbit-stage与每个.orbit-item都要preserve-3d元素拥有自身 transform 时 3D 上下文才能延续。级联入场优于齐射入场——按STAGGER依次翻转视觉语义是蜂群集结成形若所有元素同时进场则变成爆米花丧失编排感。元素数量控制在 4–12——太少显得空荡太多会挤压中心区域形成视觉拥堵。中心标签必须与轨道元素三维上分层Clearance 规则——在preserve-3d舞台内部单纯的z-index并不可靠绘制顺序遵循 Z 位置而非层叠上下文。文档给出三层递进的保护方案把中心标签用transform: translateZ(220px)推到最前并辅以z-index: 9999轨道元素的动态z-index限制在[1, 50]的有界区间——让轨道下半圈元素依然能盖住上半圈元素保证环绕层次但永远不可能盖过中心标签。区间映射公式为1 round((y RADIUS_Y) / (2·RADIUS_Y) · 49)把y ∈ [-RADIUS_Y, RADIUS_Y]线性映射到[1, 50]同时用几何法保证水平方向也绝不重叠若中心标签半宽为L_w、轨道元素半宽为I_w则RADIUS_X · min(|cos(θ)|) ≥ L_w I_w breathing_room。以 60° 等分、6 元素轨道为例元素间最坏相位出现在 30°cos(30°) ≈ 0.866——中心文字越宽环半径就必须越大。此外还有一条构图铁律轨道是装饰中心才是主角。如果观众的视线被环绕元素抢走应当加大中心元素的尺寸或降低轨道元素的明度让环绕收敛为背景层。关键约束保证 seek 确定性的硬性红线禁用requestAnimationFrame——轨道必须活在时间线内否则 HyperFrames 逐帧 seek 会失去确定性。本文方案用「伪状态对象p的线性 tween onUpdate」规避。时间线必须暂停创建gsap.timeline({ paused: true })。注册表 key data-composition-idwindow.__timelines[orbit-scene]与根节点 ID 严格一致hyperframes-core 契约 规定 key 不允许带-mount/-slot之类后缀。每个轨道元素拥有独立的轨道 tween——共享targets会让相位归零。will-change: transform——大量并发的轨道位移需要合成器提示避免掉帧。不要动画left/top——用translate()且与自身的translate(-50%, -50%)居中变换叠加书写。入场必须原位翻转而非中心翻转——先gsap.set摆到轨道起点并opacity: 0再让第一阶段只动旋转/透明度/缩放。文档用 ❗ 标注若 fromTo 的 from/to 都含x:0,y:0元素第一阶段会被钉在舞台中心与标签叠撞并在第二阶段开始时肉眼瞬移。在更大场景中组合三条规则搭配参考单条原子规则通常不足以撑起一个完整镜头文档给出三组经过验证的搭配方向center-outward-expansion.md——爆发式入场替代轨道式入场同时是 orbit-collapse 收尾阶段的逆向驱动源两条规则可构成展开 收拢的循环镜头cursor-click-ripple.md——当中心元素是一个等待用户点击的 CTA 时光标飞入 点击涟漪与塌缩收尾天然配对。cta-orbit-collapse示例即演示了该组合光标滑到白底按钮、按下按钮与光标同步压缩 0.85/0.95、涟漪扩散、图标塌缩、演示卡弹出sine-wave-loop.md——给轨道上的每个元素叠一层细微的正弦浮动/微摆±6 px 位移、±2.5° 旋转避免公转过于机械。示例中的抖动按元素索引错开相位且随塌缩过程衰减。与 HyperFrames 配套技能的衔接编写完 HTML/CSS/GSAP 后规则建议按以下技能分工收尾验证/hyperframes-animation——时间线编排与onUpdateAPI 的知识源即本规则所在技能总纲见 .agents/skills/hyperframes-animation/SKILL.md/hyperframes-core——composition 装配契约根节点须为有确定尺寸的盒子、每条动画只允许操作视觉属性白名单、禁display/visibility、禁repeat: -1等不可谈判规则详见 .agents/skills/hyperframes-core/SKILL.md/hyperframes-cli——用npx hyperframes lint做静态体检、npx hyperframes validate/inspect跑渲染期校验、npx hyperframes preview在时间线编辑器里人工复检、最后npx hyperframes render出片命令用法记录于 .agents/skills/hyperframes-cli/SKILL.md。仓库内的真实对照cta-orbit-collapse 示例解析若想看到这条规则在完整镜头里的形态.agents/skills/hyperframes-animation/examples/cta-orbit-collapse.html 是最直接的参照物。它把六种 HyperFrames 能力HTML/CSS/SVG/GSAP/3D/LOTTIE作为六枚图标以2π/6均分整圈环绕中央 Drop an HTML scene · Render CTA整体 6.5 秒编排为五个阶段0.00–1.05 s六枚图标以 0.10 s 级联 back.out(1.4)翻转入场各 0.55 s轮廓同步做 stroke-draw、内部点缀延迟 0.30 s 错峰淡入0.00–2.95 s持续公转0.25 rad/s每个图标叠 ±6 px 位移、±2.5° 旋转的错相位摆动1.50–2.20 s光标从屏幕右侧飞入落点 CTA 按钮back.out(1.3)过冲着陆2.20–2.46 s点击光标与按钮压缩回弹、按钮辉光脉冲、涟漪 0.3→5.0 扩散2.20–3.05 s图标按back.out(1.6)向心塌缩半径因子 1→0、scale 1→0.5、透明度分段包络2.95 s 起演示卡从塌缩点弹出并进入有限次 yoyo 悬浮呼吸直至 6.5 s 场景结束。这个文件是值得通读的参考答案注意它的图标 DOM 采用三层嵌套.icon-pos承担轨道位、.icon-collapse承担塌缩缩放/透明度、.icon-entry承担 3D 翻转入场把「轨道位移、塌缩状态、翻转姿态」三组运动解耦到三个层上再由不同 tween 分别驱动——这是把本规则从单层原型升级到生产级整场编排时的典型结构演进。写在最后orbit-3d-entry的可贵之处在于它把「看起来自由散漫的环绕运动」收敛进了一条完全可预测、可 seek 的时间线两阶段结构让入场富有戏剧张力三角函数轨道让公转数学上可精确重放onUpdate内的伪状态对象则把「无限循环」这种天然违背确定性契约的动画改写为受时间线控制的有限推进。在 OpenMontage 这类以 HTML 场景渲染视频的体系里这正是原子规则应该有的样子——一个可复制、可调参、可组合、不破坏渲染契约的运动单元。下次需要为中心主视觉做「元素环绕」镜头时直接以本文的 HTML/CSS/时间线为起点再按上表的参数区间试镜即可。【免费下载链接】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 HyperFrames 动画规则实战：Orbit 3D Entry——从三维空间翻转入场到持续椭圆环绕
OpenMontage HyperFrames 动画规则实战Orbit 3D Entry——从三维空间翻转入场到持续椭圆环绕【免费下载链接】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/OpenMontageorbit-3d-entry是 OpenMontage 仓库中 HyperFrames 动画技能库.agents/skills/hyperframes-animation/rules/orbit-3d-entry.md收录的一条原子级运动规则让一组元素先以rotateX rotateY translateZ的三维姿态从空间深处翻转进场再汇聚为围绕画面中心焦点不断旋转的椭圆轨道。它面向的典型场景是「中心主视觉/主标题 外围环绕图标」的视频构图——例如功能特性环绕 CTA、技术栈图标环绕品牌词、能力标签环绕 Logo 的产品开场与品牌展示镜头。读完本文你可以掌握规则背后的两阶段运行机制、可直接复制的完整 HTML/CSS/GSAP 实现、八大可调参数的取值区间与设计意图、两种常用变体向心塌缩与轨道平面倾斜、以及保证 HyperFrames 逐帧 seek 确定性的关键约束。仓库内的完整可运行示例位于 .agents/skills/hyperframes-animation/examples/cta-orbit-collapse.html建议对照阅读。规则定位先了解 orbit-3d-entry 在技能库中的角色在深入代码之前先看清这条规则所处的知识结构。OpenMontage 将全部动画知识收敛进一个技能目录中.agents/skills/hyperframes-animation/SKILL.md按用途拆分为五类rules原子运动规则每个.md描述一种可独立使用的动作配方orbit-3d-entry属于此类完整清单见 rules-index.mdblueprints多阶段场景模板如cta-orbit-collapse等整场编排见 blueprints-index.mdtransitions场景到场景的切换techniques与adaptersGSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU 等七种运行时适配。按该技能的默认工作流最省事的做法是从rules-index.md里挑选 24 条原子规则用一条暂停的 GSAP 时间线粘合到一起。orbit-3d-entry正是可以被自由组合的原子配方之一它与 center-outward-expansion.md爆发式散开互为两种相反的入场哲学一个「从外围环绕飞入」一个「从中心炸开」。核心机制一次入场 永不停止的轨道规则的动画由每个元素各自的两个阶段构成入场阶段按元素执行GSAP tween 将元素从隐藏的三维姿态负的rotateX/rotateY与负z深度翻转回正对屏幕的平面状态rotateX: 0, rotateY: 0, z: 0。翻转使用带回弹过冲的back.out缓动形成「卡片从空间深处弹出」的质感。轨道阶段入场后持续元素位置由三角函数连续驱动——x cos(t) · RADIUS_X、y sin(t) · RADIUS_Y以很慢的角速度绕中心旋转。与一次性 reveal 动画的根本区别在于——轨道不会停它构成画面持续存在的环境运动层直到被后续场景阶段主动收掉。最关键的工程决策是轨道跑在 GSAP 时间线内部而不是用requestAnimationFrame。HyperFrames 的渲染哲学是单条暂停时间线 可寻址帧见 hyperframes-core 契约所有运动必须能通过tl.time()精确回放任何游离于时间线之外、自行rAF驱动的循环都会破坏逐帧 seek 的确定性。orbiting 代码里通过驱动一个{ p: 0 → 1 }的假想状态对象实现天然满足这一约束。场景 HTML以>div classscene idorbit-scene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {sceneBackground}; perspective: 1800px; /* REQUIRED — without perspective, rotateX/Y flatten */ } .orbit-stage { position: relative; width: 1000px; height: 700px; display: grid; place-items: center; transform-style: preserve-3d; } .orbit-item { position: absolute; /* Items live at stage center; GSAP translates them along the orbit. */ top: 50%; left: 50%; width: 140px; height: 140px; display: grid; place-items: center; background: {accentColor}; border-radius: 50%; font-family: {font}; font-weight: 900; font-size: 64px; color: {itemTextColor}; transform-style: preserve-3d; will-change: transform; box-shadow: 0 12px 36px {accentShadowColor}; } .orbit-center { position: relative; z-index: 5; font-family: {font}; font-weight: 900; font-size: 96px; letter-spacing: 8px; color: {centerTextColor}; text-transform: uppercase; }注意 CSS 中使用了{sceneBackground}、{accentColor}、{centerTextColor}等占位符——这是 HyperFrames 规则文档的统一记号具体取色交给hyperframes-creative调色板/排版方向在创作阶段落实。GSAP 时间线一次 tween 同时管好翻转与轨道JS 骨架完整如下。加载 GSAP 后把时间线注册进window.__timelineskey 必须等于根节点data-composition-id并保持paused: true——这是 HyperFrames 渲染器按帧 seek 的前提。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 items document.querySelectorAll(.orbit-item); // RADIUS_X, RADIUS_Y, ORBIT_DURATION, ENTRY_DUR, STAGGER, FLIP_BACK, CENTER_BACK // — all named constants; values per How to Choose Values below. const RADIUS_Y RADIUS_X * Y_TO_X_RATIO; // perspective-flattened ellipse items.forEach((el, i) { const initialAngleDeg Number(el.dataset.angle); const initialAngleRad (initialAngleDeg / 360) * Math.PI * 2; const startX Math.cos(initialAngleRad) * RADIUS_X; const startY Math.sin(initialAngleRad) * RADIUS_Y; // 1) Place at orbital position with opacity 0 — BEFORE any tween fires gsap.set(el, { xPercent: -50, yPercent: -50, x: startX, y: startY, rotateX: ROTATE_X_FROM, rotateY: ROTATE_Y_FROM, z: Z_FROM, opacity: 0, scale: SCALE_FROM, }); // 2) Phase 1 — flip in IN PLACE at orbital position tl.to( el, { rotateX: 0, rotateY: 0, z: 0, opacity: 1, scale: 1, duration: ENTRY_DUR, ease: back.out(${FLIP_BACK}), }, i * STAGGER, ); // 3) Phase 2 — continuous orbit driven via a 0→1 progress tween const orbitState { p: 0 }; tl.to( orbitState, { p: 1, duration: ORBIT_DURATION, ease: none, onUpdate: () { const angle initialAngleRad orbitState.p * Math.PI * 2; const x Math.cos(angle) * RADIUS_X; const y Math.sin(angle) * RADIUS_Y; // z-index by orbit Y — see Center label clearance in Key Principles // for the capped-range form when a center label is present. el.style.zIndex String(Math.round(y RADIUS_Y)); el.style.transform translate(-50%, -50%) translate(${x}px, ${y}px); }, }, i * STAGGER ENTRY_DUR, ); }); // Center label fades in once a few orbit items have landed tl.from( .orbit-center, { opacity: 0, scale: 0.6, duration: ENTRY_DUR, ease: back.out(${CENTER_BACK}) }, CENTER_FADE_AT, ); window.__timelines[orbit-scene] tl; /script代码里暗含三个值得展开的工程细节入场前先gsap.set摆放到位元素先被放置到各自的轨道起点(cos(θ)·RADIUS_X, sin(θ)·RADIUS_Y)并置opacity: 0然后才添加 tween。这样第一阶段只翻转旋转/透明度/缩放不碰位移元素在轨道起点上原位淡入第二阶段才能无跳变地接上轨道。若反过来先做「从中心飞入再跳上轨道」的 fromTo元素会在第一阶段撞上中心标签并在阶段切换瞬间发生肉眼可见的瞬移——这是该规则在 [Critical Constraints](#关键约束保证 seek 确定性) 里标红强调的坑。逐元素独立的轨道 tween每个元素从自己的data-angle起算相位因此各自的相位推进互不相同绝不能用一个targets: .orbit-item的共享 tween否则所有元素会在同一角度上同步转圈轨道塌缩成单点。伪状态对象驱动轨道orbitState.p从 0 匀速推进到 1onUpdate里以initialAngleRad p·2π解出当前角度再写transform。ease: none保证角度与时间严格线性对应这正是逐帧确定性所依赖的。z-index依据元素当前 Y 坐标动态生成保证轨道下半圈的元素画在前面、上半圈的元素画在后面形成立体绕行感。参数速查八大常量的区间、观感与约束规则为所有可调参数给出了明确的取值区间、视觉影响、硬约束与仓库参考值。表格化速查如下参数含义建议区间视觉影响关键约束参考实现取值RADIUS_X轨道椭圆水平半径px300–900小→紧密簇大→圆环铺开、给中心留白需满足RADIUS_X · min(|cos(θ)|) ≥ L_w I_w breathing_room任何角度下不得水平挤占中心标签480Y_TO_X_RATIORADIUS_Y / RADIUS_X透视压扁系数0.4–0.7低→俯视的扁盘接近 1→正对镜头的平面必须 1保持倾斜圆环而非正面光环≈ 0.58280/480ORBIT_DURATION一整圈耗时s4–25短→狂躁长→漂移/宁静≥ 轨道可见时长否则 tween 结束元素停转≈ 250.25 rad/sENTRY_DUR单元素翻转时长s0.4–0.8短→干脆长→庄重≤ 首末元素入场间隔避免级联糊成一团0.55STAGGER相邻元素入场延迟s0.06–0.12低于 0.06→爆米花式齐响高于 0.12→拖沓总级联(n-1)·STAGGER需在下一场景阶段开始前完成0.10FLIP_BACKback.out(n)翻转过冲量1.2–2.0低→柔和到位高→明显回弹与中心标签的CENTER_BACK相邻触发时须搭配平和值双过冲互相抵消1.4CENTER_BACK中心标签back.out(n)过冲量1.2–1.8低→安静高→弹跳感—1.4ROTATE_X/Y_FROM、Z_FROM、SCALE_FROM入场前 3D 初始姿态rotateX ±60°~±120°rotateY ±45°~±120°z −200~−400scale 0.2–0.6旋转角越大 z 越深 →从纵深翻出越戏剧化方向须与场景透视一致元素间混用正负 rotateY 会显得杂乱rotateX 90、rotateY −45、z −100、scale 0还有两个文档未进表格但实际存在的节奏参数CENTER_FADE_AT中心标签淡入的时刻建议落在前 24 个轨道元素落地之后——过早会与入场级联抢注意力过晚会留下一个空洞的中心RADIUS_Y通常不作为独立输入而由RADIUS_X × Y_TO_X_RATIO推导如上面的const RADIUS_Y RADIUS_X * Y_TO_X_RATIO;保证压扁比例始终受控。参考列取自仓库内真实示例 cta-orbit-collapse.html它以RADIUS_X 480、RADIUS_Y 280、角速度0.25 rad/s≈ 25 s/圈、单图标入场0.55 s back.out(1.4)、入场级联步长 0.10 s 的参数组合运行是验证上述取值建议的直接落地样本。两种变体向心塌缩与倾斜轨道平面变体一塌缩到中心collapse to center规则的收尾哲学是让轨道有一个结局。反向操作——先公转、再向心聚拢——通过引入一个1 → 0的半径驱动因子实现它同时作用于RADIUS_X与RADIUS_Y使所有元素沿各自当前角度螺旋收向中心const collapse { r: 1 }; tl.to( collapse, { r: 0, duration: COLLAPSE_DUR, ease: power3.inOut, onUpdate: () items.forEach((el) { const a (Number(el.dataset.angle) / 360) * Math.PI * 2; const x Math.cos(a) * RADIUS_X * collapse.r; const y Math.sin(a) * RADIUS_Y * collapse.r; el.style.transform translate(-50%,-50%) translate(${x}px,${y}px) scale(${collapse.r}); }), }, COLLAPSE_AT, );power3.inOut让收拢先慢后快再缓停同步缩小scale让元素在触底时自然融化。这正是cta-orbit-collapse示例里「六枚技术图标在点击后向心聚拢、一张演示卡从汇聚点弹出」的后半程逻辑——它的塌缩驱动用back.out(1.6)缓动配合 0.85 s 时长、半径因子1 − collapseEased计算示例源码 的第 1024 行起即为这一段轨道 塌缩主引擎。塌缩变体与 center-outward-expansion.md 存在天然互补后者本身就是中心爆发两者共享半径驱动 一次性到位的数学结构文档将其描述为orbit-collapse 收尾的逆向驱动源。变体二倾斜轨道平面要让公转更具立体感可对整块.orbit-stage施加 X 轴旋转使轨道平面倾斜.orbit-stage { transform: rotateX(25deg); }平面倾斜后位于赤道上下的元素会在穿越视平面时呈现出明显的弧线纵深轨迹视觉上从平面绕圈升级为空间环绕。关键原理四个不能省的设计决策规则把经验法则提炼为四条核心原则perspective必须落在场景根节点——否则rotateX/rotateY退化成 2D 缩放翻转毫无深度与此同时.orbit-stage与每个.orbit-item都要preserve-3d元素拥有自身 transform 时 3D 上下文才能延续。级联入场优于齐射入场——按STAGGER依次翻转视觉语义是蜂群集结成形若所有元素同时进场则变成爆米花丧失编排感。元素数量控制在 4–12——太少显得空荡太多会挤压中心区域形成视觉拥堵。中心标签必须与轨道元素三维上分层Clearance 规则——在preserve-3d舞台内部单纯的z-index并不可靠绘制顺序遵循 Z 位置而非层叠上下文。文档给出三层递进的保护方案把中心标签用transform: translateZ(220px)推到最前并辅以z-index: 9999轨道元素的动态z-index限制在[1, 50]的有界区间——让轨道下半圈元素依然能盖住上半圈元素保证环绕层次但永远不可能盖过中心标签。区间映射公式为1 round((y RADIUS_Y) / (2·RADIUS_Y) · 49)把y ∈ [-RADIUS_Y, RADIUS_Y]线性映射到[1, 50]同时用几何法保证水平方向也绝不重叠若中心标签半宽为L_w、轨道元素半宽为I_w则RADIUS_X · min(|cos(θ)|) ≥ L_w I_w breathing_room。以 60° 等分、6 元素轨道为例元素间最坏相位出现在 30°cos(30°) ≈ 0.866——中心文字越宽环半径就必须越大。此外还有一条构图铁律轨道是装饰中心才是主角。如果观众的视线被环绕元素抢走应当加大中心元素的尺寸或降低轨道元素的明度让环绕收敛为背景层。关键约束保证 seek 确定性的硬性红线禁用requestAnimationFrame——轨道必须活在时间线内否则 HyperFrames 逐帧 seek 会失去确定性。本文方案用「伪状态对象p的线性 tween onUpdate」规避。时间线必须暂停创建gsap.timeline({ paused: true })。注册表 key data-composition-idwindow.__timelines[orbit-scene]与根节点 ID 严格一致hyperframes-core 契约 规定 key 不允许带-mount/-slot之类后缀。每个轨道元素拥有独立的轨道 tween——共享targets会让相位归零。will-change: transform——大量并发的轨道位移需要合成器提示避免掉帧。不要动画left/top——用translate()且与自身的translate(-50%, -50%)居中变换叠加书写。入场必须原位翻转而非中心翻转——先gsap.set摆到轨道起点并opacity: 0再让第一阶段只动旋转/透明度/缩放。文档用 ❗ 标注若 fromTo 的 from/to 都含x:0,y:0元素第一阶段会被钉在舞台中心与标签叠撞并在第二阶段开始时肉眼瞬移。在更大场景中组合三条规则搭配参考单条原子规则通常不足以撑起一个完整镜头文档给出三组经过验证的搭配方向center-outward-expansion.md——爆发式入场替代轨道式入场同时是 orbit-collapse 收尾阶段的逆向驱动源两条规则可构成展开 收拢的循环镜头cursor-click-ripple.md——当中心元素是一个等待用户点击的 CTA 时光标飞入 点击涟漪与塌缩收尾天然配对。cta-orbit-collapse示例即演示了该组合光标滑到白底按钮、按下按钮与光标同步压缩 0.85/0.95、涟漪扩散、图标塌缩、演示卡弹出sine-wave-loop.md——给轨道上的每个元素叠一层细微的正弦浮动/微摆±6 px 位移、±2.5° 旋转避免公转过于机械。示例中的抖动按元素索引错开相位且随塌缩过程衰减。与 HyperFrames 配套技能的衔接编写完 HTML/CSS/GSAP 后规则建议按以下技能分工收尾验证/hyperframes-animation——时间线编排与onUpdateAPI 的知识源即本规则所在技能总纲见 .agents/skills/hyperframes-animation/SKILL.md/hyperframes-core——composition 装配契约根节点须为有确定尺寸的盒子、每条动画只允许操作视觉属性白名单、禁display/visibility、禁repeat: -1等不可谈判规则详见 .agents/skills/hyperframes-core/SKILL.md/hyperframes-cli——用npx hyperframes lint做静态体检、npx hyperframes validate/inspect跑渲染期校验、npx hyperframes preview在时间线编辑器里人工复检、最后npx hyperframes render出片命令用法记录于 .agents/skills/hyperframes-cli/SKILL.md。仓库内的真实对照cta-orbit-collapse 示例解析若想看到这条规则在完整镜头里的形态.agents/skills/hyperframes-animation/examples/cta-orbit-collapse.html 是最直接的参照物。它把六种 HyperFrames 能力HTML/CSS/SVG/GSAP/3D/LOTTIE作为六枚图标以2π/6均分整圈环绕中央 Drop an HTML scene · Render CTA整体 6.5 秒编排为五个阶段0.00–1.05 s六枚图标以 0.10 s 级联 back.out(1.4)翻转入场各 0.55 s轮廓同步做 stroke-draw、内部点缀延迟 0.30 s 错峰淡入0.00–2.95 s持续公转0.25 rad/s每个图标叠 ±6 px 位移、±2.5° 旋转的错相位摆动1.50–2.20 s光标从屏幕右侧飞入落点 CTA 按钮back.out(1.3)过冲着陆2.20–2.46 s点击光标与按钮压缩回弹、按钮辉光脉冲、涟漪 0.3→5.0 扩散2.20–3.05 s图标按back.out(1.6)向心塌缩半径因子 1→0、scale 1→0.5、透明度分段包络2.95 s 起演示卡从塌缩点弹出并进入有限次 yoyo 悬浮呼吸直至 6.5 s 场景结束。这个文件是值得通读的参考答案注意它的图标 DOM 采用三层嵌套.icon-pos承担轨道位、.icon-collapse承担塌缩缩放/透明度、.icon-entry承担 3D 翻转入场把「轨道位移、塌缩状态、翻转姿态」三组运动解耦到三个层上再由不同 tween 分别驱动——这是把本规则从单层原型升级到生产级整场编排时的典型结构演进。写在最后orbit-3d-entry的可贵之处在于它把「看起来自由散漫的环绕运动」收敛进了一条完全可预测、可 seek 的时间线两阶段结构让入场富有戏剧张力三角函数轨道让公转数学上可精确重放onUpdate内的伪状态对象则把「无限循环」这种天然违背确定性契约的动画改写为受时间线控制的有限推进。在 OpenMontage 这类以 HTML 场景渲染视频的体系里这正是原子规则应该有的样子——一个可复制、可调参、可组合、不破坏渲染契约的运动单元。下次需要为中心主视觉做「元素环绕」镜头时直接以本文的 HTML/CSS/时间线为起点再按上表的参数区间试镜即可。【免费下载链接】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），仅供参考