HyperFrames Avatar Cloud Network 规则解析用 GSAP 打造椭圆头像网络式社会认同揭示动画【免费下载链接】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 技能体系的原子动画规则 avatar-cloud-network.md 为主体展开讲解如何用三层 DOM SVG 结构、椭圆几何布局与单条暂停的 GSAP 时间线制作中心枢纽 椭圆头像环 虚线连接的社会认同social proof画面。读完你将掌握该规则的完整 HTML/CSS/GSAP 配方、全部关键参数的取值方法与约束边界并能在 proof-logo-chain.html 这类可运行示例中印证其工程落地方式。场景定位静态成型的社区揭示而非持续轨道Avatar Cloud Network 的核心视觉语言是头像分布在以中心元素Logo / 计数器 / 品牌字标为圆心的椭圆环上SVG 虚线从圆心连到每个头像头像以错峰弹簧动画逐个入场随后连线向外绘制完成——整个画面传达的是中心枢纽连接着它的社区。它与 orbit-3d-entry.md 的关键差异在于orbit-3d-entry元素入场后进入持续的椭圆环绕运动属于仍在转的动态后台avatar-cloud-network入场完成后网络静止成型是已组成的揭示画面适合做用户数、社区成员、合作品牌等社会证据的定格镜头。在 rules-index.md 中该规则位于 Data Stats 等类别tags 为avatar, cloud, network, social-proof, ellipse, connection, stagger即它是被反复引用作环形 / 簇状布局 中心连线的基础原子规则。例如 constellation-hub.md 蓝图在组织围绕中心的节点环形布局 节点到中心连线时明确指向avatar-cloud-networkdataviz-countup.md 在构建发光头像/物体的散射环时同样复用它。三层渲染结构与动画相位三渲染层依赖 z-index 显式分层层z-index内容说明SVG 连接线1从中心枢纽到每个头像的line位于最底层、装饰性覆盖层头像2椭圆位置上圆形divtransform: translate(-50%,-50%)左上角定位 负百分比居中中心枢纽5品牌计数器或 Logo必须压在汇聚到它的连线上方四段动画相位时间轴规则文档给出的相位编排如下HUB_FADE_START → HUB_FADE_START HUB_FADE_DUR枢纽淡入AVATAR_ENTRY_START → AVATAR_ENTRY_START (AVATAR_COUNT − 1) × AVATAR_STAGGER AVATAR_ENTRY_DUR头像逐个级联入场LINES_START → LINES_START (AVATAR_COUNT − 1) × LINE_STAGGER LINES_DUR连线自内向外绘制高潮驻留可选的头像空闲呼吸实现见 sine-wave-loop.md保证网络成型后可读时间 ≥ 1 秒这段相位编排的实际工程值可以在 proof-logo-chain.html 的 CreatorCloud 阶段Phase 4中对照示例在 1920×1080 画布上以avatarEntryStart 4.3、avatarStagger 0.1、avatarEntryDur 0.55让 10 个头像从中心向外级联再经linesDelay 0.2的间隙后以linesDur 0.45、lineStagger 0.033让连线依次绘制。HTML 骨架与占位符令牌规则的 HTML 结构由一个.scene容器包裹三层内容div classscene idcloud-scene >.scene { position: relative; width: 100%; height: 100%; background: {bgColor}; font-family: {font}; overflow: hidden; } .lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* 装饰性覆盖层绝不拦截交互 */ z-index: 1; } .hub-wrap { position: absolute; inset: 0; display: grid; place-items: center; /* 中心点 画布中心 */ } .hub { position: relative; z-index: 5; /* 高于连线层 */ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 64px; border-radius: 28px; background: {hubBg}; border: 1px solid {hubBorder}; } .hub-num { font-size: HUB_NUM_FONT_SIZE; font-weight: 900; color: {textColor}; letter-spacing: -4px; line-height: 1; font-variant-numeric: tabular-nums; /* 计数滚动时数字宽度稳定 */ } .hub-label { font-size: HUB_LABEL_FONT_SIZE; font-weight: 800; letter-spacing: 12px; color: {accentColor}; text-transform: uppercase; } .avatar { position: absolute; z-index: 2; width: AVATAR_SIZE; height: AVATAR_SIZE; border-radius: 50%; border: 3px solid {avatarBorder}; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 24px {avatarGlow}; display: grid; place-items: center; font-size: AVATAR_GLYPH_SIZE; background: {avatarBg}; will-change: transform, opacity; /* Top-left positioned by script; transform centers via -50% trick */ transform: translate(-50%, -50%); } .brand { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); font-size: BRAND_FONT_SIZE; font-weight: 900; letter-spacing: 14px; color: {accentColor}; text-transform: uppercase; }样式设计上有三处值得关注的工程细节will-change: transform, opacity头像即将同时参与多段 transform 动画提前声明可让浏览器走合成器优化路径pointer-events: noneSVG 连线层只是装饰覆盖层避免拦截枢纽下方的交互示例文件同样对.cloud-lines设置了该属性tabular-nums中心枢纽的计数器在 counting-dynamic-scale.md 类数字动画中跳动时数字等宽可避免整体宽度抖动。GSAP 时间线几何生成 四相位编排脚本部分完成两件事构建 DOM头像与连线和注册单条暂停时间线。整个过程遵守 HyperFrames 动画层的一条铁律见 SKILL.md 的 Critical Constraints布局常量在组合初始化时一次性预计算绝不在 tween 运行时用getBoundingClientRect()测量因为渲染器是并行采样各 clip 的tween 时刻测量会导致画面失步。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 }); // 必须暂停由 HF 时钟驱动 // CENTER_X / CENTER_Y 必须与 hub 的真实渲染中心完全一致。 // hub-wrap 用 place-items:center 定位在 1920×1080 画布上时 // 它们应为 (compositionWidth/2, compositionHeight × CENTER_Y_FACTOR)。 const SCREEN_CENTER { x: CENTER_X, y: CENTER_Y }; const hubWrap document.querySelector(.hub-wrap); const linesSvg document.querySelector(.lines); // 构建头像 连线 const avatarPositions []; for (let i 0; i AVATAR_COUNT; i) { const angle (i / AVATAR_COUNT) * Math.PI * 2 - Math.PI / 2; // 自顶部起 const x SCREEN_CENTER.x Math.cos(angle) * RADIUS_X; const y SCREEN_CENTER.y Math.sin(angle) * RADIUS_Y; avatarPositions.push({ x, y, angle }); // 头像左上角定位transform 负责居中 const av document.createElement(div); av.className avatar; av.style.left ${x}px; av.style.top ${y}px; hubWrap.appendChild(av); // 中心 → 头像的连线 const line document.createElementNS(http://www.w3.org/2000/svg, line); line.setAttribute(x1, SCREEN_CENTER.x); line.setAttribute(y1, SCREEN_CENTER.y); line.setAttribute(x2, x); line.setAttribute(y2, y); line.setAttribute(stroke, {lineColor}); line.setAttribute(stroke-width, 2); line.setAttribute(stroke-dasharray, 6 8); const len Math.hypot(x - SCREEN_CENTER.x, y - SCREEN_CENTER.y); line.style.strokeDashoffset String(len); // 初始完全隐藏 line.dataset.length String(len); line.dataset.index String(i); linesSvg.appendChild(line); } // ...Phase 1~4 的 tween 编排见规则原文 // hub 淡入 → 头像错峰弹簧入场 → 连线错峰绘制 → 空闲呼吸 window.__timelines[cloud-scene] tl; /script四个相位在单条时间线上的具体写法完整代码见 avatar-cloud-network.md 的 GSAP Timeline 一节枢纽淡入tl.from(.hub, { opacity: 0, scale: 0.8, ease: back.out(HUB_BOUNCE) }, HUB_FADE_START)头像级联对每个.avatar逐一tl.from(av, { opacity: 0, scale: 0, ease: back.out(AVATAR_BOUNCE) }, AVATAR_ENTRY_START i * AVATAR_STAGGER)——注意规则使用逐个添加 tween 而不是 GSAP 内置stagger对象便于精确控制每个位置参数连线外绘连线已预先设置strokeDashoffset 线段长度用Math.hypot精确计算直线段无需昂贵的getTotalLength()随后对每个linetl.to(line, { strokeDashoffset: 0, ease: power2.out }, LINES_START i * LINE_STAGGER)——dash offset 归零的过程就是连线从枢纽向外绘制的视觉叙事空闲呼吸由一个ease: none的长 tween 驱动相位值p: 0 → 2π × BREATH_CYCLES在onUpdate里对每个头像写translate(-50%,-50%) scale(1 sin(phase)×BREATH_AMP)让头像轻微错相呼吸实现详见 sine-wave-loop.md。工程示例proof-logo-chain.html 的可运行佐证仓库中 proof-logo-chain.html 是一个可直接运行的 8 秒多阶段 HyperFrames 原生示例其 CreatorCloud 阶段即 avatar-cloud-network 思想的实现并给出了从这条规则文档取值指南派生的真实常量const CLOUD_CENTER_X W / 2; // 960 px const CLOUD_CENTER_Y H * 0.47; // 507.6 px略高于画布中线 const VERTICAL_ADJUST CLOUD_CENTER_Y - H / 2; const CLOUD_RADIUS_X W * 0.25; // 480 px const CLOUD_RADIUS_Y H * 0.22; // 237.6 px const AVATAR_COUNT 10;示例还展示了本规则头像大小变化organic feel变体const size 90 (i % 3) * 15;使每个头像尺寸随索引周期性微变避免圆环过于呆板头像占位用确定性色相hsl((220 i * 36) % 360, ...) 姓名首字母无需任何图片资源即可自包含运行。参数取值指南几何、节奏与配色规则文档用大量篇幅给出每个常量的取值范围与约束这是实操中最容易凭感觉出错的部分务必逐项对照。几何类CENTER_X / CENTER_Y—— 枢纽中心像素坐标连线和头像位置都由它派生。硬约束必须等于枢纽的真实渲染中心。当本规则与另一场景组合如被重新居中的 Logo时CENTER_X / CENTER_Y必须与枢纽最终位置同源烘焙否则出现连线不指向枢纽的穿帮。proof-logo-chain.html 使用(W/2, H × 0.47)让云层略高于画布中线。RADIUS_X / RADIUS_Y—— 椭圆半径pxRADIUS_X ≥ RADIUS_Y产生透视感。取值RADIUS_X约为视口宽度的 20–30%RADIUS_Y约为视口高度的 18–25%比值约束 1.5–3.0呈现自然景深比值 1正圆则读作扁平 2D 布局。参考实现用W * 0.25480px与H * 0.22237.6px。AVATAR_COUNT—— 环绕圆环的头像数。范围 8–12太少显得空旷太多挤满椭圆。参考实现取 10。AVATAR_SIZE / AVATAR_GLYPH_SIZE—— 每个头像圆的直径与可选的内嵌字形尺寸。1920 宽下AVATAR_SIZE约 80–120 px保证 10 个头像互不重叠地放下。HUB_NUM_FONT_SIZE / HUB_LABEL_FONT_SIZE / BRAND_FONT_SIZE—— 枢纽排版。约束hub-num是视觉焦点尺寸为 label 的2–4 倍。枢纽淡入HUB_FADE_START—— 枢纽开始淡入的时刻。通常为0枢纽先确立焦点若前面还有其他节拍可适当后移。HUB_FADE_DUR—— 淡入时长。范围0.4–0.6s。HUB_BOUNCE——back.out(HUB_BOUNCE)回弹系数。范围1.4轻微→ 1.8有力。头像级联AVATAR_ENTRY_START—— 首个头像弹入时刻。约束≥ HUB_FADE_START HUB_FADE_DUR × 0.6保证枢纽先确立、卫星元素后入场。AVATAR_ENTRY_DUR—— 单头像放大时长。范围0.4–0.7s。AVATAR_STAGGER—— 相邻头像入场间隔。范围0.06–0.10s级联读作正在加入joining同时入场读作早就全在了all already there。AVATAR_BOUNCE—— 每个头像弹出的回弹系数。范围1.4温和→ 1.8有力建议略强于枢纽以形成层次区分。连线绘制LINES_START—— 连线开始外绘时刻。约束LINES_START (AVATAR_COUNT − 1) × LINE_STAGGER应与最后一个头像落定重叠约 0.1–0.2s让绘制读作头像落定的结果而非独立动作。LINES_DUR—— 单线绘制时长strokeDashoffset → 0。范围0.4–0.7s。LINE_STAGGER—— 相邻连线起始间隔。范围0.02–0.05s紧密错峰读作一波向外扩散的波。空闲呼吸BREATH_START—— 呼吸激活时刻。约束≥ LINES_START (AVATAR_COUNT − 1) × LINE_STAGGER LINES_DUR ~0.2s让连线先稳定。BREATH_DUR—— 呼吸 tween 总时长。范围填充剩余组合时间窗。BREATH_CYCLES—— 整个BREATH_DUR内的完整正弦周期数。范围1.0–2.0低于 1 读作一次叹息超过 2 开始显得焦虑。BREATH_AMP—— scale 上的正弦振幅乘法式。范围0.02–0.06头像特写取小值风格化字形可取大值。配色令牌令牌作用{bgColor}舞台背景通常用暗色渐变让云层读作星座{textColor}hub-num主文字色{accentColor}hub-label footer品牌声线{hubBg}/{hubBorder}枢纽卡片表面渐变 1px 边框有悬浮感{avatarBg}/{avatarBorder}/{avatarGlow}头像圆形样式柔和边框 光晕保证暗背景可读{lineColor}SVG 描边色半透明强调色更有网络感{font}基础字体栈变体从写实头像到符号化呈现规则提供了四个方向明确的可替换变体写作时可按叙事需求选择头像大小变化organic feel——用一个按索引取值的尺寸数组让圆环不再机械重复如示例中的size 90 (i % 3) * 15实线替代虚线——去掉stroke-dasharray用实线描边同时放弃 dash 绘制动画改由透明度淡入更商务、更少网络感同心多环multi-orbit——两层头像内侧小环数量少、个头略大 外侧大环数量多、个头小连线只连内环到枢纽外环作为光晕存在国家 / 角色字形——用旗帜 / emoji / 图标代替人脸图片读作全球社区或多元角色适合不需要真实头像素材的自包含演示。关键原则与硬性约束规则把设计意图和工程红线明确分开照做即可避开绝大多数视觉与确定性坑设计关键原则枢纽必须在连线上方z-index: 5对连线的z-index: 1连线看起来应终结于枢纽边缘而不是穿透枢纽连线自内向外绘制dash offset → 0从中心向外画是视觉叙事——枢纽连接其社区8–12 个头像太少空旷、太多拥挤RADIUS_X RADIUS_Y水平椭圆读作透视正圆读作扁平 2D头像错峰 0.06–0.10s级联 正在加入同时 早已就位连线在头像基本落定后再错峰与最后一个头像落定重叠约 0.1–0.2s 起步成网后的空闲呼吸每个头像轻微错相在高潮驻留期留住视线❗ 高潮驻留 ≥ 1s连线完成后至少定格 1 秒让已形成的网络可被完整读清。工程硬性约束HyperFrames 确定性契约的延伸时间线必须暂停gsap.timeline({ paused: true })注册键 data-composition-id脚本中window.__timelines[cloud-scene] tl头像与连线禁止 CSS animation——CSS 动画跑在浏览器渲染时钟上独立于 HyperFrames 逐帧 seek 时钟会导致闪烁/失步头像需声明will-change: transform, opacitySVG 设置pointer-events: none装饰覆盖层直线段长度无需getTotalLength()用Math.hypot更廉价且精确显式声明枢纽z-index 连线z-index的分层关系。规则组合与技能路由该规则天生就是组合式原子规则文档给出三个常见搭配counting-dynamic-scale.md —— 中心枢纽本身是一个持续增长的计数器如60 FPS式数据冲击sine-wave-loop.md —— 头像的空闲呼吸实现来源注意该规则自身强调呼吸是最后的手段默认应先做与旁白对齐的顺序揭示再用低振幅微抖3d-text-depth-layers.md —— 枢纽 label 增加 3D 层叠深度。在 HyperFrames 技能体系中作者通常遵循pick 2–4 rules 组合 单条暂停时间线的默认路线见 SKILL.md完成写作后可用hyperframes lint对组合进行校验若组合的是多场景成片还应参考 hyperframes-core 的轨道与子组合契约.agents/skills/hyperframes-core/references/tracks-and-clips.md来正确摆放data-track-index。总结Avatar Cloud Network 是 HyperFrames 动画规则集中静态成型的社交网络揭示的标准配方它以明确的 z-index 三层结构分离装饰与内容以cos/sin × (RADIUS_X, RADIUS_Y)的椭圆参数化生成 8–12 个头像的落点以枢纽淡入 → 头像错峰弹簧入场 → 连线自内向外 dash 绘制 → 错相空闲呼吸四相位在单条暂停时间线内完成叙事编排。所有几何常量在初始化期一次性烘焙动画全部收敛在 GSAP 时间线内部从而保证 HyperFrames 逐帧 seek 的确定性。要快速验证整套逻辑可直接打开 proof-logo-chain.html要为具体镜头调参对照本文第四、五节的取值表逐项代入即可。【免费下载链接】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），仅供参考