轨道卡片
一个居中的功能卡片，带有圆形镂空以框住圆点球体。卡片从右侧进入（0.25–1.80 秒），保持状态并伴随微小的上下浮动和深度漂移，然后围绕球体中心旋转一整圈（在 4.97 到 5.97 秒之间使用平滑过渡），最后从左侧退出（7.35–8.55 秒）。摄像机路径和卡片 F 曲线是从已审核的 Blender 装备中导出，以 30 fps 插值；球体保持自身的平移和恒定旋转。标题、描述、强调色和轨道角度是变量；180° 和 720° 无需触碰关键帧即可工作。
组合 ID：orbit-card。时长 10 秒，帧率 30 fps，分辨率 1920×1080。
文件
orbit-card.html（3 KB）assets/Archivo-LICENSE.txt（4 KB）assets/Three-LICENSE.txt（1 KB）assets/archivo-regular.ttf（108 KB）assets/archivo-semibold.ttf（109 KB）assets/gsap-3.14.2.min.js（128 KB）assets/GSAP-NOTICE.txt（1 KB）assets/orbit-motion.js（59 KB）assets/orbit-scene.js（8 KB）assets/three.core.min.js（554 KB）assets/three.module.min.js（468 KB）
安装
使用 npx hyperframes add orbit-card 安装；默认情况下上述文件会被放置在 compositions/orbit-card/ 目录下。然后从宿主 index.html 中挂载该模块：
<div
data-composition-id="orbit-card"
data-composition-src="compositions/orbit-card/orbit-card.html"
data-start="0"
data-duration="10"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
通过直接指定组合文件并使用自定义值渲染：
npx --yes [email protected] render 'compositions/orbit-card/orbit-card.html' --variables '{"feature1Title":"始终同步","feature1Desc":"变化会在发生的那一刻触及每一个屏幕。"}'
变量
运行时通过 window.__hyperframes.getVariables() 读取；在组合根元素上以 data-composition-variables 属性声明（单引号属性，纯 JSON 格式）。
| id | 类型 | 默认值 | 标签 / 范围 |
|---|---|---|---|
feature1Title | string | "始终同步" | 卡片标题最多 28 个字符 |
feature1Desc | string | "变化会在发生的那一刻触及每一个屏幕。" | 卡片描述最多 110 个字符 |
feature1Accent | color | "#4cc9ff" | 卡片强调色 |
cardOrbitDegrees | number | 360 | 轨道角度（度）-36000–36000 步长 1 |
运行时契约
- 一个暂停的 GSAP 时间线，注册为
window.__timelines["orbit-card"]。 - 在
hf-seek自定义事件上重新同步；每一帧都是时间的闭式函数（仅使用种子伪随机数生成器，没有 rAF 循环，没有 Date.now）。 - 渲染引擎：GSAP。
- 外部运行时依赖：无（本地提供）。
- 本地字体：
assets/archivo-regular.ttf、assets/archivo-semibold.ttf。
编辑规则（来自源项目）
- 保持
data-composition-variables为单引号属性，使用纯"JSON。切勿通过 Studio 的设计面板保存它。 - 不要将
<canvas>放入静态标记中；在运行时创建它。 - 保持每个视觉状态为时间 t 的函数；seek 安全性是模块可渲染的关键。